前端技能树，面试复习第 46 天—— Vue 生命周期 | 父子组件钩子的执行顺序 | 组件间通信有哪些方式

最新推荐文章于 2025-11-24 03:44:17 发布
最新推荐文章于 2025-11-24 03:44:17 发布
阅读量361 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端面试复习笔记 文章标签： vue.js 前端 面试 Vue 生命周期 组件间通信
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ImagineCode/article/details/126076593
本文详细探讨了Vue2和Vue3的生命周期，包括beforeCreate、created、beforeMount、mounted等钩子函数的区别。讲解了Vue中父子组件的执行顺序，并分析了在不同生命周期阶段请求异步数据的最佳实践。此外，还深入介绍了Vue组件间通信的多种方式，如props/$emit、eventBus、provide/inject、ref/$refs、$parent/$children、$attrs/$listeners，并总结了各自适用场景。

1. 说一下 Vue2 的生命周期

Vue2.x 实例有⼀个完整的⽣命周期，也就是从开始创建、初始化数据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程，称这是 Vue 的⽣命周期。

  1. beforeCreate（创建前）：数据观测和初始化事件还未开始，此时 data 的响应式追踪、event/watcher 都还没有被设置，也就是说不能访问到 data、computed、watch、methods上的方法和数据。
  2. created（创建后） ：实例创建完成，实例上配置的 options 包括 data、computed、watch、methods 等都配置完成，但是此时渲染得节点还未挂载到 DOM，所以不能访问到 $el 属性。
  3. beforeMount（挂载前）：在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。此时还没有挂载html到页面上。
  4. mounted（挂载后）
了解本专栏 订阅专栏 解锁全文 超级会员免费看
Vue的父子组件生命周期钩子函数执行顺序 ？
youhebuke225的博客
05-25 620
这个顺序确保了Vue组件的层次结构在生命周期中的正确管理。在加载渲染过程中，父组件的生命周期钩子会在子组件的生命周期钩子之前触发，而在销毁过程中，子组件会先被销毁，然后才是父组件。同样，在更新过程中，父组件的更新会触发子组件的重新渲染，但父组件的更新钩子会在子组件的更新钩子之后触发。这些生命周期钩子函数顺序可以帮助开发者在合适的时机执行相应的逻辑。
深入理解Vue父子组件生命周期执行顺序及钩子函数
10-18
在开发Vue应用时，理解父子组件的生命周期执行顺序和钩子函数是至关重要的。 Vue实例的生命周期包括多个阶段，每个阶段都有相应的钩子函数（hook），这些钩子函数是Vue实例在特定生命周期阶段被调用的函数。当创建...
Vue 的父子组件生命周期钩子函数执行顺序
2201_75773271的博客
07-25 778
Vue 的父子组件钩子函数的执行顺序可以归类为4个 部分：第一部分：首次加载渲染 父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted第二部分：父组件修改子组件的props值时： 父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated。
VUE2——父子组件生命周期的执行顺序
m0_64455070的博客
07-25 2812
生命周期阶段父子组件执行顺序加载渲染父beforeCreate→父created→父beforeMount→子beforeCreate→子created→子beforeMount→子mounted→父mounted更新过程父beforeUpdate→子beforeUpdate→子updated→父updated销毁过程父beforeDestroy→子beforeDestroy→子destroyed→父destroyed。
Vue的父子组件生命周期钩子函数执行顺序 （权威版）
weixin_46449236的博客
03-24 1341
在学习到Vue的父子组件生命周期钩子函数执行顺序的时候，在网上找了很久的资料，发现网上给的参差不齐，已经见到了很多中不同的顺序。秉持着求真的态度，在Vue项目编写代码来测试，以下是测试的权威结果。
vue生命周期详解以及父子组件的生命周期执行顺序
suzhengzn的博客
08-15 3411
Vue的生命周期是指Vue实例从创建到销毁的整个过程，这个过程可以分为四个阶段：初始化阶段、挂载阶段、更新阶段和销毁阶段。每个阶段都伴随着特定的钩子函数，这些钩子函数允许开发者在组件生命周期的特定时间点执行特定的操作初始化阶段beforeCreate：实例被创建之初，在这个阶段data和methods中的数据还没有初始化，因此无法访问到它们。这个阶段主要是进行一些初始化工作，如设置事件和生命周期的回调函数等。
Vue父子组件生命周期执行顺序详解
weixin_42339193的博客
07-23 564
核心规律：三个阶段均遵循「父组件先触发钩子，子组件先完成钩子」的顺序实际应用：若需在父组件中操作子组件DOM，需在父组件mounted中进行；若需清理子组件依赖资源，应在子组件中处理。
vue生命周期执行顺序及父子组件关系详解
鹏多多的博客
05-27 1200
vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期，每个生命周期都是一个函数。
Vue 父子组件生命周期执行顺序
Cshaosun的博客
08-13 460
【父】beforeCreate ——》【父】created ——》【父】beforeMount ——》【注意，当父子组件有数据传递时，才有这个更新阶段执行顺序的比较。】destroyed ——》【父】destoryed。】mounted ——》【父】mounted。】updated ——》【父】updated。【父】beforeDestroy ——》【【父】beforeUpdate ——》【
vue父子组件生命周期和props执行顺序
qq_35359474的博客
05-05 528
父组件依次执行 beforeCreate → created → beforeMount父组件在 beforeMount 阶段将 props 数据传递给子组件。
20.（vue3.x+vite）Vue子组件和父组件执行顺序.rar
09-21
生命周期钩子如`beforeCreate`、`created`、`beforeMount`等依次执行，但在Vue3中，这些钩子被替换为`onBeforeMount`、`onMounted`、`onBeforeUpdate`和`onUpdated`等，它们在新的组合式API中有着不同的使用方式。...
vue同步父子组件和异步父子组件的生命周期顺序问题
10-17
在异步引入方式下，组件的加载是有延迟的，生命周期钩子的执行顺序也会有所不同。 在Vue中，组件的生命周期可以分为几个阶段：创建、挂载、更新和销毁。每个阶段都对应一些钩子函数，这些钩子函数可以在组件的生命...
基于spring+vue把图片文件上传至阿里云oss容器并回显
2301_77170676的博客
11-21 522
本文介绍了基于Element UI的文件上传组件实现和阿里云OSS存储的后端处理。前端使用el-upload组件配置了文件上传接口、请求头、上传前后回调方法等属性。后端通过ossUtil工具类实现文件上传到阿里云OSS，包含Endpoint、AccessKey等必要配置参数，以及处理异常情况。最后通过Controller接收前端上传的文件，生成随机文件名后调用OSS工具类上传，返回文件访问URL。整个流程实现了从前端上传到云端存储的完整解决方案。
Vue3项目实战
2509_93946337的博客
11-24 343
还有个细节，Pinia的store里用actions定义方法时，不用写commit了，直接赋值就行，比Vuex简单不少。举个实际例子：订单列表页需要支持按状态筛选和导出Excel，我单独建了个useOrderTable.js，里面用ref存筛选条件，computed处理过滤后的数据，onMounted里调接口初始化。我在用户管理模块里试过，把一个权限列表从数组改成树结构，用reactive包裹后，随便增删改查都能实时渲染，连watch都不用额外配置。部署时遇到个诡异问题：开发环境跑得好好的，生产环境白屏。
Vue音频处理开发
最新发布
2509_93946247的博客
11-24 431
举个例子，在data里定义一个audioContext对象和一个isPlaying布尔值，再通过methods里的函数来触发播放或暂停，界面状态自动更新，不用手动操作DOM。另外，Vue 3的setup语法糖里，用reactive定义播放器实例，比Options API更灵活，尤其是需要动态添加音频滤镜时。记得控制帧率，太高了卡顿，太低了动画跳帧，我一般用60fps做节流。另外，音频缓冲过长会影响体验，可以用Vue的异步组件配合loading状态，先显示占位图，等解码完成再启用控制按钮。
Vue发布
2509_93943467的博客
11-24 188
以前在列表渲染成千上万条数据时，页面总会明显卡顿，但现在用新的函数处理数据，连滚动都流畅了许多。我测试了一个简单的待办应用，用Vue 3的函数配合和，代码量减少了30%，而内存占用却降低了。更惊喜的是，Tree-shaking支持现在更智能了，打包时只引入用到的功能，最终bundle大小能缩小40%以上。社区里已经涌现出许多基于Vue 3的UI库，比如PrimeVue和Quasar，它们都利用了新API的优势，组件更轻量、可定制性更强。举个例子，我以前处理用户认证时，得在多个组件里重复写登录状态的逻辑。
Vue移动应用案例
2509_93942886的博客
11-24 349
从基础的Vue核心，到路由、状态管理，再到UI组件库如Vant、NutUI，以及多端框架uni-app、Taro，工具链已经相当成熟。最初版本在千元安卓机上直接卡死，后来我们做了虚拟渲染——只渲染可视区域内的弹幕，同时用Web Worker处理弹幕数据，终于解决了卡顿。性能优化方面，除了常规的代码分割、懒加载，我们还做了很多移动端特有的优化。在移动优先的时代，Vue让前端开发者有了更多可能性。经过多个项目的实践，我总结出Vue移动开发的几个要点：组件设计要原子化，状态管理要适度，性能监控要常态化。
Vue文档
2509_93942660的博客
11-24 273
简单说，基础类型用ref，引用类型用reactive。至于emit，现在都推荐用defineEmits定义事件类型，TypeScript支持杠杠的。遇到复杂业务逻辑时，getter能帮大忙，把计算属性抽到store里，组件代码顿时清爽不少。如果组件用了v-if，这时候元素可能还没渲染，得用nextTick兜底。比如按钮重复点击问题，用v-throttle直接解决，比在每个methods里写防抖逻辑方便多了。比如v-for和v-if的优先级问题，比如key的重要性，这些看似基础的概念往往最能考验功底。
Vue深度学习
2509_93946115的博客
11-24 188
有个记忆技巧：想象组件是个机器人，onCreated是通电，onMounted是第一次启动，onUpdated是软件升级，onUnmounted就是断电关机。不过要注意Proxy的局限性，比如原始值得用ref包装，不然响应式会失效。比如做个图片懒加载v-lazy，或者权限校验v-permission，把通用DOM逻辑封装成指令，代码复用率直线上升。要注意指令的生命周期和组件生命周期的执行顺序，这点官方文档说得不太明白，需要自己测试。建议大家在掌握基础后，多看看原理层面的东西，这才是提升编程能力的关键。
vue生命周期钩子及父子组件 钩子执行顺序
09-02
Vue 的生命周期钩子函数指的是在组件实例化、渲染、更新和销毁等不同阶段执行的一些特定函数。下面是 Vue 组件的生命周期钩子函数及其执行顺序： 1. beforeCreate：在实例创建之前被调用。此时组件的数据和方法都还未初始化。 2. created：在实例创建完成之后被调用。此时组件的数据已经初始化，但 DOM 还未渲染。 3. beforeMount：在组件挂载到 DOM 之前被调用。此时模板已经编译完成，但还未挂载到页面中。 4. mounted：在组件挂载到 DOM 后被调用。此时组件已经被渲染并插入到页面中，可以进行 DOM 操作。 5. beforeUpdate：在数据更新之前被调用。此时组件还未重新渲染，但数据已经更新。 6. updated：在数据更新之后被调用。此时组件已经重新渲染，可以进行 DOM 操作。 7. beforeDestroy：在组件销毁之前被调用。此时组件还存在，可以进行一些清理工作。 8. destroyed：在组件销毁之后被调用。此时组件已经从 DOM 中移除，事件监听和定时器等资源都已经被销毁。 对于父子组件，它们的生命周期钩子函数的执行顺序如下： 1. 父组件的 beforeCreate 和 created 钩子函数执行。 2. 子组件的 beforeCreate 和 created 钩子函数执行。 3. 子组件的 beforeMount 钩子函数执行。 4. 子组件的 mounted 钩子函数执行。 5. 父组件的 beforeMount 钩子函数执行。 6. 父组件的 mounted 钩子函数执行。 7. 数据更新时，先执行父组件的 beforeUpdate 钩子函数，然后执行子组件的 beforeUpdate 钩子函数，再执行子组件的 updated 钩子函数，最后执行父组件的 updated 钩子函数。 8. 组件销毁时，先执行父组件的 beforeDestroy 钩子函数，然后执行子组件的 beforeDestroy 钩子函数，最后执行子组件的 destroyed 钩子函数，再执行父组件的 destroyed 钩子函数。 这是 Vue 组件生命周期钩子函数的一般执行顺序，但在实际开发中可能会有特殊情况，需要根据具体需求来使用。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

蟹蟹蟹风流

期望和你分享一杯咖啡

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值