VUE中页面加载了数据较多时，input输入框卡顿

问题：一个页面，上方input输入框用v-model绑定输入内容，用于搜索， 下方一个不分页表格，一次性加载列表所有数据，大概有三百多条数据。

在展示上没有问题，但是在input输入框输入时，发现很卡顿。

问题排查：首先看了下代码，逻辑上没什么问题，去网上查了一下，说是v-model实时更新引起整个页面render造成的，根据网上提示F12打开控制台，找到performance monitor，

然后在输入框连续输入一串内容， 可以看到下方的CPU达到了90%甚至99%。

看了网上说的解释，有一点不太明白，但我理解应该是，使用了v-model时，在每次v-model绑定的数据发生变化时，都会引起整个页面重新渲染，页面数据重新加载，

所以比如在我这个页面中，每次v-model绑定的内容改变，都会重新加载一下表格的列表数据，而每次数据几百条，就造成了输入框的卡顿。

所以在有v-model的情况下对页面进行防抖节流都是不生效的。

解决办法：把页面中的内容分离成组件，比如把输入框抽离成组件，组件之间的render是不影响的。