【独家】面试官突然问:Vue2与Vue3的区别?

时间:2023-03-07 16:04:31       来源:转载

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


(资料图片仅供参考)

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

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

所以在每一个问题上都回答到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这个方法进行实现。

但是 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视频教程》

以上就是面试官突然问:Vue2与Vue3的区别?的详细内容,更多请关注php中文网其它相关文章!

关键词: