监听器的一般用法
export default {
data(){
return{
list:{
a:1,
b:2
c:''
}
}
}
},
watch:{
'list.c'(newval){
console.log('list.c change' , newval)
}
}
当监听对象中的某个值的变化时 , 可以用字符串的形式监听 , 这样vue.js会一层一层的解析下去 , 直到遇到 c 才会设置监听函数 .
需要使用handler方发和 immediate 属性
export default {
data(){
return{
list:{
a:1,
b:2
c:''
}
}
}
},
watch:{
list:{
handler(newval){
console.log('list change' , newval)
}
deep:true //设置深度监听 , 默认值为false
immediate:true
}
}
这里绑定了一个handler方法,前一种写法是默认写了handler , vue.js会去处理这个逻辑 ,经过编译之后就是按照handler方法处理.
immediate:true代表着在watch里面声明 list 之后, 就会立即去执行handler方法 , 默认情况为false , 就像前一个一样 , 也可以不写 .
deep --- 深度监听 ; 当我们对哪个数据在未来的变化不清楚时 , 但又得知道哪个发生变化 , 可以对整个对象进行深度监听 , 此时需要用到的一个属性为 deep .
将 deep 设置为 true ,代表着会对 list 中的每一个元素进行监听 , 但是这样的对内存的占用会比较大 , 在一般情况下 , 推荐使用一般状态写法与字符串形式 , 可以定点监控减小浏览器的压力. 同理 , deep 在默认情况下位 false 可以省略 .
注销 watch
组件在使用过程中经常被销毁 , 比如从一个页面跳到另一个页面 , 原来的监听就没有用了 , 需要进行销毁 , 不然的话可能导致内存泄漏 , 所以建议将watch写在组件中 , 这样可以随着组件的销毁而销毁 .
export default {
data(){
return{
list:{
a:1
}
}
}
},
watch: {
list(newVal) {
console.log(newval)
}
}
也可以手动注销 watch ,就是unWatch方法 ,只需要在监听器之后添加即可.
const uwatch = app.$watch: {
list(newVal) {
console.log(newval)
}
}, //app.$watch会返回一个值 ,就是uwatch方法 , 在后面调用方法就可以了 .
unWatch() //手动注销
