watch
watch:一个对象,键是需要观察的表达式,值是对应回调函数,也可以是是方法吗或者包含选项的对象。vue 实例将会载实例化是调用 $watch(),遍历 watch 对象的每一个 property。
deep: true:将会深度监听对象的 property改变时,被调用。
immediate: true:将会载监听开始之后立即调用。
注意:不应该使用箭头函数来定义 watcher 函数(例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例,this.updateAutocomplete 将是 undefined。
this.$watch
用法:观察 Vue 实例上的一个表达式或者一个函数计算结果的变化。回调函数得到的参数为新值和旧值。表达式只接受简单的键路径。对于更复杂的表达式,用一个函数取代。
// 键路径 this.$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 = this.$watch('a', cb) // 之后取消观察 unwatch()
1.deep
为了发现对象内部值的变化,可以载选项参数中指定 deep:true。
this.$watch('someObject', callback, { deep: true }) vm.someObject.nestedValue = 123
2.immediate
在选项中指定 immediate:true 将立即以表达式的当前值触发回调。
this.$watch('a', callback, { immediate: true })
注意在带有 immediate 选项时,你不能在第一次回调时取消监听给定的 property。你需要先检查其函数的可用性:
var unwatch = this.$watch('value', function () { doSomething() if (unwatch) unwatch() }, { immediate: true } )
标签:unwatch,vue,函数,watch,immediate,监听器,true,表达式 From: https://www.cnblogs.com/yan122/p/17098208.html