vuejs3.0 从入门到精通——watch侦听器——侦听数据源类型

watch侦听器——侦听数据源类型

https://cn.vuejs.org/guide/essentials/watchers.html#basic-example

watch的第一个参数可以是不同形式的“数据源”：它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组：

js:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

const x = ref(0) const y = ref(0)   // 单个 ref 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}`) })

注意，你不能直接侦听响应式对象的属性值，例如:

js:

?

1 2 3 4 5 6

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

这里需要用一个返回该属性的 getter 函数：

js:

?

1 2 3 4 5 6 7

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