有时候&＃xff0c;依赖 Vue 响应方式来更新数据是不够的&＃xff0c;相反&＃xff0c;我们需要手动重新渲染组件来更新数据。或者&＃xff0c;我们可能只想抛开当前的DOM&＃xff0c;重新开始。那么&＃xff0c;如何让Vue以正确的方式重新呈现组件呢&＃xff1f;
强制 Vue 重新渲染组件的最佳方法是在组件上设置:key。 当我们需要重新渲染组件时&＃xff0c;只需更 key 的值&＃xff0c;Vue 就会重新渲染组件。
这是一个非常简单的解决方案。
当然&＃xff0c;你可能会对其他方式会更感兴趣&＃xff1a;
- 简单粗暴的方式&＃xff1a;重新加载整个页面
- 不妥的方式&＃xff1a;使用
v-if - 较好的方法&＃xff1a;使用Vue的内置
forceUpdate方法 - 最好的方法&＃xff1a;在组件上进行
key 更改
简单粗暴的方式&＃xff1a;重新加载整个页面
这相当于每次你想关闭应用程序时都要重新启动你的电脑。
这种方式或许有用&＃xff0c;但这是一个非常糟糕的解决方案&＃xff0c;不要这样做&＃xff0c;我们来看看更好的方法。
不妥的方式&＃xff1a;使用 v-ifv-if指令&＃xff0c;该指令仅在组件为true时才渲染。 如果为false&＃xff0c;则该组件在DOM中不存在。
来看看&＃xff0c;v-if 是怎么工作的&＃xff0c;在template中&＃xff0c;添加v-if指令&＃xff1a;
在script中&＃xff0c;使用nextTick的方法
上面的过程大致如下&＃xff1a;
- 刚开始
renderComponent设置为true&＃xff0c;因此渲染 my-component 组件 - 当我们调用
forceRerender时&＃xff0c;我们立即将renderComponent设置为false - 我们停止渲染
my-component&＃xff0c;因为v-if指令现在计算结果为false - 在
nextTick方法中将renderComponent设置回true - 当
v-if指令的计算结果为true时&＃xff0c;再次渲染my-component
在这个过程中&＃xff0c;有两个部分比较重要
首先&＃xff0c;我们必须等到nextTick&＃xff0c;否则我们不会看到任何变化。
在Vue中&＃xff0c;一个 tick 是一个DOM更新周期。Vue将收集在同一 tick 中进行的所有更新&＃xff0c;在 tick 结束时&＃xff0c;它将根据这些更新来渲染 DOM 中的内容。如果我们不等到next tick&＃xff0c;我们对renderComponent的更新就会自动取消&＃xff0c;什么也不会改变。
其次&＃xff0c;当我们第二次渲染时&＃xff0c;Vue将创建一个全新的组件。 Vue 将销毁第一个&＃xff0c;并创建一个新的&＃xff0c;这意味着我们的新my-component将像正常情况一样经历其所有生命周期-created&＃xff0c;mounted等。
另外&＃xff0c;nextTick可以与 promise 一起使用:
不过&＃xff0c;这并不是一个很好的解决方案&＃xff0c;所以&＃xff0c;让我们做 Vue 想让我们做的
较好的方法&＃xff1a;forceUpdate 方法
这是解决这个问题的两种最佳方法之一&＃xff0c;这两种方法都得到了Vue的官方支持。
通常情况下&＃xff0c;Vue 会通过更新视图来响应依赖项中的更改。然而&＃xff0c;当我们调用forceUpdate时&＃xff0c;也可以强制执行更新&＃xff0c;即使所有依赖项实际上都没有改变。
下面是大多数人使用这种方法时所犯的最大错误。
如果 Vue 在事情发生变化时自动更新&＃xff0c;为什么我们需要强制更新呢&＃xff1f;
原因是有时候 Vue 的响应系统会让人感到困惑&＃xff0c;我们认为Vue会对某个属性或变量的变化做出响应&＃xff0c;但实际上并不是这样。在某些情况下&＃xff0c;Vue的响应系统根本检测不到任何变化。
所以就像上一个方法&＃xff0c;如果你需要这个来重新渲染你的组件&＃xff0c;可能有一个更好的方法。
有两种不同的方法可以在组件实例本身和全局调用forceUpdate&＃xff1a;
// 全局
import Vue from &＃39;vue&＃39;;
Vue.forceUpdate();// 使用组件实例
export default {methods: {methodThatForcesUpdate() {// ...this.$forceUpdate();// ...}}
}
重要提示&＃xff1a;这不会更新任何计算属性&＃xff0c;调用forceUpdate仅仅强制重新渲染视图。
最好的方法&＃xff1a;在组件上进行 key 更改
在许多情况下&＃xff0c;我们需要重新渲染组件。
要正确地做到这一点&＃xff0c;我们将提供一个key属性&＃xff0c;以便 Vue 知道特定的组件与特定的数据片段相关联。如果key保持不变&＃xff0c;则不会更改组件&＃xff0c;但是如果key发生更改&＃xff0c;Vue 就会知道应该删除旧组件并创建新组件。
正是我们需要的&＃xff01;
但是首先&＃xff0c;我们需要绕一小段路来理解为什么在Vue中使用key。
为什么我们需要在 Vue 中使用 key
一旦你理解了这一点&＃xff0c;那么这是了解如何以正确方式强制重新渲染的很小的一步。
假设我们要渲染具有以下一项或多项内容的组件列表&＃xff1a;
- 有本地的状态
- 某种初始化过程&＃xff0c;通常在
created或mounted钩子中 - 通过jQuery或普通api进行无响应的DOM操作
如果你对该列表进行排序或以任何其他方式对其进行更新&＃xff0c;则需要重新渲染列表的某些部分。 但是&＃xff0c;不会希望重新渲染列表中的所有内容&＃xff0c;而只是重新渲染已更改的内容。
为了帮助 Vue 跟踪已更改和未更改的内容&＃xff0c;我们提供了一个key属性。 在这里使用数组的索引&＃xff0c;因为索引没有绑定到列表中的特定对象。
const people &＃61; [{ name: &＃39;Evan&＃39;, age: 34 },{ name: &＃39;Sarah&＃39;, age: 98 },{ name: &＃39;James&＃39;, age: 45 },
];
如果我们使用索引将其渲染出来&＃xff0c;则会得到以下结果&＃xff1a;
- {{ person.name }} - {{ index }}
// Outputs
Evan - 0
Sarah - 1
James - 2
如果删除Sarah&＃xff0c;得到&＃xff1a;
与James关联的索引被更改&＃xff0c;即使James仍然是James。 James会被重新渲染&＃xff0c;这并不是我们希望的。
所以这里&＃xff0c;我们可以使用唯一的 id 来作为 key
const people &＃61; [{ id: &＃39;this-is-an-id&＃39;, name: &＃39;Evan&＃39;, age: 34 },{ id: &＃39;unique-id&＃39;, name: &＃39;Sarah&＃39;, age: 98 },{ id: &＃39;another-unique-id&＃39;, name: &＃39;James&＃39;, age: 45 },
];- {{ person.name }} - {{ person.id }}
在我们从列表中删除Sarah之前&＃xff0c;Vue删除了Sarah和James的组件&＃xff0c;然后为James创建了一个新组件。现在&＃xff0c;Vue知道它可以为Evan和James保留这两个组件&＃xff0c;它所要做的就是删除Sarah的。
如果我们向列表中添加一个person&＃xff0c;Vue 还知道可以保留所有现有的组件&＃xff0c;并且只需要创建一个新组件并将其插入正确的位置。这是非常有用的&＃xff0c;当我们有更复杂的组件&＃xff0c;它们有自己的状态&＃xff0c;有初始化逻辑&＃xff0c;或者做任何类型的DOM操作时&＃xff0c;这对我们很有帮助。
所以接下来看看&＃xff0c;如果使用最好的方法来重新渲染组件。
更改 key 以强制重新渲染组件
最后&＃xff0c;这是强制Vue重新渲染组件的最佳方法&＃xff08;我认为&＃xff09;。
我们可以采用这种将key分配给子组件的策略&＃xff0c;但是每次想重新渲染组件时&＃xff0c;只需更新该key即可。
这是一个非常基本的方法
export default {data() {return {componentKey: 0,};},methods: {forceRerender() {this.componentKey &＃43;&＃61; 1; }}
}
每次forceRerender被调用时&＃xff0c;我们的componentKey都会改变。当这种情况发生时&＃xff0c;Vue将知道它必须销毁组件并创建一个新组件。我们得到的是一个子组件&＃xff0c;它将重新初始化自身并“重置”其状态。
如果确实需要重新渲染某些内容&＃xff0c;请选择key更改方法而不是其他方法。
作者&＃xff1a;前端小智
链接&＃xff1a;https://juejin.im/post/5e34de97e51d454d5177b7a4
来源&＃xff1a;掘金
更多的学习资料&＃xff0c;请看这里&＃xff1a;
http://www.jnshu.com/login/1/36856070?source&＃61;zhihu-article-wmf
京公网安备 11010802041100号