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

Vue3 源码解读系列(十一)——插槽 slot

slot

插槽的实现实际上就是一种 延时渲染,把父组件中编写的插槽内容保存到一个对象上,并且把具体渲染 DOM 的代码用函数的方式封装,然后在子组件渲染的时候,根据插槽名在对象中找到对应的函数,然后执行这些函数做真正的渲染。

/*** 创建 vnode*/
function createVNode(type, props = null, children = null) {if (props) {// 处理 props 相关逻辑,标准化 class 和 style}// 对 vnode 类型信息编码// 创建 vnode 对象const vnode = {type,props,// 其他一些属性}// 标准化子节点,把不同数据类型的 children 转成数组或者文本类型normalizeChildren(vnode, children)return vnode
}/*** 标准化子节点,以及获取 vnode 节点类型 shapeFlag,shapeFlag 最终为 SLOTS_CHILDREN | STATEFUL_COMPONENT*/
function normalizeChildren(vnode, children) {let type = 0const { shapeFlag } = vnode// 没有子节点if (children === null) {children = null}// 子节点为数组else if (isArray(children)) {type = 16 /* ARRAY_CHILDREN */}// 子节点为对象else if (typeof children === 'object') {// 子节点为元素或 teleportif ((shapeFlag & 1/* ELEMENT */ || shapeFlag & 64 /* TELEPORT */) && children.default) {normalizeChildren(vnode, children.default())return}// 子节点为 slotelse {type = 32/* SLOTS_CHILDREN */const slotFlag = children._if (!slotFlag && !(InternalObjectKey in children)) {children._ctx = currentRenderinglnstance}// 处理类型为 FORWARDED 的情况else if (slotFlag === 3 /* FORWARDED */ && currentRenderinglnstance) {// 动态插槽if (currentRenderingInstance.vnode.patchFlag & 1024/* DYNAMIC_SLOTS */) {children._ = 2/* DYNAMIC */vnode.patchFlag |= 1024 /* DYNAMIC SLOTS */}// 静态插槽else {children._ = 1/* STABLE */}}}}// 子节点为函数else if (isFunction(children)) {children = { default: children, _ctx: currentRenderinglnstance }type = 32/* SLOTS_CHILDREN */}// 其他子节点else {children = String(children)// teleport 类型if (shapeFlag & 64/* TELEPORT */) {type = 16/* ARRAY_CHILDREN */children = [createTextVNode(children)]}// 文本类型else {type = 8/* TEXT_CHILDREN */}}vnode.children = childrenvnode.shapeFlag |= type
}/*** 初始化 Slots*/
const initSlots = (instance, children) => {if (instance.vnode.shapeFlag & 32/* SLOTS_CHILDREN */) {const type = children._if (type) {instance.slots = childrendef(children, '_', type)} else {normalizeObjectSlots(children, (instance.slots = {}))}} else {instance.slots = {}if (children) {normalizeVNodeSlots(instance, children)}}def(instance.slots, InternalObjectKey, 1)
}/*** 渲染 slot DOM* @param {Object} slots - 插槽对象 instance.slots* @param {string} name - 插槽名*/
function renderSlot(slots, name, props = {}, fallback) {// 根据 name 获取对应插槽函数let slot = slots[name]// 通过 createBlock 创建 vnode 节点,类型为 Fragment,children 是执行 slot 插槽函数的返回值return (openBlock(), createBlock(Fragment, { key: props.key }, slot ? slot(props) : fallback ? fallback() : [], slots._ === 1/* STABLE */ ? 64/* STABLE_FRAGMENT */ : -2/* BAIL */));
}/*** 保证子组件中渲染具体插槽内容,保证它的数据作用域也是父组件*/
function withCtx(fn, ctx = currentRenderinglnstance) {if (!ctx) return fnreturn function renderFnWithContext() {// 保存当前渲染的组件实例 ownerconst owner = currentRenderingInstance// 把 ctx 设置为当前渲染的实例setCurrentRenderinglnstance(ctx)// 执行 fnconst res = fn.apply(null, arguments)// 把 ctx 设置为当前渲染的实例setCurrentRenderingInstance(owner)return res}
}/*** 处理 <Fragment>*/
const processFragment = (nl, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {const fragmentStartAnchor = (n2.el = n1 ? nl.el : hostCreateText(''))const fragmentEndAnchor = (n2.anchor = n1 ? nl.anchor : hostCreateText(''))let { patchFlag } = n2if (patchFlag > 0) {optimized = true}// 插入节点if (n1 == null) {// 先在前后插入两个空文本节点hostInsert(fragmentStartAnchor, container, anchor)hostInsert(fragmentEndAnchor, container, anchor)// 再挂载子节点mountChildren(n2.children, container, fragmentEndAnchor, parentComponent, parentSuspense, isSVG, optimized)}//更新节点else { }
}

相关文章:

Vue3 源码解读系列(十一)——插槽 slot

slot 插槽的实现实际上就是一种 延时渲染&#xff0c;把父组件中编写的插槽内容保存到一个对象上&#xff0c;并且把具体渲染 DOM 的代码用函数的方式封装&#xff0c;然后在子组件渲染的时候&#xff0c;根据插槽名在对象中找到对应的函数&#xff0c;然后执行这些函数做真正的…...

[github初学者教程] 分支管理-以及问题解决

作者&#xff1a;20岁爱吃必胜客&#xff08;坤制作人&#xff09;&#xff0c;近十年开发经验, 跨域学习者&#xff0c;目前于新西兰奥克兰大学攻读IT硕士学位。荣誉&#xff1a;阿里云博客专家认证、腾讯开发者社区优质创作者&#xff0c;在CTF省赛校赛多次取得好成绩。跨领域…...

见面礼——图论

给定一个 n 个点 n 条边的无向图&#xff0c;你需要求有多少种选择图上的一个点 p 和一条边 (x,y) 的方案&#xff0c;使得删去 (x,y) 后图变成一棵树&#xff0c;且这棵树以 p 为根时每个节点的儿子个数均不超过 3。保证至少存在一种这样的方案。 Input 输入的第一行一个整数…...

【论文阅读】SPARK:针对视觉跟踪的空间感知在线增量攻击

SPARK: Spatial-Aware Online Incremental Attack Against Visual Tracking introduction 在本文中&#xff0c;我们确定了视觉跟踪对抗性攻击的一个新任务&#xff1a;在线生成难以察觉的扰动&#xff0c;误导跟踪器沿着不正确的&#xff08;无目标攻击&#xff0c;UA&#x…...

MR混合现实教学系统在汽车检修与维护课堂教学中的应用

传统的汽车检修与维护课堂教学主要依赖教师口头讲解和黑板演示&#xff0c;这种方式存在一定的局限性。首先&#xff0c;对于一些复杂的机械结构和操作过程&#xff0c;教师难以生动形象地展示给学生。其次&#xff0c;学生无法直接观察到实际操作中的细节和注意事项&#xff0…...

CentOS7安装xvfb,解决服务器没有X-Server的问题

Linux服务器上一般没有图形界面,但是有时候有些软件又需要图形界面.比如oracle,自动化测试(puppeteer).运行的时候会提示没有没有X服务. 这时候一般不会去特地装图形界面.这个时候就要用xvfb来创建虚拟图形窗口. xvfb介绍 Xvfb(X Virtual Frame Buffer)是基于X Window的虚拟服…...

快速集成Skywalking 9(Windows系统、JavaAgent、Logback)

目录 一、Skywalking简介二、下载Skywalking服务端三、安装Skywalking服务端3.1 解压安装包3.2 启动Skywalking 四、关于Skywalking服务端更多配置五、Java应用集成skywalking-agent.jar5.1 下载SkyWalking Java Agent5.2 集成JavaAgent5.3 Logback集成Skywalking5.4 集成效果 …...

起立科技(起鸿)在第25届高交会上展示透明OLED技术创新

第二十五届中国国际高新技术成果交易会 日期&#xff1a;2023年11月15日 地点&#xff1a;福田会展中心7号馆 深圳&#xff0c;2023年11月15日 — 起鸿科技&#xff0c;作为透明OLED领域的引领者&#xff0c;于今日参展了第二十五届中国国际高新技术成果交易会。这一展会将汇…...

大模型LLM 在线量化;GPTQ\AWQ量化

1、大模型LLM 在线量化 参考:https://www.cnblogs.com/bruceleely/p/17348782.html ##8bit model = AutoModel.from_pretrained("THUDM/chatglm-6b", trust_remote_code=True).quantize(8).half(...

记一次线上bug排查-----SpringCloud Gateway组件 请求头accept-encoding导致响应结果乱码

基于公司的业务需求&#xff0c;在SpringCloud Gateway组件的基础上&#xff0c;写了一个转发服务&#xff0c;测试开发阶段运行正常&#xff0c;并实现初步使用。但三个月后&#xff0c;PostMan请求接口&#xff0c;返回异常&#xff0c;经排查&#xff0c;从日志中获取到转发…...

复杂数据统计与R语言程序设计实验一

1.下载并安装R语言软件&#xff0c;熟悉基本操作的命令及操作界面&#xff0c;掌握软件的使用方法&#xff08;提供学号加姓名的截图&#xff09;。 2.下载并安装Rstudio&#xff0c; &#xff08;提供运行代码及运行结果的截图&#xff09;。 3.下载并安装R包DT&#xff0c;…...

UEFI实战——键盘操作

一、键盘操作 UEFI下如何获取键盘键值,用户输入按键方式分两种:一种是单个按键,另外一种是组合按键。两种方式对应两个Protocol服务,接下来分步讲解。 二、单个按键 单个按键使用Protocol服务是EFI_SIMPLE_TEXT_INPUT_PROTOCOL,它定义在MdePkg/Include/Protocol/Simple…...

苹果CMS首涂第30套可装修DIY主题模板免授权版

这是一款可以装修的主题&#xff0c;类似淘宝店装修一样&#xff0c;可以针对首页、栏目页、详情页、播放页进行自定义装修&#xff0c;内置10个模块自由选择、添加、修改、删除、排序操作&#xff0c;后续升级还会增加更多实用和个性模块供选择&#xff0c;主题内包含的导航、…...

C#每天复习一个重要小知识day2:有参与无参构造函数

using System;public class MyClass {private int value;// 有参构造函数public MyClass(int v){this.value v;}// 无参构造函数public MyClass(){this.value 0;}public static void Main(string[] args){// 使用有参构造函数实例化对象MyClass obj1 new MyClass(10);Consol…...

大语言模型的三阶段训练

为了训练专有领域模型&#xff0c;选择LLaMA2-7B作为基座模型&#xff0c;由于LLaMA模型中文词表有限&#xff0c;因此首先进行中文词表的扩展&#xff0c;然后进行三阶段训练&#xff08;增量预训练&#xff0c;有监督微调&#xff0c;强化学习&#xff09;。 代码将全部上传…...

面试题c/c++ --STL 算法与数据结构

1.6 STL 模板 模板底层实现&#xff1a;编译器会对函数模板进行两次编译&#xff0c; 在声明的地方对模板代码本身进行编译&#xff0c; 在调用的地方对参数替换后的代码进行编译。 模板传参分析 模板重载 vector 是动态空间&#xff0c; 随着元素的加入&#xff0c; 它的内…...

云原生微服务-理论篇

文章目录 分布式应用的需求分布式架构治理模式演进ESB 是什么&#xff1f;微服务架构 MSA微服务实践细节微服务治理框架sidercar 什么是service mesh&#xff1f;康威定律微服务的扩展性什么是MSA 架构&#xff1f;中台战略和微服务微服务总体架构组件微服务网关服务发现与路由…...

Unity模拟薄膜干涉效果

Unity制作薄膜干涉效果&#xff0c;色彩斑斓的黑色石头 大家好&#xff0c;我是阿赵。   这次来做一个模拟薄膜干涉的彩色效果&#xff0c;Shader是使用ASE来连接&#xff0c;也算是ASE做复杂一点的效果的一个例子吧。 一、什么是薄膜干涉 以下解释来源于百度百科&#xff1…...

AIGC ChatGPT4对Gbase数据库进行总结

ChatGPT4 用一个Prompt完成Gbase数据库的总结。 AIGC ChatGPT 职场案例 AI 绘画 与 短视频制作 PowerBI 商业智能 68集 数据库Mysql 8.0 54集 数据库Oracle 21C 142集 Office 2021实战应用 Python 数据分析实战&#xff0c; ETL Informatica 数据仓库案例实战 Excel 2021实操 …...

OSI网络模型与TCP/IP协议

OSI&#xff0c; Open system Interconnection Reference Model 开放式系统互联通信参考模型。是国际标准化组织在1984年定义的一个概念框架&#xff0c;用于协调制定进程间通信标准。OSI作为一个协议规范集&#xff0c;定义了七个层次&#xff0c;包括层次之间的相互关系及各层…...

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

CMake基础:构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

BCS 2025|百度副总裁陈洋:智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

关于 WASM:1. WASM 基础原理

一、WASM 简介 1.1 WebAssembly 是什么&#xff1f; WebAssembly&#xff08;WASM&#xff09; 是一种能在现代浏览器中高效运行的二进制指令格式&#xff0c;它不是传统的编程语言&#xff0c;而是一种 低级字节码格式&#xff0c;可由高级语言&#xff08;如 C、C、Rust&am…...

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

C#中的CLR属性、依赖属性与附加属性

CLR属性的主要特征 封装性&#xff1a; 隐藏字段的实现细节 提供对字段的受控访问 访问控制&#xff1a; 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性&#xff1a; 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑&#xff1a; 可以…...

C# 表达式和运算符(求值顺序)

求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如&#xff0c;已知表达式3*52&#xff0c;依照子表达式的求值顺序&#xff0c;有两种可能的结果&#xff0c;如图9-3所示。 如果乘法先执行&#xff0c;结果是17。如果5…...