Vue自带的组件keep-alive

Vue中的所有的组件都是有声明周期的，从出生到消亡，一般要经历8个声明周期或者6个，声明周期就是钩子函数。

出现的原因和使用的场景

如果有一个组件我要重复使用，但是我要重复切换组件，那这个组件就不断的重复消亡和出生，这说上去就很麻烦，然后可能是Vue的开发者也觉得麻烦（这样很浪费内存，就算渲染的是虚拟DOM也很浪费），就出现了<keep-alive></keep-alive>，

 Vue.use(VueRouter);
        var Login  = {
            template:`<div>我是登录页面</div>`,
            beforeCreate(){
                console.log("LoginbeforeCreate")
            },
            created(){
                console.log("Logincreated")
            },
            beforeMount(){
                console.log("LoginbeforeMount")
            },
            mounted(){
                console.log("Loginmounted")
            },
            activated(){
                console.log("Loginactivaed")
            },
            deactivated(){
                console.log("Logindeactivaed")
            },
            beforeDestroy(){
                console.log("LoginbeforeDestory")
            },
            destroyed(){
                console.log("LoginbeforeDestory")
            },
        };
        var Register  = {
            template:`<div>我是注册页面</div>`,
            beforeCreate(){
                console.log("RegisterbeforeCreate")
            },
            created(){
                console.log("Registercreated")
            },
            beforeMount(){
                console.log("RegisterbeforeMount")
            },
            mounted(){
                console.log("Registermounted")
            },
            activated(){
                console.log("Registeractivaed")
            },
            deactivated(){
                console.log("Registerdeactivaed")
            },
            beforeDestroy(){
                console.log("RegisterbeforeDestory")
            },
            destroy(){
                console.log("RegisterbeforeDestory")
            },
        };
        var router = new VueRouter({
            routes:[ // 注意这是一个数组，里面嵌套的是对象，每一个对象代表一个路由
		                {
		                    path:'/login',  // 路由地址
		                    name:'login', // 对这个路由进行命名
		                    component:Login , // 对应的路由要加载的组件
		                },
		                {
		                    path:'/register',  // 路由地址
		                    component:Register  // 对应的路由要加载的组件
		                },
            		]
        })
        new Vue({
            el:'#app',
            data () {
                return{

                }
            },
            router,
            template:`
	        <div>
	             <router-link to = '/login'>登录</router-link>
	             <router-link to = '/register'>注册</router-link>
	             <router-view></router-view>
	        </div>
	      	 `
        })

页面第一次加载时

切换到注册页面时，先创建实例然后准备渲染虚拟DOM，然后销毁上一个路由的组件，然后渲染结束

这样切换路由的话组件会一直创建和销毁，所以就要使用keep-alive
以下都是对上面的代码的部分修改

// 像这样
<keep-alive><router-view></router-view></keep-alive>
// 这样包起来之后切换路由不会执行销毁的声明函数
// 会执行activated和deactivated这两个
// 这样写因为不会销毁组件，所以组件在切换前的状态会保存下来

keep-alive中有两个属性
include

<keep-alive include="register"><router-view></router-view></keep-alive>
// name:register的组件会被缓存下来其他的不会
// 使用include的时候，必须给所有路由管理起来的vue组件都设置name属性，不然，没有name属性的也会被缓存下来，这样就不好实现有条件的筛选

exclude

<keep-alive exclude="register"><router-view></router-view></keep-alive>
// 除了name:register的组件不会被缓存下来
// 我测试不出来 待定