3.vue生命周期钩子函数有哪些？（vue中的生命周期钩子函数）

科技前沿 • 2025-06-01 15:37 • 阅读 41

大家好，我是讯享网，很高兴认识大家。

 <p>何为钩子函数&#xff1f;先看官方文档的说法&#xff1a;</p>

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

简单点来说，钩子函数就是你创建的Vue在初始化、更新数据、销毁时会被自动调用的函数。

八大钩子数分别是：

beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestory,destoryed

接下来咱们慢慢来说

附官网声明周期图

先执行一段代码：注意这里的钩子名固定，与data和methods属于平级关系，如果执行相应的方法，会输出一句话

讯享网

运行结果如下：

beforeCreate可以简单的理解为在数据初始化的之前被调用，这时候data和methods尚未没有数据。

created可以理解为在数据初始化之后被调用，这时候data和methods已经被填充了相应的数据。

实验测试：（篇幅所限，只贴出来body中代码,head中代码没变化)

运行结果如下：

结果显示在beforeCreate方法与create方法之间完成了资源的注入。

上面实验已经证明Vue中数据已经注入完毕，beforeMount,mounted则是与页面渲染有关

beforeMount在页面尚未被渲染时使用，也就是Vue的数据没有传到页面。

mounted在页面渲染完成之后使用，也就是此时页面已完全取出Vue中的数据。

实验测试：

讯享网

结果如下：

此时，Vue对象中资源已注入完毕，页面也已经渲染完毕，上述四个方法在页面被加载时自动被执行

beforeUpdate在页面更新渲染完成后，DOM树发生改变前被调用

updated在页面DOM树改变后被调用

需要注意的是如果只是改变了dom中的数据（data），未对页面造成任何影响，就不会触发beforeUpdate,updated方法。

实验证明：

结果显示：

beforeDestory是在Vue组件销毁之前被调用

destoryed在Vue组件销毁之后被调用

这里为了搭建环境，引入了组件的概念（注意由于解析时自上而下，所以组件写在Vue对象前

实验证明：

讯享网