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

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

下面是Vue.js 1.x实例的生命周期图：

vue.js1.x的生命周期钩子。

1.初始化

当实例开始初始化时同步调用。此时，数据观察、事件和观察者尚未初始化。

2.创造

实例化创建后同步调用。此时，实例已经完成解析选项，并且已经建立了数据绑定、计算属性、方法和Watcher/事件回调，但是DOM编译还没有开始，而且$el还不存在。

3.编译前

编译开始前调用。

4.编辑

编译结束时调用。此时，所有指令都已生效，因此数据的更改将触发DOM更新，但不能保证$el已经插入到文档中。

5.准备好的

编译结束后调用，并且$el第一次插入文档，例如在第一个附加的钩子之后。

6.附上

虚拟机时调用。$el被插入到DOM中。

7.分离的

虚拟机时调用。$el从DOM中删除。必须通过指令或实例方法删除，并直接操作虚拟机。$el不会触发。

8.销毁前

当实例被销毁时调用，而实例仍在运行。

9.破坏

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

下面是Vue.js 2.x实例的生命周期图：

vue.js2.x的生命周期钩子。

1.丢弃就绪并添加挂载

在1.x版本中，ready hook函数的调用时机是在第一次插入DOM之后，但是2.0不仅可以在浏览器中执行，还可以在服务器端呈现，所以ready被丢弃，挂载hook函数被添加，挂载hook函数的调用时机是在DOM树生成之后。

2.编译前放弃

在1.x版本中，调用beforeCompile钩子函数被放弃，取而代之的是在模板编译之前在2.0版本中创建的函数。

3.放弃编译的

在1.x版本中，编译是在编译模板之后和创建DOM之前调用的，在2.0版本中被丢弃并替换为挂载。

4.丢弃附件

在1.x版本中，插入DOM时会调用attached，但2.0版本不一定会创建真正的DOM，2.0版本被丢弃。

5.弃离

在1.x版本中，调用distributed意味着在移除DOM时，2.0版本中可能不会创建真实的DOM，2.0版本将被丢弃。

6.在创建前添加

在2.0版本中，添加了beforeCreate，它在实例初始化之后和事件/观察器事件配置之前调用。

7.安装前添加

2.0版本增加了beforeMount，在Watcher之前调用，模板编译成render方法之后调用，首次调用相关render。服务器呈现期间不调用此钩子函数。

8.添加beforeUpdate

在2.0版本中，增加了beforeUpdate，在生成DOM树之前和生成虚拟DOM树之后调用。调用条件是该vm实例已经安装。服务器呈现期间不调用此钩子函数。

9.添加更新的

2.0版本增加了Updated，在生成DOM树后调用，调用条件是这个vm实例已经安装。服务器呈现期间不调用此钩子函数。

10.添加已激活

2.0版中新增了激活。生成DOM树后，调用条件是保活组件。服务器呈现期间不调用此钩子函数。

11.添加停用的

在2.0版本中，添加了停用，在Vue实例被销毁时调用，调用条件为keep-alive component。服务器呈现期间不调用此钩子函数。

上面提到的Vue.js 1.x和2.x例子的生命周期都是边肖分享的内容，希望能给大家一个参考和支持。