vue3的watcheffect

watchEffect是Vue 3中的一个API，它类似于computed，但有一些不同之处。watchEffect更注重回调函数的执行过程，而不需要写返回值。它会自动追踪回调函数内使用的响应式数据，并在这些数据发生变化时重新运行回调函数。

在使用watchEffect时，可以监视ref所定义的响应式数据，也可以监视reactive所定义的响应式数据及其属性的变化。对于监视引用类型的属性，如果需要获取属性的旧值，需要开启深度监视(deep配置)。

以下是一些具体的用法示例：
1. 监视ref所定义的一个响应式数据:
watchEffect(() => {
const x1 = sum.value
const x2 = person.age
console.log('watchEffect配置的回调执行了')
})

2. 监视ref所定义的多个响应式数据:
watch([sum, msg], (newValue, oldValue) => {
console.log('sum或msg变了', newValue, oldValue)
})

3. 监视reactive所定义的一个响应式数据:
watch(person, (newValue, oldValue) => {
console.log('person变化了', newValue, oldValue)
})

4. 监视reactive所定义的个响应式数据中的某个属性:
watch(() => person.name, (newValue, oldValue) => {
console.log('name变化了', newValue, oldValue)
})

5. 监视reactive所定义的个响应式数据中的某些属性:
watch([() => person.name, () => person.age], (newValue, oldValue) => {
console.log('name和age变化了', newValue, oldValue)
})