解读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节点,发送到补丁函数中,然后根据需要更新我们的网页

在这里插入图片描述

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

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

相关文章

python办公自动化——(二)替换PPT文档中图形数据-柱图

效果: 数据替换前 : 替换数据后: 实现代码 import collections.abc from pptx import Presentation from pptx.util import Cm,Pt import pyodbc import pandas as pd from pptx.chart.data impo…

广东海上丝绸之路文化促进会正式批复荐世界酒中国菜的指导单位

广东海上丝绸之路文化促进会正式批复成为“世界酒中国菜”系列活动指导单位 近日,广东海上丝绸之路文化促进会近日正式批复荐酒师国际认证(广州)有限公司,成为备受瞩目的“世界酒中国菜”系列活动的指导单位。此举旨在通过双方的…

IDEA中各种Maven相关问题(文件飘红、下载依赖和启动报错)

错误情况 包名、类名显示红色、红色波浪线,大量依赖提示不存在(程序包xxx不存在) 工程无法启动 一、前提条件 1、使用英文原版IDEA 汉化版的可能有各种奇怪的问题。建议用IDEA英文版,卸载重装。 2、下载maven,配置环…

2024HW|常见红队使用工具

目录 什么是HW? 什么是网络安全红蓝对抗? 红队 常见工具 信息收集工具 Nmap 简介 漏洞扫描工具 Nessus简介 AWVS 简介 抓包工具 Wireshark简介 TangGo 简介 web 应用安全工具 Burpsuite 简介 SQLMap webshell 管理工具 蚁剑 冰蝎 后…

《PNAS》和《Nature Communications》仿章鱼和蜗牛的粘液真空吸附,赋予了机器人吸盘新的“超能力”

想象一下,如果机器人能够像章鱼一样牢牢吸附在粗糙崎岖的岩石上,或者像蜗牛那样在墙面上悠然负重爬行,那会是多么神奇的一幕!近日,布里斯托大学机器人实验室的Jonathan Rossiter教授课题组就为我们带来了这样的“超能力…

Fastjson 反序列化漏洞[1.2.24-rce]

漏洞复现环境搭建请参考 http://t.csdnimg.cn/vSaaw kali切换jdk版本请参考 Kali安装JAVA8和切换JDK版本的详细过程_kali安装jdk8-CSDN博客 漏洞原理 Fastjson提供的com.sun.rowset.JdbcRowSetImpl类下的dataSourceName方法支持传入一个RMI/LDAP源,支持远程调用。…

绘唐2AI工具在哪里下载

绘唐2AI工具在哪里下载 激活授权方式:https://qvfbz6lhqnd.feishu.cn/wiki/CcaewIWnSiAFgokOwLycwi0Encf 绘唐2AI工具是一款由中国国家语言资源监测与研究中心开发的人工智能绘画工具。该工具利用深度学习算法和人工智能技术,能够自动将输入的文字描述转…

【MySQL数据库】:MySQL内置函数

目录 日期函数 current_date 函数 current_time 函数 current_timestamp 函数 now 函数 date 函数 date_add 函数 date_sub 函数 datediff 函数 字符串函数 charset 函数 concat 函数 instr 函数 ucase 函数 lcase 函数 left 函数 length 函数 replace…

探索自动发邮件的奥秘:从配置到实现

新书上架~👇全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我👆,收藏下次不迷路┗|`O′|┛ 嗷~~ 目录 一、引言:邮件自动化的魅力 二、配置环境:选择适合的SMTP服务器 示…

Spring Boot集成freemaker快速入门demo

1.什么是freemaker? FreeMarker 是一款模板引擎:即一种基于模板和要改变的数据,并用来生成输出文本(HTML网页,电子邮件,配置文件,源代码等)的通用工具。 它不是面向最终用户的,而是一个Java类库…

Adobe AntiCC 简化版 安装教程

Adobe AntiCC 简化版 安装教程 原文地址:https://blog.csdn.net/weixin_48311847/article/details/139277743

数据真实性与经济收益的矛盾:第三方检测何去何从|中联环保圈

在当今的市场化竞争环境中,第三方检测公司在环保行业中处于较为底端的位置。其多数检测业务依赖于第三方技术服务单位的委托,然而在委托过程中,往往面临着报告真实性和收款的矛盾。一旦第三方检测公司负责人在数据真实性和经济收益矛盾中取舍…

1806 jsp防疫物资销售管理系统 Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 jsp 防疫物资销售管理系统 是一套完善的web设计系统,对理解JSP java编程开发语言有帮助采用了java设计,系统具有完整的源代码和数据库,系统采用web模式,系统主要采用B/S模式开发。开发环境为TOMCAT7.0,Myeclipse8.…

Android USB调试模式下自动上下滑动(Go实现)

简介 有的时候要对手机UI界面进行滑动测试, 手动或许太消耗时间, 理由Android USB调试模式对UI进行上下滑动测试。 adb指令 使用adb --help 可以查看所有的adb支持指令, 但这里我们只需要上下, 使用到的指令: adb devices #列举所有设备 ad…

不同类型的区块链钱包有什么特点和适用场景?

区块链钱包是用于存储和管理加密货币的重要工具,市面上有许多不同类型的区块链钱包可供选择。以下是几种主要类型的区块链钱包及其特点和适用场景。 1.软件钱包: 特点:软件钱包是最常见的一种区块链钱包,通常作为软件应用程序提供…

后量子加密算法的数学原理

后量子加密算法是一类专为抵御量子计算机攻击而设计的加密算法。随着量子计算技术的迅速发展,传统的加密算法如RSA和椭圆曲线密码学在量子计算机面前变得脆弱,因此,开发能够在量子计算时代保持安全性的加密算法变得尤为重要。下面将详细介绍后…

软件架构设计之质量属性浅析

引言 在数字化浪潮席卷而来的今天,软件已经渗透到我们生活的方方面面,从手机APP到大型企业级系统,无一不彰显着软件技术的魅力。然而,在这背后,软件架构设计作为软件开发的基石,其质量属性的重要性不言而喻…

Blazor入门-svg绘制-碰撞检测和图形坐标调整

上一篇: Blazor入门-简单svg绘制导出图像_blazor 画图-CSDN博客 https://blog.csdn.net/pxy7896/article/details/139003443 注意:本文只给出思路和框架,对于具体的计算细节,考虑到日后会写入软件著作权和专利文书,因…

STM32-11-电容触摸按键

STM32-01-认识单片机 STM32-02-基础知识 STM32-03-HAL库 STM32-04-时钟树 STM32-05-SYSTEM文件夹 STM32-06-GPIO STM32-07-外部中断 STM32-08-串口 STM32-09-IWDG和WWDG STM32-10-定时器 STM32电容触摸按键 电容触摸按键原理: 无手指触摸:上电时&…

【Java EE】网络原理——HTTP响应

目录 1.认识“状态码”(status code) 1.1 200 OK 1.2 404 Not Found 1.3 403 Forbodden 1.4 Method Not Allowed 1.5 Internal Sever Error 1.6 504 Gsteway Timeout 1.7 Move temporarily 1.8 Moved Permanently 1.9状态码小结 2.认识响应“报…