Vue 3.0 來了，咱們該作些什麼？

靚仔路過，不要錯過

想必 Vue3.0 發佈這件事，你們都知道了。

我也是從朋友圈的轉發得知此事，博客平臺、公衆號、朋友圈基本都有這麼一條新聞，可見 Vue3.0 的被期待程度，由於 React 16 發佈的時候，我也沒見你們這麼追捧，讓我有點震驚的是 Vue 有 130 萬的使用者，這個體量真的是有點驚人。

Vue 3.0 來了，咱們該作些什麼呢？

• 學習，趕忙學習，學不動了也要學！
• 裝不知道，我是一隻快樂的鴕鳥，我不知道 Vue 更新了，繼續摸魚爽歪歪。
• 爲了下半年的 KPI，沖沖衝！把手頭的 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
  默認值： undefined
  如何使用：

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
  類型： boolean
  默認值： 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

reactive

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 屬性的值。

watchEffect

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 被稱之爲反作用，當即執行傳入的一個函數，並響應式追蹤其依賴，並在其依賴變動時從新運行該函數。

computed

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，也就是將響應式的對象處理爲普通對象。

hooks

與 2.x 版本相對應的生命週期鉤子

Vue2.x 的生命週期	Vue3.x 的生命週期
beforeCreate	setup()
created	setup()
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 的實戰經驗啦！

除註明轉載/出處外，皆爲做者原創，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文連接，不然保留追究法律責任的權利。