為了下半年的 KPI，沖沖沖！把手頭的 Vue 項目進行版本更新和重構。
推薦一下本人近期維護的開源項目：
Spring Boot 開源電商項目（含商城端和背景管理系統）：https://github.com/newbee-ltd/newbee-mall
Spring Boot + Vue3 前後端分離商城項目：https://github.com/newbee-ltd/newbee-mall-vue3-app
Vue 3.0 + Vite 2.0 + Vue-Router 4.0 + Element-Plus + Echarts 5.0 + Axios 開發的背景管理系統：https://github.com/newbee-ltd/vue3-admin
靓仔路過，不要錯過
想必 Vue3.0 釋出這件事，大家都知道了。
我也是從朋友圈的轉發得知此事，部落格平台、公衆号、朋友圈基本都有這麼一條新聞，可見 Vue3.0 的被期待程度，因為 React 16 釋出的時候，我也沒見大家這麼追捧，讓我有點震驚的是 Vue 有 130 萬的使用者，這個體量真的是有點驚人。
Vue 3.0 來了，我們該做些什麼呢？
- 學習，趕緊學習，學不動了也要學！
- 裝不知道，我是一隻快樂的鴕鳥，我不知道 Vue 更新了，繼續摸魚爽歪歪。
Vue3.0 更新了啥
讓我總結的話，就隻有兩個比較重要的更新（我目前還沒有完完整整的體驗過新版本，有些地方可能不夠完善，希望大家多多包涵，後續會整理和分享一些實踐的 demo）。
一個是 Composition API，另一個是對 TypeScript 的全面支援。
團隊還會出一個 Vue 2.7 的版本，給予 2.x 使用者一些在 3.0 版本中被删除方法的警告，這有助于使用者的平穩更新。
Nuxt3 好像還在路上，但是目前看來，市面上的各大元件庫還沒來得及針對 Vue3.0 進行改版更新。
周邊的插件如 Vue-Router、Vuex、VSCode 插件 Vetur 等都在有序的進行中。
Vue3.0 具體更新了啥
來點陽間的知識，說點人話。
下面以代碼片段的形式為大家介紹一下 Vue3.0 作出了哪些新的變化，Vue2.x 對應一些 Vue3.0 的寫法。
應用的配置項
config 是一個包含 Vue 應用程式全局配置的對象。可以在挂載應用程式之前修改下面列出的屬性。
-
devtools
類型： boolean
預設值： true
如何使用：
app.config.devtools = true
是否開啟 vue-devtools 工具的檢測，預設情況下開發環境是 true，生産環境下則為 false。
-
errorHandler
類型： Function
預設值： undefined
app.config.errorHandler = (err, vm, info) => {
// info 為 Vue 在某個生命周期發生錯誤的資訊
}
為元件渲染功能和觀察程式期間的未捕獲錯誤配置設定處理程式。
-
globalProperties 🌟
類型： [key: string]: any
app.config.globalProperties.name = '十三'
app.component('c-component', {
mounted() {
console.log(this.name) // '十三'
}
})
若是元件内也有 name 屬性，則組建内的屬性權限比較高。
還有一個知識點很重要，在 Vue2.x 中，我們定義一個全局屬性或者方法都是如下所示：
Vue.prototype.$md5 = () => {}
在 Vue3.0 中，我們便可這樣定義：
const app = Vue.createApp({})
app.config.globalProperties.$md5 = () => {}
-
performance
預設值： false
app.config.performance = true
将其設定為 true 可在浏覽器 devtool 性能/時間線面闆中啟用元件初始化，編譯，渲染和更新檔性能跟蹤。 僅在開發模式和支援 Performance.mark API的浏覽器中工作。
Application API
全局改變的動作，都在 createApp 所建立的應用執行個體中，如下所示：
import { createApp } from 'vue'
const app = createApp({})
那麼 app 下這些屬性：
-
component
參數： 第一個參數 string 類型表示元件名，第二個參數 Function 或 Object
傳回值： 隻傳第一個參數，傳回組建。帶上第二個參數則傳回應用程式執行個體
import { createApp } from 'vue'
const app = createApp({})
// 注冊一個 options 對象
app.component('shisan-component', {
/* ... */
})
// 檢索注冊的元件
const ShiSanComponent = app.component('shisan-component')
- config(上面第一段講過了)
-
directive
自定義指令變化不大，還是之前那些東西，如下：
app.directive('my-directive', {
// 挂載前
beforeMount() {},
// 挂載後
mounted() {},
// 更新前
beforeUpdate() {},
// 更新後
updated() {},
// 解除安裝前
beforeUnmount() {},
// 解除安裝後
unmounted() {}
})
多數全局API都沒變化，還是老的 2.x 的寫法居多。
Composition API
Composition API解決了什麼問題？
使用傳統的 Vue2.x 配置方法寫元件的時候問題，随着業務複雜度越來越高，代碼量會不斷的加大。由于相關業務的代碼需要遵循option 的配置寫到特定的區域，導緻後續維護非常的複雜，同時代碼可複用性不高，你常常會發現一個頁面元件，寫着寫着就寫到了三四百行去了。
有沒有熟悉的感覺？沒錯這就是老的模式帶來的弊端，一直憋了這麼久，也沒誰了～～
而 Composition API 解決了這個令人頭疼的問題。
它為我們提供了幾個函數，如下所示：
- reactive
- watchEffect
- computed
- ref
- toRefs
- hooks
import { reactive, computed } from 'vue'
export default {
setup() {
const state = reactive({
a: 0
})
function increment() {
state.a++
}
return {
state,
increment
}
}
}
reactive 相當于 Vue2.x 的 Vue.observable () API，經過 reactive 處理後的函數能變成響應式的資料，類似之前寫模闆頁面時定義的 data 屬性的值。
import { reactive, computed, watchEffect } from 'vue'
export default {
setup() {
const state = reactive({ a: 0 })
const double = computed(() => state.a * 3)
function increment() {
state.count++
}
const wa = watchEffect(() => {
// 使用到了哪個 ref/reactive 對象.value, 就監聽哪個
console.log(double.value)
})
// 可以通過 wa.stop 停止監聽
return {
state,
increment
}
}
}
watchEffect 被稱之為副作用，立即執行傳入的一個函數，并響應式追蹤其依賴，并在其依賴變更時重新運作該函數。
import { reactive, computed } from 'vue'
export default {
setup() {
const state = reactive({
a: 0
})
const double = computed(() => state.a * 3)
function increment() {
state.a++
}
return {
double,
state,
increment
}
}
}
這就比較直覺了，computed 在 Vue2.x 就存在了，隻不過現在使用的形式變了一下，需要被計算的屬性，通過上述形式傳回。
ref 和 toRefs
toRefs 提供了一個方法可以把 reactive 的值處理為 ref，也就是将響應式的對象處理為普通對象。
與 2.x 版本相對應的生命周期鈎子
| Vue2.x 的生命周期 | Vue3.x 的生命周期 |
|---|---|
| beforeCreate | setup() |
| created | |
| beforeMount | onBeforeMount |
| mounted | onMounted |
| beforeUpdate | onBeforeUpdate |
| updated | onUpdated |
| beforeDestroy | onBeforeUnmount |
| destroyed | onUnmounted |
| errorCaptured | onErrorCaptured |
Vue3.0 在 Composition API 中另外加了兩個鈎子，分别是
onRenderTracked
和
onRenderTriggered
，兩個鈎子函數都接收一個
DebuggerEvent
:
export default {
onRenderTriggered(e) {
debugger
// 檢查哪個依賴性導緻元件重新渲染
},
}
Vue 3 來了，我們要做些什麼？
前面我也開玩笑的講了三條，要麼裝不知道，要麼趕緊學，而已經學習了 Vue 3 的朋友可以用到自己的項目中，對項目進行優化和更新。這樣，在年終總結就可以加上最重要的一條：帶領團隊成員完成了項目的重構，包括邏輯重構 + 文法更新，全面适配 Vue 3！打包效率提升xx倍！頁面響應速度提升 xx！
不僅僅如此，對于學生黨或者還在找工作的同學來說，可能在準備面試時又需要多準備一些内容了，沖沖沖！
最後，我想了想我能夠做些什麼，首先裝鴕鳥是不行的，然後不學習也是不行的，因為我上半年的時候寫了一個 Vue 的商城項目并開源到 GitHub 網站上，頁面效果如下所示：
newbee-mall 在 GitHub 和國内的碼雲都建立了代碼倉庫，如果有人通路 GitHub 比較慢的話，建議在 Gitee 上檢視該項目，兩個倉庫會保持同步更新。
- newbee-mall in GitHub : https://github.com/newbee-ltd/newbee-mall-vue-app
- newbee-mall in Gitee : https://gitee.com/newbee-ltd/newbee-mall-vue-app
通過預覽圖，大家應該也可以看得出來，這不是一個基礎的 demo，而是一個功能較為完善的 Vue.js 商城實戰系統。自開源到現在，也有很多朋友找我，問我會不會适配 Vue3 并對項目源碼進行修改。
這裡，大家可以放心，我一直都回答會更新到 Vue3，并且代碼依然全部開源，希望大家都去點個 star，你們越熱情，我也會更有動力去重構項目到 Vue3 版本！是以，對我個人來說，其實一直在等着 Vue.js 3.0 版本的正式釋出，之後我會抽時間把這個 Vue.js 實戰商城項目用 Vue3 再寫一下。大家可以給新蜂商城項目點個 star，star 數量越多，我也越有精神頭兒去更新，哈哈哈哈哈。
這樣，大家就有了 Vue3 的實戰經驗啦！
除注明轉載/出處外，皆為作者原創，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連結，否則保留追究法律責任的權利。
我曾七次鄙視自己的靈魂:
第一次,當它本可進取時，卻故作謙卑；
第二次,當它空虛時，用愛欲來填充；
第三次,在困難和容易之間，它選擇了容易；
第四次,它犯了錯，卻借由别人也會犯錯來寬慰自己；
第五次,它自由軟弱，卻把它認為是生命的堅韌；
第六次,當它鄙夷一張醜惡的嘴臉時，卻不知那正是自己面具中的一副；
第七次,它側身于生活的污泥中雖不甘心，卻又畏首畏尾。