解读vue3源码-1

news2024/11/19 16:45:03

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

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.coloradmin.cn/o/1707586.html

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

相关文章

【御控工业物联网】 Java JSON结构转换、JSON结构重构、JSON结构互换(17):数组To对象——键值互换属性重组

文章目录 一、JSON结构转换是什么?二、核心构件之转换映射三、案例之《JSON数组 To JSON对象》四、代码实现五、在线转换工具六、技术资料 一、JSON结构转换是什么? JSON结构转换指的是将一个JSON对象或JSON数组按照一定规则进行重组、筛选、映射或转换…

2024第三届AIGC开发者大会圆桌论坛:AI Agent中国落地发展现状及多模态结合具身智能的发展展望

在2024年第三届AIGC开发者大会上,多位业内专家齐聚一堂,共同探讨了AI Agent在中国的落地发展现状以及多模态结合具身智能的发展前景。本次圆桌论坛的嘉宾包括: Fast JP作者于金龙Agent创始人莫西莫必胜作者秦瑞January Agent创始人李晨 多模…

JavaEE:Servlet创建和使用及生命周期介绍

目录 ▐ Servlet概述 ▐ Servlet的创建和使用 ▐ Servlet中方法介绍 ▐ Servlet的生命周期 ▐ Servlet概述 • Servlet是Server Applet的简称,意思是 用Java编写的服务器端的程序,Servlet被部署在服务器中,而服务器负责管理并调用Servle…

【第5章】SpringBoot整合Druid

文章目录 前言一、启动器二、配置1.JDBC 配置2.连接池配置3. 监控配置 三、配置多数据源1. 添加配置2. 创建数据源 四、配置 Filter1. 配置Filter2. 可配置的Filter 五、获取 Druid 的监控数据六、案例1. 问题2. 引入库3. 配置4. 配置类5. 测试类6. 测试结果 七、案例 ( 推荐 )…

vivo X100 Ultra自称销售额破5亿,真实销量成谜?

文/张诗雨 5月28日9点,vivo 正式启动了其旗舰新机vivo X100 Ultra的全渠道销售工作。这款新机,早在5月13日就已正式亮相,并推出了三种存储容量的版本,分别是12GB256GB、16GB512GB以及16GB1TB,而相应的售价也不低&…

短道速滑短视频:四川京之华锦信息技术公司

短道速滑短视频:冰雪激情的视觉盛宴 随着冬奥会的热度不断攀升,短道速滑作为其中一项紧张刺激、充满观赏性的运动,受到了越来越多人的关注。而在社交媒体和短视频平台的助力下,短道速滑短视频成为了人们了解、欣赏这项运动的新窗…

vxe-form-design 表单设计器的使用

vxe-form-design 在 vue3 中表单设计器的使用 查看官网 https://vxeui.com 安装 npm install vxe-pc-ui // ... import VxeUI from vxe-pc-ui import vxe-pc-ui/lib/style.css // ...// ... createApp(App).use(VxeUI).mount(#app) // ...使用 github vxe-form-design 用…

Linux软硬链接详解

软链接: ln -s file1 file2//file1为目标文件,file2为软链接文件 演示: 从上图可以得出: 软链接本质不是同一个文件,因为inode不同。 作用: 软连接就像是Windows里的快捷方式,里面存放的是目标…

Llama模型家族训练奖励模型Reward Model技术及代码实战(二)从用户反馈构建比较数据集

LlaMA 3 系列博客 基于 LlaMA 3 LangGraph 在windows本地部署大模型 (一) 基于 LlaMA 3 LangGraph 在windows本地部署大模型 (二) 基于 LlaMA 3 LangGraph 在windows本地部署大模型 (三) 基于 LlaMA…

DES加密算法笔记

【DES加密算法|密码学|信息安全】https://www.bilibili.com/video/BV1KQ4y127AT?vd_source7ad69e0c2be65c96d9584e19b0202113 根据此视频学习 DES是对称密码中的分组加密算法 (分组加密对应流加密算法) 流加密算法就是一个字节一个字节加密 分组加…

Mybatis枚举类型转换

Mybatis枚举类型转换 类型转换器源码分析 在Mybatis的TypeHandlerRegistry中,添加了常用的类转换器,其中默认的枚举类型转换器是EnumTypeHandler。 public final class TypeHandlerRegistry {....public TypeHandlerRegistry(Configuration configura…

第 8 章 机器人平台设计之传感器(自学二刷笔记)

重要参考: 课程链接:https://www.bilibili.com/video/BV1Ci4y1L7ZZ 讲义链接:Introduction Autolabor-ROS机器人入门课程《ROS理论与实践》零基础教程 8.6.1 传感器_激光雷达简介 激光雷达是现今机器人尤其是无人车领域及最重要、最关键也是最常见的传感器之一&…

opencv c++编程基础

1、图片的本质 图像在 OpenCV 中的本质 在 OpenCV 中,图像被表示为一个多维数组,其中每个元素对应于图像中的单个像素。图像的维度取决于其通道数和像素数。 **通道数:**图像可以有多个通道,每个通道存储图像的不同信息。例如&…

RabbitMQ 发布订阅

RabbitMQ 发布订阅视频学习地址: 简单模式下RabbitMQ 发布者发布消息 消费者消费消息 Publist/Subscribe 发布订阅 在 RabbitMQ 中,发布订阅模式是一种消息传递方式,其中发送者(发布者)不会将消息直接发送到特 定的…

8.微信小程序之自定义组件

目录 1. 创建-注册-使用组件 1.1 创建自定义组件 1.2 使用自定义组件 2. 自定义组件-数据和方法 3. 自定义组件-属性 4. 组件 wxml 的 slot 5. 组件样式以及注意事项 6. 组件样式隔离 7. 数据监听器 8. 组件间通信与事件 8.1 父往子传值 8.2 子往父传值 8.3 获取…

十四天学会Vue——Vue核心(理论+实战)上篇(第一天)

一、Vue核心(上篇) 热身tops:选取开发模式 ①用于开发模式 我们只需要知道 我们是开发模式,开发模式他会跟你提示代码出现错误的地方以及出错原因,而生产模式比较简洁。 ②用于生产模式 1.1 new Vue()实例 了解Vue&a…

shell脚本的基础应用

规范脚本的构成 #!/bin/bash # 注释信息 可执行的语句 执行脚本的方法 有1.添加x权限 ,绝对路经,或者相对路径2. 使用解释器 不需加x,root...bash...bash..echo 3,用source, 开机root ...bash ...echo bash -x /opt/test01.sh &#xff…

Linux网络-Socket套接字_Windows与Linux端双平台基于Udp传输协议进行多线程跨平台的服务器与客户端网络通信的简易聊天室实现

文章目录 一、Socket套接字二、socket 常见API1. int socket(int domain, int type, int protocol);2. int bind(int socket, const struct sockaddr *address, socklen_t address_len);struct sockaddr 3. ssize_t recvfrom(int socket, void *restrict buffer, size_t length…

话术巧妙分隔沟通效果更佳看看这个小技巧

客服回复客户咨询,如果遇到比较复杂的问题,经常会有大段的文字回复,用聊天宝的分段符功能,在需要分段的地方点击右上角的“插入分隔符”,就可以在指定位置分段,实现多段发送的目的。 前言 客服回复客户咨询…

Python-3.12.0文档解读-内置函数map()详细说明+记忆策略+常用场景+巧妙用法+综合技巧

一个认为一切根源都是“自己不够强”的INTJ 个人主页:用哲学编程-CSDN博客专栏:每日一题——举一反三Python编程学习Python内置函数 Python-3.12.0文档解读 目录 详细说明 map(function, iterable, *iterables) 参数 返回值 示例 注意事项 参考…