Vue 3.0 來了，我們該做些什麼？

我是13發表於2020-09-21
Vue

靚仔路過，不要錯過

想必 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 上檢視該專案，兩個倉庫會保持同步更新。

通過預覽圖，大家應該也可以看得出來，這不是一個基礎的 demo，而是一個功能較為完善的 Vue.js 商城實戰系統。自開源到現在，也有很多朋友找我，問我會不會適配 Vue3 並對專案原始碼進行修改。

這裡，大家可以放心，我一直都回答會升級到 Vue3，並且程式碼依然全部開源，希望大家都去點個 star，你們越熱情，我也會更有動力去重構專案到 Vue3 版本！所以，對我個人來說，其實一直在等著 Vue.js 3.0 版本的正式釋出，之後我會抽時間把這個 Vue.js 實戰商城專案用 Vue3 再寫一下。大家可以給新蜂商城專案點個 star，star 數量越多，我也越有精神頭兒去更新，哈哈哈哈哈。

這樣，大家就有了 Vue3 的實戰經驗啦！

除註明轉載/出處外，皆為作者原創，歡迎轉載，但未經作者同意必須保留此段宣告，且在文章頁面明顯位置給出原文連結，否則保留追究法律責任的權利。

相關文章