Vue程序化的事件侦听器，90%的人不知道

程序化的事件侦听器

除了 v-on 和 $emit 外， Vue 实例在其事件接口中还提供了其它的方法。我们可以：

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

这几个方法一般不会被用到，但是，当需要在一个组件实例上手动侦听事件时，他们是可以派的上用场的。

例如，有时我们会在组件中集成第三方库：

Vue.component('my-cmp', {
   // 一次性将这个日期选择器附加到一个输入框上
   // 它会被挂载到 DOM 上。 
  mounted () {
     // Pikaday 是一个第三方日期选择器的库
    this.picker = new Pikaday({
      field: this.$refs.input,
      format: 'YYYY-MM-DD',
    })
  },
   // 在组件被销毁之前， 
   // 也销毁这个日期选择器。 
  beforeDestroy () {
    this.picked.destroy();
  },
  template: `
    <div>
      <input type="text" ref="input" />
      <button @click="$destroy()">销毁组件</button>
    </div>
  `,
})

使用上面的方法，有两个潜在的问题：

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

所有，我们可以通过程序化的侦听器解决这两个问题：

Vue.component('my-cmp', {
  mounted () {
    var picker = new Pikaday({
      field: this.$refs.input,
      format: 'YYYY-MM-DD',
    })
    this.$once('hook:beforeDestroy', () => {
      picker.destroy();
    })
  },
  template: `
    <div>
      <input type="text" ref="input" />
      <button @click="$destroy()">销毁组件</button>
    </div>
  `
})

使用了这个策略，我们还可以让多个输入框元素使用不同的pikaday：

Vue.component('my-cmp', {
  mounted () {
    this.datePicker('inputA');
    this.datePicker('inputB');
  },
  methods: {
    datePicker (refName) {
      var picker = new Pikaday({
        field: this.$refs[refName],
        format: 'YYYY-MM-DD',
      })
      this.$once('hook:beforeDestroy', () => {
        picker.destroy();
      })
    },
  },
  template: `
    <div>
      <input type="text" ref="inputA" />
      <input type="text" ref="inputB" />
      <button @click="$destroy()">销毁组件</button>
    </div>
  `
})

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

最后

如果对您有帮助，希望能给个👍评论/收藏/三连！

博主为人老实，无偿解答问题哦❤