Vue生命周期

从vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件。而这些事件称为生命周期。

每个Vue实例在被创建的时候都要经过一系列的初始化过程，例如，需要数据监听，编译模板，实例挂载到dom并在数据变化

时更新Dom等，同时在这个过程中也会运行一系叫做生命周期钩子的函数，这给了用户在不同阶段添加自己代码的机会。

created\mounted\updated\destroyed

vue实例的生命周期

1、当我们引入vue.js之后，vue就会成为全局变量，我们可以通过new Vue创建一个vue实例

2、初始化事件和生命周期函数（没有执行）

3、生命周期函数:beforeCreated() ,在实例初始化之后，data和methods创建之前被调用

那么表明配置项都没有执行，el、data、methods、computed，都无法访问

4、初始化，注入、校验，创建配置对象

5、生命周期函数：created(),配置对象创建之后被调用

表示data和methods以及compute都可以调用，但是el没有，挂载阶段还没有开始

created()生命周期函数是最早可以操作data里面数据的地方。

6、是否指定el配置项，如果没有配置，是否调用vm.$mount(el)。

也就是说，要么配置了el配置项

要么调用vm.$mount(el)

7、是否指定template选项

8、如果配置了template，则是用template替代挂载点

如果没有配置template，则将el外部的HTML作为template编译

9、生命周期函数beforeMount()

挂载开始之前被调用，那么表示还没有把数据真正放到模板中

在这里还可以看到原始的模板数据，不如{{xxx}}

10、创建vm.$el并用其替代el，用编译好的内容（指令和插值表达式替换后的内容）替代el挂在店里面的模板内容

11、生命周期函数mounted()，挂载完成之后调用，可以获取到渲染到页面的真实数据，mounted是我们用的最多的生命周期函数，用来发送一些异步请求

12、经过上面的一系列过程，脱离了创建阶段，挂载完毕

13、生命周期函数,beforeUpdate(),实时监听数据变化（双向监听），一旦data的数据发生改变，就会被调用

这里还没有进行数据的更新

14、虚拟DOM重新渲染并应用更新

15、生命周期函数:updated()，更新完成之后，dom和date同步

16、当我们调用vm.$destroy()函数，，进行销毁阶段

17、生命周期函数beforeDestroy(),销毁之前

18、解除绑定销毁子组件以及事件监听器，简单来说：销毁Vue实例对象，以及销毁vue配置对象

主要生命周期函数分类:

创建/初始化阶段的生命周期函数(4个函数)

　　beforeCreated() 配置对象创建之前

　　created() 配置对象创建之后

　　beforeMount() 挂载之前

　　mounted() 编译之后的模板挂载到DOM之后

运行/更新阶段生命周期函数(2个函数)

　　beforeUpdated() 更新date的数据之前

　　updated() 更新date的数据之后

销毁阶段的生命周期函数(2个函数)

　　beforeDestroy() 销毁vue实例和配置项实例之前

　　destroyed() 销毁vue配置对象之后

有如下例子：测试beforeCreated()

            //在vue实例里面定义生命周期函数
            beforeCreate(){
                console.log(this.msg);//这个内容是不会获取得到的是undeifned
            },

测试created()

            //配置对象创建之后调用，可以调用吃了el之外的所有内容
            created () {
                console.log(this.msg);
                console.log(this.reserveMs);
            }

测试before mounted

            //挂载之前，编译的模板还没有替换挂载点的内容
            beforeMount () {
                console.log('执行挂载之前的内容');
                var txt = document.getElementById("app").innerText;
                console.log(txt);
            }

测试mounted，挂载完成函数

            //挂载完成
            mounted () {
                console.log('执行挂载完成的内容');
                var txt = document.getElementById("app").innerText;
                console.log(txt);
            }

测试beforeUpdate，更新数据之前，注意更新数据之前是dom界面的数据没有发生改变，但是data内存中的数据已经发生了改变

            //更新数据之前
            beforeUpdate () {
                console.log('更新数据之前的数据');
                var txt = document.getElementById("app").innerText;
                console.log(txt);
                console.log(this.msg);
            }

测试updated，更新数据之后完全同步了，data和dom是最新的数据

            updated () {
                console.log('更新数据之后的数据');
                var txt = document.getElementById("app").innerText;
                console.log(txt);
                console.log(this.msg);
            }