Vue-生命周期

一、概念

每个Vue实例或组件从创建到显示再到废弃的过程就是vue的生命周期。很多时候我们希望能在这个过程中执行一些操作，于是就有了生命周期钩子。生命周期钩子函数允许我们在实例不同阶段执行各种操作，便于我们更好地控制和使用实例。

二、详解

放图:

Vue的生命周期分为三个阶段，8个钩子函数

研究方向：(1)data中的数据是否能够获取。(2)真实DOM是否能获取。

注意：钩子函数不要写成箭头函数，箭头函数可能会改变this指向

生命周期初始化阶段

1. beforecreate（实例被创建之前）

• 不能获取数据，也不能获取真实DOM
• 它可以在new Vue（）创建实例出来的时候，做初始化事件和生命周期做准备，这些都是内部完成的。
• 总结：这个钩子函数在项目中可以不用

2.create（实例被创建完成之后）

• 可以获取数据，不能获取真实DOM
• （1）初始化data选项，对data选项中的数据做数据劫持（用ES5的Object.defineProperty做getter和setter操作）
• （2）对数据做计算、转换、修改等操作
• 总结：数据请求，然后将请求的结果赋值给我们的数据。

3.beforeMount（组件挂载之前）

• 可以获取数据，不能获取真实DOM
• （1）组件挂载之前的准备工作

判断是否有el，若有el，再去判断是否有template。若有template，通过render函数将jsx渲染为VDOM，若没有el，可以使用$mount手动挂载。若没有template选项，使用outHTML手动写一个。

• （2）可以对数据做计算、转换、修改等操作
• 总结：数据请求，然后将请求的结果赋值给我们的数据。这个钩子函数让它处理内部事务，可以不用它。

4.mounted(组件挂载结束后)

表示组件挂载结束，也就是生成的html已经插入页面结束了

• 数据可以获取，真实DOM也可以获取
• 可以对数据做计算、转换、修改等操作

总结：在项目中，

• 数据请求：created/mounted
• DOM操作：mounted

面试题：

1. vue中数据请求往哪里写？ 

            * 数据请求初始化阶段都可以写

            * 数据的修改写在后三个钩子

            * 一般往mounted里面写







生命周期更新阶段（数据改变触发）

5.beforeUpdate (更新之前)

• 数据改变，重新生成vdom，然后通过diff算法得到patch补丁对象，自动完成任务

• 总结：不操作

6.updated（更新结束）

更新结束，那么肯定已经获取真实DOM,也就是说我们可以做真实dom操作了

总结：这个阶段使用updated就行

组件的销毁阶段（组件被销毁触发）

外部销毁：开关【 v-if 】

内部销毁：调用   this.$destroy()

作用：自动删除事件以及监听

注意： 内部销毁组件会被删除，但是组件的真实dom外壳会被遗留

     * beforeDestroy

     * destroyed

这两个钩子函数没有差别，任意用一个即可