hooks是HandsonTable中的钩子。可以添加或者注册一些事件。这是官网的地址
背景
在Vue单页面应用项目中使用HandsonTable插件。在data中定义了hotSettings，在mounted中使用了hooks添加了beforeChange事件。
mounted () {
Handsontable.hooks.add('beforeChange', function (result, source) {
//...
});
}
问题
在页面中添加了监听beforeChange，需要离开页面时移除事件监听，不然在不强制刷新页面的情况下，多次进入页面就会重复绑定beforeChange。
按照官网使用remove移除事件失效：
beforedestory () {
//清除beforeChange的监听 失效
Handsontable.hooks.remove('beforeChange');
}
- 使用官网的Handsontable.hooks.destory()方法也不能清除。使用hot.removeHook方法也不能清除。(hot为HandsonTable实例)
- 再次进入页面判断若已经注册了beforeChange,则不再注册事件。这种方案会导致后续中，hotData数据改变但是视图不会更改。
解决方案
将beforeChange事件挂到hotSettings中
data () {
let self = this;
return {
hotSettings: {
//监听数据更改后 事件
afterChange: function (result, source) {
// 数据更改后进行处理
self.reverseHandleHotTable(result);
}
}
}
}
这种方案不会重复注册。
