直接监听响应式对象

直接给 watch() 传入一个响应式对象，会隐式地创建一个深层侦听器——该回调函数在所有嵌套的变更时都会被触发：
但需要注意的是此时的newVal和oldVal是相等的，因为它们是同一个对象。
vue3文档的例子

  1. const obj = reactive({ count: 0 })
  3. watch(obj, (newValue, oldValue) => {
  4.   // 在嵌套的 property 变更时触发
  5.   // 注意：`newValue` 此处和 `oldValue` 是相等的
  6.   // 因为它们是同一个对象！
  7. })
  9. obj.count++

自己项目中的例子

  1. const params = reactive({
  2.   area: -1,
  3.   type: -1,
  4.   initial: -1
  5. })
  7. watch(params, (newVal, oldVal) => {
  8.   console.log(newVal, oldVal);
  9.   trrigerGetArtistList()
  10. }, { immediate: true })

由于设置了立即触发，第一次，newVal有值，oldVal为undefined
image.png
改变params中的属性：
image.png

监听返回响应式对象的getter

只有在 getter 函数返回不同的对象时，才会触发回调：

  1. // 只有立即调用时触发，后面params改变也不触发
  2. watch(() => params, (newVal, oldVal) => {
  3.   console.log(newVal, oldVal);
  4.   trrigerGetArtistList()
  5. }, { immediate: true })
  7. // 加上deep开启深度监听就可以正常触发
  9. watch(() => params, (newVal, oldVal) => {
  10.   console.log(newVal, oldVal);
  11.   trrigerGetArtistList()
  12. }, { immediate: true, deep: true })

深度监听性能问题

深度侦听需要遍历被侦听对象中的所有嵌套的 property，当用于大型数据结构时，开销很大。因此请只在必要时才使用它，并且要留意性能。