当前位置: 首页 > news >正文

vue3源码(六)渲染原理-runtime-core

1.依赖关系

  • runtime-dom 依赖于runtime-core,runtime-core 依赖于reactivityshared
  • runtime-core提供跨平台的渲染方法createRenderer,用户可以自己传递节点渲染的渲染方法renderOptions,本身不关心用户使用什么API
  • runtime-dom提供了为浏览器而生的渲染方法renderrender方法调用runtime-corecreateRenderer方法传递的renderOptions runtime-dom封装好的一系列关于渲染浏览器dom节点的操作
const renderOptions = Object.assign({ patchProp }, nodeOps);
export const render = (vnode,container)=>{return createRenderer(renderOptions).render(vnode,container)
}

2.init

2.1 package init

runtime-core/package.json

{"name": "@vue/runtime-core","version": "1.0.0","main": "index.js","module": "dist/runtime-core.esm-bundler.js","unpkg": "dist/runtime-core.global.js","buildOptions": {"name": "RuntimeCore","formats": ["esm-bundler","esm-browser","cjs","global"]},"dependencies": {"@vue/reactivity": "^3.4.30","@vue/shared": "*"}
}

2.2 调整runtime-dom/index依赖


import { nodeOps } from "./nodeOps";
import patchProp from "./patchProp";
import {createRenderer} from '@vue/runtime-core'const renderOptions = Object.assign({ patchProp }, nodeOps);
export { renderOptions };// 如果我们采用的是runtime-dom中的render方法,我们不需要传递renderOptions,因为会把runtime-dom 这一层的dom处理方法传递进去,主要为浏览器而生的
// 如果我们用的是runtime-core 中的createRenderer,需要用户自己传递renderOptions   并不关心采用什么api// runtime-dom 是内置的dom api 会去调用createRenderer,传入渲染选项,返回的渲染器有一个render方法
// 采用dom api 进行渲染
export const render = (vnode,container)=>{return createRenderer(renderOptions).render(vnode,container)
}export  * from "@vue/runtime-core"

3.实现

3.1 init

createRenderer接受一个参数dom渲染相关配置,提供一个render方法,参数为虚拟节点和真实的dom元素

export function createRenderer(renderOptions) {const {insert: hostInsert,remove: hostRemove,patchProp: hostPatchProp,createElement: hostCreateElement,createText: hostCreateText,setText: hostSetText,setElementText: hostSetElementText,parentNode: hostParentNode,nextSibling: hostNextSibling,} = renderOptions;const render = (vnode, container) => {// 将虚拟节点变成真实节点进行渲染 };return {render,};
}

3.2 render实现

const mountElement = (vnode, container) => {console.log(vnode);const { type, children, props } = vnode;let el = hostCreateElement(type);if (props) {for (let key in props) {hostPatchProp(el, key, null, props[key]);}}hostSetElementText(el, children);hostInsert(el, container);};const patch = (n1, n2, container) => {if (n1 == n2) {return;}if (n1 == null) {mountElement(n2, container);}};// core 中不关心如何渲染const render = (vnode, container) => {// 将虚拟节点变成真实节点进行渲染patch(container._vnode || null, vnode, container);container._vnode = vnode;};

vnode如图:
在这里插入图片描述

const ele1 = h("h1",{ style: { color: "red" }},"hello world");const ele2 = h("h1",{ style: { color: "green" } },"hello world");render(ele1, document.getElementById("app"));setTimeout(()=>{render(ele2, document.getElementById("app"));},3000)

此时可以实现基础渲染,由于我们知道节点children是文本,可以直接使用文本进行渲染,那如果dom里面又嵌套一个dom呢?

3.3 shapeFlag

为了能够判断子节点的类型,定义一个枚举

export const enum ShapeFlags { // vue3提供的形状标识ELEMENT = 1,FUNCTIONAL_COMPONENT = 1 << 1,STATEFUL_COMPONENT = 1 << 2,TEXT_CHILDREN = 1 << 3,ARRAY_CHILDREN = 1 << 4,SLOTS_CHILDREN = 1 << 5,TELEPORT = 1 << 6,SUSPENSE = 1 << 7,COMPONENT_SHOULD_KEEP_ALIVE = 1 << 8,COMPONENT_KEPT_ALIVE = 1 << 9,COMPONENT = ShapeFlags.STATEFUL_COMPONENT | ShapeFlags.FUNCTIONAL_COMPONENT
}

比如const ele1 = h("h1", { style: { color: "red" } }, "hello world");是节点和文本的组合,节点为1,文本为8,采用或运算,得出节点类型数据9,可以看到上图中节点的shapeFlag为9,采用&运算得出节点具体类型 8&9=1000&1001=1000>0 则证明包含这个类型

const mountChildren = (children, container) => {for(let i=0;i<children.length;i++) {// 数组可能为字符串而不是节点patch(null, children[i], container)}};const { type, children, props, shapeFlag } = vnode;if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {hostSetElementText(el, children);} else if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {mountChildren(children, el);}

此处判断了TEXT_CHILDREN是文本,ARRAY_CHILDREN是数组

const ele3 = h("h1", { style: { color: "red" } }, [h("p", "hello"),h("p", "world"),]);

可以正确渲染

相关文章:

vue3源码(六)渲染原理-runtime-core

1.依赖关系 runtime-dom 依赖于runtime-core,runtime-core 依赖于reactivity和sharedruntime-core提供跨平台的渲染方法createRenderer&#xff0c;用户可以自己传递节点渲染的渲染方法renderOptions&#xff0c;本身不关心用户使用什么APIruntime-dom提供了为浏览器而生的渲染…...

python拆分Excel数据,自动发邮箱

import pandas as pd import poplib import email from email.header import decode_header from email.parser import Parser df = pd.read_excel("年假明细表.xlsx") depts = df["部门"].unique() for dept in depts: department_df = df[df[&q…...

2024年福州延安中学夏季拿云杯拔尖创新人才素养测试(小高组)

1、选择题 那么&#xff0c;mn的值是&#xff08; &#xff09; A、1243 B、1343 C、4029 D、4049 2、填空题 一副扑克牌共54张&#xff0c;其中1到13点各有 4张&#xff0c;每个数字黑色红色各两张&#xff0c;还有两张王牌&#xff0c;至少要取出&#xff08; &#xff09;…...

ES6 之 Promise 构造函数知识点总结 (四)

Promise 是异步编程的一种解决方案&#xff0c;比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现&#xff0c;ES6 将其写进了语言标准&#xff0c;统一了用法&#xff0c;原生提供了 Promise 对象。 Promise 对象有以下两个特点。 对象的状态不受…...

KIVY 3D Rotating Monkey Head¶

7 Python Kivy Projects (With Full Tutorials) – Pythonista Planet KIVY 3D Rotating Monkey Head kivy 3D 旋转猴子头How to display rotating monkey example in a given layout. Issue #6688 kivy/kivy GitHub 3d 模型下载链接 P99 - Download Free 3D model by …...

测试几个 ocr 对日语的识别情况

测试几个 ocr 对日语的识别情况 1. EasyOCR2. PaddleOCR3. Deepdoc&#xff08;识别pdf中图片&#xff09;4. Deepdoc&#xff08;识别pdf中文字&#xff09;5. Nvidia neva-22b6. Claude 3.5 sonnet 识别图片中的文字7. Claude 3.5 sonnet 识别 pdf 中表格8. OpenAI gpt-4o 识…...

华为机考前准备工作

很多同学在刷完真题后&#xff0c;就直接去考试了&#xff0c;会发现不是卡在了题目的难度上&#xff0c;而是卡在了代码数据的如何输入上。为了避免各位有志之士忽略小细节而导致的前功尽弃&#xff0c;博主特意总结了华为机考试题数据输入的几种情况及其源代码&#xff0c;仅…...

偏差、方差(训练误差,验证误差)

目录 一、偏差、方差&#xff1a;二、正则化参数λ对偏差、方差的影响&#xff1a;三、训练集规模对偏差、方差的影响&#xff1a;四、模型复杂度对偏差、方差的影响&#xff1a;五、方差、偏差如何帮助训练&#xff1a;1.高偏差解决方法&#xff1a;2.高方差解决方法&#xff…...

Retrofit框架源码深度剖析【Android热门框架分析第二弹】

Android热门框架解析&#xff0c;你确定不来看看吗&#xff1f; OkHttp框架源码深度剖析【Android热门框架分析第一弹】 Retrofit框架源码深度剖析【Android热门框架分析第二弹】 什么是Retrofit&#xff1f; 准确来说&#xff0c;Retrofit 是一个 RESTful 的 HTTP 网络请求…...

C++Windows环境搭建(CLion)

文章目录 CLion下载安装CLion下载CLion安装新建项目新建一个文件基础设置字体设置clion中单工程多main函数设置 参考 CLion下载安装 CLion下载 打开网址&#xff1a;https://www.jetbrains.com/clion/download/ 点击Download进行下载。 CLion安装 双击下载好的安装包&…...

【区块链 + 智慧政务】省级一体化区块链平台 | FISCO BCOS应用案例

在加强数字政府建设的大背景下&#xff0c;科大讯飞广泛应用数字技术于政府管理服务&#xff0c;推动政府数字化、智能化运行。同时&#xff0c; 统筹推进业务、数据和技术的融合&#xff0c;提升跨地域、跨层级、跨部门和跨业务的协同管理和服务水平。 当前政务信息化建设中&…...

局域网远程共享桌面如何实现

在局域网内实现远程共享桌面&#xff0c;可以通过以下几种方法&#xff1a; 一、使用Windows自带的远程桌面功能&#xff1a; 首先&#xff0c;在需要被控制的电脑上右键点击“此电脑”&#xff0c;选择“属性”。 进入计算机属性界面后&#xff0c;点击“高级系统设置”&am…...

Ubuntu固定虚拟机的ip地址

1、由于虚拟机网络是桥接&#xff0c;所以ip地址会不停地变化&#xff0c;接下来我们就讲述ip如何固定 2、如果apt安装时报错W: Target CNF (multiverse/cnf/Commands-all) is configured multiple times in /etc/apt/sources.list:10&#xff0c; 检查 /etc/apt/sources.list…...

python破解密码·筛查和选择

破解密码时可能遇到的几种情况 ① 已知密码字符&#xff0c;破排序 ② 已知密码位数&#xff0c;破字符 ③ 已知密码类型&#xff0c;破字位 ④ 已知部分密码&#xff0c;破未知 ⑤ 啥都不知道&#xff0c;盲破&#xff0c;玩完 ⑥ 已知位数、字符、类型、部分密码中的几个&am…...

【将应用程序注册为系统服务】

在 Linux 系统中&#xff0c;将应用程序注册为系统服务可以使其在系统启动时自动运行&#xff0c;并且可以通过 systemctl 命令进行管理。/etc/systemd/system 目录是用于存放用户定义的 systemd 服务单元文件的目录。 将 Logstash 注册为系统服务 假设你已经安装了 Logstash…...

从0-1搭建一个web项目(路由目录分析)详解

本章分析vue路由目录文件详解 ObJack-Admin一款基于 Vue3.3、TypeScript、Vite3、Pinia、Element-Plus 开源的后台管理框架。在一定程度上节省您的开发效率。另外本项目还封装了一些常用组件、hooks、指令、动态路由、按钮级别权限控制等功能。感兴趣的小伙伴可以访问源码点个赞…...

Zabbix分布式监控

目录 分布式监控架构 实现分布式监控的步骤 优点和应用场景 安装Zabbix_Proxy Server端Web页面配置 测试 Zabbix 的分布式监控架构允许在大规模和地理上分散的环境中进行高效的监控。通过分布式监控&#xff0c;Zabbix 可以扩展其监控能力&#xff0c;支持大量主机和设备…...

前端面试39(关于git)

针对前端开发者的Git面试题可以覆盖Git的基础概念、常用命令、工作流程、团队协作、以及解决冲突等方面。以下是一些具体的Git面试 Git基础知识 什么是Git&#xff1f; Git是一个分布式版本控制系统&#xff0c;用于跟踪计算机文件的更改&#xff0c;并协调多个人共同在一个项…...

13--memcache与redis

前言&#xff1a;数据库读取速度较慢一直是无法解决的问题&#xff0c;大型网站应对的方式主要是使用缓存服务器来缓解这种情况&#xff0c;减少数据库访问次数&#xff0c;以提高动态Web等应用的速度、提高可扩展性。 1、简介 Memcached/redis是高性能的分布式内存缓存服务器…...

QT学习日记一

创建QT文件步骤 这是创建之后widget.cpp和widget.h文件的具体代码解释&#xff0c;也是主要操作的文件&#xff0c;其中main.cpp不用操作&#xff0c;ui则是图形化操作界面&#xff0c;综合使用时&#xff0c;添加一个元件要注意重编名和编译一下&#xff0c;才能在widget这类…...

浏览器访问 AWS ECS 上部署的 Docker 容器(监听 80 端口)

✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义&#xff08;Task Definition&…...

云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

怎么让Comfyui导出的图像不包含工作流信息,

为了数据安全&#xff0c;让Comfyui导出的图像不包含工作流信息&#xff0c;导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo&#xff08;推荐&#xff09;​​ 在 save_images 方法中&#xff0c;​​删除或注释掉所有与 metadata …...

uniapp 集成腾讯云 IM 富媒体消息(地理位置/文件)

UniApp 集成腾讯云 IM 富媒体消息全攻略&#xff08;地理位置/文件&#xff09; 一、功能实现原理 腾讯云 IM 通过 消息扩展机制 支持富媒体类型&#xff0c;核心实现方式&#xff1a; 标准消息类型&#xff1a;直接使用 SDK 内置类型&#xff08;文件、图片等&#xff09;自…...

华为OD最新机试真题-数组组成的最小数字-OD统一考试(B卷)

题目描述 给定一个整型数组,请从该数组中选择3个元素 组成最小数字并输出 (如果数组长度小于3,则选择数组中所有元素来组成最小数字)。 输入描述 行用半角逗号分割的字符串记录的整型数组,0<数组长度<= 100,0<整数的取值范围<= 10000。 输出描述 由3个元素组成…...