vue的组件缓存

-  问：咱们配置了 vue-router 后，页面组件看不见，是销毁了还是隐藏了呢？
   答：销毁了
 

-  问：频繁销毁创建，是否导致性能不高？
   答：是的

-  问：怎么解决组件频繁销毁创建的痛点？
   答：组件缓存。缓存下来的组件是不会被销毁的。使用 <keep-alive>标签，包裹频繁切换的组件

<keep-alive>
    <router-view></router-view>
</keep-alive>

-  问：我不想所有组件都缓存下来，怎么实现？
   答：匹配缓存。可以给 <keep-alive>标签，添加 include属性 或者 exclude属性，添加这两项属性前，一定要给组件设置好 name别名！

// include 只包含
// exclude 只排除
<keep-alive exclude="ArticleDetailPage">
    <router-view></router-view>
</keep-alive>

// 在 new VueRouter() 里给路由规则命名
const router = new VueRouter({
    routes: [
		{ 
            path: '...', 
            component: ArticleDetailPage, 
            name: 'ArticleDetailPage'  // 通过name命名
        }
	]
})

- 问：组件缓存后内容不刷新了，我如果还想刷新页面怎么办？

答：使用 activated / deactivated 钩子函数解决。当组件被 <keep-alive> 管理时，就会多出两个生命周期钩子，activated / deactivated

// activated 激活 - 展示这个组件时触发
// deactivated 失活 - 离开这个组件时触发