本文介绍: watch可以直接监听refconsole.log(‘count发生变化:’, newValue, oldValue);});而也可以监听ref定义响应数据,但是不需要显式地指定要监听的数据,它会自动追踪使用响应数据。watch可以监听reactive定义响应数据,但需要使用toRefs函数reactive对象转换refcount: 0});console.log(‘count发生变化:’, newValue.count, oldValue.count);});同样可以监听。

Vue3 中 watch 和 watchEffec t区别使用场景

在Vue 3中,watchwatchEffect用于监听响应数据变化的两个重要API。它们在使用方式功能上有一些区别,下面将从不同方面进行比较

1. 使用方式

watch的使用方式是通过在组件选项定义一个watch对象然后在其中定义需要监听的响应数据和回调函数。例如:

watch: {
  count(newValue, oldValue) {
    // 响应式数据count发生变化时执行的回调函数
    console.log('count发生变化:', newValue, oldValue);
  }
}

watchEffect则是直接在组件内部使用,它会自动追踪组件中使用的响应式数据,并在数据变化时执行回调函数。例如:

watchEffect(() => {
  // 响应式数据发生变化时执行的回调函数
  console.log('响应式数据发生变化');
});

2. 监听ref定义的响应式数据

watch可以直接监听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 });

watchEffect默认会进行深度监听,无需额外设置

7. 默认执行immediate)

watch可以通过设置immediate选项来在初始渲染时立即执行回调函数,例如:

watch(count, (newValue, oldValue) => {
  console.log('count发生变化:', newValue, oldValue);
}, { immediate: true });

watchEffect默认会在初始渲染时立即执行回调函数,无需额外设置

综上所述,watchwatchEffect在使用方式和功能上有一些区别。根据具体需求选择合适的API进行使用,可以更好实现对响应式数据的监听和处理

以上就是关于Vue 3中watchwatchEffect的区别的介绍,希望对你有所帮助!

参考文档Vue 3 Composition API – WatchVue 3 Composition API – watchEffect

原文地址:https://blog.csdn.net/fanjianwucmx/article/details/134695537

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。

如若转载,请注明出处:http://www.7code.cn/show_10939.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注