理解vue3的watch函数
计算属性允许我们声明性地计算衍生值。然而在有些情况下，我们需要在状态变化时执行一些“副作用”：例如更改 DOM，或是根据异步操作的结果去修改另一处的状态。
在组合式 API 中，我们可以使用 watch 函数在每次响应式状态发生变化时触发回调函数。
侦听数据源类型
watch 的第一个参数可以是不同形式的“数据源”：它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组：
const x = ref(0)const y = ref(0)// 单个 refwatch(x, (newX) => {console.log(`x is ${newX}`)})// getter 函数watch(() => x.value + y.value,(sum) => {console.log(`sum of x + y is: ${sum}`)})// 多个来源组成的数组watch([x, () => y.value], ([newX, newY]) => {console.log(`x is ${newX} and y is ${newY}`)})
注意，你不能直接侦听响应式对象的属性值，例如:
const obj = reactive({ count: 0 })// 错误，因为 watch() 得到的参数是一个 numberwatch(obj.count, (count) => {console.log(`count is: ${count}`)})
这里需要用一个返回该属性的 getter 函数：
// 提供一个 getter 函数watch(() => obj.count,(count) => {console.log(`count is: ${count}`)})
深层侦听器
直接给 watch() 传入一个响应式对象，会隐式地创建一个深层侦听器——该回调函数在所有嵌套的变更时都会被触发：
const obj = reactive({ count: 0 })watch(obj, (newValue, oldValue) => {// 在嵌套的属性变更时触发// 注意：`newValue` 此处和 `oldValue` 是相等的// 因为它们是同一个对象！})obj.count++
相比之下，一个返回响应式对象的 getter 函数，只有在返回不同的对象时，才会触发回调：
watch(() => state.someObject,() => {// 仅当 state.someObject 被替换时触发})
你也可以给上面这个例子显式地加上 deep 选项，强制转成深层侦听器：
watch(() => state.someObject,(newValue, oldValue) => {// 注意：`newValue` 此处和 `oldValue` 是相等的// *除非* state.someObject 被整个替换了},{ deep: true })
谨慎使用
深度侦听需要遍历被侦听对象中的所有嵌套的属性，当用于大型数据结构时，开销很大。因此请只在必要时才使用它，并且要留意性能。
总结
watch() 默认是懒侦听的，即仅在侦听源发生变化时才执行回调函数。
第一个参数是侦听器的源。这个来源可以是以下几种：
1.一个函数，返回一个值2.一个 ref3.一个响应式对象4....或是由以上类型的值组成的数组
第二个参数是在发生变化时要调用的回调函数。