探秘Vue 3：watchEffect与watch选项的差异

前端开发工程师、技术日更博主、已过CET6
阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》
蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

摘要：

本文将深入比较Vue 3中的watchEffect与Vue 2中的watch选项，分析它们的用法、执行机制及适用场景，帮助开发者更好地理解Vue的响应式系统。

引言：

Vue的响应式系统是其核心特性之一，它允许开发者轻松地追踪数据变化并执行相应的操作。在Vue 3中，watchEffect作为新的API被引入，与Vue 2中的watch选项有着不同的使用方式和特性。下面，我们将探讨这两者的区别。

正文：

一、Vue 2中的watch选项

1. 定义与用法
   在Vue 2中，watch选项用于观察和响应Vue实例上的数据变动。开发者需要明确指定要监视的数据源。

export default {
  data() {
    return {
      question: '',
    };
  },
  watch: {
    question(newVal, oldVal) {
      // 当question变化时，执行此函数
    }
  }
};

2. 执行时机
   watch选项仅在指定的数据源发生变化时才会执行回调函数。

二、Vue 3中的watchEffect

1. 定义与用法
   watchEffect是Vue 3中Composition API的一部分，它不需要明确指定要监视的数据源，而是自动追踪其回调函数中所依赖的数据。

import { ref, watchEffect } from 'vue';
export default {
  setup() {
    const question = ref('');
    watchEffect(() => {
      // 此函数会立即执行，并在question变化时重新执行
      console.log(`Question is: ${question.value}`);
    });
    return {
      question
    };
  }
};

2. 执行时机
   watchEffect在组件初始化时立即执行，并在其依赖的数据发生变化时重新执行。

三、watchEffect与watch选项的区别

1. 依赖自动收集

• watchEffect：自动追踪回调函数中的依赖。
• watch选项：需要明确指定监视的数据源。

2. 执行时机

• watchEffect：组件初始化时立即执行，并在依赖变化时重新执行。
• watch选项：仅在指定的数据源发生变化时执行。

3. 回调参数

• watchEffect：无法直接获取变化前后的值。
• watch选项：可以接收变化前后的值作为回调函数的参数。

4. 清理副作用

• watchEffect：可以在回调函数中返回一个清理函数，用于在下次执行前或停止监听时进行清理。
• watch选项：可以在回调函数中添加清理逻辑，但机制略有不同。

总结：

watchEffect与Vue 2的watch选项在依赖追踪、执行时机和用法上存在显著差异。watchEffect提供了更灵活的依赖自动收集机制，而watch选项则更适合于需要明确知道数据变化前后值的场景。了解这些差异，将有助于开发者根据具体需求选择合适的响应式追踪方法。

参考资料：

1. Vue 3官方文档 - watchEffect
2. Vue 2官方文档 - watch选项