前端的坑

事件重复绑定##

在组件的事件回调里调用request，会引发虚拟dom的刷新，但前端dom是不刷新的。这样后端的组件事件从新绑定到组件的时候就会发生重复绑定

    $("button[role='test']").on("click", e => {
        axios.post("/tests", $("form").serialize()).then(result => {
            console.log(result);
        }).catch(error => {
            console.error(error);
        });
    });

在点击按钮的时候，第一次会回调一次、第二次会回调两次、。。。
解决方法：在做on绑定之前，先off掉之前绑定的事件回调

    $("button[role='test']").off("click").on("click", e => {
        axios.post("/tests", $("form").serialize()).then(result => {
            console.log(result);
        }).catch(error => {
            console.error(error);
        });
    });

jquery说1.8版本之后就不需要做off了，还删除了detach、unbind等函数，我有一句mmp不是当讲不当讲。

总之jquery是把双刃剑，使用时需小心，涉及ajax、event等的内部逻辑，一定要去MDN上好好看下文档。