浅谈Vue.js 1.x 和 2.x 实例的生命周期

在vue.js中，在实例化vue之前，它们都是以html的文本形式存在文本编辑器中。当实例化后将经历创建、编译、销毁三个主要阶段。

以下是vue.js 1.x 实例的生命周期图示：

vue.js 1.x 的生命周期钩子

1. init

在实例开始初始化时同步调用。此时数据观测、事件和watcher都尚未初始化。

2. created

在实例化创建之后同步调用。此时实例已经结束解析选项，已建立：数据绑定、计算属性、方法、watcher/事件回调,但是还没有开始dom编译，$el还不存在。

3. beforecompile

在编译开始前调用。

4. compiled

在编译结束后调用。此时所以指令已经生效，因而数据的变化将触发dom更新，但是不保证$el已插入文档。

5. ready

在编译结束和$el第一次插入文档后调用，如在第一次attached钩子之后调用。

6. attached

vm.$el 插入 dom 时调用。

7. detached

在 vm.$el 从 dom 中删除时调用。必须是由指令或实例方法删除，直接操作 vm.$el 不会触发。

8. beforedestroy

在开始销毁实例时调用，此时实例仍然有功能。

9. destroyed

在实例被销毁之后调用，此时所有的绑定和实例的指令已经解绑，所有子实例已经被销毁。

以下是vue.js 2.x 实例的生命周期图示：

vue.js 2.x 的生命周期钩子

1. 废弃ready，新增mounted

在1.x版本中，ready钩子函数的调用时机是第一次插入dom后，但是2.0不一定只执行在浏览器中，也可能在服务端渲染，所以废弃ready并新增mounted钩子函数，mounted钩子函数调用时机在dom树生成之后。

2. 废弃beforecompile

在1.x版本中，调用beforecompile钩子函数是在模板编译前，2.0版本中废弃并用created代替。

3. 废弃compiled

在1.x版本中，调用compiled是在编译模板之后、dom创建之前，2.0版本中废弃并用mounted代替。

4. 废弃attached

在1.x版本中，调用attached是在插入dom时，2.0版本中不一定会创建真实的dom，2.0版本废弃。

5. 废弃detached

在1.x版本中，调用detached是移除dom时，2.0版本中不一定会创建真实的dom，2.0版本废弃。

6. 新增beforecreate

2.0版本中新增beforecreate,在实例初始化之后，数据观察(data observer)和event/watcher事件配置之前被调用。

7. 新增beforemount

2.0版本中新增beforemount，是在watcher之前、模板编译成render方法之后调用，相关render首次被调用。该钩子函数在服务器渲染期间不被调用。

8. 新增beforeupdate

2.0版本中新增beforeupdate,是在dom树生成之前、虚拟dom树生成之后调用，调用条件是这个vm实例已经mounted过。该钩子函数在服务器渲染期间不被调用。

9. 新增updated

2.0版本中新增updated，在dom树生成之后调用，调用条件是这个vm实例已经mounted过。该钩子函数在服务器渲染期间不被调用。

10. 新增activated

2.0版本中新增activated,在dom树生成之后，调用条件是keep-alive组件。该钩子函数在服务器渲染期间不被调用。

11. 新增deactivated

2.0版本中新增deactivated，在vue实例销毁时调用，调用条件是keep-alive组件。该钩子函数在服务器渲染期间不被调用。

以上这篇浅谈vue.js 1.x 和 2.x 实例的生命周期就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。