Vue中使用MouseMove事件 获取鼠标坐标频率降低或事件卡顿

当我们使用Vue进行项目开发时，因为Vue的简介和易用性使我们可能会忽略，Vue的生命周期这件事儿。 尤其是在使用事件时，稍有不意就会造成意外发生！

本文章使用常见的拖拽为案例。

当拖拽一个div元素时，很明显会造成鼠标快速滑动时div跟随卡顿

共通代码：

<script>
    export default {
        data() {
            return {
                // 测试数据
                testData: [
                    {value: '1'},
                    {value: '2'},
                    {value: '3'},
                    {value: '4'},
                    {value: '5'},
                    {value: '6'},
                    {value: '7'},
                    {value: '9'},
                    {value: '10'}
                ],
                /// ...
            };
        },
        methods: {
            testFun(name) {
                console.time(name + '-delay');
                for (let i = 0; i < 10240000; i++) {}
                console.timeEnd(name + '-delay');
            },
            // ...
        }
    }
</script>
<style>
  *::selection {
    background: none;
  }
  .box {
    position: fixed;
    z-index: 100;
    width: 200px;
    height: 80px;
  }
  .dargbtn {
    margin: 15px;
    color: #222222;
    background: #eee;
    cursor: pointer;
  }
  .box1 {
    background: #c0c;
  }
  .box2 {
    background: #0cc;
  }
</style>
复制代码