vue2的生命周期

生命周期

什么叫做vue的生命周期

一个vue的实例在它创建到销毁的一系列过程，就叫做生命周期

什么是生命周期钩子函数

在vue实例的生命周期中，某个特定时刻会自动触发的函数，就叫做生命周期的钩子函数

---

 需要发送数据请求的话，一般是选择在 created或mounted这两个阶段

第一次加载页面会 触发 beforeCreate， created， beforeMount， mounted这四个钩子

Vue生命周期的作用是什么？

它的生命周期中有多个时间钩子，让我们在控制整个VUe实例的过程时更容易形成好的逻辑

vue⽣命周期主要分为四个阶段，⼋个过程

四个阶段

• Create 创建
• Mount 挂载
• Update 更新
• Destory 销毁

⼋个过程

• Create之前和Create之后
• Mount之前和Mount之后
• Update之前和Update之后
• Destory之前和Destory之后

---

 分析过程

1. 第⼀个过程  beforeCreate  实例创建初始化前

• 注意：⽆法通过实例vm访问到data中的数据、methods中的⽅法

2. 第⼆个过程 Created  初始化后

• 注意：可以通过实例vm访问data中的数据，methods中配置的⽅法，但拿不到真实的dom对象和this.$el。

3. 第三个过程 beforMount  挂载前（编译完成，未挂载）

• 注意：vue会将el对应的模版添加到vm.$el中去，模板编译完成但还没有挂载上去，数据和模块还未进行结合，此时⻚⾯还是旧的 ，拿不到真实的dom对象和this.$el。

4. 第四个过程 Mounted  挂载完成

• 注意：vue将真实DOM挂载到⻚⾯上。拿到真实的dom对象和this.$el

5. 第五个过程 beforUpdate 更新之前

• 注意： 页面显示的数据还是旧的，但此时data的数据是新的，页面尚未和最新数据保持同步

6. 第六个过程 Updated 数据更新完毕

• 注意：页面和最新数据保持同步，更新完再渲染，谁改变渲染谁，不是整个DOM树

7. 第七个过程  beforDestry   销毁前

• 注意：销毁操作需要⼿动调⽤，需要调⽤vm.$destroy()

8. 第⼋个过程  destroyed  销毁后 

• 注意：数据和dom的关联已经断开，在这个生命周期函数中是访问不到真实的dom结构的

总结 

1、beforeCreate 此时$el、data 的值都为undefined

2、Created创建之后，此时可以拿到data的值，但是$el依旧为undefined

3、mount之前，$el的值为“虚拟”的元素节点

4、mount之后，mounted之前，“虚拟”的dom节点被真实的dom节点替换，并将其插入到dom树中，于是在触发mounted时，可以获取到$el为真实的dom元素()

5.created与mounted调用区别：

• created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
• mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。