每个实例从创建到销毁,其实就是经历了生命周期。正如我们自己，生老病死，也是一个生命周期，当我们需要给我们生命添加颜色的时候，就出现了钩子函数。
实例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>生命周期</title>
</head>
<body>
<div id="app">
<p>{{msg}},我要去打怪兽！！！</p>
</div>
<script src="./base/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
// template:"<div>我是大头儿子<div/>",
// render(createElemnt){
// return createElemnt('h1',"我是蜘蛛侠")
// },
data:{
msg:"我是迪迦凹凸曼",
},
beforeCreate(){
console.log("befroeCreate创建前...")
console.log(this.$el)
console.log(this.$data)
},
created(){
console.log("created创建完毕...")
console.log(this.$el)
console.log(this.$data)
},
beforeMount(){
console.log("befroeMount挂载前...")
console.log(this.$el)
console.log(this.$data)
},
mounted(){
console.log("mounted挂载完毕...")
console.log(this.$el)
console.log(this.$data)
},
beforeUpdate: function () {
console.log("beforeUpdate更新之前...")
console.log(this.$el)
console.log(this.$data)
},
updated(){
console.log("Updated更新后...")
console.log(this.$el)
console.log(this.$data)
},
beforeDestroy(){
console.log("beforeDestroy销毁前...")
console.log(this.$el)
console.log(this.$data)
},
destroyed(){
console.log("destroyed销毁完成...")
console.log(this.$el)
console.log(this.$data)
}
})
</script>
</body>
</html>
生命周期
一.初始化阶段
1.一个组件或实例的生命周期都是从new开始的
2.实例化之后，内部会对初始化事件与生命周期做相关的配置
3.befroeCreate()钩子函数之前，此时该实例内的所有东西都还没有创建，所以数据(%E5%92%8Cdom()
el)节点都不能获取到
输出结果
avatar
4.在created的时候钩子函数挂载完毕，数据已经和data属性进行绑定,所以可以获取到数据，并可以对获取到的数据进行更改，但是真实的dom节点还是获取不到，
avatar
通常我们会在created钩子函数中进行，事件的绑定和ajax异步请求数据,因为created在创建完毕会进行数据劫持，添加getter和sertter
Vue 响应式核心就是，setter 的时候会收集依赖，getter 的时候会触发依赖更新
5.在created和beforeMount钩子函数间的生命周期
首先，会判断是否存在$el选项,如果有的话就继续向下编译，如果没有el选项，则停止编译，也就意味着停止了生命周期。
没有el，就调用vm.$mount(el)[也就是动态引入了el]，
其次，判断是组件还是vue实例，是否添加了template组件
这就考虑到tempate与outerHTML的优先级的问题了
avatar
avatar
注：template选项>outer Html
其实在我们添加或者判断template时还有一个render()
它是以createElement作为参数，然后做渲染，而且可以直接嵌入JSX。
avatar
acatar
注：综合排名优先级：render函数>template选项>outer Html
6.befroeMount()钩子函数代表真实的dom马上就渲染出来，可以看到{{msg}}并没有渲染出来，所以页面并中没有生成真实的dom
avatar
生成好虚拟的dom后，可以用render函数替换对应的el，渲染成真实dom结构
7.mounted(),出现真实dom结构，初始化最后的钩子函数,
数据挂载完毕，所以挂载元素中显示的是msg的值
这个钩子函数dom获取的数据内容是更新前的内容
acatar
二、运行中阶段
总体流程
acatar
8.befroeUpdate钩子函数不会自己执行，当vue发现data中的数据发生变化(修改真实dom)，会触发对应组件的重新渲染，当数据改变后调用beforeupdata
acatar
acatar
9.Update()钩子函数，当数据更改后调用befroeUpdate钩子函数后，当页面渲染完成后调用updated
获取的内容是更新后的数据，生成虚拟的dom，与之前的虚拟dom进行对比，通过DIss算法
重新进行render（）
acatar
注：这点可以通过在updated钩子函数中使用alert打断程序运行，可以看到页面中并没有更新，而且通过官方流程图也可以看出。
三、销毁阶段
10.beforeDestroy和destroyed钩子函数间的生命周期。
befroeDestroy()销毁前，用来销毁定时器以及初始化的事宜
destroyed()销毁后，双向数据绑定，组件的监听被移除，所有的子实例都会被销毁，但是dom结构还是存在的，但是不能渲染了
acatar
注：销毁后不能对dom修改而影响view了
总结
其实整个流程都可以从vue官网图示，看的的出来，其中还有还多的细节没有讲出来，有不足的地方，请各位大神多多建议.希望本文会对你有所帮助。
官网图示
acatar
