Vue实例的生命周期之图示详解

Vue实例的生命周期图示详解

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。从vue实例的创建，运行，销毁期间，总是伴随着各种各样的事件，这些事件统称为生命周期。

Vue生命周期经历哪些阶段：

总体来说：初始化、运行中、销毁
详细来说：开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程
以下是Vue生命周期函数图示：

可以看到在vue一整个的生命周期中会有很多钩子函数提供给我们在vue生命周期不同的时刻进行操作，钩子函数如下:

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

详细情况如下：

实例通过new Vue() 创建出来之后会初始化Vue自身带的事件和生命周期，然后进入beforeCreate函数阶段，此时，数据data还没有挂载到vm对象，无法访问到数据data和真实的dom挂载元素el
只有在挂载数据data，绑定事件等之后，才会进入created函数阶段，此时可以使用数据data，也可更改数据data，但是在这里更改数据不会触发updated钩子函数。注：此时挂载元素el还不存在
判断对象是否有挂载元素el选项。如果有的话就继续向下编译，如果没有el选项，则停止编译，也就意味着停止了生命周期，直到在该vue实例上手动挂载，即调用vm.$mount(el)。
然后判断template参数选项，如果vue实例对象中有template参数选项，则将其作为模板template编译成虚拟dom放入到render函数中准备渲染。如果没有template选项，则将挂载元素el的外部HTML作为模板template编译。
模板编译之后进入beforeMount函数阶段，给Vue实例添加el成员，并替换掉挂载的DOM元素
进入mounted函数阶段，此时可以进行真实的DOM操作了
当data中的数据发生变化就会进入beforeUpdate函数阶段，会出发相对应的组件重新渲染，触发updated函数
当调用vm.$destroy()时，会进入beforedestroy函数阶段
Vue实例指示的所有东西都会解绑，事件监听器被移除，子实例被销毁，进入destroy函数阶段，此时一个Vue实例的生命周期结束。

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue实例生命周期函数</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app"></div>
    <script>
        //生命周期函数就是Vue实例在某一个时间点会自动执行的函数
        var vm=new Vue({
            el:"#app",
            template:"<div>{{test}}</div>",
            data:{
                test:"hello"
            },
            computed:{
                
            },
            beforeCreate:function(){
                console.log("----beforeCreate---创建前状态---")
                console.log(this.$el)
               
            },
            created:function(){
                console.log("----created---创建完状态--")
                console.log(this.$el)
                
            },
            beforeMount:function(){
                console.log("----beforeMount---挂载前状态--")
                console.log(this.$el)
                
            },
            mounted:function(){
                console.log("---mounted---挂载完状态--")
                console.log(this.$el)
                
            },
            
            beforeUpdate:function(){
                console.log("----beforeUpdate---更新前状态--")
                console.log(this.$el)
                
            },
            updated:function(){
                console.log("---updated---更新完状态--")
                console.log(this.$el)
                
            },
            beforeDestroy:function(){
                console.log("---beforeDestroy---销毁前状态--")
                console.log(this.$el)
               
            },
            destroyed:function(){
                console.log("---destroyed---销毁完状态--")
                console.log(this.$el)
               
            },
        })
    </script>
</body>
</html>

代码显示：

页面显示的数据和挂载的数据一致：

修改数据之后：

数据更新之后页面显示和输入一致：

当经过某种途径调用$destroy方法后，在实例销毁之前立即执行beforeDestroy，在实例销毁之前调用。在这一步，实例仍然完全可用。

以上是我对Vue生命周期的一点理解，欢迎大家指正修改！