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 插槽的实现实际上就是一种 延时渲染,把父组件中编写的插槽内容保存到一个对象上,并且把具体渲染 DOM 的代码用函数的方式封装,然后在子组件渲染的时候,根据插槽名在对象中找到对应的函数,然后执行这些函数做真正的…...
[github初学者教程] 分支管理-以及问题解决
作者:20岁爱吃必胜客(坤制作人),近十年开发经验, 跨域学习者,目前于新西兰奥克兰大学攻读IT硕士学位。荣誉:阿里云博客专家认证、腾讯开发者社区优质创作者,在CTF省赛校赛多次取得好成绩。跨领域…...
见面礼——图论
给定一个 n 个点 n 条边的无向图,你需要求有多少种选择图上的一个点 p 和一条边 (x,y) 的方案,使得删去 (x,y) 后图变成一棵树,且这棵树以 p 为根时每个节点的儿子个数均不超过 3。保证至少存在一种这样的方案。 Input 输入的第一行一个整数…...
【论文阅读】SPARK:针对视觉跟踪的空间感知在线增量攻击
SPARK: Spatial-Aware Online Incremental Attack Against Visual Tracking introduction 在本文中,我们确定了视觉跟踪对抗性攻击的一个新任务:在线生成难以察觉的扰动,误导跟踪器沿着不正确的(无目标攻击,UA&#x…...
MR混合现实教学系统在汽车检修与维护课堂教学中的应用
传统的汽车检修与维护课堂教学主要依赖教师口头讲解和黑板演示,这种方式存在一定的局限性。首先,对于一些复杂的机械结构和操作过程,教师难以生动形象地展示给学生。其次,学生无法直接观察到实际操作中的细节和注意事项࿰…...
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技术创新
第二十五届中国国际高新技术成果交易会 日期:2023年11月15日 地点:福田会展中心7号馆 深圳,2023年11月15日 — 起鸿科技,作为透明OLED领域的引领者,于今日参展了第二十五届中国国际高新技术成果交易会。这一展会将汇…...
大模型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导致响应结果乱码
基于公司的业务需求,在SpringCloud Gateway组件的基础上,写了一个转发服务,测试开发阶段运行正常,并实现初步使用。但三个月后,PostMan请求接口,返回异常,经排查,从日志中获取到转发…...
复杂数据统计与R语言程序设计实验一
1.下载并安装R语言软件,熟悉基本操作的命令及操作界面,掌握软件的使用方法(提供学号加姓名的截图)。 2.下载并安装Rstudio, (提供运行代码及运行结果的截图)。 3.下载并安装R包DT,…...
UEFI实战——键盘操作
一、键盘操作 UEFI下如何获取键盘键值,用户输入按键方式分两种:一种是单个按键,另外一种是组合按键。两种方式对应两个Protocol服务,接下来分步讲解。 二、单个按键 单个按键使用Protocol服务是EFI_SIMPLE_TEXT_INPUT_PROTOCOL,它定义在MdePkg/Include/Protocol/Simple…...
苹果CMS首涂第30套可装修DIY主题模板免授权版
这是一款可以装修的主题,类似淘宝店装修一样,可以针对首页、栏目页、详情页、播放页进行自定义装修,内置10个模块自由选择、添加、修改、删除、排序操作,后续升级还会增加更多实用和个性模块供选择,主题内包含的导航、…...
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…...
大语言模型的三阶段训练
为了训练专有领域模型,选择LLaMA2-7B作为基座模型,由于LLaMA模型中文词表有限,因此首先进行中文词表的扩展,然后进行三阶段训练(增量预训练,有监督微调,强化学习)。 代码将全部上传…...
面试题c/c++ --STL 算法与数据结构
1.6 STL 模板 模板底层实现:编译器会对函数模板进行两次编译, 在声明的地方对模板代码本身进行编译, 在调用的地方对参数替换后的代码进行编译。 模板传参分析 模板重载 vector 是动态空间, 随着元素的加入, 它的内…...
云原生微服务-理论篇
文章目录 分布式应用的需求分布式架构治理模式演进ESB 是什么?微服务架构 MSA微服务实践细节微服务治理框架sidercar 什么是service mesh?康威定律微服务的扩展性什么是MSA 架构?中台战略和微服务微服务总体架构组件微服务网关服务发现与路由…...
Unity模拟薄膜干涉效果
Unity制作薄膜干涉效果,色彩斑斓的黑色石头 大家好,我是阿赵。 这次来做一个模拟薄膜干涉的彩色效果,Shader是使用ASE来连接,也算是ASE做复杂一点的效果的一个例子吧。 一、什么是薄膜干涉 以下解释来源于百度百科࿱…...
AIGC ChatGPT4对Gbase数据库进行总结
ChatGPT4 用一个Prompt完成Gbase数据库的总结。 AIGC ChatGPT 职场案例 AI 绘画 与 短视频制作 PowerBI 商业智能 68集 数据库Mysql 8.0 54集 数据库Oracle 21C 142集 Office 2021实战应用 Python 数据分析实战, ETL Informatica 数据仓库案例实战 Excel 2021实操 …...
OSI网络模型与TCP/IP协议
OSI, Open system Interconnection Reference Model 开放式系统互联通信参考模型。是国际标准化组织在1984年定义的一个概念框架,用于协调制定进程间通信标准。OSI作为一个协议规范集,定义了七个层次,包括层次之间的相互关系及各层…...
如何在看板中体现优先级变化
在看板中有效体现优先级变化的关键措施包括:采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中,设置任务排序规则尤其重要,因为它让看板视觉上直观地体…...
线程与协程
1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指:像函数调用/返回一样轻量地完成任务切换。 举例说明: 当你在程序中写一个函数调用: funcA() 然后 funcA 执行完后返回&…...
DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI
前一阵子在百度 AI 开发者大会上,看到基于小智 AI DIY 玩具的演示,感觉有点意思,想着自己也来试试。 如果只是想烧录现成的固件,乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外,还提供了基于网页版的 ESP LA…...
unix/linux,sudo,其发展历程详细时间线、由来、历史背景
sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...
NFT模式:数字资产确权与链游经济系统构建
NFT模式:数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新:构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议:基于LayerZero协议实现以太坊、Solana等公链资产互通,通过零知…...
NLP学习路线图(二十三):长短期记忆网络(LSTM)
在自然语言处理(NLP)领域,我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感,还是实现语言的翻译,都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心,而循环神经网络(RNN) 曾被视为…...
精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南
精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南 在数字化营销时代,邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天,我们将深入解析邮件打开率、网站可用性、页面参与时…...
LeetCode - 199. 二叉树的右视图
题目 199. 二叉树的右视图 - 力扣(LeetCode) 思路 右视图是指从树的右侧看,对于每一层,只能看到该层最右边的节点。实现思路是: 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...
MySQL 知识小结(一)
一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库,分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷,但是文件存放起来数据比较冗余,用二进制能够更好管理咱们M…...
免费数学几何作图web平台
光锐软件免费数学工具,maths,数学制图,数学作图,几何作图,几何,AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...
