共计 551 个字符,预计需要花费 2 分钟才能阅读完成。
一、handler 办法和 immdiate 属性
watch 默认绑定,页面首次加载时,是不会执行的。只有值产生扭转才会执行。
如果想立刻执行怎么办?
watch:{
name:{handler(newName,oldName){// 执行代码},
immediate:true //true 就示意会立刻执行
}
}
二、deep 属性
如果是监听的是对象类型,当手动批改对象的某个属性时,发现是有效的。
这时候就须要 deep 属性。
data:{
obj:{a:1}
},
watch:{
obj:{handler(newName,oldName){// 执行代码},
deep:true // 为 true,示意深度监听,这时候就能监测到 a 值变动
}
}
deep 为 true,就能够监测到对象中每个属性的变动。
它会一层层遍历,给这个对象的所有属性都加上这个监听器。然而这样性能开销会比拟大,批改任何一个属性,都会登程这个监听器里的 handler.
三、deep 优化
能够应用字符串模式监听
data:{
obj:{a:1}
},
watch:{
'obj.a':{handler(newName,oldName){// 执行代码},
deep:true // 为 true,示意深度监听,这时候就能监测到 a 值变动
}
}
这样 vue 就会一层层解析,晓得遇到属性 a,而后才给 a 设置监听函数。
正文完