vue3的Composition API之watch和watchEffect

在Vue3中，watch和watchEffect都是用来监听响应式数据变化的函数，但它们的工作方式有所不同。

1. watch：watch函数接收两个参数：要观察的源和一个回调函数。源可以是一个响应式引用（由ref创建）或一个返回值的函数。当源的值发生变化时，回调函数会被调用。回调函数接收新值和旧值作为参数。

import { ref, watch } from 'vue';

const count = ref(0);
watch(count, (newValue, oldValue) => {
console.log(count changed from ${oldValue} to ${newValue});
});

2. watchEffect：watchEffect函数接收一个函数作为参数。这个函数会立即执行，每当依赖项发生变化函数会响应性地再次执行。（所有在其函数内部访问的响应式数据都会成为watchEffect的依赖项）

import { ref, watchEffect } from 'vue';

const count = ref(0);
watchEffect(() => {
console.log(count is now ${count.value});
});

总的来说，watch提供了更多的灵活性（例如，可以选择什么时候运行回调、访问旧值等），watchEffect更适用于当依赖项改变时总是需要运行的副作用。