Vue的钩子事件和程序化侦听

博主     2020年05月10日    分类： Vue   阅读：3398     评论：0

对于Vue的事件机制，其实有一些高级技巧，我们最好能够掌握。

一、组件的生命周期钩子事件

Vue的生命周期函数，其实就是Vue开发者设定的一些hook钩子，你只要往hook里面编写代码，它就可以执行。如vue实例里的beforeCreate、created、mounted等，都是钩子。

但是你可能不知道，在Vue当中，触发钩子函数的时候，也会向父组件$emit一个事件，称之为hookEvent。

这个事件名叫做hook，以冒号的形式给它提供参数，参数就是各个钩子函数的名称，如下面的例子所示：

<my-component @hook:mounted='doSomething'></my-component>

上面的代码要这么读：当my-component这个子组件执行到mounted钩子函数时，会自动向父组件冒泡一个叫做hook:mounted的事件，也就是this.$emit('hook:' + 'mounted')，无论你是否在my-component中编写了具体的mounted代码。

关于理解钩子事件，重要在于：

  • 这是从子组件向父组件自动冒泡的事件
  • 在父组件中捕获该事件并进行相应处理
  • 这不是HTML元素标签级别的事件，而是组件级别的事件，不要在普通标签上使用它

源码分析

在Vue的官方文档中，找不到钩子事件相关的内容，但是我们可以从源码中进行分析：

下面是一段截取的Vue源码，注意callHook函数：

vm._self = vm
initLifecycle(vm) // 初始化生命周期
initEvents(vm) // 初始化事件
initRender(vm)
callHook(vm, 'beforeCreate')
initInjections(vm) // resolve injections before data/props
initState(vm)
initProvide(vm) // resolve provide after data/props
callHook(vm, 'created')

可以看出，生命周期函数是通过callHook这个函数调用的。我们去看看callHook函数的源代码：

export function callHook (vm: Component, hook: string) {
  // #7573 disable dep collection when invoking lifecycle hooks
  pushTarget()
  const handlers = vm.$options[hook] // 选项当中的生命周期函数
  const info = `${hook} hook`
  if (handlers) {
    for (let i = 0, j = handlers.length; i < j; i++) {
      invokeWithErrorHandling(handlers[i], vm, null, vm, info)
    }
  }
  if (vm._hasHookEvent) {
    vm.$emit('hook:' + hook)
  }
  popTarget()
}

下面这段，就是钩子事件的出处了：

  if (vm._hasHookEvent) {
    vm.$emit('hook:' + hook)
  }

根据不同hook的具体名字（created、mounted等等），组合钩子事件的字符串名，然后emit。

钩子事件为我们控制和响应子组件的变化，提供了新的、便捷的手段。

二、程序化的事件侦听器

我们知道 $emit 冒泡的事件，可以被 v-on 指令侦听。但是，所有写在模板上的v-on代码都是固定的，编译前就写好的，无法动态修改。这样不灵活，也满足不了所有的需求，我们需要类似编程语言能力的动态设置能力。

Vue很贴心的为我们提供了下面三个方法，让我们能够以程序化的方式侦听、停止事件：

  • $on(eventName, eventHandler) ：侦听一个事件
  • $once(eventName, eventHandler) ：一次性侦听一个事件
  • $off(eventName, eventHandler) ：停止侦听一个事件

那么程序化的事件处理有什么优点呢？

看下面的例子，假设你要集成一个第三方库，这个库的作用是将一个日期选择器附加到一个输入框上，然后在母组件被销毁之前，先把这个库的实例销毁了。最朴素的做法是在母组件的mounted钩子处自动挂载库实例，然后在beforeDestroy钩子处自动销毁库实例：

// 一次性将这个日期选择器附加到一个输入框上
// 它会被挂载到 DOM 上。
mounted: function () {
  // Pikaday 是一个第三方日期选择器的库
  this.picker = new Pikaday({
    field: this.$refs.input,
    format: 'YYYY-MM-DD'
  })
},


// 在组件被销毁之前，
// 也销毁这个日期选择器。
beforeDestroy: function () {
  this.picker.destroy()
}

但是这么做有两个潜在的问题：

  • 需要在这个组件实例中保存这个 picker实例，如果可以的话最好只有生命周期钩子可以访问到它。虽然这并不算严重的问题，但是它可以被视为“杂物”。
  • 创建库实例的代码独立于清理库实例的代码，这使得我们比较难于程序化地清理我们建立的所有东西。

解决问题的最佳办法是，钩子事件配合程序化的侦听器：

mounted: function () {
  var picker = new Pikaday({
    field: this.$refs.input,
    format: 'YYYY-MM-DD'
  })
    // 注意看这里
  this.$once('hook:beforeDestroy', function () {
    picker.destroy()
  })
}

$once绑定的事件只能被执行一次，完美适合销毁场景。

使用了上面的策略，我甚至可以让不同的输入框元素使用不同的 Pikaday，每个新的实例都程序化地在后期清理它自己：

mounted: function () {
  this.attachDatepicker('startDateInput')
  this.attachDatepicker('endDateInput')
},
methods: {
  attachDatepicker: function (refName) {
    var picker = new Pikaday({
      field: this.$refs[refName],
      format: 'YYYY-MM-DD'
    })

    this.$once('hook:beforeDestroy', function () {
      picker.destroy()
    })
  }
}

实际上，对于上面的需求，更普遍更适合的方法还是抽象出一个可以复用的组件。

注意 Vue 的事件系统不同于浏览器的 EventTarget API。尽管它们工作起来是相似的，但是 $emit、$on, 和 $off 并不是 dispatchEvent、addEventListener 和 removeEventListener 的别名。

评论总数： 0

点击登录后方可评论