vue3中watch和watchEffect的区别！！！

vue3中watch和watchEffect的区别！！！

在 Vue 3 中，watch 和 watchEffect 都是监听器，但在写法和使用上有所区别。让我们来详细了解一下它们之间的不同：

1. watch:

   • watch 具有一定的惰性（lazy）：它在页面首次展示时不会立即执行，只有数据变化时才会执行。
   • 参数可以拿到当前值和原始值。
   • 需要传递要侦听的内容。
   • 可以侦听多个数据的变化，用一个侦听器承载。
   • 适用于基本数据类型的监听。

   示例：

   <template>
     Name: <input v-model="name" />
   </template>
   <script setup>
     const name = ref('zhangsan');
     watch(name, (curVal, prevVal) => {
       console.log(curVal, prevVal);
     });
   </script>
   

2. watch 对引用类型进行监听：

   • 可以监听一个数据。
   • 可以监听多个数据。
   • 适用于 reactive 定义的对象。

   示例：

   <template>
     Name: <input v-model="name" />
     English Name: <input v-model="englishName" />
   </template>
   <script setup>
     const 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>
   

3. 取消监听：

   • 使用 watch 后，可以通过 stop() 来取消监听。

4. 非惰性的立即执行：

   • 可以通过添加第三个参数 immediate: true 来使 watch 立即执行。

   示例：

   watch(
     [() => nameObj.name, () => nameObj.englishName],
     ([curName, curEng], [prevName, prevEng]) => {
       console.log(curName, curEng, '----', prevName, prevEng);
     },
     {
       immediate: true
     }
   );
   

5. watchEffect：

   • watchEffect 立即执行，没有惰性，页面的首次加载就会执行。
   • 自动检测内部代码，只要代码中有依赖，就会执行。
   • 不需要传递要侦听的内容，会自动感知代码依赖。
   • 无法获取到原值，只能得到变化后的值。
   • 适合处理异步操作。

   示例：

   watchEffect(() => {
     console.log(state.count);
     console.log(state.name);
   });
   
   setTimeout(() => {
     state.count++;
     state.name = 'ls';
   }, 1000);
   

6. 取消监听：

   • 使用 stop() 来取消 watchEffect 的监听。

根据以上特征，我们可以根据具体需求选择使用哪个监听器。