v-model实时更新带来的render问题

每次修改都会引起 render

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

可以看到会连续触发9个事件，每个事件中都含有 Vue 的响应事件，其中就包含了 render 的操作：

因此频繁输入导致事件过多排队而阻塞，页面频繁重绘导致卡顿。

vue 的异步响应式与 v-model

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

Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。

但是奇怪的事情发生在 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 弹框提取为组件，再引入到页面进行结合。