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 的监听。

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