vue的生命周期有哪些阶段

梦宇吖_1441

发布时间：2022-03-17 11:43:39

4692人浏览过

来源于php中文网

原创

vue的声明周期共有八个阶段，分别是：1、实例创建前；2、实例创建后；3、实例载入前；4、实例载入后；5、实例更新前；6、实例更新后；7、实例销毁前；8、实例销毁后。

vue的生命周期有哪些阶段

本文操作环境：windows10系统、Vue2.9.6版，DELL G3电脑。

vue的生命周期有哪些阶段

每个Vue实例在创建时都会经过一系列的初始化过程，vue的生命周期钩子，就是说在达到某一阶段或条件时去触发的函数，目的就是为了完成一些动作或者事件

create阶段：vue实例被创建

beforeCreate: 创建前，此时data和methods中的数据都还没有初始化

立即学习“前端免费学习笔记（深入）”；

created：创建完毕，data中有值，未挂载

mount阶段： vue实例被挂载到真实DOM节点

beforeMount：可以发起服务端请求，去数据

mounted: 此时可以操作DOM

update阶段：当vue实例里面的data数据变化时，触发组件的重新渲染

beforeUpdate :更新前

updated：更新后

Vue

避免 Vue 常见错误——响应式陷阱、ref 与 reactive 区别、计算属性时机及 Composition API 陷阱。

下载

destroy阶段：vue实例被销毁

beforeDestroy：实例被销毁前，此时可以手动销毁一些方法

destroyed:销毁后

组件生命周期

生命周期（父子组件）父组件beforeCreate --> 父组件created --> 父组件beforeMount --> 子组件beforeCreate --> 子组件created --> 子组件beforeMount --> 子组件 mounted --> 父组件mounted -->父组件beforeUpdate -->子组件beforeDestroy--> 子组件destroyed --> 父组件updated

加载渲染过程父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

挂载阶段父created->子created->子mounted->父mounted

父组件更新阶段父beforeUpdate->父updated

子组件更新阶段父beforeUpdate->子beforeUpdate->子updated->父updated

销毁阶段父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

【相关推荐：《vue.js教程》】

JavaScript 中 class 语法怎么在 Vue 选项式中使用

JavaScript 中怎么在 Vue 组合式函数里取消未完成请求

JavaScript 中 Vite 怎么实现暗黑模式主题切换包

Vue 3 中使用 ref 时常见的空值报错（null）怎么优雅排查与处理

Vue 3 中怎么用 watchEffect 实现长文本阅读进度的自动埋点上报

相关标签:

vue

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：宝藏项目！分享一款开箱即用的Vue3组件库：Varlet 下一篇：ssr和vue的区别是什么

作者最新文章

网站首页HTML源码怎么保存？主页代码提取保存方法

2026-09-14 10:26

如何利用第三方工具快速下载保存HTML源码

2026-09-15 09:24

怎样把网页HTML源码保存为模板文件？网页切图保存教程

2026-09-15 09:40

网页HTML源码保存后怎么用浏览器打开？保存与预览方法

2026-09-16 10:57

商品详情页HTML源码怎么保存？电商网页代码保存步骤

2026-09-16 11:17

网页HTML源码保存乱码怎么办？正确编码保存教程

2026-09-16 11:37

网页HTML源码查看与本地保存超全教程

2026-09-19 12:29

怎么保存渲染后的网页HTML源码？DOM树代码保存教程

2026-09-20 12:12

VS Code怎么打开并保存HTML源码？编辑器保存技巧

2026-09-21 08:43

Ctrl+U获取的HTML源码怎么保存？快捷保存教程

2026-09-21 10:30

热门AI工具

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

AI编程开发 AI大模型

WorkBuddy

一款AI办公效率工具，主要用于腾讯云推出的AI原生桌面智能体工作台，适合需要提升相关任务效率的用户。

AI办公学习 Agent智能体

切问学术 Hot

切问学术是一款AI论文写作工具，复旦大学NLP团队推出的AI学术智能体。

Agent智能体

火山引擎 Hot

火山引擎是一款面向企业的云计算与AI服务平台。

AI大模型 AI编程开发

Seko Hot

一款AI视频创作工具，主要用于商汤科技推出的创编一体的AI短视频创作Agent，适合需要提升相关任务效率的用户。

AI视频创作视频生成

二狗PPT Hot

一款AI演示文稿工具，主要用于专为中式职场打造的AI PPT生成工具，适合需要提升相关任务效率的用户。

文档处理 PPT 助手

讯飞绘文 Hot

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

AI应用软件 PC软件

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

AI编程开发 AI聊天问答

超级简历WonderCV Hot

一款AI办公效率工具，主要用于免费求职简历模版下载制作，应届生职场人必备简历制作神器，适合需要提升相关任务效率的用户。

AI办公学习工作效率

相关专题

js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法，还有更多js正则表达式的相关文章、相关下载、相关课程，供大家免费下载体验。

3756

2023.06.20

js获取当前时间

JS全称JavaScript，是一种具有函数优先的轻量级，解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言，主要用于Web，常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢？php中文网给大家带来了相关的教程以及文章，欢迎大家前来学习阅读。

1195

2023.07.28

js 字符串转数组

js字符串转数组的方法：1、使用“split()”方法；2、使用“Array.from()”方法；3、使用for循环遍历；4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容，供大家免费下载体验。

1518

2023.08.03

js是什么意思

JS是JavaScript的缩写，它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言，通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果，如表单验证、页面元素操作、动画效果、数据交互等。

9203

2023.08.17

js删除节点的方法

js删除节点的方法有：1、removeChild()方法，用于从父节点中移除指定的子节点，它需要两个参数，第一个参数是要删除的子节点，第二个参数是父节点；2、parentNode.removeChild()方法，可以直接通过父节点调用来删除子节点；3、remove()方法，可以直接删除节点，而无需指定父节点；4、innerHTML属性，用于删除节点的内容。

820

2023.09.01

js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容，供大家免费下载体验。

2204

2023.09.04

Js中concat和push的区别

Js中concat和push的区别：1、concat用于将两个或多个数组合并成一个新数组，并返回这个新数组，而push用于向数组的末尾添加一个或多个元素，并返回修改后的数组的新长度；2、concat不会修改原始数组，是创建新的数组，而push会修改原数组，将新元素添加到原数组的末尾等等。本专题为大家提供concat和push相关的文章、下载、课程内容，供大家免费下载体验。

1409

2023.09.14