Vue3.0新版API之composition-api入坑指南

請叫我宋某某發表於2020-04-30
VueAPI

關於VUE3.0

由於vue3.0語法跟vue2.x的語法幾乎是完全相容的，本文主要介紹瞭如何使用composition-api，主要分以下幾個方面來講

  • 使用vite體驗vue3.0
  • composition-api解決了什麼問題
  • 語法糖介紹

vite的安裝使用

vite倉庫地址 https://github.com/vuejs/vite 上面有詳細的安裝使用教程，按照步驟安裝即可

composition-api解決了什麼問題

  1. 使用傳統的option配置方法寫元件的時候問題，隨著業務複雜度越來越高，程式碼量會不斷的加大；由於相關業務的程式碼需要遵循option的配置寫到特定的區域，導致後續維護非常的複雜，同時程式碼可複用性不高，而composition-api就是為了解決這個問題而生的

語法糖介紹

compositon-api提供了一下幾個函式

  • reactive
  • watchEffect
  • computed
  • ref
  • toRefs
  • 生命週期的hooks

reactive

 import { reactive, computed } from 'vue'

  export default {
    setup() {
      const state = reactive({
        count: 0
      })
      
      function increment() {
        state.count++
      }
      
      return {
        state,
        increment
      }
    }
  }

Reactive 相當於當前的 Vue.observable () API，經過reactive處理後的函式能變成響應式的資料，類似於option api裡面的data屬性的值

watchEffect

import { reactive, computed, watchEffect } from 'vue'

export default {
    setup() {
      const state = reactive({
        count: 0
      })

      const double = computed(() => state.count * 2)

      function increment() {
        state.count++
      }

      watchEffect(() => {
        console.log(double.value)
      })
      return {
        state,
        increment
      }
    }
}

Vue 中檢測狀態變化的方法，我們可以在渲染期間使用它。 由於依賴關係跟蹤，當反應狀態發生變化時，檢視會自動更新。 在 DOM 中呈現某些內容被認為是一種“副作用” : 我們的程式在程式本身(DOM)之外修改狀態。 要應用並自動重新應用基於反應狀態的副作用，我們可以使用 watchEffect API

computed

import { reactive, computed } from 'vue'

export default {
    setup() {
      const state = reactive({
        count: 0
      })
    
      const double = computed(() => state.count * 2)
    
      function increment() {
        state.count++
      }
    
      return {
        state,
        increment
      }
    }
}

有時我們需要依賴於其他狀態的狀態——在 Vue 中，這是通過計算屬性來處理的。 要直接建立一個計算值，我們可以使用computed API

ref

上面計算屬性返回計算結果是什麼？ 如果我們猜測一下內部是如何實現 computed 的，我們可能會得出這樣的結論

function computed(getter) {
  let value
  watchEffect(() => {
    value = getter()
  })
  return value
}

但是我們知道這是行不通的: 如果 value 是一個類似 number 的基本型別，那麼一旦返回，它與 computed 內部的更新邏輯的連線就會丟失。 這是因為 JavaScript 基本型別是按值傳遞的，而不是按引用傳遞的

當一個值作為屬性分配給一個物件時，同樣的問題也會發生。 如果被賦為屬性或從函式返回時，反應值不能保持其響應性，那麼它就沒有多大用處。 為了確保我們總是可以讀取計算的最新值，我們需要將實際值包裝在一個物件中，然後返回該物件

function computed(getter) {
  const ref = {
    value: null
  }
  watchEffect(() => {
    ref.value = getter()
  })
  return ref
}

所以要拿到ref與computed的值應該是那返回值下面的value

let count = ref(1)

console.log(count.value) // 1

let double = computed(() => count.value * 2) // 2

值得注意，當我們在template裡面使用ref或者computed的時候，vue會自動把它們用reactive處理無需用count.value或者double.value的值，既<div>{{ count }} {{ double }}</div>即可

toRefs

toRefs API提供了一個方法可以把reactive的值處理為ref

生命週期的hooks

方法與option api基本一致


import { onBeforeMount, onMounted, reactive, watchEffect } from 'vue'

export default {
    setup() {
      const state = reactive({
        count: 0
      })

      const double = computed(() => state.count * 2)

      function increment() {
        state.count++
      }

      watchEffect(() => {
        console.log(double.value)
      })
      
      onMounted(() => {
        document.title = 'hello'
      })
      return {
        state,
        increment
      }
    }
}

最後講講關於使用composition api如何組織程式碼

往往是把一個功能的所有狀態、方法、都封裝到一個函式裡面，方便統一管理，如果你按照這種方式來寫程式碼，那麼程式碼的結構大致如下

export default {
  setup() { // ...
  }
}

function useCurrentFolderData(networkState) { // ...
}

function useFolderNavigation({ networkState, currentFolderData }) { // ...
}

function useFavoriteFolder(currentFolderData) { // ...
}

function useHiddenFolders() { // ...
}

function useCreateFolder(openFolder) { // ...
}

當我們哪個功能需要再其他元件被複用的時候，直接把相關的方法提取出去，然後再引用進來就可以了

可以看出composition api的面向人群主要是經常寫輪子或者框架的開發者，因為他更靈活，可以寫出高內聚、低耦合的程式碼

使用vue3的過程中也不是一定要用composition api的，如果業務不是很複雜使用option api也是沒什麼問題的。

結束，謝謝觀看~~~~

相關文章