Vue.js+Node.js全栈开发教程：Vue.js生命周期

在Vue.js应用中，每个Vue实例在被创建（new Vue()）时，都要
经过一系列的初始化过程，例如：设置数据监听、编译模板、将实例
挂载到D?M上，以及在数据变化时更新D?M等。一般地，在前端应用框
架中将这个过程称为应用的“生命周期”。
同时，在Vue应用的“生命周期”过程中，会根据进程演化的不同
阶段定义一组相关过程方法（回调函数的形式）。前端框架会将这组
过程方法称为“生命周期的钩子函数”，所谓“钩子函数”就是给用
户提供了在这些回调函数中添?自定义代码的机会。因此，这些“生
命周期的钩子函数”类似于事件方法中的回调函数，只不过是只有存
在于前端框架的“生命周期”中才会有意义。
关于Vue.js框架的“生命周期”的详细内容，其官网上提供了一
幅 非 常 详 细 的 示 意 图 （ 地 址 ：
https://cn.vuejs.org/v2/guide/instance.html#生命周期图示），
如图8.22所示。

如图8.22所示，从Vue实例的创建（“new Vue()”）开始，其
“生命周期”就按部就班地开始了。接下来，我们列举几个最常用的
“生命周期”阶段进行介绍。
beforeCreate：在Vue实例（?m）初始化之后，在数据观测（data
obser?er）和（e?ent??atcher）事件配置之前被调用。
created：在Vue实例（?m）创建完成后被立即调用。
beforeMount：在Vue实例（?m）挂载开始之前被调用，此时相关
的render函数首次被调用。
mounted：在Vue实例（?m）挂载后调用，这时el已被新创建的
?m.$el替换了。
beforeU?date：在数据更新时调用，发生在虚拟DOM打补丁之前。
u?dated：由于数据更改导致的虚拟DOM重新渲染和打补丁，在这
之后会调用该钩子函数。
a?ti?ated：被kee?-ali?e缓?的组件激活时调用。
dea?ti?ated：被kee?-ali?e缓?的组件停用时调用。
beforeDestroy：在Vue实例（?m）销毁之前调用，在这一阶段的
Vue实例仌然完全可用。
destroyed：在Vue实例（?m）销毁后调用。该钩子函数被调用
后，对应Vue实例的所有指令都被解绑，所有的事件监听器被移
除，所有的子实例也都会被销毁。

8.3.2　Vue.js生命周期钩子
前一小节详细介绍了Vue.js框架的“生命周期”和“生命周期钩
子”的相关内容。在Vue.js应用中，利用“生命周期钩子函数”可以
为设计人员实现功能丰富的自定义代码功能。下面通过具体的代码实
例进行介绍。
首先，先看下面这个关于beforeCreate和created钩子的代码实
例。
【 代 码 8-20 】 （ 详 见 源 代 码 vuelifecycle 目 录 中 的
vuelifecycle.html文件）

 

【代码说明】
第01～0?行代码中，在页面中通过元素定义了一个层，并定
义了其id属性值（"id-di?-?ue-lifecycle"）。在第02行代码
中，通过Vue.js框架的插值模板语法（{{ }}）引用了一个对象
（msg），实现了一个页面消息展示的功能。
第06～2?行的脚本代码中，通过“ne? Vue()”构造函数实例化
Vue对象（?m）。具体说明如下：
■　第0?行代码中，通过el属性绑定DOM元素（"id-di?-?ue-
lifecycle"）。
■　第08～10行代码中，通过data属性进行绑定数据操作。
其中，第0?行代码定义了一个消息属性（msg），其对应
第02行代码引用的对象（msg），用于在页面中进行同步
渲染操作。
■　第11～16行代码定义了beforeCreate钩子函数，尝试将
el和data属性作为日志信息在浏览器控制?中输出。另
外，第12行代码通过实例?ro?erty属性（$data）更新了
msg属性（不过，该行代码先是注释的状态）。
■　第1?～22行代码定义了created钩子函数，尝试将el和
data属性作为日志信息在浏览器控制?中输出。另外，
第18行代码通过实例?ro?erty属性（$data）更新了msg
属性。
下面通过VS Code开发工具启动FireFox浏览器，运行测试
vuelifecycle.html页面，页面初始效果如图8.23所示。

 

 如 图 8.23 中 的 箭 头 和 标 识 所 示 ， 在 Vue.js 生 命 周 期 的
beforeCreate钩子阶段，$el和$data均是“未定义”的状态。而在
Vue.js生命周期的created钩子阶段，$el仍旧是“未定义”的状态，
但是$data已经是“已定义”的状态了，这一点与Vue.js官方文档中对
于created钩子的描述是一致的。
另外，上面的第12行代码是注释的状态，那为什么要注释掉这行
代码呢？因为，此时的msg属性还未定义，所以执行该行代码会导致
JavaScript解释器报错，感兴趣的读者可以自行测试一下。
然后，再看下面这个关于beforeMount和mounted钩子的代码实
例。
【 代 码 8-21 】 （ 详 见 源 代 码 vuelifecycle 目 录 中 的
vuelifecycle.html文件）

【代码说明】
【 代 码 8-21 】 与 【 代 码 8-20 】 类 似 ， 区 别 就 是 使 用 的 是
beforeMount和mounted钩子函数。具体说明如下：
■　第11～16行代码定义了beforeMount钩子函数，尝试将el
和data属性作为日志信息在浏览器控制?中输出。另
外，第12行代码通过实例?ro?erty属性（$data）更新了
msg属性。
■　第1?～22行代码定义了mounted钩子函数，尝试将el和
data属性作为日志信息在浏览器控制?中输出。另外，
第18行代码通过实例?ro?erty属性（$data）更新了msg
属性。
下面通过VS Code开发工具启动FireFox浏览器，运行测试
vuelifecycle.html页面，页面初始效果如图8.24所示。

 

如图8.24中的箭头和标识所示，在Vue.js生命周期的beforeMount
和mounted钩子阶段，$el和$data均是“已定义”的状态。这一点与
Vue.js官方文档中对于beforeMount和mounted钩子的描述是一致的。
不过，beforeMount和mounted这两个钩子还是有些区别的。在
beforeMount钩子阶段，D?M元素虽然是已定义、但还未?载进页面。
而在mounted钩子阶段，D?M元素才会被?载进页面。关于这一点，可
以借助浏览器内置的JavaScript调试器进行测试验证，具体页面效果
如图8.25和图8.26所示。

 

 如图8.25和图8.26中的箭头和标识所示，两幅图对比的效果比较
清楚。在beforeMount钩子阶段时，页面中还没有?载D?M元素（ id="id-div-vue-lifecycle">），而在mounted钩子阶段时页面中，已
经?载了D?M元素（

）。
下面再看一下这个关于beforeUpdate和updated钩子的代码实例。
【 代 码 8-22 】 （ 详 见 源 代 码 vuelifecycle 目 录 中 的
vuelifecycle.html文件）

 【代码说明】
【代码8-22】在【代码8-20】的基础上修改而成，它们的区别就
是是否使用beforeU?date和u?dated钩子函数。由于beforeU?date
和u?dated钩子在data属性的数据被修改后才会触发，因此在这段
代码中是通过人工修改msg属性值来实现的。具体说明如下：
■　第06～08行代码中，通过元素定义了一个按钮
及其单击事件（onBtnHookU?date()）方法，用于触发实
现人工修改msg属性值。
■　第1?～21行代码定义了beforeU?date钩子函数，通过实
例?ro?erty属性（$data）更新了msg属性值，并在浏览
器控制?中输出相关的日志信息。
■　第22～2?行代码定义了u?dated钩子函数，在浏览器控制
?中输出相关的日志信息。
■　第2?～?0行代码是单击事件（onBtnHookU?date()）方法
的 实 现 过 程 ， 以 人 工 方 式 通 过 实 例 ?ro?erty 属 性
（$data）更新了msg属性值。
下面通过VS Code开发工具启动FireFox浏览器，运行测试
vuelifecycle.html页面，页面初始效果如图8.27所示。

如图8.27中的箭头和标识所示，由于data属性的数据没有发生改
变，因此beforeUpdate和updated钩子也没有被触发。尝试单击“Hook
Update”按钮以人工方式改变data属性的数据，页面效果如图8.28所
示。

 

如图8.28中的箭头和标识所示，单击“Hook Update”按钮以人工
方式改变data属性的数据后，beforeUpdate和updated钩子函数被触发
了。页面中的信息显示按钮触发了并显示出data属性数据修改后的内
容，浏览器控制台输出的是beforeUpdate和updated钩子函数定义的日
志信息。
最后，再看一下这个关于beforeDestroy和destroyed钩子的代码
实例。
【 代 码 8-23 】 （ 详 见 源 代 码 vuelifecycle 目 录 中 的
vuelifecycle.html文件）

 

 【代码说明】
【代码8-2?】在【代码8-20】的基础上修改而成，它们的区别就
是 是 否 使 用 beforeDestroy 和 destroyed 钩 子 函 数 。 由 于
beforeDestroy和destroyed钩子在Vue实例销毁之后被触发，因此
在这段代码中是通过人工销毁Vue实例的方式来实现的。具体说明
如下：
■　第06～08行代码中，通过

元素定义了第一个按
钮及其单击事件（onBtnHookDestroy()）方法，用于实
现人工销毁Vue实例（?m）。
■　第0?～11行代码中，通过元素定义了第二个按
钮，定义了单击事件（onBtnHookDestroy2()）方法，用
于尝试再次人工销毁Vue实例（?m）。
■　第20～2?行代码定义了beforeDestroy钩子函数，尝试将
el和data属性作为日志信息在浏览器控制?中输出，并
在浏览器控制?中输出相关的日志信息。
■　第25～2?行代码定义了destroyed钩子函数，同样尝试将
el和data属性作为日志信息在浏览器控制?中输出，并
在浏览器控制?中输出相关的日志信息。
■　第??～?6行代码是单击事件（onBtnHookDestroy()）方
法的实现过程，其中第?5行代码通过调用$destroy()方
法以人工方式销毁Vue实例（?m）。
■　第?8～?1行代码是单击事件（onBtnHookDestroy2()）方
法的实现过程，其中第?0行代码通过调用$destroy()方
法销毁尝试再次以人工方式销毁Vue实例（?m）。
下面通过VS Code开发工具启动FireFox浏览器，运行测试
vuelifecycle.html页面，页面初始效果如图8.29所示。

如图8.29中的箭头和标识所示，尝试单击“Hook Destroy”按钮
以人工方式销毁Vue实例（vm），页面效果如图8.30所示。

 

如 图 8.30 中 的 箭 头 和 标 识 所 示 ， 浏 览 器 控 制 台 输 出 了
“beforeDestroy”和“destroyed”钩子函数定义的日志信息。然
后，再次尝试单击“Hook Destroy Again”按钮以人工方式再次销毁
Vue实例（vm），页面效果如图8.31所示。

 

如图8.31中的箭头和标识所示，浏览器控制台输出了“Hook
Destroy Again”按钮单击事件处理方法中定义的日志信息，却没有再
次输出beforeDestroy和destroyed钩子函数定义的日志信息，说明Vue
实例（vm）此时已经被销毁了。