news 2026/4/16 3:27:12

前端八股Vue---生命周期函数

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
前端八股Vue---生命周期函数

目录

一、Vue 2 vs Vue 3 生命周期对比

二、图解Vue3生命周期

三、为什么组合式 API 没有 beforeCreate 和 created?

四、created 详解

3.1 执行时机

3.2 能做什么?

3.3 不能做什么?

五、mounted 详解

4.1 执行时机

4.2 能做什么?

Q1:Vue 3 有哪些生命周期函数?

Q2:Vue 2 和 Vue 3 生命周期有什么区别?

Q3:onMounted 和 onUpdated 有什么区别?

Q4:created 和 mounted 的区别?

Q5:什么时候用 created?什么时候用 mounted?

Q6:created 和 mounted 都能发请求,有什么区别?


一、Vue 2 vs Vue 3 生命周期对比

Vue 2Vue 3变化
beforeCreate❌ 移除组合式 API 中不需要
created❌ 移除组合式 API 中不需要
beforeMountonBeforeMount名称变化
mountedonMounted名称变化
beforeUpdateonBeforeUpdate名称变化
updatedonUpdated名称变化
beforeDestroyonBeforeUnmount名称变化(destroy → unmount)
destroyedonUnmounted名称变化(destroyed → unmounted)
errorCapturedonErrorCaptured名称变化

二、图解Vue3生命周期

┌─────────────────────────────────────────────────────────────┐ │ Vue 3 生命周期流程图 │ │ │ │ <script setup> 执行 │ │ ↓ │ │ onBeforeMount ← 挂载前 │ │ ↓ │ │ onMounted ← 挂载完成(可以操作 DOM) │ │ ↓ │ │ 数据变化 │ │ ↓ │ │ onBeforeUpdate ← 更新前 │ │ ↓ │ │ onUpdated ← 更新完成 │ │ ↓ │ │ 组件卸载 │ │ ↓ │ │ onBeforeUnmount ← 卸载前(清理工作) │ │ ↓ │ │ onUnmounted ← 卸载完成 │ │ │ └─────────────────────────────────────────────────────────────┘

三、为什么组合式 API 没有 beforeCreate 和 created?

<script setup> // 这个区域里的代码,就相当于在 created 阶段执行 // 所以不需要单独的 beforeCreate 和 created 钩子 import { ref, onMounted } from 'vue' // 这里的代码相当于 created const count = ref(0) const message = ref('Hello') // 这个相当于 mounted onMounted(() => { console.log('DOM 已挂载') }) </script>

四、created 详解

3.1 执行时机

组件实例刚创建好,数据初始化完成,但页面还没渲染。

export default { data() { return { message: 'Hello', users: [] } }, created() { // 此时可以访问 data、props、methods console.log(this.message) // 'Hello' ✅ console.log(this.users) // [] ✅ this.fetchData() // 可以调用 methods ✅ // 但拿不到 DOM console.log(this.$el) // undefined ❌ document.getElementById('app') // 找不到 ❌ } }

3.2 能做什么?

能做说明
✅ 访问data数据已初始化
✅ 访问props父组件数据已传入
✅ 调用methods方法已挂载
✅ 发送请求获取后端数据
✅ 设置定时器初始化定时任务
✅ 访问computedwatch计算属性和侦听器已就绪

3.3 不能做什么?

不能做原因
❌ 操作 DOMDOM 还没渲染
❌ 获取元素宽高元素不存在
❌ 初始化需要 DOM 的插件ECharts、Swiper 等需要 DOM 容器

五、mounted 详解

4.1 执行时机

组件已经渲染到页面上,DOM 已生成,可以安全操作 DOM。

export default { mounted() { // 此时可以访问 DOM console.log(this.$el) // DOM 元素 ✅ console.log(this.$refs.box) // ref 引用 ✅ // 可以操作 DOM const height = this.$el.offsetHeight // 获取高度 ✅ this.$refs.input.focus() // 聚焦输入框 ✅ } }

4.2 能做什么?

能做说明
✅ 操作 DOM获取、修改 DOM 元素
✅ 获取元素尺寸offsetWidthgetBoundingClientRect()
✅ 初始化图表ECharts、Three.js 等
✅ 初始化第三方库Swiper、DatePicker 等
✅ 聚焦输入框input.focus()
✅ 发送请求也可以,但更推荐 created

Q1:Vue 3 有哪些生命周期函数?

答:

  • onBeforeMountonMounted

  • onBeforeUpdateonUpdated

  • onBeforeUnmountonUnmounted

  • onErrorCaptured

注意:组合式 API 中没有beforeCreatecreated,因为<script setup>中的代码就相当于在created阶段执行。

Q2:Vue 2 和 Vue 3 生命周期有什么区别?

答:

  1. beforeDestroyonBeforeUnmount

  2. destroyedonUnmounted

  3. 组合式 API 中移除了beforeCreatecreated

  4. 所有生命周期函数前加上on前缀

Q3:onMounted 和 onUpdated 有什么区别?

答:

  • onMounted:组件首次挂载完成后执行,只执行一次

  • onUpdated:组件每次更新后执行,会执行多次

Q4:created 和 mounted 的区别?

答:

  • created:组件实例创建完成,数据已初始化,但 DOM 还未渲染,不能操作 DOM

  • mounted:组件已挂载到页面,DOM 已生成,可以安全操作 DOM

两者都可以发请求,但操作 DOM 相关的代码(如初始化图表、获取元素尺寸)必须放在 mounted。

Q5:什么时候用 created?什么时候用 mounted?

答:

  • created:只需要初始化数据、发请求、设置定时器,不涉及 DOM 操作

  • mounted:需要操作 DOM、获取元素尺寸、初始化第三方库(ECharts、Swiper)

Q6:created 和 mounted 都能发请求,有什么区别?

答:

  • created:发请求更早,数据回来时 DOM 可能还没渲染,但不影响数据更新

  • mounted:发请求稍晚,但能确保 DOM 已存在

两者都可以,但更推荐在 created 发请求,可以更早获取数据。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/4/16 3:18:12

2026年安卓APP安全加固公司哪家好?从技术、性能到合规的深度选型指南

选错安卓APP安全加固公司&#xff0c;后果可能比不加固更严重——应用商店审核被拒、上线后用户疯狂反馈闪退、核心代码被逆向破解导致数据泄露。更棘手的是&#xff0c;当你拿着加固报告去应对等保测评时&#xff0c;可能因为加固方案不被认可而功亏一篑。这些都不是危言耸听&…

作者头像 李华
网站建设 2026/4/16 3:15:19

从力扣560->974 掌握“前缀和 + 哈希表“

一. 核心痛点: 为什么暴力法必超时 当我们看到问题 要找和为k 或 被k整除的连续子数组时 第一反应都是双层for循环 时间复杂度 : O(n^2)核心问题: 当数组长度达到10^5时 计算量高达100亿次 必爆TLE(超时)滑动窗口 : 看到连续序列 也会想到使用滑动窗口 但是由于数据有正有负 …

作者头像 李华
网站建设 2026/4/16 3:15:19

mysql如何配置事务隔离级别_mysql isolation level修改方法

MySQL事务隔离级别支持在线修改&#xff1a;会话级可随时修改且仅影响当前连接&#xff0c;全局级修改只对新连接生效&#xff1b;配置文件中需用transaction-isolationREAD-COMMITTED&#xff08;短横线、全大写推荐加引号&#xff09;&#xff0c;重启后才生效。MySQL 事务隔…

作者头像 李华
网站建设 2026/4/16 3:14:22

MySQL如何实现不停机数据平滑迁移_利用主从复制与流量切换

主从复制难以完全撑住实时写入压力&#xff0c;因从库回放依赖单线程或有限并行线程&#xff0c;高并发下Seconds_Behind_Master易持续上涨&#xff1b;大事务必然导致延迟飙升&#xff0c;单表小事务在并行复制下可基本跟上。主从复制能撑住实时写入压力吗MySQL主从复制本身不…

作者头像 李华
网站建设 2026/4/16 3:09:10

自动化测试:PO模式介绍及案例

&#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快PO&#xff08;Page Object&#xff09;设计模式是一种面向对象( 页面对象&#xff09;的设计模式&#xff0c;将测试对象及单个的测试步骤封装在每个Page对象以pag…

作者头像 李华