ToB企服应用市场:ToB评测及商务社交产业平台

标题: 【Vue】面经基础版-缓存组件 [打印本页]

作者: 罪恶克星 时间: 2024-6-11 13:01
标题: 【Vue】面经基础版-缓存组件
一、根本用法

题目
从面经列表点到详情页，又点返回，数据重新加载了 → 希望回到原来的位置

原因
当路由被跳转后，原来所看到的组件就被销毁了（会执行组件内的beforeDestroy和destroyed生命周期钩子），重新返回后组件又被重新创建了（会执行组件内的beforeCreate,created,beforeMount,Mounted生命周期钩子），所以数据被加载了
解决方案
使用 keep-alive 把原来的组件给缓存下来
keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不运动的组件实例，而不是销毁它们。
keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件中。
长处：
在组件切换过程中把切换出去的组件保留在内存中，防止重复渲染DOM，
淘汰加载时间及性能消耗，进步用户体验性。
App.vue

<template>
<div class="h5-wrapper">
<!--
包裹了keep-alive 一级路由匹配的组件都会被缓存
Layout组件 Detail组件，都会被缓存
-->
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
</template>

复制代码

题目：
缓存了全部被切换的组件

二、keep-alive的三个属性

① include ：组件名数组，只有匹配的组件会被缓存
② exclude ：组件名数组，任何匹配的组件都不会被缓存
一样平常使用include，exclude大概会导致性能题目，由于组件大概太多了，将来页面就卡死了，所以一样平常会配合max使用
③ max ：最多可以缓存多少组件实例

export default {
// 这个才是组件名
name: "LayoutPage",
};

复制代码

App.vue

<template>
<div class="h5-wrapper">
<keep-alive :include="[keepArr]">
<router-view></router-view>
</keep-alive>
</div>
</template>
<script>
export default {
name: "h5-wrapper",
data () {
return {
keepArr: ['LayoutPage']
}
}
};
</script>

复制代码

三、额外的两个生命周期钩子

keep-alive的使用组件会触发两个生命周期函数
activated 当组件被激活（使用）的时间触发 → 进入这个页面的时间触发
deactivated 当组件不被使用的时间触发 → 脱离这个页面的时间触发
组件缓存后就不会执行组件的created, mounted, destroyed 等钩子了
但是组件第一次被触发的时间照旧会执行的
所以其提供了actived 和deactived钩子，帮我们实现业务需求。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)