Vue实例生命周期钩子函数

Posted 2021-04-16 清美数字

嗨，各位读者，再次与你们见面了。上一次，我们对Vue进行了简介，这次我们会探讨一些什么内容呢？注意啦，今天给大家带来的是Vue中的重要知识点——那就是Vue实例生命周期钩子函数。在介绍之前，我们先回顾一下，我们如何创建一个Vue实例？请看下图部分代码：

当我们通new Vue({})时，就创建了一个Vue实例，命名为vm。那我们是否在往深处想想，这个vm实例，在Vue中是如何被创建出来、何时初始化、何时挂载数据、更新数据，以及何时被销毁呢？其实这个问题就涉及到了Vue实例的生命周期钩子函数。

其实每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等” ，在不同的生命周期内会经历不同的钩子函数（生命周期函数），这就提供了将我们自己的代码写入的机会。

举个例子：如果将生命周期比作人的话，生命周期就是一个人的一生，生命钩子函数就相当于人的不同年龄段（幼年、青年、中年、老年），人在不同的年龄段做的事就相当于生命周期钩子函数所执行的任务。官方将vue实例的生命周期分为：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed几个生命周期函数（钩子函数）。其实也就是下面这张Vue实例声明周期图：

接下来，我们就一一讲解这几组生命钩子函数，在演示之前，首先在data中定义一个msg数据和mehtods中定义一个show()函数，用于观察演示效果。如下图：

（一）beforeCreate()钩子函数(创建之前)

beforeCreate()是我们遇到的第一个生命周期函数，理解为创建之前。即，示例在完全创建之前，会执行这个函数。那么在beforeCreate()生命周期函数执行的的时候，data和methods中的数据，都未被初始化，所以，调用不到。如下图：被圈红的代码，没有被注释之前，是访问不到msg中的数据和show函数。

（二）created()钩子函数（已经创建）

created()函数是我们遇到的第二个生命周期函数，理解为已经创建。即在created()生命周期函数执行时，data和methods中的数据，已经被初始化，所以能访问到msg和show()函数，可以调用。

（三）beforeMount()钩子函数（挂载之前）

beforeMount()函数是我们遇到的第三个生命周期函数，其表示模板已经在内存中编辑完成了（挂载之前），但是尚未把模板渲染到页面中。在beforeMount()执行的时候，页面中的元素，还没有真正的替换过来还只是之前的一些模板字符串。

（四）mounted()钩子函数（已经挂载）

mounted()函数是我们遇到的第四个生命周期函数（理解为:已经挂载）。当执行了mounted()函数时，表示内存中的模板，已经挂载到了页面中，用户已经可以看到渲染好的页面了。

以上是Vue实例创建阶段的生命周期钩子函数，在此要注意一点：mounted()函数是实例创建期间最后一个函数，当执行完mounted()函数后，实例就被完全创建好了。此时，如果没有其他操作的话，这个实例就会在静静的存储在内存中一动不动。接下来，我们在看看运行阶段的函数beforeUpdate()和updated()函数

（五）beforeUpdate()钩子函数（更新之前）

当执行到beforeUpdate()钩子函数后，beforeUpdate()函数，表示数据更新了，但页面还没有被更新（数据还没更新到页面上）。即，当beforeUpdate()函数执行的时候，页面中数据显示还是更新之前的数据， 此时，data中的数据是更新数据，页面还没有和最新的更新的数据保持同步。如下图代码：

（六）updated()钩子函数（更新后）

当updated()函数执行后，页面和data中的数据就已经保持同步了，页面也就是最新的更新后的数据了。如下图代码：

（七）beforeDestroy()钩子函数（销毁之前）、destroyed()钩子函数（销毁）

beforeDestroy()钩子函数，在实例销毁之前调用，在这一步，实例仍然完全可用。而destroyed()钩子函数，是在Vue实例销毁后调用。调用beforeDestroy()钩子函数后，Vue实例指示的所有东西都会解绑定，所有的事件监听会被移除，所有的子实例也会被消除。

  接下来我们把上述的内容总结一下，我们可以把Vue示例生命周期函数看成三个阶段，第一阶段就是Vue实例的初始化阶段，包括beforeCreate、created、beforeMount、mounted这几个函数；第二个阶段就是Vue实例的运行阶段，包括beforeUpdate、updated函数； 第三个阶段就是Vue实例的销毁阶段，包括beforeDestroy、destroyed函数。 只有我们把Vue实例周期函数理解透彻，这样会对我们以后学习好Vue才会有更大的帮助。好了，今天就介绍到此，小伙伴们，我们下期再见。

清美教育

扫码查看更多内容

你这么好看，一定要点个在看