vue生命周期 keep-alive_keepalive声明周期-CSDN博客

本文链接：https://blog.csdn.net/zqlbanzhuan/article/details/108964125

<script src="./base/vue.js"></script>
<body>

<div id="app"> 
    <my-component></my-component>
</div>

<!--定义组件的模板-->
<template id="my-component">
    <div>
        <h1 id="title">我是h1 -- {{msg}}</h1>    
        <input type="text" v-model="msg">
        <button @click="destroy">销毁组件</button>
    </div>
</template>
<script>
    /*
        组件从创建到销毁的一系列过程叫做组件的声明周期。
        vue在整个生命周期里面提供了一些函数，可以在内部实现一些业务逻辑，
        并且这些函数会在一些特定的场合下去执行。（在生命周期的某一个时刻进行触发）
        
        组件的生命周期大体可以分为三个阶段： 初始化、运行中、销毁
        初始化阶段：beforeCreate created beforeMount （render） mounted
        运行中阶段：beforeUpdate updated
        销毁阶段：  beforeDestroy destroyed
    */

    //初始化阶段
    //1.一个组件或者实例的生命周期都是从new开始的
    //2.实例化之后，内部会做一些初始化的事件与生命周期相关的配置
    Vue.component("my-component",{
        template:"#my-component",
        data(){
            return {
                msg:"hello"
            }
        },
        methods:{
            destroy(){
                this.$destroy() //组件销毁方法
            }
        },
        //3.beforeCreate这个钩子函数初始化的时候就会执行
        //但是数据是获取不到的，并且真实dom元素也是没有渲染出来的
        beforeCreate(){
            console.log("beforeCreate...")
            console.log(this.msg,document.getElementById("title"))
        },
        //4.created钩子函数内部可以访问到数据了，但是页面当中真实dom节点还是没有渲染出来
        //在这个钩子函数里面，可以进行相关初始化事件的绑定、发送ajax操作
        //当组件还没有挂载完毕之前，更改数据的话，是不会触发运行时钩子函数的执行！
        created(){
            console.log("created...")
            this.timer = setInterval(()=>{
                console.log("定时器开着哦...")
                this.msg = this.msg+"!"
            },2000)
            // this.msg = 11111111111
            console.log(this.msg,document.getElementById("title"))
        },
        //5.接下来的过程，就是组件或者实例去查找各自的模板结构，然后将其编译成虚拟dom
        //6.beforeMount代表dom马上就要被渲染出来了，但是却还没有真正的渲染出来
        //这个钩子函数与created钩子函数用法基本一致，可以进行相关初始化事件的绑定、发送ajax操作
        beforeMount(){
            console.log("beforeMount...")
            console.log(this.msg,document.getElementById("title"))
        },
        //生成好虚拟dom，然后内部通过render函数将对应的el进行替换，做一个初始化的虚拟dom渲染真实dom过程
        // render(){
        //     console.log("render....")
        // }
        //7.mounted钩子函数是挂载阶段的最后一个钩子函数
        //数据挂载完毕，真实dom元素也已经渲染完成了
        //这个钩子函数内部可以做一些实例化相关的操作   拖拽
        mounted(){
            console.log("mounted...")
            console.log(this.msg,document.getElementById("title"))
        },
        //8.这个钩子函数初始化的不会执行
        //当组件挂载完毕的时候，并且当数据改变的时候，才会立马执行
        //这个钩子函数获取dom的内容是更新之前的内容
        beforeUpdate(){
            console.log("beforeUpdate...",this.msg ,document.getElementById("title").innerHTML)
        },
        //9.这个钩子函数获取dom的内容是更新之后的内容
        //生成新的虚拟dom，新的虚拟dom与之前的虚拟dom进行比对，差异之后，就会进行真实dom渲染。
        //在updated钩子函数里面就可以获取到因diff算法比较差异得出来的真实dom渲染了。
        updated(){
            console.log("updated....", this.msg,document.getElementById("title").innerHTML)
        },
        //10.当组件销毁的时候，就会触发
        //这个钩子函数代表销毁之前，可以做一些善后操作
        //可以清除一些初始化事件、定时器相关的东西。
        beforeDestroy(){
            console.log("beforeDestory....")
            clearInterval(this.timer)
        },
        //11.组件销毁的时候执行
        //watch/数据劫持等功能已经完全丧失 
        destroyed(){
            console.log("destroyed...")
        }
    })

    new Vue().$mount("#app");

  
</script>
</body>

如图
在这里插入图片描述

keep-alive

//当你通过keep-alive标签包裹动态组件的时候，那么动态组件就没有被销毁了，也就不会去执行beforeDestroy钩子函数。
//所以当被keep-alive包裹的一些动态组件的时候，提供了两个钩子函数***，activated deactivated***
//后续只需要把初始化的事件放入到activated里面即可，在deactivated中将初始化的定时器干掉
//通过include属性可以规定到底哪些组件可以被缓存**，默认是缓存所有的动态组件。**

<div id="app">
    <button @click="type=type==='my-a'?'my-b':'my-a'">切换</button>
    <keep-alive>
        <component :is="type"></component>
    </keep-alive>
</div>
<script src="./base/vue.js"></script>
<script>
    Vue.component("my-a",{
        template:"<div>my-a组件</div>",
        created(){
            console.log("my-a-created")
        },
        beforeDestroy(){
            console.log("my-a-beforeDestroy")
        },
        activated(){
            console.log("my-a-activated")
        },
        deactivated(){
            console.log("my-a-deactivated")
        }
    })

    Vue.component("my-b",{
        template:"<div>my-b组件</div>",
        activated(){
            console.log("my-b-activated")
        },
        deactivated(){
            console.log("my-b-deactivated")
        }
    })
    new Vue({
        el:"#app",
        data:{
            type:"my-a"
        }
    })
</script>
</body>