vue3相比vue2的效率提升

1、静态提升
2、预字符串化
3、缓存事件处理函数
4、Block Tree
5、PatchFlag

一、静态提升
在vue3中的app.vue文件如下:
在服务器中,template中的内容会变异成render渲染函数。
在这里插入图片描述
最终编译后的文件:
在这里插入图片描述
1.静态节点优化

那么这里为什么是两部分呢?因为这就是vue3中的静态节点优化。(注img元素是纯静态节点);因为静态节点没有绑定数据等,是不会响应式发生变化的那么就不需要放入render函数每次渲染的,所以编译器将静态节点提升到render函数外。
在vue2中会将所有的节点都放入render函数,所以对性能会相对影响。

// vue2 的静态节点
render(){createVNode("h1", null, "Hello World")// ...
}// vue3 的静态节点,不在渲染函数中,这样静态节点只是被创建一次
const hoisted = createVNode("h1", null, "Hello World")
function render(){// 直接使用 hoisted 即可
}

2.静态属性提升

不仅仅是静态节点,那么对于一些绑定了数据等动态节点,编译器也会智能化监控。

<div class="user">{{user.name}}
</div>//可以把属性对象提提取出来 
const hoisted = { class: "user" }function render(){createVNode("div", hoisted, user.name)// ...
}

如上代码,该节点虽然绑定了动态数据,但是它的css样式属性是静态的。
所以会将该节点的属性进行提升,从而减少了内存占用。

二、预字符串化

<template><div class="menu-bar-container"><div class="logo"><h1>logo</h1></div><ul class="nav"><li><a href="">menu</a></li><li><a href="">menu</a></li><li><a href="">menu</a></li><li><a href="">menu</a></li><li><a href="">menu</a></li></ul><div class="user" :class="user.name">// 只有这里是动态的,其余都是静态的<span :class="user.name">{{ user.name }}</span></div></div>
</template>

如果一个组件内容出现大量连续的形态节点(20个)时,如果用render函数去一个个渲染,将损耗大量性能,但是vue3中,会将这些静态内容字符串化,渲染时直接返回静态的节点。

编译结果:
在这里插入图片描述
vue2中会有大量的虚拟节点
在这里插入图片描述
vue3中直接变成一个字符串了。SSR中作用非常明显。
在这里插入图片描述
三、缓存事件处理函数

<button @click="count++">plus</button>
// vue2 中onClick每次都是函数
render(ctx){return createVNode("button", {onClick: function($event){ctx.count++;}})
}// vue3 中会缓存函数,有的话直接返回,没有的进行缓存
render(ctx, _cache){return createVNode("button", {onClick: cache[0] || (cache[0] = ($event) => (ctx.count++))})
}

如上代码,当我们绑定事件时,vue2会在每次触发函数时去调取函数,而vue3中会将函数进行缓存,触发时查看是否有缓存,没有就进行缓存,后续触发时直接拿取缓存中的函数,从而减少性能损耗。

四、Block Tree
Vue.js 2.x 的数据更新并触发重新渲染的粒度是组件级的,单个组件内部 需要遍历该组件的整个 vnode 树。在 2.0 里,渲染效率的快慢与组件大小成正相关:组件越大,渲染效率越慢。并且,对于一些静态节点,又无数据更新,这些遍历都是性能浪费。
Vue.js 3.0 做到了通过编译阶段对静态模板的分析,编译生成了 Block tree。 **Block tree 是一个将模版基于动态节点指令切割的嵌套区块,每个 区块内部的节点结构是固定的,每个区块只需要追踪自身包含的动态节点。**所以,在 3.0 里,渲染效率不再与模板大小成正相关,而是与模板中动态节点的数量成正相关。

<form><div><label>账号:</label><input v-model="user.loginId" /></div><div><label>密码:</label><input v-model="user.loginPwd" /></div>
</form>

如上代码,当一代码的结构基本稳定,但是部分结构会变化时:

在这里插入图片描述
注:vue2会挨个挨个比较前后变化的节点数,当发现不一样时重新渲染。
在这里插入图片描述
而vue3中依托强大的编译器,会在首节点的‘block’节点中记录当前树的哪部分是动态的,然后响应时直接寻找动态的节点进行比对,跳过一些节点,不用每个节点都对比,从而大大提升了渲染效率。

左block:[inopu1,input2]

右block:[inopu1,input2]

五、PatchFlag(比对标记)

前面说的是跳过一些静态节点,PatchFlag说的是对比一个具体的节点的优化方式,这个节点哪块是动态的

<div class="user" :class="user.name"><span :class="user.name">{{ user.name }}</span>
</div>

有如上代码,我们会发现这一段代码中帮顶了三个动态数据,那么vue3的编译器就会在render函数中进行标记。
在这里插入图片描述

在这里插入图片描述
vue2中需要对比元素类型、属性、再递归子节点,vue3中只需要根据表示对比元素内容。

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

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

相关文章

内网安全管理系统(保密管理系统)

在当今信息化的时代&#xff0c;企业的内网已经成为其核心资产的重要组成部分。 随着企业的快速发展和信息化程度的提升&#xff0c;内网安全问题日益凸显&#xff0c;如何保障内网的安全和机密信息的保密性&#xff0c;已经成为企业亟待解决的问题。 内网安全管理系统(保密管…

springboot(ssm计算机学习系统 在线课程学习管理系统Java系统

springboot(ssm计算机学习系统 在线课程学习管理系统Java系统 开发语言&#xff1a;Java 框架&#xff1a;springboot&#xff08;可改ssm&#xff09; vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数据库&#xff1a;mysql 5.7…

C# 实现 摩尔斯电码

摩尔斯电码&#xff08;Morse code&#xff09;是一种用于传输信息的编码系统。它由美国发明家塞缪尔摩尔斯&#xff08;Samuel Morse&#xff09;于1830年代发明并推广。摩尔斯电码是一种通过发送和接收短暂的电信号或光信号来表达字母、数字和标点符号的国际通信方式。 摩尔斯…

现在的小年轻真的卷得过分了,真是完全不把自己当人啊

现在的小年轻真的卷得过分了&#xff0c;真是完全不把自己当人啊 都说00后躺平了&#xff0c;但是有一说一&#xff0c;该卷的还是卷。这不&#xff0c;前段时间我们公司来了个00后&#xff0c;工作都没两年&#xff0c;跳槽到我们公司起薪18K&#xff0c;都快接近我了。后来才…

常用电子器件学习——MOS管

MOS管介绍 MOS&#xff0c;是MOSFET的缩写。MOSFET 金属-氧化物半导体场效应晶体管&#xff0c;简称金氧半场效晶体管&#xff08;Metal-Oxide-Semiconductor Field-Effect Transistor, MOSFET&#xff09;。 一般是金属(metal)—氧化物(oxide)—半导体(semiconductor)场效应晶…

力扣670-最大交换

最大交换 题目链接 class Solution { public:int maximumSwap(int num) {string sto_string(num);//转成字符串for(int i0;i<s.size();i)//选择排序模板{int posi;for(int js.size()-1;j>i;--j)//内层循环从后往前if(s[pos]<s[j])posj;if(pos!i)//如果最大的不是i&a…

unity 相机截图

/// <summary> /// 针对相机的截图 /// </summary> public void CameraScreenShot(){ Rect rect new Rect(0,0,Screen.width,Screen.height); RenderTexture renderTexture RenderTexture.GetTemporary((int)rect.width,(int)rect.height,0, RenderTextureFormat…

RabbitMQ消息应答与发布

消息应答 RabbitMQ一旦向消费者发送了一个消息,便立即将该消息,标记为删除. 消费者完成一个任务可能需要一段时间,如果其中一个消费者处理一个很长的任务并仅仅执行了一半就突然挂掉了,在这种情况下,我们将丢失正在处理的消息,后续给消费者发送的消息也就无法接收到了. 为了…

蓝桥杯官网填空题(骰子迷题)

题目描述 本题为填空题&#xff0c;只需要算出结果后&#xff0c;在代码中使用输出语句将所填结果输出即可。 小明参加了少年宫的一项趣味活动&#xff1a;每个小朋友发给一个空白的骰子&#xff08;它的 6 个面是空白的&#xff0c;没有数字&#xff09;&#xff0c;要小朋…

OpenHarmony驱动消息机制管理

驱动消息机制管理 当用户态应用和内核态驱动需要交互时&#xff0c;可以使用HDF框架的消息机制来实现。 消息机制的功能主要有以下两种&#xff1a; 用户态应用发送消息到驱动。 用户态应用接收驱动主动上报事件。 配置管理 HCS&#xff08;HDF Configuration Source&…

JVM—垃圾回收

什么是垃圾 一个没有被任何引用的对象就是一个垃圾对象, 垃圾对象需要被清理回收,否则一直占用内存空间, 其他新对象无法使用垃圾对象空间, 严重的话会造成内存溢出 早期的垃圾回收&#xff1a; 早期例如c/c是需要程序员手动在程序对不再使用的对象进行删除释放. 给程序…

深入分析 Linux 网络丢包问题

热门IT课程【视频教程】-华为/思科/红帽/oraclehttps://xmws-it.blog.csdn.net/article/details/134398330 所谓丢包&#xff0c;是指在网络数据的收发过程中&#xff0c;由于种种原因&#xff0c;数据包还没传输到应用程序中&#xff0c;就被丢弃了。这些被丢弃包的数量&#…

C语言初学9:数组

一、数组初始化和访问元素 1. 数组声明语句 type arrayName [ arraySize ]; double balance[5]; /* 声明一个长度为5的数组 */ 2. 数组初始化语句 double balance[5] {1000.0, 2.0, 3.4, 7.0, 50.0}; /*或者 double balance[] {1000.0, 2.0, 3.4, 7.0, 50.0};*/ …

C++进阶:多态(下)

1、多态的原理 多态之所以可以实现&#xff0c;主要是因为虚函数表的存在&#xff0c;虚函数表用于记录虚函数的地址&#xff0c;他是一个函数指针数组&#xff0c;在类中用一个函数指针数组指针来指向数组&#xff0c;子类继承了父类的虚函数表&#xff0c;当有重写的情况发生…

基于SAM的视频标注

在本文中&#xff0c;我们将演示基础模型的应用&#xff0c;例如 Meta 的 Segment Anything 和 YOLOv8&#xff0c;以自动检测、分类和绘制视频中感兴趣对象的蒙版。这是之前指南的后续&#xff1a;使用 Meta 的 Segment Anything 和 YOLOv8 自动分类掩码。在本指南中&#xff…

【RabbitMQ】快速入门及基本使用

一、引言 1、、消息队列 Ⅰ、什么是消息队列&#xff1f; 消息队列是一种进程间通信或同一进程的不同线程间的通信方式&#xff0c;软件的贮列用来处理一系列的输入&#xff0c;通常是来自用户。消息队列提供了异步的通信协议&#xff0c;每一个贮列中的纪录包含详细说明的数据…

PySimpleGUI:让spin支持循环

需求 自己用PySimpleGUI写了个小工具&#xff0c;但是发现它的spin不支持循环。 Tkinter本身的Spinbox有wrap这个开关可以觉得是否支持循环&#xff0c;但是没看到PySimpleGUI也支持这个特性。 代码实现 所谓spin的循环&#xff0c;是指当值变换到最大最小值时&#xff0c;可…

移动开发行业——鸿蒙OS NEXT开出繁花

1月18日&#xff0c;华为宣布HarmonyOS NEXT开发者预览版开放申请&#xff0c;根据官方注解&#xff0c;这个版本的鸿蒙系统有个更通俗易懂的名字——“星河版”&#xff0c;也被称为“纯血”鸿蒙。 根据官方解释&#xff0c;之所以取名星河版&#xff0c;寓意鸿蒙OS NEXT就像…

Screen 简介

目录 1. screen 简介2. screen 基本命令 1. screen 简介 screen 是一个在 Unix 和类 Unix 系统上的 终端复用 工具。它允许用户在单个终端窗口中运行多个终端会话&#xff0c;并提供了一些其他功能&#xff0c;如会话断开后的恢复和远程连接的分离。以下是 screen 的一些主要特…

hyperf 和 laravel、lumen防止xss攻击中间件封装

hyperf 防止xss攻击自定义中间件封装 <?phpdeclare(strict_types1);namespace App\Middleware;use Psr\Container\ContainerInterface; use Psr\Http\Message\ResponseInterface; use Psr\Http\Server\MiddlewareInterface; use Psr\Http\Message\ServerRequestInterface;…