vue3-生命周期及钩子函数_vue3组件销毁触发哪个钩子-CSDN博客

本文链接：https://blog.csdn.net/qq_45438471/article/details/129638441

文章详细介绍了Vue组件的生命周期，包括beforeCreate、created、beforeMounted、mounted、beforeUpdate、updated、beforeUnmount和unmounted等8个阶段，并解释了为何在模板挂载时使用innerHTML而非outerHTML。同时，文章阐述了各生命周期钩子函数的应用场景，如网络请求、DOM操作和加载效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

嘿嘿，走过路过，记得点赞哟！！！你的点赞让我更有动力，请继续期待接下来的文章~~~~

生命周期

看了那么篇的文章，终于对组件的使用有了些许的理解。想要使用Vue首先要将页面view和model模型建立起联系，这样才能实现数据的双向绑定。而生命周期（lifecycle）就是创建到销毁vue实例（vm）的过程，它大致分为8个阶段：开始创建（beforeCreate）->初始化数据（created）->编译模板（beforeMounted）-> 挂载DOM（mounted）->数据更新（beforeUpdated）->重新渲染到页面（updated）->销毁前（beforeUnmounted）-> vm解绑实例销毁（unmounted）。大致流程如下：
图文结合往往才能更好理解, 请看下图！！！

注意：为什么是innerHTMLN而不是outerHTML呢？
innerHTML不包含该标签本身，而outerHTML是包含自己标签的。

<div id="test">
    <p>这是innerHTML</p>
    <p>这是innerHTML</p>
</div>

var test = document.getElementById('test');
console.log(test.innerHTML);
console.log(test.outerHTML);

// innerHTML结果:
<p>这是innerHTML</p>
<p>这是innerHTML</p>

// outerHTML结果：
<div id="test">
    <p>这是innerHTML</p>
    <p>这是innerHTML</p>
</div>

所以是为什么呢？我是这样理解的：因为我们是要将template模板挂载到标签元素上（其实挂载就是取代原标签元素）。假设我们有人错误操作将其挂载到<html>标签上呢，那岂不是gg了！！！直接网页都不完整了，所以是innerHTML而不是outerHTML。

钩子函数

从上图可知，在不同阶段vue会完成某些操作。我们可以根据不同的需求在开发网站时对vue进行不同的操作。故在不同阶段自动触发的事件称为钩子函数。生命周期大致可分为8个阶段，故也有8个生命周期钩子函数。具体请看表格：

生命周期	钩子函数	应用场景
beforeCreate	onBeforeCreate()	实例未完全初始化，data和methods无法访问，在此阶段可以加loading效果，然后在created阶段消除。
created	onCreated()	初始化完成后立即被调用，此阶段已有model模型，但view页面还没有。此时可以进行一些网络请求，获取数据。（例如：网站首页数据的请求）
beforeMount	onBeforeMount()	因为此阶段只有虚拟DOM，无法对DOM进行操作。所以此阶段一般没有操作。
mounted	onMounted()	页面view已经渲染完成，即我们看到的界面。我们也可以对界面进行各种操作，此时可以配合&nextTick进行单一事件（例如：发送网络请求进行数据更新）
beforeUpdate	onBeforeUpdate()	model模型更新完成，但是model模型和页面view不同步，可以加一下loading效果（例如：为了减少负载，我们可以将滑动条滑到最后时再发送请求页面，但这有时间差或者受网速的影响数据并不会实时返回，这是可以加一下loading效果过渡一下）
updated	onUpdated()	页面view重新渲染完成，model模型与页面view同步，此阶段一般没有操作。
beforeUnmount	onBeforeUnmount()	此阶段实例还在，data、methods等对象依然存在。故一般此阶段可以进行关闭定时器、取消订阅消息和解绑自定义事件等操作。
unMounted	onMounted()	实例销毁后，model模型与view解绑，所以事件监听移除，此阶段也可以加一点toast来提示用户。