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 这个方法进行实现。

InstantMind
InstantMind

AI思维导图生成器,支持30+文件格式一键转换,包括PDF、Word、视频等。

下载

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

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
vue.js为什么报错
vue.js为什么报错

vue.js报错的原因:1、语法错误;2、组件使用不当;3、数据绑定问题;4、生命周期钩子使用不当;5、插件或依赖问题;6、路由配置错误;7、异步操作处理不当等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

120

2024.03.11

vue.js插槽有哪些用
vue.js插槽有哪些用

vue.js插槽的作用:1、提高组件的可重用性;2、实现组件的灵活布局;3、实现组件间的数据传递和交互;4、促进组件的解耦和模块化。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

175

2024.03.11

vue.js怎么带参数跳转
vue.js怎么带参数跳转

vue.js带参数跳转的方法:1、定义路由;2、在组件中使用路由参数;3、进行带参数的跳转。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

92

2024.03.11

数据类型有哪几种
数据类型有哪几种

数据类型有整型、浮点型、字符型、字符串型、布尔型、数组、结构体和枚举等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

309

2023.10.31

php数据类型
php数据类型

本专题整合了php数据类型相关内容,阅读专题下面的文章了解更多详细内容。

222

2025.10.31

硬盘接口类型介绍
硬盘接口类型介绍

硬盘接口类型有IDE、SATA、SCSI、Fibre Channel、USB、eSATA、mSATA、PCIe等等。详细介绍:1、IDE接口是一种并行接口,主要用于连接硬盘和光驱等设备,它主要有两种类型:ATA和ATAPI,IDE接口已经逐渐被SATA接口;2、SATA接口是一种串行接口,相较于IDE接口,它具有更高的传输速度、更低的功耗和更小的体积;3、SCSI接口等等。

1099

2023.10.19

PHP接口编写教程
PHP接口编写教程

本专题整合了PHP接口编写教程,阅读专题下面的文章了解更多详细内容。

189

2025.10.17

php8.4实现接口限流的教程
php8.4实现接口限流的教程

PHP8.4本身不内置限流功能,需借助Redis(令牌桶)或Swoole(漏桶)实现;文件锁因I/O瓶颈、无跨机共享、秒级精度等缺陷不适用高并发场景。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

1419

2025.12.29

Python 自然语言处理(NLP)基础与实战
Python 自然语言处理(NLP)基础与实战

本专题系统讲解 Python 在自然语言处理(NLP)领域的基础方法与实战应用,涵盖文本预处理(分词、去停用词)、词性标注、命名实体识别、关键词提取、情感分析,以及常用 NLP 库(NLTK、spaCy)的核心用法。通过真实文本案例,帮助学习者掌握 使用 Python 进行文本分析与语言数据处理的完整流程,适用于内容分析、舆情监测与智能文本应用场景。

10

2026.01.27

热门下载

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

精品课程

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

共18课时 | 4.9万人学习

Vue 教程
Vue 教程

共42课时 | 7.3万人学习

PostgreSQL 教程
PostgreSQL 教程

共48课时 | 7.9万人学习

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

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