假设我在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/

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

推荐答案

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

简短回答

长话短说

每当模板的依赖项发生变化时,Vue必须重新运行整个组件的渲染功能,并将新的virtualDOM与新的virtualDOM进行区分.它不能仅对模板的thisthat部分执行此操作,而跳过其余部分.因此,每次输入值更改时,整个virutalDOM都会重新呈现.

由于你的v-for产生了相当多的元素,这可能需要几个100毫秒,足够在你打字时引起注意.

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

正如亚历克斯所解释的,v型.懒惰可能会稍微改善情况,但并不能解决问题的核心.

Vue.js相关问答推荐

正在try 访问vutify中v-select(ItemProps)的嵌套json值

有没有办法将react 键作为值传递给由 v-for 创建的 v-model

vue js如何将布尔值传到数据库

v-slot: activator 中 {attrs} 参数的作用是什么?

已分配计算(computed)属性,但它没有设置器

如何在 vue 组件中定义变量? (Vue.JS 2)

vue 模板中无法识别 pug 语言

将检测外部点击自定义指令从 Vue 2 迁移到 Vue 3

如何为 Vue 项目设置 lint-staged?

如何根据生产或开发模式读取不同的 .env 文件?

错误:您可能需要额外的加载器来处理这些加载器的结果.

webpack模块解析失败意外字符'@'

vuex: unknown getter: user

请求正在进行时显示加载器

如何在 NPM 上创建和发布 Vuejs 组件

未捕获的类型错误:c.querySelectorAll 不是函数

如何在 Vue 中转发 $refs

为什么 Vue.js 使用 VDOM?

Vuex Mutation 正在运行,但组件在 vue 开发工具中手动提交之前不会更新

在 Vue 单元测试中单击按钮时触发表单提交