Vue3中watchEffect侦听器的使用

一、watch和watchEffect的区别

watch：显示指定依赖源，依赖源更新时执行回调函数，每次回调之后是可以获取到最新值和上一次的老值，但是 watchEffect 是拿不到的。
watchEffect：如果存在的话，组件初始化的时候就会自动自行一次，不需要指定监听的属性，他会自动进行依赖收集，只要我们回调中使用了响应式的属性，那么这些属性在变更之后这个回调都会执行，不像 watch 只能监听指定的属性
总结：能用 watch 就不要用 watchEffect

二、watchEffect

1.watchEffect 监听数据

<template>
  <div>
    <h1>{{name}}</h1>
    <button @click="btn">修改name</button>
  </div>
</template>
 
<script>
import { ref, watchEffect } from "vue";
export default {
  name: "App",
  setup() {
    const boy = reactive({
      name: "我是𝒆𝒅.",
      age: 10
    });
    watchEffect(() => {
      console.log(boy.age);
    });
    return { boy };
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

2.关闭 watchEffect 监听

<template>
  <div>
    <h1>{{boy.age}}</h1>
    <button @click="boy.age++">修改name</button>
  </div>
</template>
 
<script>
import { ref, watchEffect, reactive } from "vue";
export default {
  name: "App",
  setup() {
    const boy = reactive({
      name: "我是𝒆𝒅.",
      age: 10
    });
    const res = watchEffect(() => {
      console.log(boy.age);
    });
    res()  // 调用一次就会关闭监听
    return { boy };
  }
};
</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