vue拖拽div边框调整大小卡顿如何解决

Vue拖拽div边框调整大小卡顿可能是由于频繁地重新渲染元素造成的。为了解决这个问题，可以考虑使用Vue的指令来实现拖拽调整大小的功能，而不是在模板中直接绑定事件。另外，可以通过debounce或throttle函数来限制触发频率，减少重复渲染的次数，从而提高性能。

以下是一个简单的示例代码：

<div v-dragresize="{handler: onResize}">
  <!-- content -->
</div>

Vue.directive('dragresize', {
  bind: function (el, binding, vnode) {
    let handler = binding.value.handler;
    let debounce = binding.value.debounce || 100;
    let throttle = binding.value.throttle || 0;

    let startX = 0;
    let startY = 0;
    let startW = 0;
    let startH = 0;

    let resizeHandler = function (e) {
      let dx = e.clientX - startX;
      let dy = e.clientY - startY;
      let newW = startW + dx;
      let newH = startH + dy;
      
      if (newW < 0) newW = 0;
      if (newH < 0) newH = 0;

      handler({width: newW, height: newH});
    };

    let mouseDownHandler = function (e) {
      startX = e.clientX;
      startY = e.clientY;
      startW = el.clientWidth;
      startH = el.clientHeight;
      
      document.addEventListener('mousemove', resizeHandler);
      document.addEventListener('mouseup', mouseUpHandler);
    };

    let mouseUpHandler = function (e) {
      document.removeEventListener('mousemove', resizeHandler);
      document.removeEventListener('mouseup', mouseUpHandler);
    };

    el.addEventListener('mousedown', debounce ? _.debounce(mouseDownHandler, debounce) : mouseDownHandler, throttle);
  }
});

new Vue({
  el: '#app',
  data: {
    width: 200,
    height: 200
  },
  methods: {
    onResize: function ({width, height}) {
      this.width = width;
      this.height = height;
    }
  }
});

在这个示例中，我们定义了一个名为`v-dragresize`的指令，并将一个名为`onResize`的方法作为参数传递给它。当用户在元素上按下鼠标时，我们记录下当前的鼠标位置和元素的宽高，并将一个`mousemove`事件绑定到`document`上。在`mousemove`事件处理程序中，我们计算出当前鼠标位置与起始位置之间的差值，并根据差值调整元素的宽高。最后，我们将新的宽高值作为参数传递给`onResize`方法。

注意，我们使用了`_.debounce`函数来限制`mousedown`事件的触发频率。这样可以防止用户快速点击元素时频繁地触发重复渲染。你需要在使用这个指令时将`lodash`库引入你的项目中，或者使用自己的`debounce`函数来代替。