vue3快速入门-watch与watchEffect

本系列文章合集click me

本系列文章源码click me

watch

侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数。
watch() 默认是懒侦听的，即仅在侦听源发生变化时才执行回调函数。

watch参数

watch(watchSource, callback, options?)

watchSource:

侦听源，这个参数可以为以下几种：

1. 一个ref
2. 一个响应式对象
3. 一个有返回值的函数
4. 以上类型值组成的数组

callback:

侦听源发生变化时调用的回调函数, 这个回调函数接收三个参数：新值、旧值
以及一个用于注册副作用清理的回调函数。该回调函数会在副作用下一次重新执行前调用，可以用来清除无效的副作用，例如等待中的异步请求。
当侦听多个来源时，回调函数接受两个数组，分别对应侦听源数组中的新值和旧值。

options

这个可选参数是一个对象，支持以下选项：

1. immediate： 在侦听器创建时立即触发回调, 第一次调用时旧值是 undefined
2. deep: 如果侦听源是对象，强制深度遍历，以便在深层级变更时启动回调
3. flush: 调整回调函数的刷新时机
4. onTrack / onTrigger: 调试侦听器的依赖

watch示例

<template>
  <div id="app">
    <h2>监听一个ref:</h2>
    <input type="text" v-model="name" />
    <h2>监听一个reactive:</h2>
    名称：<input type="text" v-model="info.name" /> 
    品牌：<input type="text" v-model="info.brand" /> 
    尺寸：<input type="text" v-model="info.size" />
    <h2>监听一个getter函数</h2>
    <input type="text" v-model="getter.num">
    <h2>监听以上类型值组成的数组</h2>
    ref: <input type="text" v-model="age">
    reactive: <input type="text" v-model="user.name">
  </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<script lang="ts">
import { defineComponent, reactive, ref, watch } from "vue";

export default defineComponent({
  setup() {
    // 监听一个ref
    const name = ref("温情");
    watch(name, (newV, oldV) => {
      console.log(`ref发生变化新值为${newV}, 老值为${oldV}`);
    });

    // 监听一个reactive对象  当直接侦听一个响应式对象时，侦听器自动处于深层级模式：
    const info = reactive({
      name: "笔记本电脑",
      brand: "Dell",
      size: 7,
    });
    watch(info, (newV, oldV) => {
      console.log(`reactive对象发生变化`);
    });

    // 监听一个getter函数
    const getter = reactive({ num: 1 });
    watch(
      () => getter.num,
      (newV, oldV) => {
        console.log(`getter函数发生变化新值为${newV}, 老值为${oldV}`);
      }
    );

    // 监听以上类型值组成的数组
    const age = ref(22)
    const user = reactive({
        name: '兰陵王',
        tel: '12345'
    })
    watch([age, user], (newV, oldV) => {
        console.log('监听的数组发生变化');
        console.log('newV', newV);
        console.log('oldV', oldV);
    }, { immediate: true })

    return { name, info, getter, age, user };
  },
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

watchEffect

立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。

watchEffect参数

watchEffect(callback)

callback：

页面加载后立即运行这个回调函数，同时响应式地追踪其依赖，并在依赖更改时重新执行

watchEffect 与 watch 区别

1. watchEffect只需传递一个回调，不需要传递需要侦听的数据，它默认主动执行一次收集依赖;
   而watch至少需要传递两个参数，需要侦听的数据和回调函数
2. watchEffect是立即执行的，在页面初始化时会默认执行一次回调函数来收集依赖;
   而watch是惰性的，不会立即执行回调，但可以通过配置immediate让它默认执行一次
3. watchEffect获取不到更改前的值; 而watch可以获取到更改前后的值

watchEffect示例

// 只要count发生变化就会执行一次回调
const count = ref(0);
watchEffect((newV) => {
    console.log('watchEffect回调触发', count.value);
})
count.value++;
1
2
3
4
5
6

watchEffect停止侦听

// 只要count发生变化就会执行一次回调
const count = ref(0);
const countWatch = watchEffect((newV) => {
  console.log("watchEffect回调触发", count.value);
});
count.value++;
onMounted(() => {
  countWatch();  // 停止侦听
});
1
2
3
4
5
6
7
8
9