Vue3跟Vue2比,性能真的有所提升吗?

答案是肯定的。 


说起Vue3的改进,很多人都会说出响应式的改变,与Vue2相比,Vue3采用了proxy的方式对响应式做了重写,而Vue2则是采用defineProperty的方式将对象的属性进行深度遍历,而这种方式想要实现响应式的前与后,就需要给每个属性添加settergetter。但Vue3做了改进,通过使用proxy的方式,则不需要深度遍历了,他实现了删除属性的监听数组索引的监听以及动态属性添加的监听

这些我发现很多人都是可以回答出来的,但这些回答远远是不够的,下面我们说一些在面试中需要更丰富的回答。

目录

1 源码体积有所减少

1.1 源码体积很重要?

1.2 做了哪些优化?

1.3 用代码举例子

2 开发以及编辑阶段

2.1 静态片段

2.2 动态事件的缓存

2.3 元素静态提升

2.4 diff算法的更新

3 Vue2的更新汇总一下

4 吐槽两句 


1 源码体积有所减少

1.1 源码体积很重要?

源码体积是一个非常重要的指标。较大的源码体积会增加应用程序的加载时间,导致性能下降,并可能影响用户体验。此外,对于移动端或者网络条件较差的用户来说,大体积的源码可能会导致加载过慢甚至加载失败的问题。

1.2 做了哪些优化?

Vue 3 在许多方面都进行了优化,其中之一就是源码体积的减小。这得益于更好的 Tree-shaking 支持、源码重写以及按需引入 API 等改进。

任何一个函数,如ref、reavtived、computed等,仅仅在用到的时候才打包,从而使打包的整体体积变小。

1.3 用代码举例子

即便你没有使用过Vue3,那么在回答问题的时候也应该有所体现,尤其是开发人员,代码体现很重要,你可以使用这面这段真实业务场景的代码示例,代码如下:

// vue3代码import { ref, reactive, computed } from 'vue';// 只有在使用时才会引入相关模块
const data = ref(0); // ref 模块
const obj = reactive({ value: 0 }); // reactive 模块
const double = computed(() => data.value * 2); // computed 模块console.log(data.value); // 打包时只包含 ref 相关的代码
console.log(obj.value); // 打包时只包含 reactive 相关的代码
console.log(double.value); // 打包时只包含 computed 相关的代码

2 开发以及编辑阶段

2.1 静态片段

如果你需要开发的组件中,静态HTML内容较多,或者已经达到一定的量级的时候,框架中有createStaticVNode在客户端去生成一个static node,也就是静态node片段,会被直接innerHTML到目标节点上,就不需要创建对象,然后根据对象渲染

编译前的代码片段

div><div><div><span>内容1</span></div></div>...  // 这里有N个内容<div><span>{{ contentMsg }}</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><div><span>内容N</span></div></div>...<div><div><span>${_ssrInterpolate(_ctx.contentMsg )}</span></div></div>`)
}
2.2 动态事件的缓存

如果我们在一个元素上添加了click事件,那么这就会被认为是动态绑定的事件,势必会引起监听事件。在Vue3中,对这些动态事件做了监听缓存,有了缓存,那么再涉及到组件有所更新,涉及到diff算法的时候,就可以直接使用了。

例如这是一个组件:

<div><div><div><span @click = 'go2NewPage'>个人中心</span></div></div>
</div>

这里我们去除闲杂代码,展示关键代码,如下: 

export function render(_ctx, _cache, $props, $setup, $data, $options) {return (_openBlock(), _createBlock("div", null, [_createVNode("span", {onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.go2NewPage(...args)))}, "个人中心")]))
}
2.3 元素静态提升

静态提升听着是不是很耳熟,JavaScript里的变量会有变量提升,对吧。那么在Vue3中,如果发现元素不涉及到更新,就可以只创建一次,然后做静态提升。再次更新渲染的时候拿来直接使用。这样做的优点就是避免多次创建,避免重复的操作。我们做开发不一直讲究复用嘛。

例如下面这个元素:

<div>标题一</div>

做了静态提升以后:

const title_1= _createVNode("div", null, "标题一", -1 )export function render(_ctx, _cache, $props, $setup, $data, $options) {return (_openBlock(), _createBlock(_Fragment, null, [title_1,], 64 ))
}
2.4 diff算法的更新

diff算法是Vue系列的核心之一,所以篇幅会比较长,但你面试的时候不能回答的像老太太裹脚布一样,要有一个明确的目标,首先你对自己要有信心,你需要把这个过程描述清楚,其次不能长篇大论,感觉自己整个面试半个小时都说不完,说不完就表明说不清。但毕竟这是一个复杂的过程,所以你要形象一些的描述,最好稍微体现一下代码功底,表明你至少读过源码即可,点到为止,要不面试官上头了,使劲儿的往下问,你说这可怎么整。

总的来说,Vue3的diff算法添加了静态标记。他的作用是为了会发生变化的地方添加一个静态的flag标记,下次发生变化的时候直接找该地方进行比较

3 Vue2的更新汇总一下

Vue2的更新过程其实已经问了很多年了,但难免还会有面试官非要问一问,不问他心里不舒服,而且这么多年,大家已经整理了无数次这个更新过程,五六年前,高级面试关于这个问题要回答一整篇才能过关呢,不过汇总一下大概就是:

我们创建了watcher实例,用来写业务,初次渲染的时候,会把组件、数据做标记,data也就是那个数据依赖发生变化了,然后触发setter,再通知实例变更。其实就是这么个过程。

 

4 吐槽两句 

其实你会发现,这年头开发人员工作不是那么好找了,但技术一直在进步。所以这就是让很多人很头疼,我这工作还没找到呢,你的框架又更新了,然后面试题也跟着更新了,合着我就别找工作了,一直在家背面试题,看你们更新玩吧。然后我好不容易找到工作了,背了那么多新特性,然后开始写代码了,发现团队还是Vue2。

这里给大家推荐一个优化简历的好东西,看了绝对让你的简历有很大改观,请看:打造优秀的开发求职简历,我也知道你背面试题觉得费时间,我也和很多朋友整理了一全套非常棒的面试题,请看:WEB前端最新面试题 - 又全又卷

有工作的稳住,没工作的加油,在这个环境有点差的时代,我们互相帮助才是重点。 

 

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

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

相关文章

每日学习笔记:C++ STL算法之容器元素复制与搬移

本文API 复制元素&#xff1a; copy() copy_if(....,op) copy_n() copy_backward() 搬移元素&#xff1a; move() move_backward() 复制元素 搬移元素

SQL注入利用学习-Union联合注入

联合注入的原理 在SQL语句中查询数据时&#xff0c;使用select 相关语句与where 条件子句筛选符合条件的记录。 select * from person where id 1; #在person表中&#xff0c;筛选出id1的记录如果该id1 中的1 是用户可以控制输入的部分时&#xff0c;就有可能存在SQL注入漏洞…

Python爬虫与API交互:如何爬取并解析JSON数据

目录 前言 一、什么是API和JSON数据 二、准备环境 三、发送API请求并获取数据 四、解析JSON数据 五、完整代码示例 六、总结 前言 随着互联网的发展&#xff0c;越来越多的网站提供了API接口&#xff0c;供开发者获取实时数据。在爬虫领域中&#xff0c;与API交互并解析…

Pytorch中nn.Linear使用方法

nn.Linear定义一个神经网络的线性层&#xff1a; torch.nn.Linear(in_features, # 输入的神经元个数out_features, # 输出神经元个数biasTrue # 是否包含偏置)nn.Linear其实就是对输入&#xff08;n表示样本数量&#xff0c;i表示样本特…

【数据结构与算法】力扣 142. 环形链表 II

题目描述 给定一个链表的头节点 head &#xff0c;返回链表开始入环的第一个节点。 如果链表无环&#xff0c;则返回 null。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中存在环。 为了表示给定链表中的环&#xff0c;评测系统…

华为海思校园招聘-芯片-数字 IC 方向 题目分享——第二套

华为海思校园招聘-芯片-数字 IC 方向 题目分享&#xff08;有参考答案&#xff09;——第二套&#xff08;共九套&#xff0c;每套四十个选择题&#xff09; 部分题目分享&#xff0c;完整版获取&#xff08;WX:didadidadidida313&#xff0c;加我备注&#xff1a;CSDN huawei…

Git-LFS 远程命令执行漏洞 CVE-2020-27955 漏洞复现

今天遇到了一个比较有意思的洞&#xff0c;复现一下下.......... 漏洞描述 Git LFS 是 Github 开发的一个 Git 的扩展&#xff0c;用于实现 Git 对大文件的支持 一些受影响的产品包括Git&#xff0c;GitHub CLI&#xff0c;GitHub Desktop&#xff0c;Visual Studio&#xff0…

51单片机之自己配串口寄存器实现波特率9600

本配置是根据手册进行开发配置的 1、首先配置SCON 所以综上所诉 SCON 0x40 &#xff08;0100 0000&#xff09; 2、PCON不用配置 3、配置定时器1 4、波特率的计算 5、配置AUXR 6、对比 7、实现 8、优化&#xff08;实现字符串&#xff09; 引入TI &#xff08;智能延时&…

对于嵌入式工程师,需要掌握的知识是广还是精?

我刚开始接触嵌入式的时候&#xff0c;感觉学这个好变态啊。 要学的东西太多了&#xff0c;数字电路、模拟电路、C语言、汇编、51单片机、Protel 99SE、Pcb Layout、STM32单片机、RTOS、Linux、ARM等等.... 可以说&#xff0c;随便拿个魔法电路出来&#xff0c;想达到精的程度&…

【C++】C++11可变参数模板

&#x1f440;樊梓慕&#xff1a;个人主页 &#x1f3a5;个人专栏&#xff1a;《C语言》《数据结构》《蓝桥杯试题》《LeetCode刷题笔记》《实训项目》《C》《Linux》《算法》 &#x1f31d;每一个不曾起舞的日子&#xff0c;都是对生命的辜负 目录 前言 可变参数模板的定义…

Java绘图坐标体系

一、介绍 下图说明了Java坐标系。坐标原点位于左上角&#xff0c;以像素为单位。在Java坐标系中&#xff0c;第一个是x坐标&#xff0c;表示当前位置为水平方向&#xff0c;距离坐标原点x个像素&#xff1b;第二个是y坐标&#xff0c;表示当前位置为垂直方向&#xff0c;距离坐…

LLM大语言模型(九):LangChain封装自定义的LLM

背景 想基于ChatGLM3-6B用LangChain做LLM应用&#xff0c;需要先了解下LangChain中对LLM的封装。本文以一个hello world的封装来示例。 LangChain中对LLM的封装 继承关系&#xff1a;BaseLanguageModel——》BaseLLM——》LLM LLM类 简化和LLM的交互 _call抽象方法定义 ab…

操作系统理论知识快速总览

操作系统整体架构 搬出考研时的思维导图 操作系统主要分为 批处理系统(老古董&#xff0c;基本不用了)实时操作系统(嵌入式中使用较多&#xff0c;RTOS)分时操作系统(PC中使用较多&#xff0c;Linux&#xff0c;Windows) 分时操作系统和实时操作系统的使用场景不同&#xf…

【蓝桥杯第十二届省赛B】(部分详解)

空间 8位1b 1kb1024b(2^10) 1mb1024kb(2^20) 时间显示 #include <iostream> using LLlong long; using namespace std; int main() {LL t;cin>>t;int HH,MM,SS;t/1000;SSt%60;//like370000ms370s,最后360转成分余下10st/60;MMt%60;t/60;HHt%24;printf("%02d:…

[C语言]——动态内存管理

目录 一.为什么要有动态内存分配 二.malloc和free 1.malloc 2.free 三.calloc和realloc 1.calloc 2.realloc 3.空间的释放​编辑 四.常见的动态内存的错误 1.对NULL指针的解引用操作 2.对动态开辟空间的越界访问 3.对非动态开辟内存使用free释放 4.使用free释放⼀块…

外汇110:谷歌起诉应用程序开发商伪造加密投资APP诈骗!

谷歌&#xff08;Google&#xff09;已对两家应用程序开发商提起诉讼&#xff0c;指控其参与“国际在线消费者投资欺诈计划”。该计划欺骗用户从 Google Play 商店和其他渠道下载虚假的安卓&#xff08;Android&#xff09;应用程序&#xff0c;并以承诺更高回报为幌子窃取他们…

SinoDB用户权限

SinoDB用户权限是由数据库对象和操作类型两个要素组成的&#xff0c;定义一个用户的权限就是定义这个用户可以对哪些数据对象进行哪些类型的操作。 SinoDB使用了三级权限来保证数据的安全性&#xff0c;它们分别是数据库级权限&#xff0c;表级权限和字段级权限。 1. 数据库级…

备考ICA----Istio实验17---TCP流量授权

备考ICA----Istio实验17—TCP流量授权 1. 环境准备 1.1 环境部署 kubectl apply -f <(istioctl kube-inject -f istio/samples/tcp-echo/tcp-echo.yaml) -n kim kubectl apply -f <(istioctl kube-inject -f istio/samples/sleep/sleep.yaml) -n kim1.2 测试环境 检测…

LangChain-14 Moderation OpenAI提供的功能:检测内容中是否有违反条例的内容

背景描述 我们在调用OpenAI的接口时&#xff0c;有些内容可能是违反条例的&#xff0c;所以官方提供了一个工具来检测。 安装依赖 pip install --upgrade --quiet langchain-core langchain langchain-openai编写代码 下文中我们使用了: OpenAIModerationChain 这个工具来…

PHP运算符与流程控制

华子目录 运算符赋值运算符算术运算符比较运算符逻辑运算符连接运算符错误抑制符三目运算符自操作运算符 计算机码位运算符 运算符优先级流程控制控制分类顺序结构分支结构if分支switch分支 循环结构for循环while循环continuebreak 运算符 运算符&#xff1a;operator&#xf…