vue3怎么提升效率的?为什么vue3比vue2快?效率提升主要在哪些方面?
官方文档中说vue3在 客户端渲染效率比vue2提升了1.3~2倍, SSR渲染效率比vue2提升了2~3倍,那么究竟是怎么提升的呢?
一、静态提升
在 vue3项目中的package.json文件中,可以看到这个 @vue/compiler-sfc,它是用来解析(.vue)文件的。在解析的时候,下面的静态节点会被提升。
- 元素节点
- 没有绑定动态内容
//vue2的静态节点
render(){createVNode("h1",null,"Hello World")//...
}//vue3的静态节点
const hoisted = createVNode("h1",null,"Hello World")
function render(){//直接使用hoisted
}
静态属性会被提升
<div class="home">{{user.name}}
</div>
以上代码,div的节点虽然是动态的,但是class属性是静态的, 所以会将class属性提出
const hoisted = {class:"home"};function render(){createVNode("div",hoisted,user.name)
}
class被提出后,可以反复重用hoisted 对象,减少内容占用。而vue2 每次都会重建一个对象。
二、预字符串化
当编译器遇到大量的且连续的静态内容时,会将其编译为一个普通字符串节点。
<template><header><ul><li><a href="">lora</a></li><li><a href="">lora</a></li><li><a href="">lora</a></li><li><a href="">lora</a></li><li><a href="">lora</a></li><li><a href="">lora</a></li><li><a href="">lora</a></li></ul>
</template>
编译结果如下:
const _hoisted_1 = /*#__PURE__*/
_createStaticVNode("<ul data-v-7a7a37b1><li data-v-7a7a37b1><a href=\"\" data-v-7a7a37b1>lora</a></li><li data-v-7a7a37b1><a href=\"\" data-v-7a7a37b1>lora</a></li><li data-v-7a7a37b1><a href=\"\" data-v-7a7a37b1>lora</a></li><li data-v-7a7a37b1><a href=\"\" data-v-7a7a37b1>lora</a></li><li data-v-7a7a37b1><a href=\"\" data-v-7a7a37b1>lora</a></li><li data-v-7a7a37b1><a href=\"\" data-v-7a7a37b1>lora</a></li><li data-v-7a7a37b1><a href=\"\" data-v-7a7a37b1>lora</a></li></ul>", 1)

三、缓存事件处理函数
在vue3会将事件缓存起来,在执行的时候会将事件编译成函数,缓存在_cache对象中。看_cache中有这个函数,有就直接返回,没有把这个函数初赋值给_cache。
<button @click="count++">增加</button>
编译结果如下 :
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {return (_openBlock(),_createElementBlock("div", null, [_createElementVNode("button", {onClick: _cache[0] || (_cache[0] = $event=>($setup.count++))}, "增加")]))
}
四、Block Tree
Block Tree是一个非常大的更新,是为了解决新旧节点对比的效率问题。vue2在对比新旧数的时候,并不知道哪些节点时静态的,哪些节点时动态的,因此只能一层一层比较,这就浪费了大部分时间在对比静态节点上。
而vue3对节点进行了标记
<template><div><h1>lora</h1><h1>{{ count }}</h1><div>{{ count }}</div></div>
</template>

从上面结果可以看出,对静态节点的标识是 -1 ,/* HOISTED */静态,动态节点的标识是 1 ,/* TEXT */ 动态,并且会把所有动态节点提取到根节点。更新的时候直接找到根节点(Block节点),然后找到动态节点进行对比。
五、PatchFlag
vue2在对比没一个节点时,并不知道这个节点哪些相关信息会发生变化,因此只能将所有信息依次对比。
在vue3中,根据各个节点的不同的特点,打上不同的PatchFlag,在patch 的时候就会根据PatchFlag进行比较,不会进行全量比较。

从上面的结果可以看出:
- 当只有节点的内容是动态是,就会标记 1 /* TEXT */
- 当只有节点class是动态时,就会标记 2 /* CLASS */
- 当节点内容和class都是动态时,就会标记 3 /* TEXT, CLASS */
- 当只有节点的style是动态时,就会标记 4 /* STYLE */
- 当节点的style和内容都是动态时,就会标记 5 /* TEXT, STYLE */
- 当节点的style和class都是动态时,就会标记 6 /* CLASS, STYLE */
- 当节点的style和class和内容都是动态时,就会标记 7 /* TEXT, CLASS, STYLE */
以上为vue3效率提升的总结,如有不同见解请留言,谢谢。
相关文章:
vue3怎么提升效率的?为什么vue3比vue2快?效率提升主要在哪些方面?
官方文档中说vue3在 客户端渲染效率比vue2提升了1.3~2倍, SSR渲染效率比vue2提升了2~3倍,那么究竟是怎么提升的呢? 一、静态提升 在 vue3项目中的package.json文件中,可以看到这个 vue/compiler-sfc,它是用来解析(.v…...
C语言文件操作 | 文件分类、文件打开与关闭、文件的读写、文件状态、文件删除与重命名、文件缓冲区
欢迎关注博主 Mindtechnist 或加入【Linux C/C/Python社区】一起学习和分享Linux、C、C、Python、Matlab,机器人运动控制、多机器人协作,智能优化算法,滤波估计、多传感器信息融合,机器学习,人工智能等相关领域的知识和…...
从零开始的c语言日记day37——数组指针练习
一、 取地址数组储存在了*p里,里面储存的是整个数组的地址但本质也是第一个元素的地址解引用后1为4个字节所以就可以打印数组了。但一般不用这种方法 这样更方便一些 打印多维数组 如果不用这样传参,用指针传参怎么做呢? Main里函数的arr表示…...
codeforces 1851F
题目链接 题目大意:给你一个长度为n的数组a, 和一个整数k(2<n<2e5, k<30, a[i]<pow(2,k))。 任选一个x,求(a[i] ^ x) & (a[j] ^ x) 的最大值(1<i,j<n, i!j, x<pow(2,k))。 由于中间有个&,所以我们要求两个数最高…...
js把格式为YYYY-MM-DD HH:mm:ss的时间转换为UTC时间ISO 8601格式
// 要转换的日期字符串 const inputDate 2023-11-25 14:54:01; // 将日期字符串转换为Date对象 const dateObj new Date(inputDate); // 获取时间戳(毫秒) const timestamp dateObj.getTime(); // 转换格式 const outputDate new Date(tim…...
使用 Java 来读取 Excel 文件,检查每一行中的 URL,并将不符合条件的行标记为红色
-- 日、时、分、秒,这是计时的单位,惜时就应该惜日、惜时、惜分、惜秒。 用 Java 来读取 Excel 文件,检查每一行中的 URL,并将不符合条件的行标记为红色。以下是一个简单的示例,使用 Apache POI 进行 Excel 操作&#…...
雷达公式实现(matlab)
雷达公式实现 代码来源:《雷达系统分析与设计(MATLAB版)(第三版)》 function [snr] radar_eq(pt,freq,g,sigma,b,nf,loss,range) % This program implements Eq.(1.63) %% Inputs:% pt——峰值功率,W% freq——雷达中心频率,Hz% g——天线…...
CMake构建一个转换为3d tile的开源代码成功
之前CMake构建一个转换为3d tile的开源代码,生成解决方案之后,从VS2019打开; 总是报一个错误,跟 mocs_compilation_Debug.cpp 这个QT相关文件有关,它生成的obj,总是报模块计算机x64和目标计算机x86冲突&am…...
Java线程通信
线程通信 案例 package com.itheima.d4;public class ThreadTest {public static void main(String[] args) {Desk desk new Desk();//创建3个生产者线程new Thread(() -> {while (true) {desk.put();}}, "厨师1").start();new Thread(() -> {while (true) {…...
计算4人队形的最可能分布
2 2 2 1 2 2 2 2 2 1 2 2 2 2 2 1 2 2 3 3 3 x 3 3 2 2 2 1 2 2 2 2 2 1 2 2 在6*6的平面上2个点随机分布,有3种分布方式,2a1,2a2,2a3,占比为1:5:1. 3 3 …...
如何解决 Java 中的 IllegalArgumentException 异常?
非法参数异常(IllegalArgumentException)的抛出是为了表明一个方法被传递了一个非法参数。该异常扩展了 RuntimeException 类,因此属于在 Java 虚拟机(JVM)运行期间可能抛出的异常。它是一种未检查异常,因此…...
Vue 双向数据绑定
之前通过v-bind来完成的数据绑定,属性值和表达式进行绑定,表达式的值发生变化了属性值也跟着发生变化。 单向数据绑定: <!DOCTYPE html> <html> <head><meta charset"UTF-8"><title>首页</titl…...
电脑开机过程中,程序的启动的顺序是怎么样的?
电脑的启动过程涉及多个步骤,程序按照特定的顺序启动。这个过程通常如下: 电源开启: 当你按下电源按钮时,电源供应器(PSU)开始向电脑的各个组件供电。 自检加电(POST): 这是电脑启动过程的第一步。在这个阶段,基本输入输出系统(BIOS)或统一可扩展固件接口(UEFI)执行…...
JSON详细教程
😊JSON详细教程 🚩JSON简介☃️JSON语法规则🔊JSON和JavaScript对象的区别 ☃️JSON数据类型字符串🔊数字🔊布尔值🔊数组🔊对象🔊Null ☃️JSON对象🔊访问JSON对象的值&a…...
DSP介绍及CCS
文章目录 CCS版本编译器CCS使用注意严禁中文 CCS的基本操作新建工程导入现有工程调整字体的大小工程界面恢复标签的使用 仿真盒小虫子进入在线Debug 仿真器芯片TMS320F28355基本介绍特性 DSP中特殊指令dsp指令中的EALLOW EDIS CCS TI官网 版本 CCS版本: CCS8.3.1…...
周期串(Periodic Strings)
做了我两个小时,我真的裂开 之前已经发过一次了,走在回宿舍的路上突然发现有些情况并不适用,赶紧删掉了 题目如下: 如果一个字符串可以由某个长度为k的字符串重复多次得到,则称该串以k为周期。例如:abca…...
C语言——猜凶手
题目: 日本某地发生了一件谋杀案,警察通过排查确定杀人凶手必为4个嫌疑犯的一个。 以下为4个嫌疑犯的供词: A说:不是我。 B说:是C。 C说:是D。 D说:C在胡说 已知3个人说了真话,1个人说的是假话。…...
【TiDB】TiDB离线方式部署
目录 1 下载TiDB离线组件包 2 安装TiUP 3 合并离线包 4 TIDB 软件和硬件环境建议配置 5 TiDB环境与系统配置检查 6 生成集群初始化配置文件模板 7 执行部署命令 1 检查就能存在的潜在风险 2 手动修复风险 3 部署 TiDB 集群 8 查看TIUP管理的集群情况 9 检查部署的…...
android shape绘制半圆
<?xml version"1.0" encoding"utf-8"?><shape xmlns:android"http://schemas.android.com/apk/res/android"android:shape"rectangle"><sizeandroid:width"20dp"android:height"10dp" /><…...
【开源】基于Vue和SpringBoot的个人健康管理系统
项目编号: S 040 ,文末获取源码。 \color{red}{项目编号:S040,文末获取源码。} 项目编号:S040,文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 健康档案模块2.2 体检档案模块2.3 健…...
深度学习在微纳光子学中的应用
深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向: 逆向设计 通过神经网络快速预测微纳结构的光学响应,替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...
【网络】每天掌握一个Linux命令 - iftop
在Linux系统中,iftop是网络管理的得力助手,能实时监控网络流量、连接情况等,帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...
Leetcode 3577. Count the Number of Computer Unlocking Permutations
Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接:3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯,要想要能够将所有的电脑解锁&#x…...
五年级数学知识边界总结思考-下册
目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解:由来、作用与意义**一、知识点核心内容****二、知识点的由来:从生活实践到数学抽象****三、知识的作用:解决实际问题的工具****四、学习的意义:培养核心素养…...
在Ubuntu中设置开机自动运行(sudo)指令的指南
在Ubuntu系统中,有时需要在系统启动时自动执行某些命令,特别是需要 sudo权限的指令。为了实现这一功能,可以使用多种方法,包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法,并提供…...
论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)
笔记整理:刘治强,浙江大学硕士生,研究方向为知识图谱表示学习,大语言模型 论文链接:http://arxiv.org/abs/2407.16127 发表会议:ISWC 2024 1. 动机 传统的知识图谱补全(KGC)模型通过…...
Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)
引言:为什么 Eureka 依然是存量系统的核心? 尽管 Nacos 等新注册中心崛起,但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制,是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...
Android Bitmap治理全解析:从加载优化到泄漏防控的全生命周期管理
引言 Bitmap(位图)是Android应用内存占用的“头号杀手”。一张1080P(1920x1080)的图片以ARGB_8888格式加载时,内存占用高达8MB(192010804字节)。据统计,超过60%的应用OOM崩溃与Bitm…...
ip子接口配置及删除
配置永久生效的子接口,2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...
初探Service服务发现机制
1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能:服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源…...
