面試官突然問：Vue2與Vue3的差別？

序

現在網路瘋傳前端已死的言論，其實本質上的原因就是因為人員增多，崗位減少，導致競爭壓力加大。

社會中現有的問題，我們沒有辦法解決，但是可以從自身入手，讓自己增加競爭力。

當多個人爭取一個職位的時候，第二名和最後一個其實沒有差別，因為他們只要第一名。

所以在每個問題上都回答到100分就變得非常重要了！

這也是我為什麼會開了《一個問題幹懵面試官 》的原因。

專題希望可以幫大家在每個問題中都能夠拿到100分，在最短的時間內「征服」面試官。珍惜手中每一個面試機會，祝大家早日高薪入職心儀的公司

#被問到《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 等等，這些就不去說了...

推薦學習： 《vue.js影片教學》

以上是面試官突然問：Vue2與Vue3的差別？的詳細內容。更多資訊請關注PHP中文網其他相關文章！