序
现在网上疯传前端已死的言论,其实本质上的原因就是因为人员增多,岗位减少,导致竞争压力加大。
(资料图片仅供参考)
社会中现有的问题,我们没有办法解决,但是可以从自身入手,让自己增加竞争力。
当多个人争取一个岗位的时候,第二名和最后一名其实没有区别,因为他们只要第一名。
所以在每一个问题上都回答到100分就变得非常重要了!
这也是我为什么会开了《一个问题干懵面试官 》的原因。
该专题希望可以帮大家在每个问题中都能够拿到100分,在最短的时间之内“征服”面试官。珍惜手中每一个面试机会,祝大家早日高薪入职心仪的公司
被问到 《vue2 与 vue3 的区别》应该怎么回答
Vue内部根据功能可以被分为三个大的模块:响应性 reactivite、运行时 runtime、编辑器 compiler,以及一些小的功能点。那么要说 vue2与 vue3的区别,我们需要从这三个方面加小的功能点进行说起。
首先先来说 响应性 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的类,通过 set和 get标记了 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,最后由 generate把 JavaScript AST通过转化为 render 函数。转化的过程中会涉及到一些稍微复杂的概念,比如 有限自动状态机这个就不再这里展开说了。
除此之外,还有一些其他的变化。比如 vue3新增的 composition API。 composition API在 vue3.0和 vue3.2中会有一些不同的呈现,比如说:最初的 composition API以 setup函数作为入口函数, setup函数必须返回两种类型的值:第一是对象,第二是函数。
当 setup函数返回对象时,对象中的数据或方法可以在 template中被使用。当 setup函数返回函数时,函数会被作为 render函数。
但是这种 setup函数的形式并不好,因为所有的逻辑都集中在 setup函数中,很容易出现一个巨大的 setup函数,我们把它叫做巨石(屎山)函数。所以 vue 3.2的时候,新增了一个 script setup的语法糖,尝试解决这个问题。目前来看 script setup的呈现还是非常不错的。
除此之外还有一些小的变化,比如 Fragment、Teleport、Suspense等等,这些就不去说了...
推荐学习:《vue.js视频教程》
以上就是面试官突然问:Vue2与Vue3的区别?的详细内容,更多请关注php中文网其它相关文章!
关键词:


































































