解读vue3源码-2

提示:看到我 请让滚去学习

vue3编译模版的提升

文章目录

  • vue3编译模版的提升
    • 静态节点提升
    • 补丁标志和block的使用
    • 附录:


template explorer可以将我们的源模版转化成渲染函数代码,vue2中就有,而Vue3 template explorer 功能更加丰富。

静态节点提升

请添加图片描述
当我们开启静态提升,可以发现静态节点确实被从渲染函数中提升以便可以在每个渲染器上重用它,所以在每次组件更新时,我们都会重新调用render函数,但是_hoisted_1都将被重用。

请添加图片描述
这样有两点好处:

1.避免重新创建对象,然后删除

2.在模版算法中,当看到两个节点在同一位置时,在严格平等的情况下,我们可以跳过它,因为我们知道它永远不会改变

补丁标志和block的使用

请添加图片描述

Vue 3 template explorer中当我们绑定一个监听器,编译器会生成一个补丁标志,表明这个节点有动态props需要修补下,以及需要修补的名称是onclick。通常使用简单的虚拟dom渲染算法,在div上绑定的元素,整个对象必须作为一个整体来diff,所以如果div上绑定了一个静态的id属性,我们还是会对比整个对象,确保它不会改变,因为运行时并不能确定它是否改变。但是vue3的编译器通过补丁和关键字结合可以为运行时提供足够信息,确定可以改变的是哪些属性。所以渲染是可以跳过编译器那些推断的永远不会改变的props。

上述在虚拟dom发生改变时,不会检查整个节点的所有属性方法,而是结合补丁标志检查可改变的东西。但实际上,我们更多时候绑定一个事件监听器,并不会更改事件处理程序,所以vue3默认开启cacheHandlers

请添加图片描述

开启cacheHandlers会把我们的事件变成一个内联函数,并在第一次渲染时将其缓存,在此后渲染中,我们将始终使用同一个内联处理程序,但是里面的函数会访问ctx.onClick,所以即时onClick发生变化,我们不需要对vnode本身做任何事,所以上述代码在更新过程中现在可以完全跳过整个节点。

所有这些在vue2父子组件中,即使子组件什么都没有改变,也会导致所有子组件在父组件重新渲染时,所有接受到那个props的子组件重新渲染,在大型应用中,会引起连锁反应,因为你在向下传递函数,在每次渲染时,都会创建一个新的内联函数,会导致所有收到那个props的子组件重新渲染,所以vue3中使用句柄缓存,可以避免在大型组件树中发生不必要的渲染

当我们调用render函数会生成一个类似以下的vdom

请添加图片描述

当vdom某些数据发生改变时,渲染器并不知道发生了什么改变,所以它会递归遍历整棵树,进行新旧快照对比,对比新旧节点找出改变了什么,这显然会导致更多的性能问题。

请添加图片描述

例如上述代码我们每次更新发生变化的只有span标签,编译器会使用_openBlock(),将模版的根变成我们所称的块(block),上图中的_openBlock(),当块打开时,所有的节点表达式都会被评估是否是动态的,当节点创建时携带有补丁表示的东西(动态)都会被跟踪,并且添加到当前打开的block作为动态子节点。所以在render方法整个调用后,根div将有一个额外的属性,称为动态子节点,它是只包含了携带补丁标识的子节点的扁平化数组。不管dom节点层级多深,块都只跟踪其上的动态节点。

请添加图片描述

另外如果使用v-if等结构指令,它会改变节点结构,当v-if值切换时节点会从dom树上消失,所以对于根节点的block,使用v-if的节点下的节点将不再安全。所以v-if节点会变成一个块,这个块会变成父节点的动态快被跟踪,所以有嵌套的块,将在扁平化数组中跟踪他自己的动态子对象。

所以对于整个dom树在跟新时不再需要再检查每个vnode的变化,而是递归去找block,得到block内可能发生变化的信息。

在这里插入图片描述

补丁信息本身还编码了关于什么样工作信息,例如TEXT表示在你试图区分这个节点时,只需要检查它的文本内容而不需要关注例如props等其他信息

附录:

vue2在线模版编译器:[https://vue3js.cn/vue-template-explorer/]{.underline}

vue3在线模版编译器:[https://template-explorer.vuejs.org/#]{.underline}

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

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

相关文章

外汇天眼:ESMA发布针对在投资服务中使用人工智能的公司的指导意见

欧洲证券和市场管理局(ESMA),欧盟的金融市场监管机构和监督机构,发布了一份声明,为在向零售客户提供投资服务时使用人工智能技术(AI)的公司提供初步指导。 尽管人工智能的普及仍处于初期阶段&am…

请描述Vue常用的修饰符

在 Vue 中,修饰符(Modifiers)常用于自定义指令(Directives)和事件监听(Event Listeners)中,以改变指令或事件监听器的默认行为。以下是一些 Vue 中常用的修饰符: 1. 事件…

你认识nginx吗,nginx是做什么的,nginx可以做什么 --2)nginx配置

hello大家今天教大家如何用nginx实验tomcat的负载均衡,同理其他的也可以,如httpd等 首先需要准备一个nginx和tomcat包,这里用到的是版本号为 然后需要准备最少三台linux虚拟机,然后我们开始吧 1.安装tomcat 解包 tar zxf /mnt/…

学习 SSH Key 生成方法

SSH Key 是用于身份验证的一对密钥,包括公钥和私钥。公钥可以放在需要访问的服务器上,私钥则保留在本地。当你使用SSH连接到支持SSH Key认证的服务器时,服务器会用公钥来加密一个随机生成的字符串发送给客户端,客户端用私钥解密并…

C语言(字符和字符串函数)2

Hi~!这里是奋斗的小羊,很荣幸各位能阅读我的文章,诚请评论指点,欢迎欢迎~~ 💥个人主页:小羊在奋斗 💥所属专栏:C语言 本系列文章为个人学习笔记,在这里撰写成文一…

【LeetCode 130. 被围绕的区域】

1. 题目 2. 分析 这题其实非常不错。如果正向解,非常麻烦;因为很难界定哪些O是被包围的?但是如果反向解呢?因为边界的O不会被包围,那么就可以想到跟边界O相连的O都不会被包围。那么除此之外的O都会被包围&#xff0c…

【sklearn | 6】无监督学习与聚类分析

在前几篇教程中,我们探讨了 sklearn 的基础、高级功能,异常检测与降维,时间序列分析与自然语言处理,模型部署与优化,以及集成学习与模型解释。本篇教程将专注于无监督学习和聚类分析,这在探索性数据分析和数…

github有趣项目:自制“我的世界” project make

videocodehttps://www.youtube.com/watch?v4O0_-1NaWnY,https://www.bilibili.com/video/BV1oj411p7qM/?https://github.com/jdah/minecraft-weekend MAKE git clone --recurse-submodules https://github.com/jdah/minecraft-weekend.git 正克隆到 minecraft-weekend... …

x264 参考帧管理源码分析

x264参考帧管理 在x264中,参考帧的管理是一个重要的组成部分,因为它涉及到视频编码过程中的帧间预测。以下是关于x264参考帧管理的一些关键点: 参考帧的分类:在x264中,帧可以分为几类,包括参考帧、当前编码帧和未使用帧等。 参考帧的作用:参考帧用于帧间预测,通过比较当…

【Qt】之【Get√】QByteArray写入txt文件、QByteArray截取数据

写入文件 QFile file(path);if (file.open(QIODevice::WriteOnly)) {// 将 QImage 保存到文件file.write(jsonData.toByteArray());// 关闭文件file.close();SCDebug << "saved to" << path;} else {SCDebug << "Failed to open file for wri…

直播分享|深入解析ts-morph:通过注释生成类型文档

♪ ♫ 你看小狗在叫 树叶会笑 风声在呢喃♫ ♪ 乘风追梦&#xff0c;童心未泯 OpenTiny 预祝所有大朋友、小朋友儿童节快乐~ 与此同时&#xff0c;OpenTiny 贡献者直播也即将开启啦~ 直播主题&#xff1a;【深入解析ts-morph&#xff1a;通过注释生成类型文档】 6月1日&am…

碳课堂|入门必看!碳足迹(CFP)主要国际标准一览

一、碳足迹概念 碳足迹&#xff08;Carbon FootPrint&#xff0c;CFP&#xff09;是用来衡量个体、组织、产品或国家在一定时间内直接或间接导致的二氧化碳排放量的指标。产品碳足迹属于碳排放核算的一种&#xff0c;一般指产品从原材料加工、运输、生产到出厂销售等流程所产生…

NeuralForecast 推理 - 从csv文件里读取数据进行推理

NeuralForecast 推理 - 从csv文件里读取数据进行推理 flyfish from ray import tunefrom neuralforecast.core import NeuralForecast from neuralforecast.auto import AutoMLP from neuralforecast.models import NBEATS, NHITS import torch import torch.nn as nn import…

【Java】刚刚!突然!紧急通知!垃圾回收!

【Java】刚刚&#xff01;突然&#xff01;紧急通知&#xff01;垃圾回收&#xff01; 文章目录 【Java】刚刚&#xff01;突然&#xff01;紧急通知&#xff01;垃圾回收&#xff01;从C语言的内存管理引入&#xff1a;手动回收Java的垃圾回收机制引用计数器循环引用问题 可达…

SpringBoot六种API请求参数读取方式

SpringBoot六种API请求参数读取方式 同步请求和异步请求 同步: 指单线程依次做几件事异步: 指多线程同时做几件事 同步请求: 指客户端浏览器只有一个主线程, 此线程负责页面的渲染和发出请求等操作, 如果此主线程发出请求的话则停止渲染而且会清空页面显示的内容 直到服务器响…

优化基础(二):线性组合、仿射组合、锥组合、凸组合、线性集合、仿射集合、锥集合、凸集合的理解

文章目录 前言组合线性组合 (linear combination)仿射组合 (affine combination)锥组合 (conic combination)凸组合 (convex combination) 集合仿射集合凸集合 练习&#xff1a;哪个图形是凸的&#xff0c;哪个是仿射的&#xff1f;参考资料 前言 组合侧重于描述由一些基点生成…

越洗越黑”的Pandas数据清洗

引言 先来一个脑筋急转弯活跃一下枯燥工作日常&#xff0c;问&#xff1a;“什么东西越洗越黑&#xff1f;” 有没有猜到的&#xff1f;猜不到我告诉你吧&#xff01; 答案是“煤球”。那么这个脑机急转弯跟我们要讨论的话题有没有关系呢&#xff1f; 嗯是的&#xff0c;还是沾…

三相智能电表通过Modbus转Profinet网关与PLC通讯案例

Modbus转Profinet网关&#xff08;XD-MDPN100/300&#xff09;的主要功能是实现Modbus协议和Profinet协议之间的转换和通信。Modbus转Profinet网关集成了Modbus和Profinet两种协议&#xff0c;支持Modbus RTU主站/从站&#xff0c;并可以与RS485接口的设备&#xff0c;它自带网…

「前端+鸿蒙」核心技术HTML5+CSS3

1、CS架构与BS架构 CS架构(Client-Server):客户端/服务器架构。用户通过客户端软件与服务器进行交互,客户端需要安装特定的软件才能访问服务器上的资源。BS架构(Browser-Server):浏览器/服务器架构。用户通过浏览器访问服务器上的网页,无需安装额外的软件,所有的交互都…

接口请求参数为文件时如何测试

方法 工具&#xff1a;Postman 步骤&#xff1a;①点击body②点击form-data③选择key类型为fie ④输入参数名⑤选择参数上传⑥发送请求