有时候需要在组件挂载完成之后，对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", () => {
.....
});
}
// 事件二
...
}
}
有可能有人还是喜欢第一种，不过老夫呢，自然喜欢第二种，特别是方案二了，哈哈。
