vue3和vue2 的區別，vue3和vu2到底哪個好呢？

蔣偉平發表於2022-11-23
Vue

vue3 正式釋出有兩年多了，之前也做過一些學習和研究。vue3 釋出後給某培訓機構開發了一套vue3課程課件，自己也開源了一套基於vue3的後臺管理系統（因為個人懶的原因，半年後才上傳到gitHub，且到目前為止一直沒有更新過）。

附上網址：https://github.com/gegestst112/vue-stick-admin，有興趣的可以下載看一下，希望我之後會繼續完善和更新。

雖然現在還有很多用vue2的專案，甚至有新啟動的專案還基於vue2。但vue3作為 vue 的主流開發技術棧，仍然是必然的趨勢。因為現在 vue 官網文件也是 vue3 的版本了，指不定哪天要找 vue2 的文件都要花點功夫了。

近期整理一下 vue2 和 vue3 的不同點，希望對讀到這篇文章的小夥伴從vue2過渡到vue3有些許幫助。

先來看下 vue2 和 vue3 有哪些相同點，至少先知道技術升級到 vue3 沒有看起來那麼難。

  1. vue3 中還是可以使用選項式 api 的寫法，我們熟悉的data、props、computed、methods、watch、mixins 這些選項都還在；
  2. created、mounted 等生命週期鉤子函式也還是熟悉的味道；
  3. 模板語法基本上一致，我們還是可以用 v-bind 繫結資料，v-on 繫結事件，v-if 和 v-for 渲染元素等等；

 

總結一下，即使不使用 vue3 新增的那些特性，也還是可以完成日常開發工作的。

不過，如果專案是使用 vue3 技術棧開發的，應該大部分人都會嘗試適應vue3 組合式 api 語法。如果其他同事開發的模組用的都是組合式 api，唯獨你還是用選項式 api，多少會有些違和感的。接下來看看 vue3 新增了哪些新特性

 

一、建立例項的方式不同

vue2 使用 new Vue({ ...選項 }) 建構函式的方式建立；

vue3 透過內建的 createApp( //根元件 ) 方法建立。

 

二、Vue3 新增的片斷特性，允許單檔案元件中的 template 元素下可以有多個節點

在 Vue 2 中的元件中的頂層 <template> 塊不支援多個節點，通常都是用一個 div 元素包含所有節點或元件，如：

1       <template>
2         <div>
3         <div class=”top”>…</div>
4           <header>...</header>
5           <main>...</main>
6           <footer>...</footer>
7         </div>
8       </template>

影響雖然不大，但最終生成的頁面中會有很多不必要的節點巢狀，有經驗的前端開發工程師應該都深有體會，特別是有強迫症會更覺得難受。

在Vue 3 中解決了這個問題，元件中可以包含多個節點，如下所示：

1       <template>
2         <header>...</header>
3         <main v-bind="$attrs">...</main>
4         <footer>...</footer>
5       </template>

現在這樣寫的元件，當元件巢狀很多級的時候，可以節省很多巢狀的節點。不過記得顯示定義 attribute 分佈的位置。

 

三、vue3的響應式原理實現不一樣

vue2的雙向資料繫結是使用 Object.definepropert() 對資料進行劫持，結合釋出訂閱模式實現。

vue3中使用了es6的proxyAPI對資料進行處理。

使用proxy 可以劫持整個data物件，然後遞迴返回屬性的值的代理即可實現響應式。

 

四、新增了一些元件

比如 <teleport> 內建元件可以將內容掛載到指定的目標元素。

 

五、刪除了過濾器

在 vue2 中過濾器就用得很少了，我只在 vue1 的時候用得比較多。對於習慣用過濾器的開發者可能有少許影響。

 

六、新增和修改了生命週期鉤子函式

比如 destroyed 生命週期鉤子被重新命名為 unmounted；

新增了 renderTracked、serverPrefetch 等鉤子函式；

在組合式 api 中不同的呼叫方式。

 

七、組合式 API

組合式 API 是 vue3 最大的一個變化，也是很多熟悉 vue2 的開發者最需要適應的方法。

  1. 可以在單檔案元件中使用組合式 API 的編譯時語法糖 <script setup>，有使程式碼更簡潔、更好的執行時效能、能夠使用純 TypeScript 宣告 props 和自定義事件等優勢；
  2. 不能在 setup 中使用 this 返回 vue 例項物件
  3. 生命週期鉤子函式名稱前加了 on
  4. 傳參 props 和 事件 emit 有不同的呼叫方式
  5. 計算屬性 computed 和 監聽器 watch 使用方式不同
  6. 新增大量的響應式 api，合理地運用這些 api 運算元據，並可使頁面響應資料變化。

 

八、支援 typescript 開發語法

多了一種開發方式，有利於團隊合作、使程式碼更規範和嚴謹；對於習慣 javascript 鬆散語法的開發者來說，可能不太喜歡這種開發方式

 

相關文章