watch:一个对象,键是需要观察的表达式,值是对应回调函数,也可以是是方法吗或者包含选项的对象。vue 实例将会载实例化是调用 $watch(),遍历 watch 对象的每一个 property。
deep: true:将会深度监听对象的 property改变时,被调用。
immediate: true:将会载监听开始之后立即调用。
注意:不应该使用箭头函数来定义 watcher 函数(例如 searchQuery: newValue => this.updateAutocomplete(newValue)
)。理由是箭头函数绑定了父级作用域的上下文,所以 this
将不会按照期望指向 Vue 实例,this.updateAutocomplete
将是 undefined。
用法:观察 Vue 实例上的一个表达式或者一个函数计算结果的变化。回调函数得到的参数为新值和旧值。表达式只接受简单的键路径。对于更复杂的表达式,用一个函数取代。
// 键路径
vm.$watch('a.b.c', function (newVal, oldVal) {
// 做点什么
})
// 函数
vm.$watch(
function () {
// 表达式 `this.a + this.b` 每次得出一个不同的结果时
// 处理函数都会被调用。
// 这就像监听一个未被定义的计算属性
return this.a + this.b
},
function (newVal, oldVal) {
// 做点什么
}
)
vm.$watch 返回一个取消观察函数,用来停止触发回调:
var unwatch = vm.$watch('a', cb)
// 之后取消观察
unwatch()
1.deep
为了发现对象内部值的变化,可以载选项参数中指定 deep:true。
vm.$watch('someObject', callback, {
deep: true
})
vm.someObject.nestedValue = 123
2.immediate
在选项中指定 immediate:true 将立即以表达式的当前值触发回调。
vm.$watch('a', callback, {
immediate: true
})
注意在带有 immediate 选项时,你不能在第一次回调时取消监听给定的 property。你需要先检查其函数的可用性:
var unwatch = vm.$watch('value', function () {
doSomething()
if (unwatch) unwatch()
},
{ immediate: true }
)
更多详情,请查看:vue 官网之 this.$watch。