面試問(wèn)Vue2與Vue3的區(qū)別怎么回答

這篇文章主要講解了“面試問(wèn)Vue2與Vue3的區(qū)別怎么回答”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“面試問(wèn)Vue2與Vue3的區(qū)別怎么回答”吧！

Vue 內(nèi)部根據(jù)功能可以被分為三個(gè)大的模塊：響應(yīng)性 reactivite、運(yùn)行時(shí) runtime、編輯器 compiler，以及一些小的功能點(diǎn)。那么要說(shuō) vue2 與 vue3 的區(qū)別，我們需要從這三個(gè)方面加小的功能點(diǎn)進(jìn)行說(shuō)起。

首先先來(lái)說(shuō) 響應(yīng)性 reactivite：

vue2 的響應(yīng)性主要依賴 Object.defineProperty 進(jìn)行實(shí)現(xiàn)，但是 Object.defineProperty 只能監(jiān)聽(tīng) 指定對(duì)象的指定屬性的 getter 行為和 setter 行為，那么這樣在某些情況下就會(huì)出現(xiàn)問(wèn)題。

什么問(wèn)題呢？

比如說(shuō)：我們?cè)?data 中聲明了一個(gè)對(duì)象 person ，但是在后期為 person 增加了新的屬性，那么這個(gè)新的屬性就會(huì)失去響應(yīng)性。想要解決這個(gè)問(wèn)題其實(shí)也非常的簡(jiǎn)單，可以通過(guò) Vue.$set 方法來(lái)增加 指定對(duì)象指定屬性的響應(yīng)性。但是這樣的一種方式，在 Vue 的自動(dòng)響應(yīng)性機(jī)制中是不合理。

所以在 Vue3 中，Vue 引入了反射和代理的概念，所謂反射指的是 Reflect，所謂代理指的是 Proxy。我們可以利用 Proxy 直接代理一個(gè)普通對(duì)象，得到一個(gè) proxy 實(shí)例 的代理對(duì)象。在 vue3 中，這個(gè)過(guò)程通過(guò) reactive 這個(gè)方法進(jìn)行實(shí)現(xiàn)。

但是 proxy 只能實(shí)現(xiàn)代理復(fù)雜數(shù)據(jù)類(lèi)型，所以 vue 額外提供了 ref 方法，用來(lái)處理簡(jiǎn)單數(shù)據(jù)類(lèi)型的響應(yīng)性。ref 本質(zhì)上并沒(méi)有進(jìn)行數(shù)據(jù)的監(jiān)聽(tīng)，而是構(gòu)建了一個(gè) RefImpl 的類(lèi)，通過(guò) set 和 get 標(biāo)記了 value 函數(shù)，以此來(lái)進(jìn)行的實(shí)現(xiàn)。所以 ref 必須要通過(guò) .value 進(jìn)行觸發(fā)，之所以要這么做本質(zhì)是調(diào)用 value 方法。

接下來(lái)是運(yùn)行時(shí) runtime：

所謂的運(yùn)行時(shí)，大多數(shù)時(shí)候指的是 renderer 渲染器，渲染器本質(zhì)上是一個(gè)對(duì)象，內(nèi)部主要三個(gè)方法 render、hydrate、createApp ，其中 render 主要處理渲染邏輯，hydrate 主要處理服務(wù)端渲染邏輯，而 createApp 就是創(chuàng)建 vue 實(shí)例的方法。

這里咱們主要來(lái)說(shuō) render 渲染函數(shù)，vue3 中為了保證宿主環(huán)境與渲染邏輯的分離，把所有與宿主環(huán)境相關(guān)的邏輯進(jìn)行了抽離，通過(guò)接口的形式進(jìn)行傳遞。這樣做的目的其實(shí)是為了解綁宿主環(huán)境與渲染邏輯，以保證 vue 在非瀏覽器端的宿主環(huán)境下可以正常渲染。

再往下是 編輯器 compiler：

vue 中的 compiler 其實(shí)是一個(gè) DSL（特定領(lǐng)域下專(zhuān)用語(yǔ)言編輯器） ，其目的是為了把 template 模板 編譯成 render 函數(shù)。 邏輯主要是分成了三大步： parse、transform 和 generate。其中 parse 的作用是為了把 template 轉(zhuǎn)化為 AST（抽象語(yǔ)法樹(shù)），transform 可以把 AST（抽象語(yǔ)法樹(shù)） 轉(zhuǎn)化為 JavaScript AST，最后由 generate 把 JavaScript AST 通過(guò)轉(zhuǎn)化為 render 函數(shù)。轉(zhuǎn)化的過(guò)程中會(huì)涉及到一些稍微復(fù)雜的概念，比如 有限自動(dòng)狀態(tài)機(jī) 這個(gè)就不再這里展開(kāi)說(shuō)了。

除此之外，還有一些其他的變化。比如 vue3 新增的 composition API。 composition API 在 vue3.0 和 vue3.2 中會(huì)有一些不同的呈現(xiàn)，比如說(shuō)：最初的 composition API 以 setup 函數(shù)作為入口函數(shù)， setup 函數(shù)必須返回兩種類(lèi)型的值：第一是對(duì)象，第二是函數(shù)。

當(dāng) setup 函數(shù)返回對(duì)象時(shí)，對(duì)象中的數(shù)據(jù)或方法可以在 template 中被使用。當(dāng) setup 函數(shù)返回函數(shù)時(shí)，函數(shù)會(huì)被作為 render 函數(shù)。

但是這種 setup 函數(shù)的形式并不好，因?yàn)樗械倪壿嫸技性?setup 函數(shù)中，很容易出現(xiàn)一個(gè)巨大的 setup 函數(shù)，我們把它叫做巨石（屎山）函數(shù)。所以 vue 3.2 的時(shí)候，新增了一個(gè) script setup 的語(yǔ)法糖，嘗試解決這個(gè)問(wèn)題。目前來(lái)看 script setup 的呈現(xiàn)還是非常不錯(cuò)的。

除此之外還有一些小的變化，比如 Fragment、Teleport、Suspense 等等，這些就不去說(shuō)了.

感謝各位的閱讀，以上就是“面試問(wèn)Vue2與Vue3的區(qū)別怎么回答”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)面試問(wèn)Vue2與Vue3的區(qū)別怎么回答這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！