vue页面中存在大量数据时，input输入搜索框在输入时卡动问题解决

问题场景：在vue页面中渲染五百多条数据后，在前端实现关键字搜索的功能，数据加载和页面渲染都很快，只是在输入框打字或删除时卡顿（数据量有二三十条时无明显卡顿），输入框使用iview的Input的search属性输入框

问题排除：

1、首先去除掉对v-model绑定值的监听事件，问题没能解决

2、然后将iview的Input组件换成原生input输入框，问题依然存在

3、去除掉输入框的查询事件，让该输入框没有任何功能，问题还是没能解决

由于页面数据量的多少不同，输入框卡顿的程度也不同，所以就陷入了寻找输入框和数据量关系的无解之路上，在走投无路时开始各种毫无根据的操作，直到我删除了v-model时，发现输入框终于不卡顿了，这时才想起v-model的实现原理

v-model实现原理：

官网对vue的响应式描述是：

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

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

解决办法：

1、可以不用v-model，用输入框的事件来获取值进行操作

2、将数据展示部分拆分成子组件引入，数据处理可以在父组件

建议使用第二种方法，我们不能因为v-model存在这些问题就不去用它

最后，我还是没能从v-model的那些十分专业的原理描述中理解它为什么会受数据的影响？属性变化到底是什么在变？至此我也没找到这些问题的答案，希望看到这篇文章的大佬能帮助我答疑解惑