背景：
- 在组件化开发模式下，我们会把整个项目拆分成很多组件，然后按照合理的方式组织起来,达到预期效果
- 因为页面是多组件组织起来的,这时候自然就存在组件之间的切换问题，Vue中也提出了动态组件的概念,使得我们可以更好的实现组件之间的切换效果 , 但是vue中组件的切换实际是组件本身重新创建和销毁的过程,在某些场景下我们并不希望组件被重新创建重新渲染
实际场景: 用户操作 列表页-->详情页-->列表页 此时需要达到的预期效果是用户从详情页切换回列表页的时候原来的页面保持不变,而不是重新渲染,此时就需要在用户从列表页切换到详情页的时候对原来的列表页进行缓存
本文主要介绍Vue中组件的切换以及缓存解决方法
一.组件的切换方式
方式一: 使用 v-if和v-else
// 变量flag为true时显示comp-a组件 ,相反则显示comp-b组件
方式二:使用内置组件:
方式三 : vue-router
// 路由规则:
{
path: '/login',
name: 'login',
component: () => import('../views/login.vue')
},
{
path: '/register',
name: 'register',
component: () => import('../views/register.vue')
},
// 需要展示组件的位置:
二.组件缓存: keep-alive
根据需求对组件缓存,而不是销毁重建,正如本文开篇举例的实际场景
1.keep-alive定义
activated 和 deactivated 这两个生命周期钩子函数将会被对应执行 。
2.keep-alive的生命周期
activated
在 keep-alive 组件激活时调用 该钩子函数在服务器端渲染期间不被调用
deactivated
在 keep-alive 组件停用时调用 该钩子在服务器端渲染期间不被调用
被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated
使用 keep-alive 会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在 activated 阶段获取数据，承担原来 created 钩子函数中获取数据的任务。
注意： 只有组件被 keep-alive 包裹时，这两个生命周期函数才会被调用，如果作为正常组件使用，是不会被调用的，以及在 2.1.0 版本之后，使用 exclude 排除之后，就算被包裹在 keep-alive 中，这两个钩子函数依然不会被调用！另外，在服务端渲染时，此钩子函数也不会被调用。
设置了缓存的组件：
- 第一次进入：
beforeRouterEnter ->created->…->activated->…->deactivated> beforeRouteLeave - 后续进入时：
beforeRouterEnter ->activated->deactivated> beforeRouteLeave
三.keep-alive使用方法
1.Props
include - 字符串或数组,正则表达式。只有名称匹配的组件会被缓存-->include的值为组件的name。
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
max - 数字。最多可以缓存多少组件。
2.搭配
3.搭配
需配置路由meta信息的keepAlive属性
keep-alive代码可以结合v-if进行包裹，如果meta中的keepAlive为true进行缓存，否侧不进行缓存，这样可以更灵活一些
{
path: '/login',
name: 'login',
component: () => import('../views/login.vue')
meta:{
keepAlive : true // login组件会被缓存
}
},
{
path: '/register',
name: 'register',
component: () => import('../views/register.vue'),
meta:{
keepAlive : false // register组件不会被缓存
}
},
4.清除缓存组件
// beforeRouteLeave()钩子
// 判断是否要到详情页
beforeRouteLeave(to, from, next) {
if (to.path === "/goods_detail") {
from.meta.keepAlive = true;
} else {
from.meta.keepAlive = false;
// this.$destroy()
}
next();
}
到此这篇关于有关vue 组件切换,动态组件,组件缓存的文章就介绍到这了,更多相关vue组件切换,动态组件,组件缓存内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！