Vue 的生命周期 （最全周期）

最全生命周期 （一定看到最后）

Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载 Dom、渲染→更新→渲染、销毁等一系列过程，我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过程，就是生命周期。

1.实例、组件通过 new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate 钩子函数，这个时候，数据还没有挂载呢，只是一个空壳，无法访问到数据和真实的 dom，一般不做操作

2. 挂载数据，绑定事件等等，然后执行 created 函数，这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发 updated 函数，在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取

3. 接下来开始找实例或者组件对应的模板，编译模板为虚拟 dom 放入到 render 函数中准备渲染，然后执行 beforeMount 钩子函数，在这个函数中虚拟 dom 已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发 updated，在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取

4. 接下来开始 render，渲染出真实 dom，然后执行 mounted 钩子函数，此时，组件已经出现在页面中，数据、真实 dom 都已经处理好了,事件都已经挂载好了，可以在这里操作真实 dom 等事情…

5. 当组件或实例的数据更改之后，会立即执行 beforeUpdate，然后 vue 的虚拟 dom机制会重新构建虚拟 dom 与上一次的虚拟 dom 树利用 diff 算法进行对比之后重新渲染，一般不做什么事儿

6. 当更新完成后，执行 updated，数据已经更改完成，dom 也重新 render 完成，可以操作更新后的虚拟 dom

7.. 当经过某种途径调用$destroy 方法后，立即执行 beforeDestroy，一般在这里做一些善后工作，例如清除计时器、清除非指令绑定的事件等等

8.组件的数据绑定、监听…去掉后只剩下 dom 空壳，这个时候，执行 destroyed，在这里做善后工作也可以

01 建立前后

<div id="root"></div>
<script type="text/javascript">
var vm=new Vue({
el:"#root",
beforeCreate:function(){//01 建立之前
console.log("before create");
},
created:function(){
console.log("created");//02 建立之后
}
})
</script>

02-1 有模板的渲染情况(按模板渲染)

<div id="root"></div>
<script type="text/javascript">
var vm=new Vue({
el:"#root",
data:{},
beforeCreate:function(){
console.log("before create");
},
created:function(){
console.log("created");
},
template:'<h1>123</h1>',//如果有模板的话模板替换 EL
})
</script>

02-1 无模板的渲染情况(按挂载元素渲染)

<div id="root">{{message}}</div>
<script type="text/javascript">
var vm=new Vue({
el:"#root",
data:{
message:"hello vue!"
},
beforeCreate:function(){
console.log("before create");
},
created:function(){
console.log("created");
},
//如果无模板则用默认的 el 作为挂载点的模板
/*template:'<h1>123</h1>',*/ 
})

03 挂载前后

<div id="root"></div>
<script type="text/javascript">
//备注：没有模板无论是挂载前还是挂载后均显示原有 el 的结构
var vm=new Vue({
el:"#root",
data:{},
beforeCreate:function(){
console.log("before create");
},
created:function(){
console.log("created");
},
beforeMount:function(){//挂载之前
console.log(this.$el);
console.log("before mount")
},
mounted:function(){
console.log(this.$el);
console.log("mounted")
}
})
</script>

04 销毁前后

<div id="root">{{message}}</div>
<script type="text/javascript">
//备注：有模板情情况显示的是模板
var vm=new Vue({
el:"#root",
data:{
message:"未挂载模板之前的显示"
},
template:"<h1>This is h1 template</h1>",
beforeCreate:function(){
console.log("before create");
},
created:function(){
console.log("created");
},
beforeMount:function(){//挂载之前
console.log(this.$el);
console.log("before mount")
},
mounted:function(){
console.log(this.$el);
console.log("mounted")
},
//以下两个在控制台并不能被打印出来，执行完 vm.$destroy()即可以打印
beforeDestroy:function(){
console.log("before destroy");
},
destroyed:function(){
console.log("destoryed");
}
})
</script>

05 更新前后

<div id="root">{{message}}</div>
<script type="text/javascript">
//备注：有模板情情况显示的是模板
var vm=new Vue({
el:"#root",
data:{
message:"This is a message"
},
//template:"<h1>This is h1 template</h1>",
beforeCreate:function(){
console.log("before create");
},
created:function(){
console.log("created");
},
beforeMount:function(){//挂载之前
console.log(this.$el);
console.log("before mount")
},
mounted:function(){
console.log(this.$el);
console.log("mounted")
},
//以下两个在控制台并不能被打印出来，执行完 vm.$destroy()即可以打印
beforeDestroy:function(){
console.log("before destroy");
},
destroyed:function(){
console.log("destoryed");
},

//beforeUpdate 与 updated 并不能打印输出，只有在控制台输入 vm.$data.message="新值后"才可以看到结
果
//更新前

beforeUpdate:function(){
console.log("beforeUpdate");
},

//更新后

updated:function(){
console.log("updated")
}
})