Vue3 中 watch 和 watchEffec t的区别及使用场景
在Vue 3中,watch
和watchEffect
是用于监听响应式数据变化的两个重要API。它们在使用方式和功能上有一些区别,下面将从不同方面进行比较。
1. 使用方式
watch
的使用方式是通过在组件选项中定义一个watch
对象,然后在其中定义需要监听的响应式数据和回调函数。例如:
watch: {
count(newValue, oldValue) {
// 响应式数据count发生变化时执行的回调函数
console.log('count发生变化:', newValue, oldValue);
}
}
而watchEffect
则是直接在组件内部使用,它会自动追踪组件中使用的响应式数据,并在数据变化时执行回调函数。例如:
watchEffect(() => {
// 响应式数据发生变化时执行的回调函数
console.log('响应式数据发生变化');
});
2. 监听ref定义的响应式数据
watch(count, (newValue, oldValue) => {
console.log('count发生变化:', newValue, oldValue);
});
而watchEffect
也可以监听ref
定义的响应式数据,但是不需要显式地指定要监听的数据,它会自动追踪使用的响应式数据。
3. 监听reactive定义的响应式数据
watch
可以监听reactive
定义的响应式数据,但需要使用toRefs
函数将reactive
对象转换为ref
对象,例如:
const state = reactive({
count: 0
});
watch(toRefs(state), (newValue, oldValue) => {
console.log('count发生变化:', newValue.count, oldValue.count);
});
watchEffect
同样可以监听reactive
定义的响应式数据,无需额外处理。
4. 监听多个响应式数据
watch
可以同时监听多个响应式数据,通过将需要监听的数据以数组的形式传递给watch
函数,例如:
watch([count, name], ([countValue, nameValue], [countOldValue, nameOldValue]) => {
console.log('count和name发生变化:', countValue, nameValue, countOldValue, nameOldValue);
});
watchEffect
则无法直接监听多个响应式数据,需要通过在回调函数内部使用多个响应式数据来实现。
5. 监听对象中某个属性的变化
watch
可以监听对象中某个属性的变化,通过在对象属性名前加上字符串插值'$'
来指定要监听的属性,例如:
watch({
'$user.name': (newValue, oldValue) => {
console.log('user.name发生变化:', newValue, oldValue);
}
});
watchEffect
则无法直接监听对象中某个属性的变化,需要通过在回调函数内部使用对象属性来实现。
6. 深度监听(deep)
watch
可以通过设置deep
选项来进行深度监听,即递归监听对象内部的变化,例如:
watch(obj, (newValue, oldValue) => {
console.log('obj发生变化:', newValue, oldValue);
}, { deep: true });
7. 默认执行(immediate)
watch
可以通过设置immediate
选项来在初始渲染时立即执行回调函数,例如:
watch(count, (newValue, oldValue) => {
console.log('count发生变化:', newValue, oldValue);
}, { immediate: true });
watchEffect
默认会在初始渲染时立即执行回调函数,无需额外设置。
综上所述,watch
和watchEffect
在使用方式和功能上有一些区别。根据具体需求选择合适的API进行使用,可以更好地实现对响应式数据的监听和处理。
以上就是关于Vue 3中watch
和watchEffect
的区别的介绍,希望对你有所帮助!
参考文档:Vue 3 Composition API – Watch、Vue 3 Composition API – watchEffect
原文地址:https://blog.csdn.net/fanjianwucmx/article/details/134695537
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_10939.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!