从源码上来看，Vue对象的每个生命周期钩子前都干了什么？

最新推荐文章于 2024-06-12 16:13:25 发布
原创 最新推荐文章于 2024-06-12 16:13:25 发布 · 1k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文从Vue的生命周期图表出发，深入源码探讨在每个生命周期钩子执行前，Vue做了哪些工作。包括选项的合并、实例初始化、数据观测、VNode创建、渲染与更新过程，以及组件销毁时的清理工作。通过对源码的分析，解答了父子组件生命周期执行顺序、何时能访问到数据等问题。

从源码上来看，Vue对象的每个生命周期钩子前都干了什么？

一、从官方文档查看的Vue的生命周期钩子

上面的图片是从Vue的官网里面找到的，如果单从这张图去查看生命周期干了什么，我们只能知道：

  • 在beforeMount前会对给出的模板进行编译（仅仅是在用Vue.js打包的时候会进行编译，在用脚手架的时候，在打包过程中会把模板编译成为渲染函数，这样可以避免每次创建一个Vue对象的时候进行编译模板）
  • 在mounted后，Vue实例对象才是完整的对象，这个转改能够维持到beforeDestroy。

但是我们不知道的东西会有很多，我这里就举出几个问题：

  1. 父子节点的生命周期执行顺序是怎么样的？
  2. 每个生命周期能够访问到的数据是否相同？
  3. 我们知道修改了data后能够触发更新生命周期的钩子，那么到底是怎样进行触发的？
  4. 我们知道Vue的话是通过VNode来更新管理真实的DOM的，那么在上面的生命周期什么时候进行渲染的？

为什么我们要知道上面的情况？因为我们可能会遇到一些问题，需要知道Vue里面的实现

  • 一般情况下，我们在组件初始化完毕的时候，也就是在mounted回调函数里面调用我们初始化的执行代码（很大情况下
最低0.47元/天 解锁文章
【Vue.js 2.x源码解析】第10章 Vue 生命周期解析，钩子函数究竟如何实现？
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
12-31 155
用一句话来说 Vue生命周期就是Vue实例从创建到销毁的全过程。每个 Vue 实例在被创建之前都要经历一系列初始化操作，比如设置数据监听、编译模板、挂载 DOM 等。在这些过程中，Vue 提供了一系列生命周期钩子函数，让我们能在特定阶段插入逻辑，比如初始化数据、请求接口、清理资源等。Vue 的生命周期钩子是组件开发的重要工具。理解它们的触发时机和执行顺序，可以让你写出更加高效、优雅的代码。不妨在下次调试项目时，从源码角度观察这些钩子的行为，体验与框架的深入对话吧！
vue中destroyed方法的使用说明
10-15
主要介绍了vue中destroyed方法的使用说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
前端-Vue生命周期
qq_59946873的博客
07-27 346
Vue 实例有⼀个完整的生命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程，称这是Vue的⽣命周期。 1. beforeCreate（创建之前） 数据观测和初始化事件还未开始，此时 data 的响应式追踪、event/watcher 都还没有被设置，也就是说不能访问到data、computed、watch、methods上的方法和数据。 2. created（创建后） 实例创建完成，实例上配...
Vue的生命周期是什么，每个钩子具体做了什么事情
L_csdn123的博客
02-20 191
Vue的生命周期是什么，每个钩子具体做了什么事情
vue生命周期，每一个生命周期钩子发生了什么
chenxiaodage的博客
10-13 314
beforeCreate(创建之前)： 一般不使用，视图层和数据层都不会更新 created(创建之后) 视图层没有渲染，但数据层已经开始更新，这里是最早操作data数据的地方，一般在这里请求数据，开启定时器 beforeMount(挂载之前): 视图层没有真正渲染，只是生成一个虚拟dom mounted(挂载之后)： 虚拟dom渲染到页面，页面有了真实的dom，视图层完成渲染。初始化一些插件配置，也可以在这里进行数据请求。 beforeUpdate(更新之前)： 做判断是否需要更新 updated(更新之
vue各生命周期之前所做的事情
qq_38868959的博客
02-16 436
1.beforeCreate和created：初始化事件，进行数据的观测 2.created和beforeMount：编译模板（首先会判断对象是否有el选项。如果有的话就继续向下编译，如果没有el选项，则停止编译，也就意味着停止了生命周期，直到在该vue实例上调用vm.$mount(el)。） 3.beforeMount和mounted：挂载dom 4.mounted ：替换dom完成 解析：首先会新建一个vue实例，然后把app.vue作为根组件，根组件包裹着路由标签，其他组件被编译后就放入根组件里，替换
从源码分析vue3组件的生命周期
BDawn的专栏
12-03 1421
从源码角度分析vue3的生命周期钩子函数的运行机制
vue3+ts (源码+笔记+生命周期截图)
02-14
7. ** 生命周期钩子的改变**：Vue3 中生命周期钩子发生了变化，如 `beforeCreate` 和 `created` 合并为 `onBeforeMount`，`beforeDestroy` 和 `destroyed` 合并为 `onBeforeUnmount` 等。此外，还新增了一些生命周期...
vue.2.5.1.js源码中关于生命周期钩子的源码解读
07-11
vue.2.5.1.js源码中关于生命周期钩子的源码解读
vue 生命周期 created到beforeMount详解
热门推荐
xuyuwas的博客
11-08 5万+
vue 生命周期 Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程。 生命周期图示： 1. beforeCreate： vue实例中的el，data，data中的message都为undefined 2. created： el还是undefined，而数据已经与data中的属性进行绑定（放在data中属性当...
Vue的生命周期钩子函数
DHLSP15的博客
03-08 283
Vue的生命周期钩子函数 beforeCreate 创建前状态 描述：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 created 创建完毕状态 描述：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el property 目前尚不可用。 beforeMount 挂载前状态
Vue源代码阅读之6BeforeCreated总结
jifukui的专栏
06-15 1237
经过前面三个章节的介绍我们知道在BeforeCreated期间做了三件事情，初始化生命周期，初始化事件，初始化渲染。 初始化生命周期主要是初始化Vue对象的一些过程状态查找父节点，并在父节点注册自己的相关信息。 初始化事件主要是获取父节点的监听的事件，并添加到子节点上。 初始化渲染主要是获取父节点的渲染内容，以及插槽，范围插槽，创建DOM元素函数的定义，继承父节点的$attrs属性和$listeners属性。 从上面的介绍可以看到这里主要是子组件继承父节点的一些公有的属性，同时初始化一些自己的状态信
vue中destroyed方法的使用
qq_40057138的博客
03-28 2148
vue中destroyed方法的使用
vue学习笔记(二)vue的生命周期和钩子函数
一只流浪的kk的博客
01-01 567
前言 通过上一章的学习，我们已经初步的了解了vue到底是什么东西，可以干什么，而这一篇博客主要介绍vue的生命周期和它常用的钩子函数，如果有学过java的园友可能有接触到在学习servlet的时候学过servlet的生命周期servlet 加载—>实例化—>服务—>销毁,对于vue的而言他也有自己的生命周期，那么一起来看看吧！ 本章目标 学会并了解vue的生命周期和钩子函数 学...
vue组件destory阶段，我们应该手动销毁哪些东西？
最新发布
xingyu_qie的专栏
06-12 1522
在 Vue.js 中，当组件进入销毁（destroy）阶段时，框架会自动处理很多清理工作。然而，有些资源和事件需要我们手动处理，以避免内存泄漏或其他潜在问题。
Vue生命周期
奇奇怪怪
12-27 707
Vue 的生命周期总共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后。 一、初始化显示 1.1.beforeCreate（创建前） 表示实例完全被创建出来之前，vue 实例的挂载元素$el和数据对象 data 都为 undefined，还未初始化。 1.2.created（创建后） 数据对象 data 已存在，可以调用 methods 中的方法，操作 data 中的数据，但 dom 未生成，$el 未存在 。 1.3.beforeM...
vue 生命周期每个阶段都能做什么？
weixin_44166439的博客
02-05 2882
钩子函数是在某个时间点自动执行的函数 beforeCreated -> 创建(created) beforeMounted -> 挂载(mounted) beforeUpdated -> 更新(updated) beforeDestroy -> 销毁(destroy) 研究的5个方向：this 数据 dom 能干啥 不能干啥 ios10 以下不支持 swiper3 以上 beforeCreate 可以数据请求 created 可以数据请求 可以修改数据 beforeMo
Vue全家桶零基础入门到进阶项目实战第二篇基础核心案例篇
05-09
本课程主要讲解Vue.js基础核心内容，包括vue的核心思想、MVVM框架、常用指令、事件修饰符、按键修饰符、系统修饰符、计算属性、监听器、vue实例生命周期等。掌握好这些内容就能初步使用vue进行开发，同时也为进一步深入学习vue奠定坚实基础。
Vue生命周期钩子函数详解与实战应用
本文标题为“Vue生命周期详解[项目源码]”，结合描述内容可知，文章重点聚焦于 Vue 实例从创建到销毁的完整过程，并深入剖析了各个生命周期钩子函数的作用时机、执行顺序以及实际应用场景。通过详细的实例代码演示，...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值