路由组件缓存

最新推荐文章于 2024-09-10 16:28:36 发布

xiao奥

最新推荐文章于 2024-09-10 16:28:36 发布

阅读量640

点赞数

文章标签：缓存 vue.js 前端

本文链接：https://blog.csdn.net/liangaoyun/article/details/123084332

版权

通过在Vue.js前端应用中使用`keep-alive`组件进行路由缓存，可以提高性能，避免组件频繁创建和销毁。利用`include`和`exclude`属性控制要缓存的组件，并使用`activated`和`deactivated`两个新钩子函数来处理组件的激活和失去激活状态。

摘要由CSDN通过智能技术生成

路由不停的切换时，消失的页面会不停的创建和销毁，所有代码重新执行，效率不高

所以要把组件缓存到内存，优化性能，

只需要 用keep-alive, 包裹切换的挂载点即可

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

在keep-alive的时候, 使用include/exclude区别缓存哪些组件

include 包含哪些组件名需要缓存

 <!--默认缓存全部  使用include后缓存Find组件 -->
<keep-alive include="Find">
    <router-view></router-view>
</keep-alive>

exclude ==不缓存哪些名字的组件

 <!--exclude  不缓存My Part组件 -->
<keep-alive exclude="My,Part">
    <router-view></router-view>
</keep-alive>

使用keep-alive后, 新增了2个钩子函数

组件不执行销毁/初始化创建的方法了, 如何知道组件被失去激活/激活呢

activated () {
    console.log("发现音乐-组件激活");
},
deactivated () {
	console.log("发现音乐-组件失去激活");
}

当前页面显示就表示组件激活不是当前页面是表示失去激活

关注