Vue生命周期
概述
Vue生命周期函数主要包含8个部分，按顺序分别是：
1. beforeCreate（创建前）
2. created （创建后）
3. beforeMount (载入前)
4. mounted （载入后）
5. beforeUpdate （更新前）
6. updated （更新后）
7. beforeDestroy（ 销毁前）
8. destroyed （销毁后）
生命周期函数详细介绍
beforeCreate()
Vue创建前，此阶段为实例初始化之后，this指向创建的实例，数据观察，数据监听事件机制都未形成，不能获得DOM节点。data，computed，watch，methods 上的方法和数据均不能访问，注：data和methods的数据都还未初始化。
可在此处安装全局事件总线。
如下所示
const vm = new Vue({ el: "#root", data: { n:1 }, computed: { n1(){ return n+1 } }, beforeCreate(){ console.log(this) console.log(this.n) console.log(this.n1) debugger } });
created()
Vue创建后，此阶段为实例初始化之后，data、props、computed的初始化导入完成， 注：要调用methods中的方法，或者操作data中的数据，最早只能在Created中操作。此时能访问 data computed watch methods 上的方法和数据，初始化完成时的事件写这个里面，但此阶段还未挂载DOM。
const vm = new Vue({ el: "#root", data: { n:1 }, methods: { n1(){ return this.n+1 } }, created(){ console.log(this.n) console.log(this.n1()) console.log(this.$el) debugger } });
beforeMount()
Vue载入前，阶段执行时，模板已经在内存中编译好了，但是未挂载到页面中。在这一阶段，虽然页面还是旧的，但vue挂载的根节点已经创建，下面vue对DOM的操作将围绕这个根元素继续进行。
<body> <div id="root"> <h1>{{n}}</h1> <button @click="n++">点我+1</button> </div> </body> <script> const vm = new Vue({ el: "#root", beforeMount(){ console.log(this.$el) debugger }, }); </script>
mounted()
Vue载入后，(完成创建vm.$el，和双向绑定)； 只要执行完mounted,就表示整个Vue实例已经初始化完成了，此时组件已经脱离里了创建阶段， 进入到了运行阶段。
(使用较多，反正我使用较多- -，因为此阶段组件算是正式完成了构建，通常用来做初始化，比如一些数据结构较为复杂，不想做响应式的全局变量)
beforeUpdate()
Vue更新前， 当执行beforeUpdate的时候，页面中显示的数据还是旧的，此时data数据是最新的，页面尚未和最新数据数据保持同步。但是DOM中的数据会改变，这是vue双向数据绑定的作用，可在更新前访问现有的DOM，如手动移出添加的事件监听器。
<body> <div id="root"> <h1>{{n}}</h1> <button @click="n++">点我+1</button> </div> </body> <script> const vm = new Vue({ el: "#root", data:{ n:1 }, beforeUpdate(){
console.log("beforeUpdate...") console.log(this.n) debugger }, }); </script>
updata()
更新完成后。
注意：不要再此函数中操作数据，否则会陷入死循环
beforeDestroy()
组件销毁前，会先执行beforeDestroy。此时所有date和methods以及过滤器和指令都是处于可用状态，还没有真正的执行销毁过程。
<body> <div id="root"> <h1>{{n}}</h1> <button @click="$destroy()">销毁</button> </div> </body> <script> const vm = new Vue({ el: "#root", data:{ n:1 }, beforeDestroy(){ console.log("即将销毁。。。") console.log(this.n) debugger }, }); </script>
destroyed()
Vue销毁后, 当执行到destroyed函数的时候，组件已经完全销毁，此时组件中的所有的数据，方法，指令，过滤器...都已经销毁
