Vue的生命周期快速入门

news2024/11/13 8:50:15

图示

在这里插入图片描述

流程

  1. new Vue()实例化一个vue实例,然后init初始化event 和 lifecycle, 其实这个过程中分别调用了3个初始化函数(initLifecycle(), initEvents(), initRender()),分别初始化了生命周期,事件以及定义createElement函数,初始化生命周期时,定义了一些属性,比如表示当前状态生命周期状态得_isMounted ,_isDestroyed ,_isBeingDestroyed,表示keep-alive中组件状态的_inactive,而初始化event时,实际上就是定义了 o n c e 、 once、 onceoff、 e m i t 、 emit、 emiton几个函数。而createElement函数是在初始化render时定义的(调用了initRender函数)
  2. 执行beforeCreate生命周期函数
  3. beforeCreate执行完后,会开始进行数据初始化,这个过程,会定义data数据,方法以及事件,并且完成数据劫持observe以及给组件实例配置watcher观察者实例。这样,后续当数据发生变化时,才能感知到数据的变化并完成页面的渲染
  4. 执行created生命周期函数,所以,当这个函数执行的时候,我们已经可以拿到data下的数据以及methods下的方法了,所以在这里,我们可以开始调用方法进行数据请求了
  5. created执行完后,我们可以看到,这里有个判断**,判断当前是否有el参数**(这里为什么需要判断,是因为我们后面的操作是会依赖这个el的,后面会详细说),如果有,我们再看是否有template参数。如果没有el,那么我们会等待调用$mount(el)方法(后面会详细说)。
  6. 确保有了el后,继续往下走,判断当有template参数时,我们会选择去将template模板转换成render函数(其实在这前面是还有一个判断的,判断当前是否有render函数,如果有的话,则会直接去渲染当前的render函数,如果没有那么我们才开始去查找是否有template模板),如果没有template,那么我们就会直接将获取到的el(也就是我们常见的#app,#app里面可能还会有其他标签)编译成templae, 然后在将这个template转换成render函数。
  7. 之后再调用beforMount, 也就是说实际从creted到beforeMount之间,最主要的工作就是将模板或者el转换为render函数。并且我们可以看出一点,就是你不管是用el,还是用template, 或者是用我们最常用的.vue文件(如果是.vue文件,他其实是会先编译成为template),最终他都是会被转换为render函数的。
  8. beforeMount调用后,我们是不是要开始渲染render函数了,首先我们会先生产一个虚拟dom(用于后续数据发生变化时,新老虚拟dom对比计算),进行保存,然后再开始将render渲染成为真实的dom。渲染成真实dom后,会将渲染出来的真实dom替换掉原来的vm. e l ( 这 一 步 我 们 可 能 不 理 解 , 请 耐 心 往 下 看 , 后 面 我 会 举 例 说 明 ) , 然 后 再 将 替 换 后 的 el(这一步我们可能不理解,请耐心往下看,后面我会举例说明),然后再将替换后的 el,el append到我们的页面内。整个初步流程就算是走完了
  9. 之后再调用mounted,并将标识生命周期的一个属性_isMounted 置为true。所以mounted函数内,我们是可以操作dom的,因为这个时候dom已经渲染完成了。
  10. 再之后,只有当我们状态数据发生变化时,我们在触发beforeUpdate,要开始将我们变化后的数据渲染到页面上了(实际上这里是有个判断的,判断当前的_isMounted是不是为ture并且_isDestroyed是不是为false,也就是说,保证dom已经被挂载的情况下,且当前组件并未被销毁,才会走update流程)
  11. beforeUpdate调用之后,我们又会重新生成一个新的虚拟dom(Vnode),然后会拿这个最新的Vnode和原来的Vnode去做一个diff算,这里就涉及到一系列的计算,算出最小的更新范围,从而更新render函数中的最新数据,再将更新后的render函数渲染成真实dom。也就完成了我们的数据更新
  12. 然后再执行updated,所以updated里面也可以操作dom,并拿到最新更新后的dom。不过这里我要插一句话了,mouted和updated的执行,并不会等待所有子组件都被挂载完成后再执行,所以如果你希望所有视图都更新完毕后再做些什么事情,那么你最好在mouted或者updated中加一个 n e x t T i c k ( ) , 然 后 把 要 做 的 事 情 放 在 nextTick(),然后把要做的事情放在 nextTicknetTick()中去做(至于为什么,以后讲到$nextTick再说吧)
  13. 再之后beforeDestroy没啥说的,实例销毁前,也就是说在这个函数内,你还是可以操作实例的
  14. 之后会做一系列的销毁动作,解除各种数据引用,移除事件监听,删除组件_watcher,删除子实例,删除自身self等。同时将实例属性_isDestroyed置为true
  15. 销毁完成后,再执行destroyed

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/31260.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

k8s 资源管理及查看命令

关注 迪答数据 公众号获取更多 技术/数据 干货文章 文章传送门:数据治理之指标体系管理 管理容器的计算资源 参考文档: Kubernetes Managing Compute Resources for Containers(opens new window)https://kubernetes.io/docs/concepts/configuration/m…

go slice 扩容机制

前言 go语言没有ArrayList这样的封装,但是官方原生提供slice,底层就是数组存储,并且能自动扩容,相较于ArrayList的默认10,扩容5,slice的逻辑是有区别的。slice默认容量0。 demo go版本号 huahuaMac-min…

第一章 数据库绪论

数据库绪论 数据管理的三个阶段 人工管理阶段 文件系统阶段 数据库系统阶段 基本术语 数据(Data) 计算机用来描述事物的记录(文字.图形.图像.声音)数据的形式本身并不能完全表达其内容&a…

Transformer Fusion for Indoor RGB-D Semantic Segmentation

如何聚合多尺度特征这是一个问题,现有的方法大多通过卷积来实现,而很少在特征融合的地方使用长距离依赖,因此对于大物体的分割就会有挑战。本文提出基于transformer的融合策略,来更好的建模上下文。 TransD-Fusion包含①&#xff…

SpringBoot SpringBoot 开发实用篇 6 监控 6.4 info 端点指标控制

SpringBoot 【黑马程序员SpringBoot2全套视频教程,springboot零基础到项目实战(spring boot2完整版)】 SpringBoot 开发实用篇 文章目录SpringBootSpringBoot 开发实用篇6 监控6.4 info 端点指标控制6.4.1 问题引入6.4.2 info 端点指标控制…

CleanMyMac4.12最新版mac系统内存空间清理教程

CleanMyMac X可以优化Mac系统。mac系统用久了,用CleanMyMac清理一下效果还不错。可用来清理系统的缓存、日志、语言和垃圾文件,还能卸载应用程序。 Mac是不需要安装任何杀毒软件的,虽然不用杀毒,但是日常的清理还是有必要的&#…

单机高性能网络模型

传统网络模型 PPC和prefork 优点 实现简单 缺点 PPC:fork代价高,性能低父子进程通信要用IPC,监控统计等实现会比较复杂OS的上下文切换会限制并发连接数,一般几百 案例 世界上第一个Web服务器CERN httpd采用PPC模式Apache MP…

简单网页制作代码 HTML+CSS+JavaScript香港美食(8页)

🎀 精彩专栏推荐👇🏻👇🏻👇🏻 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业…

Spring 5有哪些新特性?这份spring5高级编程带你深入剖析,直击P8!

spring Spring 框架可以说是Java 世界最为成功的框架,在企业实际应用中,大部分的企业架构都基于Spring 框架。它的成功来自于理念,而不是技术,它最为核心的理念是IoC (控制反转)和AOP (面向切面…

Flutter高仿微信-第28篇-好友详情-查看个人头像

Flutter高仿微信系列共59篇,从Flutter客户端、Kotlin客户端、Web服务器、数据库表结构、Xmpp即时通讯服务器、视频通话服务器、腾讯云服务器全面讲解。 详情请查看 效果图: 实现代码: /*** Author : wangning* Email : maoning20080809163.co…

Redis如何实现持久化(AOF、RDB、混合模式)的优缺点

👨‍💻个人主页: 才疏学浅的木子 🙇‍♂️ 本人也在学习阶段如若发现问题,请告知非常感谢 🙇‍♂️ 📒 本文来自专栏: Redis ❤️ 支持我:👍点赞 &#x1f33…

OpenStackds集群部署(一)

一、OpenStack简介 Openstack体系架构 1. Openstack服务之间的关系 2.体系架构 3. 硬件要求 4. 网络架构 1.1 什么是OpenStack OpenStack是把一堆计算机资源和一堆存储服务器放到世界上不同的地方,然后通过这个OpenStack提供的不同服务程序连接起来&#xff0…

Linux(基于Centos7)(二)

文章目录一、任务介绍二、任务实施三、任务扩展一、任务介绍 Linux服务器配置与管理(基于Centos7.2)任务目标(一) 实施该工单的任务目标如下: 知识目标 1、熟悉Linux文件权限的表示方法。 2、了解改变文件权限的两种…

使用内存技术实现 HTAP 的可行性

万籁 “俱寂” 时,一家知名 IT 研究与顾问咨询机构的发声,给关系型数据库这个平静的池塘丢了颗巨石:2014 年,Gartner 正式提出了 HTAP 这个概念。 Gartner’s definition in 2014: utilizes in-memory computing technologies to …

查阅必备----常用的SQL语句,配语句和图解超详细,不怕你忘记

👨‍💻个人主页:元宇宙-秩沅 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 本文由 秩沅 原创 **收录于专栏 数据库 ⭐查阅必备–常用的SQL语句⭐ 文章目录⭐查阅必备--常用的SQL语句⭐一,关键语句大全&am…

驱动——设备树属性获取相关实验

完成设备树属性获取相关实验 通过键名获取数值相关API获取设备树属性 1、要获取的属性如下所示&#xff1a; /*mynode0x12345678{ compatible "hqyj,mynode";//字符串 astring"hello 22071";//字符串 uint <0xaabbccdd 0x11223344>;//32位无符号…

SpringBoot SpringBoot 开发实用篇 6 监控 6.5 health 端点指标控制

SpringBoot 【黑马程序员SpringBoot2全套视频教程&#xff0c;springboot零基础到项目实战&#xff08;spring boot2完整版&#xff09;】 SpringBoot 开发实用篇 文章目录SpringBootSpringBoot 开发实用篇6 监控6.5 health 端点指标控制6.5.1 问题引入6.5.2 health 端点指标…

十二、虚拟 DOM 和 render() 函数(1)

本章概要 虚拟DOMrender()函数 Vue.js 之所以执行性能高&#xff0c;一个很重要的原因就是它的虚拟 DOM 机制。 12.1 虚拟 DOM 浏览器在解析 HTML 文档时&#xff0c;会将文档中的元素、注释、文本等标记按照它们的层级关系组织成一棵树&#xff0c;这就是熟知的 DOM 树。元…

MCE | LYTAC 与靶向蛋白降解技术

靶向蛋白降解 (TPD) 是一种有效性的&#xff0c;高度选择性的诱发蛋白降解方式。近年来&#xff0c;以 PROTAC 为代表的 TPD 技术的研究如火如荼。PROTAC 主要降解的是胞内蛋白&#xff0c;实际上&#xff0c;有 40% 的基因产物为胞外和膜相关蛋白&#xff0c;如生长因子、细胞…

一种新的数据聚类启发式优化方法——黑洞算法(基于Matlab代码实现)

&#x1f352;&#x1f352;&#x1f352;欢迎关注&#x1f308;&#x1f308;&#x1f308; &#x1f4dd;个人主页&#xff1a;我爱Matlab &#x1f44d;点赞➕评论➕收藏 养成习惯&#xff08;一键三连&#xff09;&#x1f33b;&#x1f33b;&#x1f33b; &#x1f34c;希…