下载掌阅APP，畅读海量书库
立即打开
任何事物都有生命发展过程，它们都需要经历诞生、成长和消亡的过程。Vue实例也是一样的，其在应用过程中也会经历初始、挂载、更新及销毁的过程，我们将这个过程称为Vue实例的生命周期。在生命周期的不同阶段会触发不同的事件，这就像人在婴儿时期需要喝奶汲取营养，在幼儿时期需要练习语言与行走，在少儿时期需要学习知识与成长，在青年、中年时期需要工作与发展，在迟暮之年渐渐步入死亡。对应在开发中，Vue实例在不同阶段会主动通过调用特定的回调函数来通知应用程序，我们将其称为“生命周期钩子函数”。
Vue实例的生命周期主要包括初始、挂载、更新、销毁几个不同的阶段，它们是按照顺序依次执行的。值得一提的是，所有阶段的执行次数和目标不都是相同的。其中，初始、挂载和销毁这3个阶段就像人的诞生与死亡一样，都只执行一次；更新阶段就像人的成长一样，是在不断发展和变化的，可以被不断地触发。下面通过图2-48来演示Vue实例的生命周期。
图2-48 Vue实例的生命周期
Vue实例的生命周期钩子函数的代码编写位置与data、methods、computed、watch等配置属于同级并列关系。2.9.1节中说过，每个阶段生命周期钩子函数发生的情况都不同，下面我们结合代码来分析每个生命周期钩子函数的差异。
请思考下面这段代码的含义。
上面的代码中演示了8个生命周期钩子函数，下面分别进行分析。
1）beforeCreate
beforeCreate是Vue实例的第1个生命周期钩子函数。在该生命周期钩子函数中出现了this对象，这个this指向的是当前Vue的实例对象。如果实例对象上有数据或者方法等内容，则后续可以通过this.xxx方式调用。值得一提的是，这个生命周期钩子函数是在Vue实例完成后立即触发的，但此时props（属性接收）、data（数据初始化）、methods（方法调用）、computed（属性计算）及watch（监听）等内容都还没有进行初始化，更不用说$el的真实DOM了。因此在该生命周期钩子函数中，this.message数据内容和this.$refs.pRef获取的真实DOM都为undefined（未定义）。
2）created
created生命周期钩子函数是在处理完所有与状态相关的选项后被调用的，这就意味着在调用该生命周期钩子函数之前，props、data、methods、computed、watch等内容已经设置完成。因此，this.message数据内容会打印出“欢迎来到尚硅谷”字符串内容，但是因为挂载阶段还没有开始，所以this.$refs.pRef属性仍旧为undefined。
3）beforeMount
beforeMount是在挂载真实DOM之前被触发的生命周期钩子函数。如果有template模板内容，则会将其编译成render函数并调用。因为这一阶段还没有获取真实DOM，所以相关的内容都停留在虚拟DOM阶段。因此在这一阶段，this.message数据内容会打印出“欢迎来到尚硅谷”字符串内容，但this.$refs.pRef属性仍旧为undefined。
4）mounted
在这一阶段的网页中，el元素对象最终被实例的$el元素对象内容代替，成功地将虚拟DOM内容渲染到了真实DOM上。用户现在可以查看到网页元素最终渲染的效果，因此当前this.$refs.pRef打印出来的结果是一个真实DOM。
到这里，前面出现的生命周期钩子函数都只会按照讲解顺序执行一次。我们可以将其称为“初始挂载阶段”，生命周期顺序以及相关内容输出打印的结果如图2-49所示。
图2-49 生命周期顺序以及相关内容输出打印的结果
5）beforeUpdate
组件在因为一个响应式状态变更即将更新真实DOM前，会调用beforeUpdate生命周期钩子函数。比如在示例代码中可以通过按钮修改message信息，这就产生了一个响应式数据的变更。示例代码在生命周期钩子函数中设置了一个debugger断点进行效果的查看，最终会发现页面中显示的仍旧是数据修改之前的真实DOM，如图2-50所示。
6）updated
updated生命周期钩子函数与beforeUpdate生命周期钩子函数类似，区别是前者在更新真实DOM前被调用，后者在更新真实DOM后被调用。将之前的断点调试继续运行，则会发现页面中的message内容已经被替换成“尚硅谷可以提供优质的互联网技术培训”字符串内容，如图2-51所示。
图2-50 设置debugger断点查看效果
图2-51 message内容已经被替换
7）beforeUnmount
当调用当前的beforeUnmount生命周期钩子函数时，组件实例依然具有全部的功能。同样在该生命周期钩子函数中进行debugger断点调试，并且利用定时器进行组件实例的unmount销毁操作后，就可以看到beforeUnmount生命周期钩子函数。此时页面中仍将保留真实DOM显示的状态，控制台中的this.$refs.pRef仍旧显示真实DOM，如图2-52所示。
图2-52 调用beforeUnmount生命周期钩子函数后的页面状态
8）unmounted
unmounted生命周期钩子函数在一个组件实例被销毁后被调用，此时对应组件实例的真实DOM也不复存在。继续当前的debugger调试，程序会进入unmounted生命周期，显然this.$refs.pRef对象内容已经被清空，网页中不再显示任何的真实DOM，如图2-53所示。
图2-53 网页中不再显示任何的真实DOM
Vue拥有这么多的生命周期钩子函数，哪些才是项目开发中常用的呢？下面结合实际情况从6个方面对各个生命周期钩子函数进行分析。
（1）对于beforeCreate来说，通用this不能操作数据、不能调用方法，也不能操作真实DOM，能够处理的内容少之又少，只能设置一些无关数据操作的定时器与网络连接。
（2）虽然created中已经拥有data、method、computed、watch等内容，这就意味着可以尝试进行数据请求并修改的操作，但此时并没有真实DOM，谁也无法确保在Vue实例化过程中是否会出现异常，从而导致真实DOM无法渲染，最终造成数据请求和数据修改的操作没有意义。
（3）beforeMount主要处理的是虚拟DOM生成，如果想要操作虚拟DOM，则可以在这一阶段实现。但在开发过程中开发人员直接操作虚拟DOM的情况并不常见，因此这一生命周期钩子函数也不常用。
（4）其实最常用的生命周期钩子函数是mounted，因为此时已经确保所有data、method、computed、watch等内容的存在，可以操作所有响应式数据。在该生命周期钩子函数中，可以对请求数据、后续接口处理操作定义的方法、计算与监听等。而且在该生命周期钩子函数中真实DOM已经存在，说明实例渲染无误，那么在这里再操作真实DOM也变得简单清楚。
（5）beforeUpdate与updated是在响应式数据更新时被触发的生命周期钩子函数。在这两个生命周期钩子函数中操作需要十分小心，因为修改任何一个数据都会触发这两个生命周期钩子函数，这就意味着它们的触发频率是非常高的。
这里需要思考的是，在更新阶段是否要进行类似数据请求的操作，以及数据请求操作频率的问题，这将牵扯到与性能相关的问题，因此这两个生命周期钩子函数并不常用。如果一定要使用，则需要注意利用特定的条件对触发的频率进行限制。
（6）因为在unmounted阶段已经完全销毁了组件实例，所以在这个生命周期钩子函数中操作的内容相对较少。如果需要进行清除定时器、取消监听、断开网络连接等操作，建议在beforeUnmount组件实例未完全销毁阶段进行，这样也能够确保在unmounted阶段销毁的组件实例是比较干净纯粹的。
综上所述，mounted、beforeUnmount是项目开发中常用的生命周期钩子函数。