一、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>

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>