vue3相比vue2性能上提升体现

news2025/7/11 12:27:05

vue3相比vue2,在 编译阶段,源码体积 响应式系统 都做了性能提升

不以解决实际业务痛点的更新都是耍流氓
1. ts的支持
2. 移除了不常用的api,例如 过滤器 $on $off $once 实例方法 内联模板attribute $destroy
3. 加了tree - shaking
4. 移除了mixin缺点,命名冲突,和数据来源不清楚
5. options Api 改成了 composition Api
提高了大门逻辑组织和代码复用能力
6. Object.defineProperty 变成了 proxy
同时Proxy 并不能监听到内部深层次的对象变化,
而 Vue3 的处理方式是在 getter 中去递归响应式,
这样的好处是真正访问到的内部对象才会变成响应式,
而不是无脑递归

一、编译阶段

Vue3在编译阶段,做了进一步优化。主要有如下:
diff算法优化
静态提升
事件监听缓存
SSR优化

二、源码体积

相比Vue2,Vue3整体体积变小了,除了移出一些不常用的API,再重要的是Tree shaking
任何一个函数,如ref、reavtived、computed等,仅仅在用到的时候才打包,没用到的模块都被摇掉,打包的整体体积变小

三、响应式系统

vue2中采用 Object.defineProperty来劫持整个对象,然后进行深度遍历所有属性,给每个属性添加getter和setter,实现响应式

vue3采用proxy重写了响应式系统,因为proxy可以对整个对象进行监听,所以不需要深度遍历

可以监听动态属性的添加

可以监听到数组的索引和数组length属性

可以监听删除属性

一、编译阶段性能提升详解

diff算法优化

Vue2,每个组件实例都对应一个 watcher 实例,它会在组件渲染的过程中把用到的数据property记录为依赖,当依赖发生改变,触发setter,则会通知watcher,从而使关联的组件重新渲染

试想一下,一个组件结构如下图

<template>
<div id="content">
<p class="text">静态文本</p>
<p class="text">静态文本</p>
<p class="text">{{ message }}</p>
<p class="text">静态文本</p>
...
<p class="text">静态文本</p>
</div>
</template>
可以看到,组件内部只有一个动态节点,剩余一堆都是静态节点,所以这里很多 diff 和遍历其实都是不需要的,造成性能浪费

vue3在diff算法中相比vue2增加了静态标记

关于这个静态标记,其作用是为了会发生变化的地方添加一个flag标记,下次发生变化的时候直接找该地方进行比较

下图这里,已经标记静态节点的p标签在diff过程中则不会比较,把性能进一步提高

静态类型枚举如下:
export const enum PatchFlags {
TEXT = 1,// 动态的文本节点
CLASS = 1 << 1, // 2 动态的 class
STYLE = 1 << 2, // 4 动态的 style
PROPS = 1 << 3, // 8 动态属性,不包括类名和样式
FULL_PROPS = 1 << 4, // 16 动态 key,当 key 变化时需要完整的 diff 算法做比较
HYDRATE_EVENTS = 1 << 5, // 32 表示带有事件监听器的节点
STABLE_FRAGMENT = 1 << 6, // 64 一个不会改变子节点顺序的 Fragment
KEYED_FRAGMENT = 1 << 7, // 128 带有 key 属性的 Fragment
UNKEYED_FRAGMENT = 1 << 8, // 256 子节点没有 key 的 Fragment
NEED_PATCH = 1 << 9, // 512
DYNAMIC_SLOTS = 1 << 10, // 动态 solt
HOISTED = -1, // 特殊标志是负整数表示永远不会用作 diff
BAIL = -2 // 一个特殊的标志,指代差异算法
}

静态提升

Vue3中对不参与更新的元素,会做静态提升,只会被创建一次,在渲染时直接复用

这样就免去了重复的创建节点,大型应用会受益于这个改动,免去了重复的创建操作,优化了运行时候的内存占用

静态内容_hoisted_1被放置在render 函数外,每次渲染的时候只要取 _hoisted_1 即可

同时 _hoisted_1 被打上了 PatchFlag ,静态标记值为 -1 ,特殊标志是负整数表示永远不会用于 Diff

事件监听缓存

默认情况下绑定事件行为会被视为动态绑定,所以每次都会去追踪它的变化

<div>
<button @click = 'onClick'>点我</button>
</div>
没开启事件监听器缓存
export const render = /*#__PURE__*/_withId(function render(_ctx, _cache, $props, $setup, $data, $options) {
return (_openBlock(), _createBlock("div", null, [
_createVNode("button", { onClick: _ctx.onClick }, "点我", 8 /* PROPS */, ["onClick"])
// PROPS=1<<3,// 8 //动态属性,但不包含类名和样式
]))
})
开启事件侦听器缓存后
export function render(_ctx, _cache, $props, $setup, $data, $options) {
return (_openBlock(), _createBlock("div", null, [
_createVNode("button", {
onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.onClick(...args)))
}, "点我")
]))
}

上述发现开启了缓存后,没有了静态标记。也就是说下次diff算法的时候直接使用

SSR优化

当静态内容大到一定量级时候,会用createStaticVNode方法在客户端去生成一个static node,这些静态node,会被直接innerHtml,就不需要创建对象,然后根据对象渲染

<div>
<div>
<span>你好</span>
</div>
... // 很多个静态属性
<div>
<span>{{ message }}</span>
</div>
</div>
编译后
import { mergeProps as _mergeProps } from "vue"
import { ssrRenderAttrs as _ssrRenderAttrs, ssrInterpolate as _ssrInterpolate } from "@vue/server-renderer"

export function ssrRender(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
const _cssVars = { style: { color: _ctx.color }}
_push(`<div${
_ssrRenderAttrs(_mergeProps(_attrs, _cssVars))
}><div><span>你好</span>...<div><span>你好</span><div><span>${
_ssrInterpolate(_ctx.message)
}</span></div></div>`)

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

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

相关文章

ESP32设备驱动-RFID-RC522模块驱动

RFID-RC522模块驱动 文章目录 RFID-RC522模块驱动1、RFID-RC522介绍2、硬件准备3、软件准备4、驱动实现1、RFID-RC522介绍 基于 NXP 的 MFRC522 IC 的 RC522 RFID 模块通常带有一个 RFID 卡标签和具有 1KB 内存的密钥卡标签。 最重要的是,它可以写一个标签,这样你就可以在里…

前端老赵一次给你讲透“微前端”架构

一、引言&#xff1a; 随着Web应用程序的规模和复杂度的不断增加&#xff0c;前端技术也在不断发展和演进。微前端是近年来兴起的一种前端架构模式&#xff0c;通过将大型Web应用程序拆分为小型、可独立开发和部署的模块&#xff0c;从而降低开发和维护的难度&#xff0c;同时…

【LeetCode与《代码随想录》】二叉树篇:做题笔记与总结-JavaScript版

文章目录代码随想录144. 二叉树的前序遍历94. 二叉树的中序遍历145. 二叉树的后序遍历102.二叉树的层序遍历226.翻转二叉树101. 对称二叉树104.二叉树的最大深度111.二叉树的最小深度222.完全二叉树的节点个数110.平衡二叉树257. 二叉树的所有路径404.左叶子之和513.找树左下角…

盘点曾经很火但消失了的8个软件

目录 1、飞信 3、暴风影音 4、千千静听 5、虾米音乐 6、快车下载 7、人人网 8、QQ农场 今天小编给大家分享曾经很火但消失了的8个软件&#xff0c;你都用过吗&#xff1f; 1、飞信 飞信是中国移动通信集团公司推出的一款短信、语音、视频通信应用程序。它于2007年推出&a…

JDK的动态代理(powernode 文档)(内含源代码)

JDK的动态代理&#xff08;powernode 文档&#xff09;&#xff08;内含源代码&#xff09; 源代码下载链接地址&#xff1a;https://download.csdn.net/download/weixin_46411355/87546086 一、动态代理 目录JDK的动态代理&#xff08;powernode 文档&#xff09;&#xff0…

什么是L1和L2正则化,以及它们有什么区别

一、L1和L2正则化是什么&#xff1f; 在防止过拟合的方法中有L1正则化和L2正则化&#xff0c;L1和L2是正则化项&#xff0c;又叫做惩罚项&#xff0c;是为了限制模型的参数&#xff0c;防止模型过拟合而加在损失函数后面的一项。 在二维的情况下&#xff0c;黄色的部分是L2和…

【云原生】rancher2.6部署MySQL—2023.03

文章目录概要1. 准备NFS服务器1.1 安装nfs1.2 创建挂载路径1.3 启动NFS服务2. 所有node节点上安装NFS服务3. rancher上部署MySQL3.1 创建PV3.2 创建PVC3.3 创建服务发现3.4 部署MySQL服务4. 测试概要 本文以单master节点为例&#xff0c;部署mysql&#xff0c;多master&#x…

Ubutun设置SSH远程登录

Ubutun设置SSH远程登录一、安装ssh-server二、配置ssh三、防火墙配置一、安装ssh-server 在需要远程登录的设备中安装ssh-server sudo apt update sudo apt install openssh-server出现提示时&#xff0c;输入密码&#xff0c;然后按Enter继续安装。安装完毕后&#xff0c;使…

2023金三银四应届生求职面试指南

一、应届生优势 划重点&#xff0c;一定要走校招;千万不要等毕业之后再想着找工作&#xff0c;在毕业前就要敲定落实;否则&#xff0c;就真的该焦虑了。要知道应届生的身份是一个很吃香的身份;只有应届生可以走校园招聘。 1、那校园招聘跟社会招聘有多大的差距?? 这么说吧&…

微信聊天的一个创新方向

开门见山&#xff0c;简单&#xff08;简陋&#xff09;展示下新的聊天界面&#xff1a; 注意到除了原本的发送键&#xff0c;多了几个别的按钮。为了对比方便&#xff0c;先放上当前的聊天方式&#xff1a; 给兄弟发消息时&#xff0c;点击发送键&#xff0c;显示的是如下发…

【华为机试真题详解 Python实现】静态扫描最优成本【2023 Q1 | 100分】

文章目录前言题目描述输入描述输出描述示例 1输入&#xff1a;输出&#xff1a;示例 2输入&#xff1a;输出&#xff1a;题目解析参考代码前言 《华为机试真题详解》专栏含牛客网华为专栏、华为面经试题、华为OD机试真题。 如果您在准备华为的面试&#xff0c;期间有想了解的…

【微信小程序项目实战】TodoList-环境配置(1)

目录前言简介环境配置TDesign图片页面文件文件基础配置app.wxssapp.jsontodo.json前言 本项目依据开源项目:点击前往 GITHUB 仓库 仿照搭设而成&#xff0c;并主要对其中原理以及方法做出详细分析解读&#xff0c;望大家多多支持原作者&#xff01; 简介 本项目将使用最新版…

C#开发的OpenRA的游戏主界面怎么样创建5

继续游戏主界面创建的主题, 前面已经介绍到怎么样创建一个OpenRA的帐号显示, 接着下来介绍中间显示新闻的消息窗口,如下图所示: 这个界面看起来比较简单,只有一个下拉按钮显示,但是背后的实现是比较复杂的。 因为它要实现一个对话框的窗口显示,那需要编写的代码和设计思…

字节3次都没裁掉的7年老测试。掌握设计业务与技术方案,打开上升通道!

前言职场中的那些魔幻操作&#xff0c;研发最烦的是哪个&#xff1f;“面对业务需求的时候&#xff0c;可能都听过这样一句话&#xff1a;这个很简单&#xff0c;直接开发&#xff0c;三天内上线&#xff1b;”朋友说&#xff1a;“产品听了流泪&#xff0c;测试见了崩溃&#…

Linux系统CPU占用率较高问题排查思路

作为工程师&#xff0c;在日常工作中我们会遇到 Linux服务器上出现CPU负载达到100%居高不下的情况&#xff0c;如果CPU 持续跑高&#xff0c;则会影响业务系统的正常运行&#xff0c;带来企业损失。对于CPU过载问题通常使用以下两种方式即可快速定位&#xff1a;方法一第一步&a…

STC单片机RTC时钟使用介绍

STC单片机RTC时钟使用介绍 ✨目前支持RTC功能的STC单片机型号只有带型号后面带TL\T的STC8以及STC8H8K64U B/C/D版本以及STC32G型号的单片机支持此功能.手上的STC8H8K64U单片机,B版本在实际测试中并没有成功,使用STC32G测试没有问题。 🎞使用STC8H8K64U B版本打印效果: 🔖…

springboot整合Quartz(1)

文章目录前言一 理论基础1.1 小顶堆(平衡二叉堆)1.2 小顶堆的存取方式1.2.1 插入顶堆元素1.2.2 删除顶堆元素1.3 任务与小顶堆1.3 时间轮算法二 Spring Boot集成JDK定时任务2.1 TaskQueue源码分析2.2 TimerThread源码分析2.2.1 Timer构造器2.2.2 Timer类中的执行方法2.2.3 Time…

深浅拷贝——利用模拟实现basic_string深入理解

深浅拷贝——利用模拟实现basic_string深入理解 一、深浅拷贝的基本概念 深拷贝和浅拷贝都是指在对象复制时&#xff0c;复制对象的内存空间的方式。 1.1 深浅拷贝的不同之处 浅拷贝是指将一个对象的所有成员变量都直接拷贝给另一个对象&#xff0c;包括指针成员变量&#…

Matlab进阶绘图第5期—风玫瑰图(WindRose)

风玫瑰图(Wind rose diagram)是一种特殊的极坐标堆叠图/统计直方图&#xff0c;其能够直观地表示某个地区一段时期内风向、风速的发生频率。 风玫瑰图在建筑规划、环保、风力发电、消防、石油站设计、海洋气候分析等领域都有重要作用&#xff0c;所以在一些顶级期刊中也能够看…

Vue键盘事件的使用

前言 在vue中&#xff0c;我们经常会用到键盘事件&#xff0c;不管是我们按下某个键&#xff0c;其实都是一次键盘事件的调用&#xff0c;下面就介绍下Vue中的键盘事件 先写一段代码&#xff0c;这里我选择的键盘事件是keyup,当然用keydown也是没问题的 问题来了&#xff0c;…