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 沒有看起來那麼難。
- vue3 中還是可以使用選項式 api 的寫法，我們熟悉的data、props、computed、methods、watch、mixins 這些選項都還在；
- created、mounted 等生命週期鉤子函式也還是熟悉的味道；
- 模板語法基本上一致，我們還是可以用 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 的開發者最需要適應的方法。
- 可以在單檔案元件中使用組合式 API 的編譯時語法糖 <script setup>，有使程式碼更簡潔、更好的執行時效能、能夠使用純 TypeScript 宣告 props 和自定義事件等優勢；
- 不能在 setup 中使用 this 返回 vue 例項物件
- 生命週期鉤子函式名稱前加了 on
- 傳參 props 和 事件 emit 有不同的呼叫方式
- 計算屬性 computed 和 監聽器 watch 使用方式不同
- 新增大量的響應式 api，合理地運用這些 api 運算元據，並可使頁面響應資料變化。
八、支援 typescript 開發語法
多了一種開發方式，有利於團隊合作、使程式碼更規範和嚴謹；對於習慣 javascript 鬆散語法的開發者來說，可能不太喜歡這種開發方式