Vue中watch选项handler是什么

在看Vue的API关于watch选项这里,官方教程内的代码:

var vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: {
      f: {
        g: 5
      }
    }
  },
  watch: {
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
    // 方法名
    b: 'someMethod',
    // 深度 watcher
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    // 该回调将会在侦听开始之后被立即调用
    d: {
      handler: function (val, oldVal) { /* ... */ },
      immediate: true
    },
    e: [
      function handle1 (val, oldVal) { /* ... */ },
      function handle2 (val, oldVal) { /* ... */ }
    ],
    // watch vm.e.f's value: {g: 5}
    'e.f': function (val, oldVal) { /* ... */ }
  }
})
vm.a = 2 // => new: 2, old: 1

示例中出现的 handler 这个方法是怎么来的?貌似不能用别的名称替代

回答:

可以参照源码里state.js里的这一段,Vue的类初始化建立数据绑定时,会从用户传的参数来判断拿什么来做监听的数据变量,拿什么来当作监听到数据变更后的处理函数。因为在变量后你传了一个对象,这个对象就是createWatcher函数参数中对应的handler,函数第一步逻辑就是判断它是不是一个对象,如果是对象,就拿它里面的handler参数来作为监听事件的处理函数,所以这个属性是必须这样写的。

function createWatcher (
  vm: Component,
  expOrFn: string | Function,
  handler: any,
  options?: Object
) {
  if (isPlainObject(handler)) {
    options = handler
    handler = handler.handler
  }
  if (typeof handler === 'string') {
    handler = vm[handler]
  }
  return vm.$watch(expOrFn, handler, options)
}

回答:

这是vue的规定写法,当你watch的值发生变化的时候,就会触发这个handler,这是vue内部帮你做的事情。

回答:

  • handle就是你watch中需要具体执行的方法
  • deep:就是你需要监听的数据的深度,一般用来监听对象中某个属性的变化
  • immediate:在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调:

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注