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 松散語法的開發者來說，可能不太喜歡這種開發方式
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/538210.html
標籤：其他
下一篇：vue 指令與過濾器