面試問Vue2與Vue3的區別怎么回答

這篇文章主要講解了“面試問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的區別怎么回答這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！