假设我在Vue中有一个输入字段.JS绑定到一个字符串数据属性,以及一长串与第一个字符串完全无关的随机数.
data: {
input: "",
randoms: []
}
<input type="text" v-model="input">
<p v-for="random in randoms" v-text="random"></p>
当我将两者放在同一个Vue中时,在输入字段中键入内容时,我看到速度大大减慢,因为Vue似乎在每个输入事件之后重新判断每个列表项的DOM,尽管它们实际上与彼此无关.
https://jsfiddle.net/5jf3fmb8/2/
然而,当我将v-for
移动到一个子组件,并将randoms
绑定到一个props 时,我不会经历这样的减速
https://jsfiddle.net/j601cja8/1/
有没有一种方法可以在不使用子组件的情况下实现第二小提琴的性能?