watch与watchEffect属性状态侦听器

watch与watchEffect属性状态侦听器

前面提到过，计算属性允许声明性地计算衍生值。然而在有些情况下，需要在状态变化时执行一些Effect（额外的逻辑），比如，更改 DOM或是根据异步操作的结果去修改另一处的状态。【应该是作为computed计算属性功能一个补充】

侦听对象数据源类型

watch 侦听器的第一个参数即为侦听对象，它可以是不同形式的“数据”，比如，一个 ref (包括计算属性)对象、一个reactive响应式对象、一个 getter 函数（()=>{}）、或多个数据组成的数组；第二个参数为变更发生后触发的回调函数，其入参为被侦听对象表达式结果的解构赋值结果：

const x = ref(0)
const y = ref(0)

// 单个 ref或computed计算属性
watch(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}`)
})

特别提示：侦听对象不能直接为reactive响应式对象的属性，此时，需要将侦听对象变换成getter函数形式。

const obj = reactive({ count: 0 })

// 错误，因为 watch() 得到的参数是一个 number
watch(obj.count, (count) => {
  console.log(`count is: ${count}`)
})

// 提供一个 getter 函数
watch(
  () => obj.count,
  (count) => {
    console.log(`count is: ${count}`)
  }
)

与ref、reactive中的响应式连接建立类似，watch侦听也有一个侦听粒度问题，即对象级还是属性级。

ref属性级状态侦听回调

使用 watch 函数在每次响应式状态发生变化时触发回调函数，场景：输入问题，根据问题远程检索问题答案，相同问题则不进行检索，问题中需要输入一个问题标志：“?”：

<s