Vue v-model实时更新带来的输入框卡顿问题

Posted 2023-03-24

参考技术A

最近在开发的时候，发现在内容较多的页面上对v-model绑定的输入框上输入内容，页面会变得很卡顿，有些带有动画的元素还会闪动，初步怀疑是v-model实时更新引起整个组件（页面）的 re-render。连续执行了输入“123456789”，通过浏览器开发者工具的Performance观察发现，确实是如此：

对于Vue的响应式，官网上是这么定义的：

但是奇怪的事情发生在v-model上，它的数据更新并不是多次变更和一次来更新DOM，由以上经历可发现。
v-model的实现机制和所说的响应式不太一样，v-model其实是 : value + @input 组合的语法糖，当文本框change时会触发watch与computed函数，属性的变化，走的是defineProperty。而watcher走的是观察者模式，才用到了队列。

参考链接： javascript - Vue异步执行 DOM 更新，但是为什么v-model却是实时更新的？ - SegmentFault 思否

v-model的绑定和一定会触发的事件，导致在用了v-model的情况下，通过防抖节流等方式去优化都是无效的。

不能因为v-model存在这些影响，我们就要避免用它。
组件之间的render是互不影响的，因此可以通过 抽离组件 的方式，来实现组件区域化的render，避免整个大组件render。例如可以将带有输入框的Modal弹框提取为组件，再引入到页面进行结合。

原文地址： https://blog.csdn.net/dobility/article/details/96993951