Vue中的keep-alive的使用·

<keep-alive>的使用

---

使用背景:

• 有些组件不需要多次的init,但是,vue中,每次点击对应的页面,每次都会进行重新的数据请求和页面DOM组件树的渲染
• 用户在点击某个链接跳转到下个页面后,想返回上一个页面的时候,上次的操作痕迹还在.

使用方法:

• 使用vue中的keep-alive组件,组件地址:https://github.com/vuejs/vue/blob/dev/src/core/components/keep-alive.js

一、在router.js路由表中给想要缓存的页面添加上keepAlive.

 {
    
    
                    path: '/403',
                    //  路由实现页面懒加载
                    component: () => import('../components/page/403.vue'),
                    meta: {
    
    
                    //  设置‘保活’
                        keepalive: true,
                        title: '403' 
                    }
                },

二、在相应使用需要缓存的页面引用处使用标签给包起来.

 <transition name="move" mode="out-in">
                    <keep-alive :include="tagsList">
                        <router-view></router-view>
                    </keep-alive>
                </transition>

include和exclude属性的使用

• 先给想要特殊处理的组件添加名字:

export default{
    
    
   name:'home',// 这里的name是用来进行特殊处理的.
   data(){
    
    
   	return{
    
    }
   }
}

• 在使用组件的父组件的<keep-alive> 中添加exclude= ‘home’,这样 home 组件就不会保留,在每次进入的时候都会进行重新的渲染,不保留痕迹.

<keep-alive exclude=‘home’> 
	<router-view></router-view> // 其实如果里面没有内容可以写成单标签
</keep-alive>

• 如果是多个需要进行特殊处理,都添加在exclude后面就可以了.
• 如果只有少数的组件需要特殊处理,可以使用include.

3、使用keep-alive后组件的声明周期

---

• 使用keep-alive后的组件将会多出actived和deactived两个声明周期
• 1、actived: 当该页面组件被第一次加载的时候,会触发,其触发的钩子顺序为 created->mounted->activated
• 2、deactived: 当用户离开该组件页面事触发.