这篇文章主要讲解了“面试问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
以上就是面试问Vue2与Vue3的区别怎么回答的详细内容,更多关于面试问Vue2与Vue3的区别怎么回答的资料请关注九品源码其它相关文章!