【面试题】当面试官问 Vue2与Vue3的区别,你该怎么回答?

简介: 【面试题】当面试官问 Vue2与Vue3的区别,你该怎么回答?

大厂面试题分享 面试题库

后端面试题库 (面试必备) 推荐:★★★★★

地址:前端面试题库

被问到 《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 等等,这些就不去说了...

相关文章
|
1月前
|
开发工具 iOS开发 MacOS
基于Vite7.1+Vue3+Pinia3+ArcoDesign网页版webos后台模板
最新版研发vite7+vue3.5+pinia3+arco-design仿macos/windows风格网页版OS系统Vite-Vue3-WebOS。
222 11
|
5月前
|
缓存 JavaScript PHP
斩获开发者口碑!SnowAdmin:基于 Vue3 的高颜值后台管理系统,3 步极速上手!
SnowAdmin 是一款基于 Vue3/TypeScript/Arco Design 的开源后台管理框架,以“清新优雅、开箱即用”为核心设计理念。提供角色权限精细化管理、多主题与暗黑模式切换、动态路由与页面缓存等功能,支持代码规范自动化校验及丰富组件库。通过模块化设计与前沿技术栈(Vite5/Pinia),显著提升开发效率,适合团队协作与长期维护。项目地址:[GitHub](https://github.com/WANG-Fan0912/SnowAdmin)。
829 5
|
14天前
|
JavaScript 安全
vue3使用ts传参教程
Vue 3结合TypeScript实现组件传参,提升类型安全与开发效率。涵盖Props、Emits、v-model双向绑定及useAttrs透传属性,建议明确声明类型,保障代码质量。
122 0
|
2月前
|
缓存 前端开发 大数据
虚拟列表在Vue3中的具体应用场景有哪些?
虚拟列表在 Vue3 中通过仅渲染可视区域内容,显著提升大数据列表性能,适用于 ERP 表格、聊天界面、社交媒体、阅读器、日历及树形结构等场景,结合 `vue-virtual-scroller` 等工具可实现高效滚动与交互体验。
335 1
|
2月前
|
缓存 JavaScript UED
除了循环引用,Vue3还有哪些常见的性能优化技巧?
除了循环引用,Vue3还有哪些常见的性能优化技巧?
177 0
|
3月前
|
JavaScript
vue3循环引用自已实现
当渲染大量数据列表时,使用虚拟列表只渲染可视区域的内容,显著减少 DOM 节点数量。
110 0
|
5月前
|
JavaScript API 容器
Vue 3 中的 nextTick 使用详解与实战案例
Vue 3 中的 nextTick 使用详解与实战案例 在 Vue 3 的日常开发中,我们经常需要在数据变化后等待 DOM 更新完成再执行某些操作。此时,nextTick 就成了一个不可或缺的工具。本文将介绍 nextTick 的基本用法,并通过三个实战案例,展示它在表单验证、弹窗动画、自动聚焦等场景中的实际应用。
459 17
|
6月前
|
JavaScript 前端开发 算法
Vue 3 和 Vue 2 的区别及优点
Vue 3 和 Vue 2 的区别及优点
|
6月前
|
存储 JavaScript 前端开发
基于 ant-design-vue 和 Vue 3 封装的功能强大的表格组件
VTable 是一个基于 ant-design-vue 和 Vue 3 的多功能表格组件,支持列自定义、排序、本地化存储、行选择等功能。它继承了 Ant-Design-Vue Table 的所有特性并加以扩展,提供开箱即用的高性能体验。示例包括基础表格、可选择表格和自定义列渲染等。
467 6
|
6月前
|
存储 算法 架构师
阿里面试:PS+PO、CMS、G1、ZGC区别在哪?什么是卡表、记忆集、联合表?问懵了,尼恩来一个 图解+秒懂+史上最全的答案
阿里面试:PS+PO、CMS、G1、ZGC区别在哪?什么是卡表、记忆集、联合表?问懵了,尼恩来一个 图解+秒懂+史上最全的答案