Vue3：watch与watchEffect的异同

相同点

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

不同点

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

监听store的数据变化：watch

import { watch } from 'vue';
import { storeToRefs } from 'pinia';  setup() {const counter = useCounter(); // 使用你的counter storeconst 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

import { watchEffect } from 'vue';setup() {const counter = useCounter(); // 使用你的counter store// 监听counter.count的变化watchEffect(() => {// 执行相应的操作console.log(`count变为${counter.count}`);});
}