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"),]);

可以正确渲染

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

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

相关文章

MSI打包后门成安装包

目录 浏览器下载地址 启动>next 选择后门所在路径&#xff0c;和生成安装包后存放路径 next>Hidden 配置变量 Look up随便找个伪装&#xff0c;然后点击一下Creat New ​注册表Registry导入 ​点击否&#xff0c;不购买专业版 ​安装包生成成功​编辑 浏览器下…

Mybatis进阶の常用配置级联查询

2 Mybatis常用配置 mybatis-config.xml中除了可以配置数据库服务器的环境以外&#xff0c;还可以配置其他的操作&#xff0c;帮助开发人员简化配置代码。常见的配置信息有以下内容&#xff1a; 1 配置内容 SqlMapConfig.xml中配置的内容和顺序如下&#xff1a;properties&am…

(自用)共享单车服务器(一):服务器项目配置

项目目录结构 conf:用来存放配置文件 git:用来存放从git上克隆的项目 src:用来存放项目源文件 test:用来存放测试文件 third:用来存放第三方头文件、第三方库 安装iniparser(关于iniparser的使用需进一步学习) 1.项目目录中创建git文件夹&#xff0c;用于存放GitHub上克隆…

计算机网络-IGMPv1工作原理简介

一、IGMPv1的原理简介 前面我们大致了解了IGMP用于在连接组播组成员的组播路由器总通过交互IGMP报文生成IGMP组表项和IGMP路由表项。IGMP报文封装在IP报文中。到目前为止&#xff0c;IGMP有三个版本&#xff1a;IGMPv1、IGMPv2、IGMPv3。 今天主要学习IGMPv1的作用和工作原理。…

深度学习论文: LLaMA: Open and Efficient Foundation Language Models

深度学习论文: LLaMA: Open and Efficient Foundation Language Models LLaMA: Open and Efficient Foundation Language Models PDF:https://arxiv.org/pdf/2302.13971.pdf PyTorch: https://github.com/shanglianlm0525/PyTorch-Networks 1 概述 本文介绍了LLaMA&#xff0…

浅谈重要组件JSR223介绍

浅谈重要组件JSR223介绍 JSR223 脚本组件是一个极其强大的特性&#xff0c;它允许用户利用各种脚本语言编写复杂的测试逻辑&#xff0c;极大地增强了 JMeter 的灵活性和功能。本文将对 JSR223 进行详细介绍&#xff0c;并解释如何在 JMeter 测试计划中有效地应用它。 JSR223 …

数据开源 | Magic Data大模型高质量十万轮对话数据集

能够自然的与人类进行聊天交谈&#xff0c;是现今的大语言模型 (LLM) 区别于传统语言模型的重要能力之一&#xff0c;近日OpenAI推出的GPT-4o给我们展示了这样的可能性。 对话于人类来说是与生俱来的&#xff0c;但构建具备对话能力的大模型是一项不小的挑战&#xff0c;收集高…

基于Android平台开发,仿头条新闻app

1. 项目模块功能思维导图 2. 项目涉及到的技术点 数据来源&#xff1a;聚合数据API使用okhttp网络请求框架获取api数据使用gson库解析json数据使用RecyclerViewadapter实现新闻列表使用SQLite数据库实现用户登录&#xff0c;注册&#xff0c;浏览历史记录使用SharedPreference…

一、银河麒麟在VMware虚拟机中如何永久更改窗口分辨率大小?

1 在/etc/X11/xorg.conf.d目录下创建一个xorg.conf文件&#xff0c;该文件决定系统启动后默认的分辨率 2 填写如下内容 Section "Monitor" Identifier "Monitor0" VendorName "Monitor Vendor" ModelName "…

【计算机网络仿真】b站湖科大教书匠思科Packet Tracer——实验17 开放最短路径优先OSPF

一、实验目的 1.验证OSPF协议的作用&#xff1b; 二、实验要求 1.使用Cisco Packet Tracer仿真平台&#xff1b; 2.观看B站湖科大教书匠仿真实验视频&#xff0c;完成对应实验。 三、实验内容 1.构建网络拓扑&#xff1b; 2.验证OSPF协议的作用。 四、实验步骤 1.构建网…

AutoMQ 与蚂蚁数科达成战略合作

近期&#xff0c;AutoMQ 与蚂蚁数科正式签署战略合作协议&#xff0c;将和蚂蚁数科云原生 PaaS 平台 SOFAStack 在产品研发、生态集成、市场合作、技术社区影响力等多方面开展深度合作。 AutoMQ 是业内领先的消息和流存储服务提供商&#xff0c;基于云原生基础设施重新设计了 …

解密 AI 客服:LangChain+ChatGPT 打造智能客服新时代

你需要了解 ChatGPT ChatGPT 是 OpenAI 开发的一种基于人工智能技术的自然语言处理模型。它可以通过对大量文本数据进行训练&#xff0c;自动生成高质量的回答和对话。ChatGPT 具有高效、准确、自然的特点&#xff0c;可以帮助人们更加高效地处理信息和交流。 ChatGPT 有很多…

el-from中校验,如果某一项需要另一项填写才能校验

使用validateField <el-form:model"params":rules"rules":scroll-to-error"true"ref"refrom"v-else><el-form-item label"用户姓名" prop"name"><el-input placeholder"请输入用户姓名"…

Spring Boot 常用 Starter

Spring Boot Starter 是 Spring Boot 提供的一系列预定义的依赖集合&#xff0c;旨在帮助开发者快速构建应用。这些 Starter 包含了常见的依赖和配置&#xff0c;极大地简化了项目的初始化和开发过程。本文将介绍一些常用的 Spring Boot Starter&#xff0c;并通过实际示例展示…

机器学习实现自然语言处理的背后技术详解

引言 自然语言处理&#xff08;NLP&#xff09;是机器学习领域中的一个重要分支&#xff0c;它涉及到让计算机理解和生成人类语言。随着深度学习技术的快速发展&#xff0c;NLP在许多应用领域取得了显著的成果&#xff0c;如机器翻译、情感分析、文本摘要等。本文将深入探讨机…

全网最简单的Java设计模式【五】Java单例模式 饿汉式详解

Java单例模式 饿汉式详解 【创作】 不易&#xff0c;【点赞】 是情义&#xff0c;【关注】 是动力&#xff0c;【收藏】 是回忆。 示例代码地址&#xff1a;https://gitee.com/code-in-java/csdn-blog.git 一、概念与原理 Java中的单例模式是一种确保一个类只有一个实例&#…

图片海报怎么做成二维码展示?二维码分享图片的制作技巧

怎么把图片的宣传海报做成二维码呢&#xff1f;在做活动或者产品宣传时&#xff0c;都会制作精美的图片海报&#xff0c;除了打印传单或者制作展板的方式来展示外&#xff0c;将海报图片生成二维码&#xff0c;通过分享二维码来实现图片海报的快速传播&#xff0c;能够有效提升…

大话光学原理:2.最短时间原理、“魔法石”与彩虹

一、最短时间原理 1662年左右&#xff0c;费马在一张信纸的边角&#xff0c;用他那著名的潦草笔迹&#xff0c;随意地写下了一行字&#xff1a;“光在两点间选择的路&#xff0c;总是耗时最少的。”这句话&#xff0c;简单而深邃&#xff0c;像是一颗悄然种下的种子&#xff0c…

After Detailer让图像自动修复

After Detailer&#xff08;简称adetailer&#xff09;是一个Stable Diffusion的自动Web-UI扩展&#xff0c;它能够自动化修复图像中的不完整部分&#xff0c;例如模糊的人脸等常见问题。在这篇文章中&#xff0c;你将了解它的工作原理、如何使用它&#xff0c;以及一些常见的使…

品牌策划学习资源全攻略:从入门到精通的推荐清单!

这里再分享一些网站书籍和杂志给大家。 TOPYS创意内容平台&#xff1a; 专注于创意内容分享&#xff0c;涵盖广告、设计、艺术等多个领域&#xff0c;是广告设计人寻找创意灵感的好去处。 Dribbble&#xff1a; 设计师社区&#xff0c;用户可以浏览到全球设计师的优秀作品&…