100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > vue 页面渲染数据量大 导致input输入框卡顿的问题

vue 页面渲染数据量大 导致input输入框卡顿的问题

时间:2019-05-25 12:21:37

相关推荐

vue 页面渲染数据量大 导致input输入框卡顿的问题

解决方法: 把数据量大的那部分抽离成单个组件去渲染

Vue的异步响应式与v-model

对于Vue的响应式,官网上是这么定义的:

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

但是奇怪的事情发生在v-model上,它的数据更新并不是多次变更和一次来更新DOM,由以上经历可发现。

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

解决方法

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

不能因为v-model存在这些影响,我们就要避免用它。

把数据量大的那部分抽离成单个组件去渲染

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。