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

目录一、Vue 2 vs Vue 3 生命周期对比二、图解Vue3生命周期三、为什么组合式 API 没有 beforeCreate 和 created四、created 详解3.1 执行时机3.2 能做什么3.3 不能做什么五、mounted 详解4.1 执行时机4.2 能做什么Q1Vue 3 有哪些生命周期函数Q2Vue 2 和 Vue 3 生命周期有什么区别Q3onMounted 和 onUpdated 有什么区别Q4created 和 mounted 的区别Q5什么时候用 created什么时候用 mountedQ6created 和 mounted 都能发请求有什么区别一、Vue 2 vs Vue 3 生命周期对比Vue 2Vue 3变化beforeCreate❌ 移除组合式 API 中不需要created❌ 移除组合式 API 中不需要beforeMountonBeforeMount名称变化mountedonMounted名称变化beforeUpdateonBeforeUpdate名称变化updatedonUpdated名称变化beforeDestroyonBeforeUnmount名称变化destroy → unmountdestroyedonUnmounted名称变化destroyed → unmountederrorCapturedonErrorCaptured名称变化二、图解Vue3生命周期┌─────────────────────────────────────────────────────────────┐ │ Vue 3 生命周期流程图 │ │ │ │ script setup 执行 │ │ ↓ │ │ onBeforeMount ← 挂载前 │ │ ↓ │ │ onMounted ← 挂载完成可以操作 DOM │ │ ↓ │ │ 数据变化 │ │ ↓ │ │ onBeforeUpdate ← 更新前 │ │ ↓ │ │ onUpdated ← 更新完成 │ │ ↓ │ │ 组件卸载 │ │ ↓ │ │ onBeforeUnmount ← 卸载前清理工作 │ │ ↓ │ │ onUnmounted ← 卸载完成 │ │ │ └─────────────────────────────────────────────────────────────┘三、为什么组合式 API 没有 beforeCreate 和 createdscript 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方法已挂载✅ 发送请求获取后端数据✅ 设置定时器初始化定时任务✅ 访问computed、watch计算属性和侦听器已就绪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 元素✅ 获取元素尺寸offsetWidth、getBoundingClientRect()✅ 初始化图表ECharts、Three.js 等✅ 初始化第三方库Swiper、DatePicker 等✅ 聚焦输入框input.focus()✅ 发送请求也可以但更推荐 createdQ1Vue 3 有哪些生命周期函数答onBeforeMount、onMountedonBeforeUpdate、onUpdatedonBeforeUnmount、onUnmountedonErrorCaptured注意组合式 API 中没有beforeCreate和created因为script setup中的代码就相当于在created阶段执行。Q2Vue 2 和 Vue 3 生命周期有什么区别答beforeDestroy→onBeforeUnmountdestroyed→onUnmounted组合式 API 中移除了beforeCreate和created所有生命周期函数前加上on前缀Q3onMounted 和 onUpdated 有什么区别答onMounted组件首次挂载完成后执行只执行一次onUpdated组件每次更新后执行会执行多次Q4created 和 mounted 的区别答created组件实例创建完成数据已初始化但 DOM 还未渲染不能操作 DOMmounted组件已挂载到页面DOM 已生成可以安全操作 DOM两者都可以发请求但操作 DOM 相关的代码如初始化图表、获取元素尺寸必须放在 mounted。Q5什么时候用 created什么时候用 mounted答created只需要初始化数据、发请求、设置定时器不涉及 DOM 操作mounted需要操作 DOM、获取元素尺寸、初始化第三方库ECharts、SwiperQ6created 和 mounted 都能发请求有什么区别答created发请求更早数据回来时 DOM 可能还没渲染但不影响数据更新mounted发请求稍晚但能确保 DOM 已存在两者都可以但更推荐在 created 发请求可以更早获取数据。