vue2和vue3的 watch:{} 没变化,以下都适用。
类型:{ [key: string]: string | Function | Object | Array}
本章内容:概念、监听基本数据类型、引用数据类型、监听的4种写法、监听的5种模式。
概念:
- 一个对象,键是要侦听的响应式 property——包含了 data 或 computed property,而值是对应的回调函数。值也可以是方法名,或者包含额外选项的对象。
- 缓冲回调:缓冲回调不仅可以提高性能,还有助于保证数据的一致性。在执行数据更新的代码完成之前,侦听器不会被触发。简单来说,同步修改数据时,修完操作执行完毕后才会触发回调。注意是同步!所以异步操作的时候,要注意多次触发watch的问题。(所有同步操作为1次,异步操作有几次就触发多少次监听!!)
重点内容:监听的数据类型 、监听对象的几种形式、深度监听deep 、监听模式flush
watch:{}的6个使用方式
export default {
data(){
return {
watch:{
data1:{
name1:'name1',
name2:'name2',
},
data2:'data2的数据'
},
direct:'',
watchData:{
d1:'watch - d1',
d2:{
d21:'watchData.d2.d21'
},
immediateData:'immediate数据',
},
}
},
methods:{
changeData(){
this.watch.data1.name1 = 'name1(修改后)'
this.watch.data1.name2 = 'name2(修改后 1)'
this.watch.data1.name2 = 'name2(修改后 2)'
this.watch.data2 = '同步'
setTimeout(() => {
this.watch.data2 = '异步修改data2'
}, 0);
},
strFn(){}
},
watch:{
watch:{
handler(n,o){
// 缓冲回调特性
// 只会打印2次~
console.log(n,o);
},deep:true
},
//使用方式1: 直接监听,适用于基本数据类型
direct(newVal,oldVal){
console.log(newVal,oldVal);
},
//使用方式2: 监听嵌套对象内的某个属性
// 注意点:根据这属性的值是否引用类型,注意是否加deep
'watchData.d2.d21':{
handler(newval,oldval){
console.log(newval,oldval);
}
},
//使用方式3: 键值对,key是监听对象,value是实例的方法,这里直接引用作为监听回调
'watchData.d1':'strFn',
//使用方式4: watchArr为监听对象,[]内的各个函数则是 监听触发的callback
direct:[
'strFn',
function (newVal,oldVal) {
console.log(newVal,oldVal);
},
],
//使用方式5:初次立即执行,常见用在父传子,子watch监听的时候,如果父组件有默认数据传入,子组件 watch 则需要设置 immediate:true
'watchData.immediateData':{
handler(n,o){
// 初次 oldVal 会为空,(理所应当)
console.log('watch绑定立即执行:immediate;',n,o);
},
immediate:true
},
//使用方式6:第三个参数的详细解析。
watchData:{
// 直接监听最外层对象的坑:如果修改watchData.d1, 正常是不会触发监听的,修改整个watchData才会触发。因为这是引用类型的存储机制问题!不是修改的对象/数组本身,而是他里面的属性。
handler(n , o){
console.log('最外层数组直接就监听',n , o);
}
,deep:true
// 需要触发深层修改的监听,则加个deep,这样不管修改内部哪一层级的,都会触发该监听修改
,flush:'pre' // 'pre' | 'post' | 'sync' // 默认值是'pre'
// pre 模式下,指定的回调在模板渲染前被调用,所以立马获取对应的内容,将不会是最新的!!
// post 模式下,将回调推迟到模板渲染之后的,这时候用$ref获取对应内容则会是最新的,等于 pre 模式下用 nextTice()
// sync 就不多说了,回调改为同步调用,即取消 <缓冲回调> 这个功能
// 'pre' 和 'post' 回调使用队列进行缓冲,这也是为什么<同步>多次修改后,只触发最后一次监听回调的原因。
}
}
}
其他vue3 选项式api、组合式api、全局/应用api学习经验分享
vue3 学习资料vue3学习资料记录,经验交流、分享https://oumae-kumiko.github.io/vue3.cn.community/