修改不相关的数据时,Vue.JS 2.0变慢

Question

假设我在Vue.JS中有一个v-model绑定到String数据属性的输入字段,以及一个与该第一个String完全无关的随机数列表.

data: {
  input: "",
  randoms: []
}

<input type="text" v-model="input">
<p v-for="random in randoms" v-text="random"></p>

当我把两者放在同一个Vue中时,我在输入字段中输入时会看到一个巨大的减速,因为看起来Vue在每个输入事件后重新评估每个列表条目的DOM,尽管它们实际上彼此无关.

然而,当我移动v-for到我绑定randoms到道具的子组件时,我没有经历这样的减速

有没有一种方法可以在不使用子组件的情况下实现第二小提琴的表现？

Answer 1

有没有一种方法可以在不使用子组件的情况下实现第二小提琴的表现？

没有.

每当模板的任何依赖性发生变化时,Vue都必须重新运行整个组件的渲染函数,并将新的virtualDOM与新的虚拟目标进行区分.它不能做到这一点的这个或那个只有模板的一部分,并跳过休息.因此,每次inpot值改变时,重新渲染整个virutalDOM.

由于你的v-for产生了相当多的元素,这可能需要几百毫秒,足以让你在键入时显而易见.

将模板的重要部分提取到自己的组件中实际上是优化它的"官方"方式.

正如亚历克斯所解释的那样,v-model.lazy可能会改善这种情况,但不会解决问题的核心问题.