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

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),龍湖企業(yè)網(wǎng)站建設(shè),龍湖品牌網(wǎng)站建設(shè),網(wǎng)站定制,龍湖網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,龍湖網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

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

首先先來說 響應(yīng)性 reactivite：

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

什么問題呢？

比如說：我們在 data 中聲明了一個對象 person ，但是在后期為 person 增加了新的屬性，那么這個新的屬性就會失去響應(yīng)性。想要解決這個問題其實也非常的簡單，可以通過 Vue.$set 方法來增加 指定對象指定屬性的響應(yīng)性。但是這樣的一種方式，在 Vue 的自動響應(yīng)性機(jī)制中是不合理。

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

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

接下來是運(yùn)行時 runtime：

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

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

再往下是 編輯器 compiler：

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

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

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

但是這種 setup 函數(shù)的形式并不好，因為所有的邏輯都集中在 setup 函數(shù)中，很容易出現(xiàn)一個巨大的 setup 函數(shù)，我們把它叫做巨石（屎山）函數(shù)。所以 vue 3.2 的時候，新增了一個 script setup 的語法糖，嘗試解決這個問題。目前來看 script setup 的呈現(xiàn)還是非常不錯的。

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

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