Javascript Vue.JS 2.0修改不相关数据时速度较慢

假设我在Vue.JS中有一个输入字段，

v-model

绑定到字符串数据属性，以及一长串与第一个字符串完全无关的随机数

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

绑定到一个道具时，我不会遇到这种减速

---

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

最短、最简单的答案：将

v-model

更改为

v-model.lazy

当我将两者放在同一个Vue中时，在输入字段中键入时，我看到速度大大减慢，因为Vue似乎在每个输入事件之后重新评估每个列表项的DOM，尽管它们实际上彼此无关

注意，OnceFor样本仍然像疯了一样发出嘎嘎声，尽管实际上不再是反应性的。我对Vue的理解还不够透彻，不能说这是有意还是无意

const示例={
data（）{return{input:，randoms:[]}，
已创建（）{this.newRandoms（）}，
方法：{
newRandoms（）{this.randoms=Array（50000.fill（）.map（（）=>Math.random（））}
}
}
新Vue({
el:“vue根”，
data（）{return{example:'lazy model'}}，
组成部分：{
LazModel:{…示例，模板：“#惰性模型”
},
OnceFor:{…示例，模板：“#一次用于”
},
InlineTemplate:{…示例，模板：“#内联模板”，
组成部分：{
Welp：{
道具：['randoms']
}
}
}
}
})

按钮，
输入，
div{
保证金：2倍；
}

{{name}}








{{index}:{{random}

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

简短回答 没有

长话短说 每当模板的任何依赖项发生更改时，Vue都必须重新运行整个组件的渲染功能，并将新的virtualDOM与新的virtualDOM区分开来。它不能仅对模板的这一部分或那一部分执行此操作，而跳过其余部分。因此，每次输入值更改时，都会重新呈现整个virutalDOM

由于您的v-for正在生成相当多的元素，这可能需要几个100毫秒，足以在您键入时引起注意

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

---

正如Alex所解释的，v-model.lazy可能会稍微改善这种情况，但不能解决问题的核心。

可以使用去抖动，从而减少

输入变量的更新频率。更新提琴：谢谢！上面评论中的惰性模型和去盎司过滤器确实有助于提高性能，但是它们并没有完全消除不必要的DOM更改，只是将它们减少了很多。（比较和的控制台输出）。因此，专用子组件似乎仍然是最佳选择。我还注意到，即使使用了once修饰符，速度也很慢，我不确定整个行为是否现在没有被窃听，我应该提交一份报告……在我对Alex的答案输入评论时，我没有看到这一点，但我想我当时得出了相同的结论。因此，从现在起，当您有很多不经常更改的对象（即聊天中的消息）时，我将使用子组件