Vue3：watch与watchEffect的异同

Vue3 watch与watchEffect的异同

相同点
不同点
监听store的数据变化：watch
监听store的数据变化：watchEffect

相同点

数据响应式：
都能够监听响应式数据的变化。当数据发生变化时，他们都会自动出发相应的回到函数。
自动追踪依赖:
都能够自动追踪回调函数中使用的响应式数据，并在这些数据发生变化时触发回调函数。这样可以确保回调函数与数据保持同步。
异步执行：
都会在下一个微任务队列中异步执行回调函数。可以避免在同一事件循环中触发大量的回调函数，提高性能。

不同点

------------	watch	watchEffect
执行时机	'懒执行'，即不会立刻执行，只在监听的数据发生改变时触发；若想要立刻执行，需要配置参数immediate:true。	会立刻执行一次；然后回调函数里的依赖数据发生变化时，会再执行。
参数不同	至少两个参数（1.侦听的数据，2.回调函数；3.配置参数（deep,immediate等））。	只有一个参数（回调函数）。
结果不同	可以同时获得oldvalue和newvalue。	获取不到oldvalue,只能拿到newvalue。
适用场景	需要对oldvalue和newvalue进行比较；需要精准追踪某个值时；待后续补充	待后续补充
其他	待后续补充	回调逻辑复杂时，会影响性能

监听store的数据变化：watch

javascript 复制代码

import { watch } from 'vue';
import { storeToRefs } from 'pinia';  

setup() {
  const counter = useCounter(); // 使用你的counter store
  const state = storeToRefs(counter); // 将counter的state转换为ref对象

  // 监听state.count的变化
  watch(state.count, (newValue, oldValue) => {
    // 执行相应的操作
    console.log(`count变为${newValue}`);
  });

  return {
    state,
  };
}

优点： 使用storeToRefs函数可以将store中的state转换为ref对象，使得在组件中使用watch函数更加方便。这种方法适用于需要在组件中对store中的state进行细粒度的监听，并执行相应的操作。
缺点： 需要手动将state转换为ref对象，稍微繁琐一些。如果只是简单地监听state的变化，可能会显得过于复杂。

监听store的数据变化：watchEffect

javascript 复制代码

import { watchEffect } from 'vue';

setup() {
  const counter = useCounter(); // 使用你的counter store

  // 监听counter.count的变化
  watchEffect(() => {
    // 执行相应的操作
    console.log(`count变为${counter.count}`);
  });
}