Vue生命周期--Vue实例创建过程详解

每个Vue实例在被创建时都要经过一系列的初始化过程--例如，需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做 生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

生命周期图示：

一共有八个生命周期钩子函数：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed；

创建阶段有四个：beforeCreate、created、beforeMount、mounted、

更新阶段有两个：beforeUpdate、updated、

销毁阶段有两个：beforeDestroy、destroyed、

创建阶段的四个生命周期函数，从Vue创建只能执行一次； 

更新阶段可以执行很多次；

生命周期钩子函数都是自动执行的，不需要我们手动操作；

函数介绍：

beforeCreate函数：

• 类型：Function
• 详细：在实例初始化之后，进行数据侦听和事件/侦听器的配置之前同步调用。
• 图示：

• beforeCreate函数在“事件和生命周期初始化”之后自动执行；
• 事件和生命周期初始化也不是我们能控制的，是自动进行的；
• 用法：

    var vm = new Vue({
            data:{
                a:1
            },
            beforeCreate(){
                console.log("a is:" + this.a)
            },
            // => a is:undefined

• 此时因为还没有开始进行data状态捕获， 所以beforeCreate函数是访问不了data里的状态的；

 create函数：（常用）

• 类型：Function
• 详细：在实例创建完成后被立即同步调用。在这一步中，实例已完成对选项的处理，意味着以下内容已经被配置完毕：数据侦听（data里的状态需要被监听）、计算属性、方法、事件/侦听器的回调函数。然而，挂载阶段还没开始，且 $el  property目前尚不可用。
• 图示：

• 注入和反应这个阶段做的事：在这里其中有一件事情是给Vue实例绑上data，当一个Vue实例被创建时，它将data对象中所有的property加