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