【Vue3源码学习】— CH3.2 VNode解析(下)

VNode解析—下

  • 4. normalizeChildren
    • 4.1 源码解析
    • 4.2 位运算符 |= 的应用
      • 4.2.1 按位或(|)
      • 4.2.2 赋值
      • 4.2.3 使用场景
      • 4.2.4 源码中`vnode.patchFlag |= PatchFlags.DYNAMIC_SLOTS`说明
    • 4.3 `;(children as RawSlots)._ = SlotFlags.STABLE` 说明
  • 5. Vue 应用的实例化和挂载流程
    • 5.1 Vue 项目结构
      • app.vue
      • main.js
    • 5.2 初始化和挂载
    • 5.3 调用 createVNode
    • 5.4 VNode 的创建
    • 5.5 渲染和更新
    • 5.6 结果
  • 6. 小结
    • 6.1 关键概念
      • VNode 的本质
      • 更新优化
      • 跨平台能力
    • 6.2 VNode 创建过程
      • 属性初始化
      • 递归处理子元素
      • 处理 shapeFlag
      • 处理 patchFlag
      • 类型处理
    • 6.3 性能和灵活性

4. normalizeChildren

normalizeChildren 函数的主要目的是规范化 VNode 的子元素,确保它们以适合 Vue 处理的格式存储。这对处理多种子节点类型(如数组、单个节点、插槽或文本)至关重要。此外,该函数还处理了传递给组件的插槽和 Teleport 组件的特殊情况。

4.1 源码解析

/*** 参数说明* vnode: 当前虚拟节点。* children: 可能是数组、对象、函数、字符串或其他格式的子节点。*/
export function normalizeChildren(vnode: VNode, children: unknown) {let type = 0const { shapeFlag } = vnode/*** 初始化和类型判断:* 判断 children 的数据类型,并据此设置 type 变量,该变量将用于更新 vnode.shapeFlag。*/if (children == null) {// 子节点为空,直接返回children = null} else if (isArray(children)) {/*** 数组类型的子节点:* 如果 children 是数组,则设置类型为 ShapeFlags.ARRAY_CHILDREN*/type = ShapeFlags.ARRAY_CHILDREN} else if (typeof children === &#

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

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

相关文章

cpp智能指针详解+简单模拟实现

在cpp中为了避免内存泄漏采取了一系列手段,例如智能指针,智能指针采用RAII思想来管理内存(Resource Acquisition Is Initialization是一种利用对象生命周期来控制程序资源(如内存、文件句柄、网络连接、互斥量等等)的简单技术。&a…

Java Swing制作大鱼吃小鱼魔改版本

《大鱼吃小鱼》这款游戏的历史渊源可以追溯到休闲游戏的兴起和发展。在游戏的早期发展阶段,开发者们开始探索各种简单而有趣的游戏玩法,以吸引玩家的注意力。在这样的背景下,《大鱼吃小鱼》应运而生,它结合了自然界的食物链原理与…

AI大模型之idea通义灵码智能AI插件安装方式

问题描述 主要讲述如何进行开发工具 idea中如何进行通义灵码的插件的安装解决方案 直接在idea的plugin市场中安装 下载插件之后进行安装 见资源

【python】中文数字转换为阿拉伯数字

题目:中文数字转换为阿拉伯数字,如下: 输入: 十一万亿五千三百万三千二百零七输出: 11000053003207思路: 先写一个处理10000以下的转换函数,如下代码的 num_process() 以亿和万分别进行切分…

JUC专题——Java并发基础

本文部分内容节选自《Java并发编程的艺术》 线程 现代操作系统调度的最小单元是 线程 , 也叫 轻量级进程 . 一个进程里可以创建多个线程, 线程拥有各自的计数器, 堆栈和局部变量, 并且能够访问共享的内存变量 线程优先级 现代操作系统使用时分的形式调度运行的线程, 操作系…

lua 光速入门

文章目录 安装注释字符串变量逻辑运算条件判断循环函数Table (表)常用全局函数模块化 首先明确 lua 和 js Python一样是动态解释性语言,需要解释器执行。并且不同于 Python 的强类型与 js 的弱类型,它有点居中,倾向于强类型。 安装 下载解释…

【OpenHarmony】TDD-FUZZ环境配置

零、参考 1、AttributeError: ‘ElementTree‘ object has no attribute ‘getiterator‘:https://blog.csdn.net/suhao0911/article/details/110950742 一、创建工作目录 1、新建工作目录如:D:\0000_TDD_FUZZ\0000_ohos_tdd_fuzz。 2、gitee上下载 t…

陇剑杯 ios 流量分析 CTF writeup

陇剑杯 ios 流量分析 链接:https://pan.baidu.com/s/1KSSXOVNPC5hu_Mf60uKM2A?pwdhaek 提取码:haek目录结构 LearnCTF ├───LogAnalize │ ├───linux简单日志分析 │ │ linux-log_2.zip │ │ │ ├───misc日志分析 │ │…

html+vue编写分页功能

效果&#xff1a; html关键代码&#xff1a; <div class"ui-jqgrid-resize-mark" id"rs_mlist_table_C87E35BE"> </div><div class"list_component_pager ui-jqgrid-pager undefined" dir"ltr"><div id"pg…

Linux编辑器-vim的使用

vim的基本概念 vim的三种模式(其实有好多模式&#xff0c;目前掌握这3种即可),分别是命令模式&#xff08;command mode&#xff09;、插 入模式&#xff08;Insert mode&#xff09;和底行模式&#xff08;last line mode&#xff09;&#xff0c;各模式的功能区分如下&#…

中医优势病种诊疗方案数据库

中医诊疗方案结合了几千年的实践经验与理论体系&#xff0c;形成了一套独特的诊疗方法。随着国家对中医药事业的重视&#xff0c;多个中医诊疗方案被国家卫生健康委员会和国家中医药管理局等权威机构正式发布&#xff0c;这对规范中医临床诊疗行为&#xff0c;提升医疗服务质量…

富格林:学习甄别暗箱陷阱阻挠受害

富格林悉知&#xff0c;黄金投资在投资市场上扮演着重要的角色&#xff0c;在任何时期总有人在投资黄金。然而&#xff0c;对于新手投资者来说&#xff0c;了解虚假信息防止诱骗暗箱受害是非常关键的&#xff0c;投资者在进入投资市场之前&#xff0c;需要掌握一定的技术要领&a…

MTK MFNR

一、MFNR 简介 二、MFNR 开关与决策 三、MFNR 相关的adb 命令 四、MFNR log 分析 五 参考文献 一、MFNR 简介 MFNR : Multiple Frame Noise Reduction MFLL : Multiple Frame Low Light BSS : Best Select Shot MFNR 跟 MFLL 是两个功能一致&#xff0c;名称不同的简称&#xf…

SAP MESSAGEID FF759 不能过帐凭证:本币计的税基为0的快捷方案

不能过帐凭证:本币计的税基为0 消息编号 FF759 诊断 尝试步成本币中计税基数为零的凭证&#xff0c;尽管外币中税金额和计税基数不为零&#xff0c; 系统响应 拒绝凭证输入。 步骤 再次输入凭证。 这个错误的原因&#xff0c;是因为四舍五入导致的税为零。根据百度的反馈&…

执行npm命令一直出现sill idealTree buildDeps怎么办?

一、问题 今天在运行npm时候一直出项sill idealTree buildDeps问题 二、 解决 1、先删除用户界面下的npmrc文件&#xff08;注意一定是用户C:\Users\{账户}\下的.npmrc文件下不是nodejs里面&#xff09;&#xff0c;进入到对应目录下&#xff0c;Mac启动显示隐藏文件操作&…

生产服务器变卡怎么排查

服务器变卡怎么排查&#xff0c;可以从以下四个方面去考虑 生产服务器变卡怎么排查 1、网络2、cpu的利用率3、io效率4、内存瓶颈 1、网络 可以使用netstat、iftop等工具查看网络流量和网络连接情况&#xff0c;检查是否网络堵塞、丢包等问题 2、cpu的利用率 1、用top命令定…

【arcpy】 解决构建过小面矢量无效

问题描述 通常利用arcpy向面矢量添加面数据的方法如下 import arcpy singlePolygon [[86.30491319444444, 31.08521484375], [86.30491427951388, 31.08521484375], [86.30491427951388, 31.085215928819444], [86.30491319444444, 31.085215928819444],[86.30491319444444,…

python在selenium网页模拟运行过程中需要打开文件夹上传文件的情况的解决方法

在selenium运行过程中&#xff0c;可能会遇到网页需要上传文件图片等情况&#xff0c;有时可以直接用selenium中send_keys直接上传&#xff0c;但是有时不行&#xff0c;这时我们需要用到另一个包&#xff0c;pywinauto 具体的代码如下&#xff0c; import pywinauto # pywina…

JNI NDK错误汇总

问题一&#xff1a;This app only has 32-bit [armeabi-v7a] native libraries. 解决&#xff1a;在app目录下的build.gradle的android结构里加上arm64-v8a&#xff0c;如下&#xff1a; android {.......defaultConfig{ndk{ abiFilters armeabi-v7a, arm64-v8a //abiFilters a…

驱动执行篇之电机编码器:编码器基础与双编码器方案

目录 |1.编码器概述 |2.编码器分类 |2.1.增量式编码器和绝对值编码器 |2.2.光电编码器 |3.双编码器方案 |3.1几种扭矩感知方案 |3.3双编码器安装方式 |1.编码器概述 编码器 编码器&#xff0c;是将信号&#xff08;如比特流&#xff09;或数据进行编制、转换为可用以通讯…