HandsonTable hooks 踩坑记

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');
}

1. 使用官网的Handsontable.hooks.destory()方法也不能清除。使用hot.removeHook方法也不能清除。(hot为HandsonTable实例)
2. 再次进入页面判断若已经注册了beforeChange,则不再注册事件。这种方案会导致后续中，hotData数据改变但是视图不会更改。

解决方案

将beforeChange事件挂到hotSettings中

data () {
    let self = this;
    return {
        hotSettings: {
            //监听数据更改后 事件
            afterChange: function (result, source) {
                // 数据更改后进行处理
                self.reverseHandleHotTable(result);
            }
        }
    }
}

这种方案不会重复注册。