vue3侦听reactive响应式对象的几种情况

  1. 侦听响应式对象的单个属性值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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}`)
  }
)
  1. 侦听响应式对象的多个属性
1
2
3
4
5
6
7
const obj = reactive({ count: 0,name: 'apple' });

const watchArr = [() => obj.count,() => obj.name];

watch(watchArr, (oldValue, newValue) => {
    //嵌套的属性变更时触发
});
  1. 侦听响应式对象的所有属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const obj = reactive({ count: 0 });
obj.count++

//例1：传入一个响应式对象，会隐式地创建一个深层侦听器——该回调函数在所有嵌套的变更时都会被触发
watch(obj, (newValue, oldValue) => {
  // 在嵌套的属性变更时触发
  // 注意：`newValue` 此处和 `oldValue` 是相等的
  //       JSON.stringify(newValue) === JSON.stringify(oldValue)
  // 因为它们是同一个对象！
})

//例2：传入响应式对象的 getter 函数，只有在返回不同的对象时，才会触发回调
watch(
  () => obj ,
  () => {
    // 仅当 obj  被替换时触发
  }
)

//例3：给例2加上 deep:true ， 强制转成深层侦听器，效果例1
watch(
  () => obj ,
  () => {
    //被替换时触发 或 嵌套的属性变更时触发
    // 注意：`newValue` 此处和 `oldValue` 是相等的
    // *除非*  obj 被整个替换了  },
  { deep: true }
)
编辑文章✏