前言
书接上文，本次介绍另两种方法
- Vue 内置的
forceUpdate方法 - Key 更改
Vue 内置的 forceUpdate 方法
Vue 官方文档所推荐的，内置的 forceUpdate 方法是手动更新组件的最佳方式之一。
通常，Vue 会更新视图以响应依赖项的变化。即使没有任何依赖关系发生变化，我们仍然可以通过调用 forceUpdate 方法强制更新发生，这会强制组件实例重新呈现。
然而，这违背了整个响应式系统的初衷；因此，不建议将其作为方法。我们错误地认为 Vue 会响应特定属性或变量的变化，但响应式系统并不总按我们想的工作。
调用 forceUpdate 方法：
export default {
methods: {
ForcesUpdateComponent() {
// ...
this.$forceUpdate();
// ...
}
}
}
这个方法只存在于组件实例上，使用 Vue 3 的 Composition API 来调用它：
import { getCurrentInstance } from 'vue';
const methodThatForcesUpdate = () => {
// ...
const instance = getCurrentInstance();
instance.proxy.forceUpdate();
// ...
};
我们可能想要使用 forceUpdate 方法的唯一情况是当我们使用响应式 API 创建非响应式的组件的状态时。
然而，考虑到 Vue 的响应式系统，这是可选的。
Key 更改
使用 key 更改，我们提供一个 key 属性来通知 Vue 特定组件绑定特定数据。如果 key 保持不变，组件就不会改变。但是，如果 key 发生变化，Vue 知道它需要删除以前的组件并生成一个新组件。
为什么 Vue 需要 key ？
让我们进一步说明 key 属性的具体作用以及我们需要它的原因。
在排序或更新该列表时，我们不想重新呈现列表中的所有内容；我们只想更新我们需要更新的列表部分。为实现这一点，我们将提供一个 key 属性来帮助 Vue 跟踪已更改的内容和未更改的内容。由于数组的索引与我们列表中的特定项目无关，因此在这种情况下使用它不会有任何作用。
key变更 被认为是强制 Vue 重新渲染组件的最好方式。
<template>
<MyComponent :key="componentKey" />
</template>
<script>
import { ref } from 'vue';
const componentKey = ref(0);
const forceRender = () => {
componentKey.value += 1;
};
</script>
在上面的代码片段中，我们将向 MyComponent 添加一个 key 属性，然后在需要重新渲染 MyComponent 时更改 key 。
Vue2：
export default {
data() {
return {
componentKey: 0,
};
},
methods: {
forceRender() {
this.componentKey += 1;
}
}
}
每当 forceRender 被调用时， componentKey 的值就会改变。发生这种情况时，Vue 会意识到它必须销毁组件并初始化一个新组件。我们还将得到一个子组件，它将重置其状态并重新初始化自身。
结论
理想情况下，我们应该能够利用 Vue 响应式系统并避免使用这种粗暴的方法。但在某些情况下，我们必须强制组件重新渲染。
在本文中，我们介绍了四种强制 Vue 组件重新渲染的不同方法，包括热重载、 v-if 、 forceUpdate 方法，和 Key变更。
全文完
谢谢！
开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 19 天
