Vue3数据监听watch

有时候希望某个数据发生变化时，能够得到监视并处理，这时用watch函数最合适不过

watch函数定义

函数声明：watch(monitorData, handlerFunction, config)

monitorData：要监听的数据
handlerFunction：监听数据处理函数，这个函数第一个参数监听数据的旧值，第二个参数监听数据的新值
config：配置对象，设置deep为true开启深度监听，immediate为true立刻执行一次

数据监听

定义如下的数据模型，clazz代表班级，student代表学生

const clazz = ref('')
const clazz2 = ref('')
const student = ref({name: '222',age: ''
})

以下情况全是使用ref()函数的情况

1）监视基本数据类型

① 直接监听

watch(clazz, (newValue, oldValue) => {console.log('班级','新值：', newValue, '旧值：', oldValue)
})

② 通过函数监听，需要通过.value属性监听

watch(() => clazz.value, (newValue, oldValue) => {console.log('班级','新值：', newValue, '旧值：', oldValue)
})

2）监听对象本身变化（浅监听，不是监听对象属性）

① 直接监听

watch(student,  (newValue, oldValue) => {console.log('学生信息','新值：', newValue, '旧值：', oldValue)
})

② 通过函数监听，通过.value属性

watch(() => student.value,  (newValue, oldValue) => {console.log('学生信息','新值：', newValue, '旧值：', oldValue)
})

3）监听对象属性

① 单独监听，在函数中返回 " 对象.value.属性 "

watch(() => student.value.name, (newValue, oldValue) => {console.log('学生姓名','新值：', newValue, '旧值：', oldValue)
})

② 通过配置deep为true开启深度监听，监听对象所有属性

watch(student,  (newValue, oldValue) => {console.log('学生信息','新值：', newValue, '旧值：', oldValue)}, {deep: true}
)

4）联合监听

监听多个属性，monitorData用数组封装多个监听属性，newData与oldData用数组接受多个监听属性的旧值与新值

watch([clazz1 , clazz2], ([newClazz1, newClazz2], [oldClazz1, oldClazz2]) => {}
)

这里用到了 解构语法，用变量接受数组的成员，也可以直接接收整个数组

通过多个函数监听

watch([() => clazz.value ,  () => clazz2.value], ([newClazz1, newClazz2], [oldClazz1, oldClazz2]) => {}
)

总结

通过以上使用可以发现：

①直接传递监听数据，需要传递响应式对象（ref对象）

② 使用函数返回监听数据时，需要返回响应式对象内部具体的数据，即返回 .value 属性