- handler:其值是一个回调函数。即监听到变化时应该执行的函数。
- deep:其值是true或false;确认是否深入监听。(一般监听时是不能监听到对象属性值的变化的,数组的值变化可以听到。)
- immediate:其值是true或false;确认是否以当前的初始值执行handler的函数。
watch用法
第一种用法
当a,b值发生改变时执行
var vm = new Vue({
data: {
a: 1,
b: 2
},
watch: {
a: function (val, oldVal) { //监控的家伙变化时,需要执行的函数
console.log('new: %s, old: %s', val, oldVal)
},
b: 'someMethod',// 也可以是方法名,监控的家伙变化时,需要执行的函数(用引号)
}
})
第二种用法
初始化执行handler的函数
var vm = new Vue({
data: {
c:{
d:1,
}
},
watch: {
// 选项的对象
c: {
handler: function (val, oldVal) {//回调函数。即监听到变化时应该执行的函数
console.log('new: %s, old: %s', val, oldVal)
//当数据到来的时候, DOM 更新循环结束之后,立即执行函数
},
immediate: true //确认是否以当前的初始值执行handler的函数
}
}
})
第三种用法
深度监听,当对象c中任何值发生变化时执行handler的函数
var vm = new Vue({
data: {
c:{
d:1,
}
},
watch: {
// 选项的对象
c: {
handler: function (val, oldVal) {//回调函数。即监听到变化时应该执行的函数
console.log('new: %s, old: %s', val, oldVal)
//当数据到来的时候, DOM 更新循环结束之后,立即执行函数
},
deep: true,//深度监听
}
}
})
注销watch
为什么要注销 watch?因为我们的组件是经常要被销毁的,比如我们跳一个路由,从一个页面跳到另外一个页面,那么原来的页面的 watch 其实就没用了,这时候我们应该注销掉原来页面的 watch 的,不然的话可能会导致内置溢出。好在我们平时 watch 都是写在组件的选项中的,他会随着组件的销毁而销毁。
new Vue({
data: {
text: 0
},
watch: {
text:function(val, oldVal){
console.log('new: %s, old: %s', val, oldVal)
}
}
});
但是,如果我们使用下面这样的方式写 watch,那么就要手动注销了,这种注销其实也很简单
const unWatch = app.$watch('text', (val, oldVal) => {
console.log('new: %s, old: %s', val, oldVal)
})
unWatch(); // 手动注销watch
//app.$watch调用后会返回一个值,就是unWatch方法,你要注销 watch 只要调用unWatch方法就可以了。
watch监听路由
可以使用watch来进行路由的监听
watch: {
'$route'(to,from){
console.log(to); //to表示去往的界面
console.log(from); //from表示来自于哪个界面
}
},