Vue的生命周期

通俗说就是Vue实例从创建到销毁的过程，就是生命周期

8个

beforeCreate创建前-->created创建完成-->beforeMount挂载前-->mounted挂载完成-->beforeUpdate更新前-->updated更新完成-->beforeDestroy销毁前-->destroyed销毁完成

beforeCreate(创建前)

组件的选项对象还未创建，el 和 data 并未初始化,所以什么也没有

created(创建完成)

完成了data 数据的初始化，data内的数据可以打印到

beforeMount(挂载前)

此时页面的html标签dom节点都加载完成,不过数据和相关事件未加载在网页上

mounted(挂载完成)

即数据和相关事件成功加载在网页上..

beforeUpdate(更新前)

在数据更新之前被调用，发生在虚拟DOM重新渲染和打补丁之前，可以在该钩子中进一步地更改状态，不会触发附加地重渲染过程

updated(更新完成)

在由于数据更改导致地虚拟DOM重新渲染和打补丁只会调用，调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作，然后在大多是情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环，该钩子在服务器端渲染期间不被调用

beforeDestroy(销毁前)

在实例销毁之前调用，实例仍然完全可用，

这一步还可以用this来获取实例，

一般在这一步做一些重置的操作，比如清除掉组件中的定时器和监听的dom事件

Destroyed(销毁完成)

在实例销毁之后调用，调用后，所以的事件监听器会被移出，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用

实例测试

<h1>测试生命周期 8个</h1>
    <div id="app">
        <h3>{{mess}}</h3>
        <button @click="change">Change</button>
    </div>

var vm=new Vue({
        el:"#app",
        data:{
            mess:"hello vue"
        },
        methods:{
            change:function(){
                this.mess="hello world";
            }
        },
        beforeCreate(){ //相当于beforeCreate:function()
            console.log('--创建前--');
            console.log(this.mess);
            console.log(this.$el);
        },
        created(){
            console.log('--创建完成--');
            console.log(this.mess);
            console.log(this.$el);
        },
        beforeMount(){
            console.log('--挂载前--');  //dom元素放入,但变量未赋值
            console.log(this.mess);
            console.log(this.$el);
        },
        mounted(){
            console.log('--挂载完成--');//值、事件等都解析完毕
            console.log(this.mess);
            console.log(this.$el);
        },
        beforeUpdate(){
            console.log('--更新前--');  //数据改变触发
            console.log(this.mess);
            console.log(this.$el);
        },
        updated(){
            console.log('--更新后--');
            console.log(this.mess);
            console.log(this.$el);
        },
        beforeDestroy(){
            console.log('--销毁前--');  
            console.log(this.mess);
            console.log(this.$el);
        },
        destroyed(){
            console.log('--销毁完成--');  
            console.log(this.mess);
            console.log(this.$el);
        },
    })

效果图

在这里插入图片描述更新由于是在虚拟dom更新所以本质上看不到区别销毁完成后就undefined了

Vue的生命周期讲解就ok了🤭