vue2.x学习笔记（十九）

接着前面的内容：https://www.cnblogs.com/yanggb/p/12631022.html。

程序化的事件侦听器

在前面的学习中，我们已经知道了【$emit】全局属性的用法，它可以被【v-on】指令侦听，但是vue实例同时在其事件接口中提供了其他的方法，我们可以：

1.通过【$on(eventName, eventHandler)】侦听一个事件。

2.通过【$once(eventName, eventHandler)】一次性侦听一个事件。

3.通过【$off(eventName, eventHandler】停止侦听一个事件。

你通常不会用到这些，但是当你需要在一个组件实例上手动侦听事件的时候，它们是派的上用场的。它们也可以用于代码组织工具。例如，你可能经常看到这种继承一个第三方库的模式：

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

这里会有两个潜在的问题：

1.它需要在这个组件实例中保存这个picker，如果可以的话，最好只有生命周期钩子可以访问到它。这并不算是严重的问题，但是它可以被视为杂物。

2.我们的建立代码独立于我们的清理代码，这使得我们比较难于程序化地清理我们建立的所有东西。

你应该要通过一个程序化的侦听器来解决这两个问题：

mounted: function () {
  var picker = new Pikaday({
    field: this.$refs.input,
    format: 'YYYY-MM-DD'
  })

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

这里的hook是组件名。使用了这个策略，我们甚至可以让多个输入框元素同时使用不同的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()
    })
  }
}

但是要注意的是，即便如此，如果你发现自己不得不在单个组件里做很多建立和清理的工作，最好的方式通常还是创建更多的模块化组件。因此在上面的这个例子中，官方文档推荐创建一个可复用的<input-datepicker>组件。

另外要注意的是，vue的事件系统并不同于浏览器的eventtarget api，尽管它们工作起来是类似的，但是【$emit】、【$on】和【$off】并不是【dispatchEvent】、【addEventListener】和【removeEventListener】的别名，底层实现也是不尽相同。

"我还是很喜欢你，像鲲鹏扶摇九万里，非梧不栖。"

vue2.x学习笔记（十九）

猜你喜欢