0

0

面试官突然问:Vue2与Vue3的区别?

藏色散人

藏色散人

发布时间:2023-03-07 15:38:50

|

1933人浏览过

|

来源于juejin

转载

现在网上疯传前端已死的言论,其实本质上的原因就是因为人员增多,岗位减少,导致竞争压力加大。

社会中现有的问题,我们没有办法解决,但是可以从自身入手,让自己增加竞争力。

当多个人争取一个岗位的时候,第二名和最后一名其实没有区别,因为他们只要第一名。

所以在每一个问题上都回答到100分就变得非常重要了!

这也是我为什么会开了《一个问题干懵面试官 》的原因。

立即学习前端免费学习笔记(深入)”;

该专题希望可以帮大家在每个问题中都能够拿到100分,在最短的时间之内“征服”面试官。珍惜手中每一个面试机会,祝大家早日高薪入职心仪的公司

被问到 《vue2 与 vue3 的区别》应该怎么回答

Vue 内部根据功能可以被分为三个大的模块:响应性 reactivite、运行时 runtime、编辑器 compiler,以及一些小的功能点。那么要说 vue2vue3 的区别,我们需要从这三个方面加小的功能点进行说起。

首先先来说 响应性 reactivite

vue2 的响应性主要依赖 Object.defineProperty 进行实现,但是 Object.defineProperty 只能监听 指定对象的指定属性的 getter 行为和 setter 行为,那么这样在某些情况下就会出现问题。

什么问题呢?

比如说:我们在 data 中声明了一个对象 person ,但是在后期为 person 增加了新的属性,那么这个新的属性就会失去响应性。想要解决这个问题其实也非常的简单,可以通过 Vue.$set 方法来增加 指定对象指定属性的响应性。但是这样的一种方式,在 Vue 的自动响应性机制中是不合理。

所以在 Vue3 中,Vue 引入了反射和代理的概念,所谓反射指的是 Reflect,所谓代理指的是 Proxy。我们可以利用 Proxy 直接代理一个普通对象,得到一个 proxy 实例 的代理对象。在 vue3 中,这个过程通过 reactive 这个方法进行实现。

Batch GPT
Batch GPT

使用AI批量处理数据、自动执行任务

下载

但是 proxy 只能实现代理复杂数据类型,所以 vue 额外提供了 ref 方法,用来处理简单数据类型的响应性。ref 本质上并没有进行数据的监听,而是构建了一个 RefImpl 的类,通过 setget 标记了 value 函数,以此来进行的实现。所以 ref 必须要通过 .value 进行触发,之所以要这么做本质是调用 value 方法

接下来是运行时 runtime

所谓的运行时,大多数时候指的是 renderer 渲染器,渲染器本质上是一个对象,内部主要三个方法 render、hydrate、createApp ,其中 render 主要处理渲染逻辑,hydrate 主要处理服务端渲染逻辑,而 createApp 就是创建 vue 实例的方法。

这里咱们主要来说 render 渲染函数vue3 中为了保证宿主环境与渲染逻辑的分离,把所有与宿主环境相关的逻辑进行了抽离,通过接口的形式进行传递。这样做的目的其实是为了解绑宿主环境与渲染逻辑,以保证 vue 在非浏览器端的宿主环境下可以正常渲染。

再往下是 编辑器 compiler

vue 中的 compiler 其实是一个 DSL(特定领域下专用语言编辑器) ,其目的是为了把 template 模板 编译成 render 函数。 逻辑主要是分成了三大步: parse、transform 和 generate。其中 parse 的作用是为了把 template 转化为 AST(抽象语法树)transform 可以把 AST(抽象语法树) 转化为 JavaScript AST,最后由 generateJavaScript AST 通过转化为 render 函数。转化的过程中会涉及到一些稍微复杂的概念,比如 有限自动状态机 这个就不再这里展开说了。

除此之外,还有一些其他的变化。比如 vue3 新增的 composition APIcomposition APIvue3.0vue3.2 中会有一些不同的呈现,比如说:最初的 composition APIsetup 函数作为入口函数, setup 函数必须返回两种类型的值:第一是对象,第二是函数。

setup 函数返回对象时,对象中的数据或方法可以在 template 中被使用。当 setup 函数返回函数时,函数会被作为 render 函数。

但是这种 setup 函数的形式并不好,因为所有的逻辑都集中在 setup 函数中,很容易出现一个巨大的 setup 函数,我们把它叫做巨石(屎山)函数。所以 vue 3.2 的时候,新增了一个 script setup 的语法糖,尝试解决这个问题。目前来看 script setup 的呈现还是非常不错的。

除此之外还有一些小的变化,比如 Fragment、Teleport、Suspense 等等,这些就不去说了...

推荐学习:《vue.js视频教程

相关专题

更多
js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

541

2023.06.20

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

372

2023.07.04

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

727

2023.07.04

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

470

2023.09.01

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

391

2023.09.04

js生成随机数的方法
js生成随机数的方法

js生成随机数的方法有:1、使用random函数生成0-1之间的随机数;2、使用random函数和特定范围来生成随机整数;3、使用random函数和round函数生成0-99之间的随机整数;4、使用random函数和其他函数生成更复杂的随机数;5、使用random函数和其他函数生成范围内的随机小数;6、使用random函数和其他函数生成范围内的随机整数或小数。

990

2023.09.04

如何启用JavaScript
如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍:1、内联脚本是将JavaScript代码直接嵌入到HTML标签中;2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中;3、外部脚本是将JavaScript代码放置在一个独立的文件;4、外部脚本是将JavaScript代码放置在一个独立的文件。

653

2023.09.12

Js中Symbol类详解
Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型,用于表示独一无二的值。Symbol的特点:1、独一无二,每个Symbol值都是唯一的,不会与其他任何值相等;2、不可变性,Symbol值一旦创建,就不能修改或者重新赋值;3、隐藏性,Symbol值不会被隐式转换为其他类型;4、无法枚举,Symbol值作为对象的属性名时,默认是不可枚举的。

544

2023.09.20

php源码安装教程大全
php源码安装教程大全

本专题整合了php源码安装教程,阅读专题下面的文章了解更多详细内容。

7

2025.12.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
CSS3 教程
CSS3 教程

共18课时 | 4.1万人学习

Vue 教程
Vue 教程

共42课时 | 5.7万人学习

PostgreSQL 教程
PostgreSQL 教程

共48课时 | 6.3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号