vue3 正式發佈有兩年多了，之前也做過一些學習和研究。vue3 發佈後給某培訓機構開發了一套vue3課程課件，自己也開源了一套基於vue3的後臺管理系統（因為個人懶的原因，半年後才上傳到gitHub，且到目前為止一直沒有更新過）。 附上網址：https://github.com/gegestst1 ...
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 鬆散語法的開發者來說，可能不太喜歡這種開發方式
