12380网站建设,手机网站域名m打头,旅游网页设计页面模板,外包什么意思vue3中watch和watchEffect的区别#xff01;#xff01;#xff01;
在 Vue 3 中#xff0c;watch 和 watchEffect 都是监听器#xff0c;但在写法和使用上有所区别。让我们来详细了解一下它们之间的不同#xff1a; watch: watch 具有一定的惰性#xff08;lazy#…vue3中watch和watchEffect的区别
在 Vue 3 中watch 和 watchEffect 都是监听器但在写法和使用上有所区别。让我们来详细了解一下它们之间的不同 watch: watch 具有一定的惰性lazy它在页面首次展示时不会立即执行只有数据变化时才会执行。参数可以拿到当前值和原始值。需要传递要侦听的内容。可以侦听多个数据的变化用一个侦听器承载。适用于基本数据类型的监听。 示例 templateName: input v-modelname /
/template
script setupconst name ref(zhangsan);watch(name, (curVal, prevVal) {console.log(curVal, prevVal);});
/scriptwatch 对引用类型进行监听 可以监听一个数据。可以监听多个数据。适用于 reactive 定义的对象。 示例 templateName: input v-modelname /English Name: input v-modelenglishName /
/template
script setupconst nameObj reactive({name: leilei,englishName: bob});// 监听一个数据watch(() nameObj.name,(curVal, prevVal) {console.log(curVal, prevVal);});// 监听多个数据watch([() nameObj.name, () nameObj.englishName],([curName, curEng], [prevName, prevEng]) {console.log(curName, curEng, ----, prevName, prevEng);});const { name, englishName } toRefs(nameObj);
/script取消监听 使用 watch 后可以通过 stop() 来取消监听。 非惰性的立即执行 可以通过添加第三个参数 immediate: true 来使 watch 立即执行。 示例 watch([() nameObj.name, () nameObj.englishName],([curName, curEng], [prevName, prevEng]) {console.log(curName, curEng, ----, prevName, prevEng);},{immediate: true}
);watchEffect watchEffect 立即执行没有惰性页面的首次加载就会执行。自动检测内部代码只要代码中有依赖就会执行。不需要传递要侦听的内容会自动感知代码依赖。无法获取到原值只能得到变化后的值。适合处理异步操作。 示例 watchEffect(() {console.log(state.count);console.log(state.name);
});setTimeout(() {state.count;state.name ls;
}, 1000);取消监听 使用 stop() 来取消 watchEffect 的监听。
根据以上特征我们可以根据具体需求选择使用哪个监听器。
