✝️ 强制 Vue 重新渲染组件的正确方法

有时 Vue 的 reactivity 不符合需求，你需要重新渲染一个组件，或者可能只是想remove当前的 DOM 并 re-render。那么如何让 Vue 以正确的方式重新加载组件呢？

强制 Vue 重新渲染组件的最佳方法是在组件上设置一个:key。当需要重新渲染组件时，只需更改键的值，Vue 就会重新渲染组件。

这称为Key-Changing Technique，这是一个非常简单的解决方案，让我们看看还有其他的解决方案吧。

在这篇文章中，我们将看看解决这个问题的方法，这些方法在 Vue 2 和 Vue 3 中都有效：

• ❌ 方式1：重新加载整个页面
• 🔪 方法2：使用v-if hack
• 👌 方法3：使用 Vue 内置的forceUpdate方法
• ✅ 方法4：使用 Key-Changing Technique 来刷新你的组件

❌ 方式1：重新加载整个页面

reload，这没啥好说了，也不建议这样做。

🔪 方法2：使用v-if hack

一个稍微好一点的解决方案是巧妙地使用v-if指令。

在代码中，将在要重新加载的组件上添加指令：v-if

<template> 
	<MyComponent  v-if="renderComponent" /> 
</template>

script setup 中可以添加 forceRerender方法，然后使用 nextTick:

import {
    nextTick, ref } from 'vue';
const renderComponent = ref(true);

const forceRerender = async () => {
   
  // Remove MyComponent from the DOM
  renderComponent.value = false;

	// Wait for the change to get flushed to the DOM
	await