从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 () {
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);
}
标签：el,生命周期,console,log,vue,周期函数,Vue,挂载 From： https://www.cnblogs.com/yansunda/p/18369390