当前位置: 首页 > 工具软件 > Watch > 使用案例 >

this.$watch 和组件的 watch 有什么区别

孔彭祖
2023-12-01

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 实例上的一个表达式或者一个函数计算结果的变化。回调函数得到的参数为新值和旧值。表达式只接受简单的键路径。对于更复杂的表达式,用一个函数取代。

// 键路径
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

 类似资料: