VUE动态增加钩子函数

有时候需要在组件挂载完成之后，对dom增加一些自定义事件，但需要在beforeDestroy中对该事件进行摧毁，所以，你不得不这样做：

  mounted() {
    const vm = this;
    const el =  vm.$el.querySelector('#id');
  
    document.addEventListener(
      'click',
      vm.clickHandler,
      false
    );
  },
  beforeDestroy() {
    const vm = this;
    const el =  vm.$el.querySelector('#id');

    el.removeEventListener(
      'click',
      vm.clickHandler
    );
  },
  methods: {
    clickHandler(e) {}
  }

略显复杂, 一个dom事件还好，如果是多个的话，好累（就是不愿意在n个钩子中处理一个东东...），于是，源代码走起。chrome启动，github启动，vue/vueJs启动。然后，解决方案如下：

mounted() {
  const vm = this;
  
  vm.initDomEvent();
},
methods: {
  initDomEvent() {
    // 事件一
    const vm = this;
    const el = vm.$el.querySelector('#id');
    const elClickHandler = (e) => {};
  
    if (el instanceOf Element) {
      el.addEventListener(
        'click',
         elClickHandler,
         false
      );
    
      // 方案一
      vm.$options['beforeDestroy'] = (
        vm.$options['beforeDestroy'] || []
      ).concat(() => {
        el.removeEventListener(
          'click',
          elClickHandler
        );
      });

      // 方案二
      vm.$once("hooks:beforeDestroy", () => {
          .....
      });
    }

    // 事件二
    ...
  }
}

有可能有人还是喜欢第一种，不过老夫呢，自然喜欢第二种，特别是方案二了，哈哈。