面試官突然問：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 等等，這些就不去說了...

推薦學習：《》