各位观众，晚上好！欢迎来到今天的“Vue Router 源码揭秘”特别节目。今天我们要聊的是 Vue Router 中一个看似不起眼，但威力无穷的属性：router-view 的 key。
你可能觉得 key 嘛，不就是 v-for 里用的，帮助 Vue 识别列表中元素的嘛？ 没错，但 key 在 router-view 身上，戏份可就丰富多了。它直接影响到组件的复用和销毁，甚至关系到你的用户体验。
准备好了吗？咱们这就开始！
router-view 的本质：一个智能插座
首先，我们要理解 router-view 的本质。你可以把它想象成一个智能插座。它会根据当前路由，动态地往里面“插”不同的组件。
<template>
<div>
<router-view></router-view>
</div>
</template>上面这段代码，router-view 会根据不同的路由，渲染不同的组件。比如，当路由是 /home 时，它可能渲染 Home.vue；当路由是 /about 时，它可能渲染 About.vue。
组件复用策略：Vue 的省钱之道
Vue 为了性能优化，默认情况下会尽量复用组件。也就是说，如果从 /home 切换到 /about，Vue 发现 Home.vue 和 About.vue 都是 router-view 的孩子，它会尝试复用其中一些 DOM 元素，甚至复用整个组件实例。
这种复用策略，在很多情况下是好事，可以避免不必要的组件创建和销毁，提升性能。但是，有些时候，我们 不希望 组件被复用。
key 的登场：打破复用，重获新生
这个时候，key 就派上用场了。我们可以通过给 router-view 设置不同的 key，来强制 Vue 创建新的组件实例。
<template>
<div>
<router-view :key="$route.fullPath"></router-view>
</div>
</template>这段代码中，我们将 router-view 的 key 设置为 $route.fullPath，也就是完整的路由路径。这意味着，每次路由发生变化，key 都会改变，Vue 就会认为这是一个新的组件，从而创建一个新的组件实例。
key 的影响：组件的生死簿
key 对组件的影响，可以用一张表格来总结：
key 是否改变 |
组件实例行为 |
|---|---|
| 不变 | 组件实例被复用，beforeRouteUpdate 和 beforeRouteEnter 钩子会被调用 (如果定义了) |
| 改变 | 组件实例被销毁，新的组件实例被创建，beforeRouteEnter 钩子会被调用 |
key 的应用场景：对症下药
那么，在什么情况下，我们需要给 router-view 设置 key 呢？
-
需要重新渲染的表单页
假设你有一个表单页，用户填写完数据后，点击提交。然后，用户又想回到这个表单页，重新填写。如果你不设置
key，Vue 可能会复用之前的组件实例，导致表单数据依然存在。这显然不是我们想要的。<template> <div> <router-view :key="$route.fullPath"></router-view> </div> </template>这样，每次进入表单页，都会创建一个新的组件实例，表单数据也会被重置。
-
需要重新加载数据的列表页
假设你有一个列表页，列表数据是通过 API 获取的。当用户从其他页面返回到这个列表页时，你可能希望重新加载数据，确保列表是最新的。
<template> <div> <router-view :key="$route.fullPath"></router-view> </div> </template>同样，通过设置
key，我们可以强制 Vue 创建新的组件实例，从而触发组件的created或mounted钩子，重新加载数据。 -
需要销毁组件状态的详情页
假设你有一个详情页，详情数据是通过 API 获取的，并且在组件内部维护了一些状态。当用户离开详情页时，你可能希望销毁这些状态，避免它们影响其他页面。
<template> <div> <router-view :key="$route.fullPath"></router-view> </div> </template>通过设置
key，我们可以确保每次离开详情页，组件实例都会被销毁，状态也会被重置。
源码剖析：Vue Router 的秘密武器
说了这么多，我们来看看 Vue Router 的源码，看看 key 是如何影响组件的复用和销毁的。
Vue Router 实际上并没有直接处理 key 属性，而是将这个任务交给了 Vue 的 keep-alive 组件。keep-alive 组件会根据 key 属性，决定是否缓存组件实例。
在 router-view 的渲染过程中，Vue Router 会根据当前路由，获取对应的组件。然后，它会将这个组件传递给 keep-alive 组件。
// Vue Router 源码 (简化版)
render(h, { parent, data }) {
const route = parent.$route
const matched = route.matched
const component = matched[matched.length - 1].components.default
// ...
return h(component) // 渲染组件
}如果 keep-alive 组件发现 key 发生了变化，它会销毁之前的组件实例，并创建一个新的组件实例。如果 key 没有发生变化，它会直接复用之前的组件实例。
代码演示：key 的魔力
为了更好地理解 key 的作用，我们来做一个简单的代码演示。
首先，我们创建一个 Counter.vue 组件，用于显示一个计数器。
<template>
<div>
<h1>Counter: {{ count }}</h1>
<button @click="increment">Increment</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0,
};
},
methods: {
increment() {
this.count++;
},
},
created() {
console.log('Counter created');
},
destroyed() {
console.log('Counter destroyed');
},
};
</script>然后，我们在 App.vue 中使用 router-view 组件，并设置不同的 key。
<template>
<div>
<router-link to="/counter1">Counter 1</router-link>
<router-link to="/counter2">Counter 2</router-link>
<router-view :key="$route.fullPath"></router-view>
</div>
</template>
<script>
export default {};
</script>最后，我们在 router.js 中配置路由。
import Vue from 'vue';
import VueRouter from 'vue-router';
import Counter from './components/Counter.vue';
Vue.use(VueRouter);
const routes = [
{ path: '/counter1', component: Counter },
{ path: '/counter2', component: Counter },
];
const router = new VueRouter({
routes,
});
export default router;现在，当我们从 /counter1 切换到 /counter2 时，你会发现控制台输出了 "Counter created" 和 "Counter destroyed"，这意味着 Vue 创建了一个新的 Counter.vue 组件实例，并销毁了之前的实例。
如果我们去掉 router-view 的 key 属性，你会发现只有第一次进入 /counter1 或 /counter2 时，才会输出 "Counter created"。切换路由时，组件实例会被复用，不会被销毁。
最佳实践：key 的正确用法
在使用 key 属性时，有一些最佳实践需要注意：
-
选择合适的
key值key的值应该能够唯一标识组件实例。一般来说，$route.fullPath是一个不错的选择。但是，在某些情况下，你可能需要使用其他值，比如route.params.id。 -
避免不必要的
key变更频繁地改变
key的值，会导致组件实例频繁地创建和销毁，影响性能。因此，只有在确实需要重新创建组件实例时，才应该改变key的值。 -
理解
keep-alive的作用keep-alive组件可以缓存组件实例，避免不必要的创建和销毁。如果你希望在切换路由时，保留组件的状态，可以使用keep-alive组件。<template> <div> <router-link to="/counter1">Counter 1</router-link> <router-link to="/counter2">Counter 2</router-link> <keep-alive> <router-view :key="$route.fullPath"></router-view> </keep-alive> </div> </template>这样，即使
key发生了变化，组件实例也不会被立即销毁，而是会被缓存起来。当再次进入该路由时，组件实例会被重新激活。
总结：key 的威力与责任
总而言之，router-view 的 key 属性是一个强大的工具，可以帮助我们控制组件的复用和销毁。但是，它也需要谨慎使用。只有理解了 key 的作用，才能正确地使用它，避免不必要的性能问题。
希望今天的讲座能够帮助你更好地理解 Vue Router 的 key 属性。记住，技术就像一把双刃剑，用好了能披荆斩棘，用不好也能伤到自己。
感谢各位的收看，我们下期再见！
补充说明：更深入的 key 理解
虽然我们通常使用 $route.fullPath 作为 key，但理解其背后的原理至关重要。key 的真正目的是告诉 Vue 如何区分不同的 router-view 插槽的内容。
-
key与组件身份: 想象一下，你有两个router-view，每个负责渲染不同的路由组件。如果没有key，Vue 可能会误认为它们是相同的，导致渲染错误。key就像每个router-view的身份证，确保 Vue 能正确识别它们。 -
动态路由与
key: 在动态路由（例如/users/:id）中，如果仅仅使用$route.fullPath作为key，当id发生变化时，key也会变化，导致组件重新渲染。这可能不是我们想要的，特别是当组件内部有复杂的状态需要维护时。在这种情况下，可以使用route.params.id作为key，只在id发生变化时才重新渲染组件。 -
key与keep-alive的协同:keep-alive组件会缓存组件的 DOM 结构，以便在下次渲染时快速恢复。key告诉keep-alive何时应该缓存新的组件，何时应该使用缓存的组件。如果key保持不变，keep-alive会直接使用缓存的组件，避免重新渲染。
一个更复杂的例子：嵌套路由与 key
假设你有一个嵌套路由结构：
/users
/users/list
/users/profile/:id在 Users.vue 组件中，你使用 router-view 渲染 UsersList.vue 或 UserProfile.vue。
// Users.vue
<template>
<div>
<h2>Users Page</h2>
<router-view :key="$route.fullPath"></router-view>
</div>
</template>在这种情况下，当从 /users/list 切换到 /users/profile/123 时，Users.vue 组件的 router-view 会重新渲染，因为 $route.fullPath 发生了变化。
但是，如果你希望 Users.vue 组件保持不变，只重新渲染其内部的 router-view，你可以使用一个常量作为 key。
// Users.vue
<template>
<div>
<h2>Users Page</h2>
<router-view :key="'users-page'"></router-view>
</div>
</template>这样，只有当 Users.vue 组件本身被卸载时，才会重新渲染。其内部的 router-view 会根据嵌套路由的变化而变化。
深入 beforeRouteEnter，beforeRouteUpdate 和 beforeRouteLeave
当组件被复用时，beforeRouteEnter 不会被调用（因为它只在组件创建时调用）。取而代之的是 beforeRouteUpdate，这个钩子允许你在路由发生变化但组件被复用时执行一些逻辑。beforeRouteLeave 在组件离开时调用，无论组件是否被销毁。
beforeRouteEnter: 只在组件创建时调用。无法访问this，因为组件尚未创建。beforeRouteUpdate: 在路由变化，但组件被复用时调用。可以访问this。beforeRouteLeave: 在离开路由时调用。可以访问this。
总结的总结：key 的艺术
router-view 的 key 属性看似简单，实则蕴含着深刻的 Vue 组件生命周期和路由管理的思想。掌握 key 的用法，可以让你更好地控制组件的复用和销毁，提升应用的性能和用户体验。希望今天的讲座能够帮助你更好地理解和使用 key 属性，成为一名真正的 Vue 大师！