解读vue3源码-1

提示:看到我 请让滚去学习

vue3渲染流程

文章目录

  • vue3渲染流程
  • vue3的3个核心:
    • 1.响应式模块(Reactivity Module)--创建响应式数据
    • 2.编译模块(Compiler Module)--模版编译器将html转换为一个渲染函数
    • 3.渲染模块(Renderer Module)
  • 渲染流程:
      • 1.首先模版编译器将html转换为一个渲染函数
      • 2.然后初始化响应对象
      • 3.接下来,在渲染模块中,我们进入渲染阶段,这将调用render函数,它引用了响应对象,我们现在观察这个响应对象的变化,render函数返回一个虚拟dom节点
      • 4.接下来,在挂载阶段,调用mount函数,使用虚拟dom节点创建web页面
      • 5.最后,如果我们的响应对象发生任何改变,正在被监视,渲染器再次调用render函数,创建一个新的虚拟dom节点,新的和旧的虚拟dom节点,发送到补丁函数中,然后根据需要更新我们的网页


vue3的3个核心:

1.响应式模块(Reactivity Module)–创建响应式数据

2.编译模块(Compiler Module)–模版编译器将html转换为一个渲染函数

3.渲染模块(Renderer Module)

渲染阶段–调用render函数返回虚拟dom节点
挂载阶段–使用虚拟dom节点并调用dom api来创建网页
补丁阶段–新旧节点对比,并且只跟新网页变化的部分

渲染流程:

在这里插入图片描述

如图一个简单组件有一个模版template和模版内部使用的响应式对象

在这里插入图片描述

1.首先模版编译器将html转换为一个渲染函数

在这里插入图片描述

2.然后初始化响应对象

在这里插入图片描述

3.接下来,在渲染模块中,我们进入渲染阶段,这将调用render函数,它引用了响应对象,我们现在观察这个响应对象的变化,render函数返回一个虚拟dom节点

在这里插入图片描述

4.接下来,在挂载阶段,调用mount函数,使用虚拟dom节点创建web页面

在这里插入图片描述

5.最后,如果我们的响应对象发生任何改变,正在被监视,渲染器再次调用render函数,创建一个新的虚拟dom节点,新的和旧的虚拟dom节点,发送到补丁函数中,然后根据需要更新我们的网页

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【torchrl】强化学习训练流程

1 采集数据阶段 上面这个循环是用来采集数据,并且加入到replay buffer中。最终获取的数据是 - s: 当前状态,或者observation - a: 当前动作,后面重要性采样需要用到 - pa: 选择当前动作的概率,后面重要性采样用到 - r: 当前的奖励…

五款局域网监控软件良心推荐

五款局域网监控软件良心推荐 有人问我,能不能推荐几款好用的局域网监控软件。 我说,当然可以了,凭良心说,这几款软件在实用性、用户体验、隐私保护以及性价比上,绝对是当前最强监控软件。 1. 安企神 这款软件支持7天…

智简云携手云器Lakehouse打造一体化大数据平台,释放数据价值

导读 本篇分享的是智简云使用云器Lakehouse升级数据平台的实践总结。 智简云,是一家拥有十余年历史的科技公司,专注于企业服务领域,开发了两款核心产品:基于PASS平台的客户关系管理(CRM)系统和为中小型用…

生命在于学习——Python人工智能原理(2.1)

二、机器学习 1、机器学习的定义 机器学习是指从有限的观测数据中学习出具有一般性的规律,并利用这些规律对未知数据进行预测的方法,通俗的讲,机器学习就是让计算机从数据中进行自动学习,得到某种知识。 传统的机器学习主要关注…

应用一键跳转,Xinstall助力提升用户体验

在移动互联网时代,App已成为人们日常生活中不可或缺的一部分。然而,随着App数量的激增,如何让用户更便捷地访问和使用App,成为了开发者们面临的一大挑战。在这一背景下,Xinstall作为国内专业的App全渠道统计服务商&…

滚珠花键在工业自动化领域中有什么优势?

滚珠花键是工业自动化设备中重要的传动系统之一,不仅在工业自动化系统中有着广泛的运用,还在机械制造领域、航空航天领域、工业汽车领域、工业机器人、高速铁路、新能源领域 等都得到广泛应用。由于具有高精度、高承载、耐磨损、传递扭矩大等特点&#x…

大连瓦房店市科工局副局长乔宽一行调研蓝卓

日前,瓦房店市科技和工业信息化局副局长乔宽、副局长国海军、轴承协会秘书长高钧一行莅临蓝卓调研,学习浙江数字经济发展路径,考察蓝卓数字化服务能力。蓝卓副总经理陈挺、装备汽配军团总监陈伟亮、数字化咨询总监周立斌、大连区域方案经理龚…

昆仑通态触摸屏组态软件MCGS 嵌入版V7.7.1.7老版触摸屏安装程序

1.MCGS7.7嵌入版用于昆仑通态老版本触摸屏组态开发,具体支持哪些型号组态,可以在软件的工程设置里面查看。新出的触摸屏一般用MCGS Pro版本组态开发,老版本触摸屏必须用MCGS 7.7嵌入版组态开发。 2.MCGS7.7嵌入版支持当下常用的Win7、Win10、…

AWS联网和内容分发之Transit Gateway

将Amazon VPC、AWS账户和本地网络连接到一个网关中。AWS Transit Gateway通过中央枢纽连接Amazon虚拟私有云(VPC)和本地网络。此连接简化了您的网络,并且结束了复杂的对等关系。Transit Gateway充当高度可扩展的云路由器,每个新的…

开发远程遥控情趣玩具软件,提供现成程序源码应具备哪些基础功能

以“东莞梦情智能”为参考,其提供的现成情趣玩具遥控软件程序源码,所具备哪些基础功能,看看它们如何让情趣玩具变得更加丰富多彩。 一、设备连接 设备连接是情趣玩具遥控软件的基础功能之一。“东莞梦情智能”的现成源码支持多种连接方式&am…

10、SpringBoot 源码分析 - 自动配置深度分析三

SpringBoot 源码分析 - 自动配置深度分析三 refresh和自动配置大致流程AutoConfigurationImportSelector的getAutoConfigurationEntry获取自动配置实体(重点)AutoConfigurationImportSelector的getCandidateConfigurations获取EnableAutoConfiguration类型的名字集合AutoConfig…

【ARM+Codesys案例】T3/RK3568/树莓派+Codesys锂电叠片机方案:结合CODESYS实现高效生产

锂电叠片机解决方案 乘风破浪,促进新能源行业发展 锂电池是依靠锂离子在正极与负极之间移动来达到充放电目的的一种可充电电池,具有高能量密度、高电压、寿命长、无记忆效应等优点。锂电池属于国家政策扶持的高速发展行业,近年发展快速&…

反射、类加载、代理模式

一、 反射 反射是在程序运行状态下,动态获取类的结构(属性,构造器,方法,注解),动态的创建类对象然后调用类中的属性方法。反射的起源Class,Class中包含类反射要使用的API 获取Class的…

java项目——图书管理系统

文章目录 前言图书管理系统整体框架:book包user包Main包:iooperation包总结: 前言 针对这些天所学的javaSE的知识,用一个小项目来实践一下。 图书管理系统 整体框架: 采取面向对象的思想实现此项目,首先…

RedHat9 | DNS剖析-DNS服务器综合部署

一、配置需求及网络拓扑 1、配置拓扑 2、配置需求 使用【主DNS服务器】管理meaauf.cn域和gz.meaauf.cn域;并将bj.meaauf.cn域委派给【子域DNS服务器】进行管理。在【主DNS服务器】上添加相应的A记录、别名记录、MX记录和PTR记录:【辅助DNS服务器】作为…

nginx 安全配置

1、前言 前后端分离后,nginx 作为跨域转发工具在日常应用中越来越广泛,它的安全性不能不能忽略。 2、nginx 安装相关说明 2.1 直接下载安装包 在nginx官网下载编译好的安装包,链接地址为nginx: download。如果是linux系统,直接使…

价格预言机领导者 Pyth 与 Eclipse 平台集成,为高频 DeFi 应用提供支持

本篇文章将对这一战略合作伙伴关系,以及 Pyth 网络在 Eclipse 生态系统中扮演的关键角色进行深入探讨。 目前,Pyth 价格数据已正式上线于 Eclipse 测试网。Eclipse 是首个结合了以太坊安全性、Solana 性能和 Celestia DA 的 Solana虚拟机(SVM) Layer2 方…

鸿蒙ArkUI-X跨语言调用说明:【平台桥接(@arkui-x.bridge)】

平台桥接(arkui-x.bridge) 简介 平台桥接用于客户端(ArkUI)和平台(Android或iOS)之间传递消息,即用于ArkUI与平台双向数据传递、ArkUI侧调用平台的方法、平台调用ArkUI侧的方法。 以Android平台为例,Ark…

小动物单通道麻醉机、多通道麻醉机

ZL-04A-5多通道小动物麻醉机采用英国进口的挥发罐体,国内组装而成,产品输出气体稳定。多通道小动物麻醉机无需氧气瓶,自带空气输出机,小动物麻醉机对氧气浓度有要求可以选配氧气输出机。 详情介绍: 产品特点&#xf…

模拟量4~20mA电流传感器接线方式

一、模拟量4~20mA电流传感器接线方式 无源双线制是常见的电流型传感器接线方式,它具有简单、经济的特点。其接线方式如下: 传感器的“”接到数据采集器的电源“”上, 传感器的“-”端子连接到数据采集器的“AI”端子上, 数据采集器…