解读vue生命周期

如果看待vue的生命周期呢？

大概可以分为三个阶段

• 创建和挂载阶段
• 更新阶段
• 销毁阶段

首先来看看 创建和挂载阶段

1. new Vue()
2. 加载生命周期函数
3. 调用beforeCreated()
   在这个函数中还使用不了数据，方法，dom操作
4. 读取vue实例的配置，加载数据，方法，监听。。。
5. 调用created（）
   一般可以在这向服务器请求数据
6. 判断是否有el配置项，没有等待$mount()执行获得el
7. 判断是否有template配置项，如果没有使用就使用el.outerHTML当成template
8. 调用render函数，渲染dom
9. 调用beforeMout()
10. 使用渲染好的template代替el
11. 调用mounted()
12. vue实例就可以正常工作了

更新阶段

1. 当数据已经发生变化，数据监听回调被调起
2. 如果dom使用了该属性，调用beforeUpdate()
3. 重新渲染dom
4. 调用updated()
5. 调用$nextTick() 监听具体由什么原因导致dom跟新

销毁阶段

1. 当实例调用$destroy()
2. 实例进入销毁阶段
3. beforeDestroy() 移出监听、移出外部对实例内部的引用
4. 调用destroy()

最后附上vue生命周期图