watch监听函数
- 在vue3中的watch监听函数的配置项(deep、immediate)与vue2中一致,该函数有三个参数
- 第一个参数:被监听的属性
- 第二个参数:监听的回调函数
- 第三个参数:为一个对象,监听函数的配置项,在对象内进行配置项配置(deep、immediate)
- 语法如下:
<template> <div>{{address}}</div> </template> import {ref, watch} from 'vue' export default { name: 'App', setup () { const address = ref('广东省') // 监听address,并配置immediate为true,进行立刻监听 watch(address, (newValue, oldValue) => { console.log('监听到address的改变', newValue, oldValue) }, {immediate: true}) return { address } } }
- 在vue3中watch监听函数有以下几个注意点和坑:
- 坑一:当监听的对象为reactive定义的响应式对象属性时,watch监听的回调函数中无法准确获取oldValue,目前无法解决(若watch监听使用ref定义响应式数据,也是同样的效果,因为使用ref定义对象类型的数据时,底层还是求助reactive实现的)
- 坑二:当监听的对象为reactive定义的响应式对象属性时,watch函数自动开启deep深度监听,此时手动配置deep: false无效
- 注意点:主要为以下几种情况
<template> <div>{{address}}</div> <div>{{person}}</div> </template> import {reactive, ref, watch} from 'vue' export default { name: 'App', setup () { const address = ref('广东省') const msg = '暂居' const person = reactive({ age: 18, name: '张三', job: { type: '前端开发' } }) // 情况一:监听ref定义的响应式基本数据类型address watch(address, (newValue, oldValue) => { console.log('监听到address的改变', newValue, oldValue) }) // 情况二:监听多个ref定义的响应式基本数据类型address, msg watch([address, msg], (oldValue, newValue) => { console.log('监听到address或msg的改变', newValue, oldValue) // 输出为一个数组,数组元素为address, msg,如['广东省', '暂居'] }) // 情况三:监听reactive定义的响应式对象中的属性时 watch(() => person.age, (oldValue, newValue) => { console.log('监听到person.age的改变', newValue, oldValue) }) // 情况四:监听reactive定义的响应式对象中的多个属性时 watch([() => person.age, () => person.name], (oldValue, newValue) => { console.log('监听到person.age的改变', newValue, oldValue) // 输出为一个数组,数组元素为address, msg,如[18, '张三'] }) // 情况五:监听reactive定义的响应式对象中的属性的值为对象时 // deep配置有效 watch(() => person.job, (oldValue, newValue) => { console.log('监听到person.age的改变', newValue, oldValue) }, {deep: true}) return { person, address } } }