Vue - 强制重新渲染组件 🦌

在 Vue 3 中，通过在 <router-view> 上设置一个动态 key 属性，可以在每次路由变化时强制重新渲染组件。这是因为 Vue 的虚拟 DOM 机制会基于 key 属性来判断是否需要重新创建一个新的组件实例

key 属性的作用

key 属性在 Vue 的虚拟 DOM 中扮演着重要角色，它主要用于高效地更新虚拟 DOM。当 key 发生变化时，Vue 会认为这是一个新的元素，从而会重新创建该元素，而不是复用旧的元素

工作原理

当在 <router-view> 上设置一个动态 key，例如使用 $route.fullPath，每次路由变化时，$route.fullPath 也会变化，从而导致 key 属性变化。Vue 识别到 key 变化后，就会销毁旧组件实例，并创建一个新的组件实例

<template>
  <router-view :key="$route.fullPath"></router-view>
</template>

在这个示例中，每次路由变化时，$route.fullPath 都会变化，从而使 key 属性变化。Vue 会认为这是一个全新的 <router-view> 组件实例，从而重新渲染该组件

更详细的解释

1. 初始渲染：
   • 当应用程序初次加载时，<router-view> 会根据当前路由渲染对应的组件，假设路由路径为 /home，key 可能是 '/home'。
2. 路由变化：
   • 当路由从 /home 变化到 /about 时，$route.fullPath 变为 '/about'，<router-view> 的 key 也随之变化。
3. 组件重新渲染：
   • Vue 检测到 key 发生变化，认为这是一个新的元素，因此会销毁与 '/home' 相关的组件实例，并创建与 '/about' 相关的新组件实例

总结

通过设置动态 key 属性，你可以强制 Vue 在路由变化时重新渲染组件。这样做的好处是，可以确保组件在路由变化时被完全卸载和重新加载，适用于需要在路由变化时重置组件状态或执行清理操作的场景