问题：用v-for循环data里面的数据渲染dom,当data数据变复杂且变多时，页面所有元素的mouse(如拖拽)事件变得特别卡。

顺晟科技：

先去学一学如何写Markdown吧

复现：直接新建vue3项目替换app.vue内容。

大哥，你这代码怎么看呀？

大佬们，别光看呀，有点头绪的说说你的看法，说不定就有头绪了呢。

代码：<template> <div class="box" v-for="(val,i) in box" :key="'box'+i" style="position: relative;border:1px dashed rgba(0,0,255,0.3);height: 100px;"> <div v-drag class="item" style=" background-color: coral;cursor: move;width: 50px;height: 50px;position: absolute;left: 50px;top: 20px;border: 1px dashed pink;"> </div> <div @click.stop="add" style="cursor: pointer;position: absolute;bottom: 0;left: 49%;background-color: aquamarine;width: 100px;height: 40px;line-height: 40px;text-align: center;"> add*2000</div> </div> </template> <script> export default { name: 'App', data() { return { box: [0], } }, directives: { "drag": { beforeMount(el) { el.onmousedown = function(event) { event = event || window.event; event.stopPropagation(); let diffX = event.clientX; let diffY = event.clientY; if (typeof el.setCapture !== 'undefined') { el.setCapture(); } let boxW = el.parentNode.offsetWidth; let boxH = el.parentNode.offsetHeight; let itemW = el.offsetWidth; let itemH = el.offsetHeight; let itemX = el.offsetLeft; let itemY = el.offsetTop; let final = ''; document.onmousemove = function(event) { event = event || window.event; event.stopPropagation(); let moveX = event.clientX - diffX + itemX; let moveY = event.clientY - diffY + itemY; if (moveX <= 0) { moveX = 0; } else if (moveX + itemW >= boxW) { moveX = boxW - itemW; } if (moveY <= 0) { moveY = 0; } else if (moveY + itemH >= boxH) { moveY = boxH - itemH; } let showArr = { 'row': [], 'col': [], }; showArr.row.push(moveY); showArr.row.push(moveY + Math.round(itemH / 2)); showArr.row .push(moveY + itemH); showArr.col.push(moveX); showArr.col.push(moveX + Math.round( itemW / 2)); showArr.col.push(moveX + itemW); let moveOrDrag = { 'moveOrDrag': 'move', 'x': moveX, 'y': moveY, 'w': itemW, 'h': itemH, } final = { "x": moveOrDrag.x, "y": moveOrDrag.y, "moveX": moveX - itemX, "moveY": moveY - itemY, } el.style.left = final.x + 'px'; el.style.top = final.y + 'px'; } document.onmouseup = function(event) { event = event || window.event; event.stopPropagation(); this.onmousemove = null; this.onmouseup = null; if (typeof el.releaseCapture != 'undefined') { el.releaseCapture(); } } } } } }, methods: { add() { for (let i = 0; i < 2000; i++) { this.box.push(i) } } } } </script> <style lang="less"></style>