Vue3和Vue2 watch区别

Vue.js 是一个流行的前端框架，Vue 3 和 Vue 2 在 watch 特性上有一些重要的区别，主要是在语法和用法上的改变。

Vue 2 中的 watch

在 Vue 2 中，watch 是一个选项，可以用来监听一个数据的变化并执行相应的操作。它有两种基本用法：

1. 监听数据变化

   watch: {
     // 监听 data 中的变量
     someData: function(newValue, oldValue) {
       // 响应数据变化时的操作
     }
   }
   

2. 监听对象的变化

   watch: {
     // 监听对象或深层嵌套对象中的属性变化
     'obj.someProp': function(newValue, oldValue) {
       // 响应属性变化时的操作
     }
   }
   

Vue 3 中的 watch

在 Vue 3 中，watch 的使用方式有所改变，主要是通过 Composition API 的 watch 函数来实现，不再作为选项直接在组件的配置中声明。这种改变使得 watch 更加灵活和功能强大。

1. 基本用法

   import { watch } from 'vue';
   
   // 在 setup 函数中使用 watch
   setup() {
     const someData = ref(0);
   
     watch(someData, (newValue, oldValue) => {
       // 响应数据变化时的操作
     });
     
     return {
       someData
     };
   }
   

   在 Vue 3 中，我们通过 watch 函数接收需要监听的数据，并传入一个回调函数来处理数据变化时的逻辑。这种方式更加直观和灵活。

2. 监听多个数据

   watch([someData, anotherData], ([newVal1, oldVal1], [newVal2, oldVal2]) => {
     // 响应多个数据变化时的操作
   });
   

   可以通过数组形式传入多个数据进行监听，并在回调函数中获取每个数据的新旧值。

3. 监听对象

   const obj = reactive({ someProp: 'initial value' });
   
   watch(() => obj.someProp, (newValue, oldValue) => {
     // 响应属性变化时的操作
   });
   

   使用 Composition API 中的 reactive 或 ref 来创建响应式数据，并通过箭头函数返回需要监听的对象属性。

总结

• Vue 2 中的 watch 是在选项中声明，支持简单变量和对象的属性监听。
• Vue 3 中的 watch 使用 watch 函数，通过 Composition API 实现，更加灵活和可组合，支持监听多个数据和对象属性的变化。

使用 Vue 3 中的 watch 函数能够更好地利用 Composition API 的优势，提高代码的可读性和可维护性，特别是在处理复杂的数据监听逻辑时更为方便。