為你解讀Vue3中的大熱門——Composition API-有解無憂

作者：Filip Rakowski

翻譯：啟道學院

我們已經知道，在Vue的新版本中撰寫的應用程式將表現得非常好，但性能并不是最重要的部分，對我們開發人員來說最重要的是新版本將如何影響我們撰寫代碼的方式，

正如你所預料的，Vue3帶來了許多新的振奮人心的功能，幸運的是，Vue團隊主要對當前的Composition API進行了添加和改進，而不是進行了重大更改，因此已經知道Vue2的人應該很快對新的語法感到滿意，

讓我們從大多數人可能聽說的Composition API開始！

Composition API

下一個主要版本的Vue中討論的最常見的就是Composition AP的特色語法的，這是一種全新的邏輯重用和代碼組織方法，

目前，我們使用的是“options”API 構建組件，為了將邏輯添加到Vue組件中，我們填充（options）屬性，如data、methods、computed等，這種方法最大的缺點是，它本身不是一個作業的JavaScript代碼，您需要確切地知道模板中可以訪問哪些屬性以及this關鍵字的行為，在底層，Vue編譯器需要將此屬性轉換為作業代碼，正因為如此，我們無法從自動建議或型別檢查中獲益，

Composition API希望將通過當前組件屬性、可用的機制公開為JavaScript函式來解決這個問題， Vue核心團隊將組件Composition API描述為“一套附加的、基于函式的api，允許靈活地組合組件邏輯”，使用Composition API撰寫的代碼更易讀，并且場景不復雜，這使得閱讀和學習變得更容易，

讓我們看到一個非常簡單的組件示例，它使用新的組件Composition API來理解它是如何作業的，

<template>
  <button @click="increment">
    Count is: {{ count }}, double is {{ double }}, click to increment.
  </button>
</template>

<script>
import { ref, computed, onMounted } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const double = computed(() => count.value * 2)

    function increment() {
      count.value++
    }

    onMounted(() => console.log('component mounted!'))

    return {
      count,
      double,
      increment
    }
  }
}
</script>

現在讓我們把這個代碼分解成幾個版塊來理解發生了什么，

import { ref, computed, onMounted } from 'vue'

正如我前面提到的，Composition API將組件屬性公開為函式，因此第一步是匯入我們需要的函式，在案例中，我們需要用ref創建回應式參考、計算屬性使用computed、用onMounted訪問裝載后的生命周期鉤子，

現在你可能想知道這個神秘的setup方法是什么？

export default {
  setup() {}
	}
	```
簡而言之，它只是一個函式，它將屬性和函式回傳到模板，  我們在這里宣告所有的回應式屬性、計算屬性、觀察者和生命周期鉤子，然后回傳它們，以便它們可以在模板中使用， 我們沒有在setup函式回傳的內容將在模板中不可用， 

```js
const count = ref(0)

根據上面的內容，我們將用ref函式宣告稱為count的回應式屬性，它可以包裝任何原始型別或物件，并回傳它的回應式參考，傳遞元素的值將保留在創建參考的值屬性中，例如，如果要訪問count參考的值，則需要擴展請求count.value.

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

function increment() {
  count.value++
}

這是我們在宣告計算屬性double和increment函式時所做的事

onMounted(() => console.log('component mounted!'))

在mounted鉤子內，當組件裝載時，你可以記錄一些訊息

return {
  count,
  double,
  increment
}

在最后，我們回傳count和double屬性與increment方法，使它們在模板中可用，

<template>
  <button @click="increment">
    Count is: {{ count }}, double is {{ double }}. Click to increment.
  </button>
</template>

現在，我們可以在template中訪問setup回傳的屬性和函式，就像它們通過舊的options API宣告的一樣，

這是一個簡單的例子，使用Options API也很容易實作這一點，新的Composition API的真正好處不僅在于以不同的方式撰寫代碼，而且在重用我們的代碼/邏輯時，這些好處也會顯現出來，

Composition API代碼重用

新的Composition API有更多的優點，想想代碼重用，目前，如果我們想在其他組件之間共享一些代碼，有兩個可用的選擇--混入和范圍插槽，兩者都有其缺點，

假設我們想要提取count功能并在其他組件中重用它，下面您可以看到它如何與可用的API和Composition API一起使用，

我們從混入開始……

import CounterMixin from './mixins/counter'

export default {
  mixins: [CounterMixin]
}

混入最大的缺點:是我們不知道它給我們的組件增加了什么，它不僅難以解釋，而且還可能導致與現有屬性和函式的名稱沖突，

看看范圍插槽

<template>
  <Counter v-slot="{ count, increment }">
     {{ count }}
    <button @click="increment">Increment</button> 
  </Counter> 
</template>

使用范圍插槽，我們確切地知道我們可以通過v-slot屬性訪問哪些屬性，這樣就更容易理解代碼了，這種方法的缺點是，我們只能在模板中訪問它，它只能在Counter組件范圍內使用，

是時候使用Composition API了

function useCounter() {
  const count = ref(0)
  function increment () { count.value++ }

  return {
    count,
    incrememt
  }
}

export default {
  setup () {
    const { count, increment } = useCounter()
    return {
      count,
      increment
    }
  }
}

更優雅，不是嗎？我們不受模板和組件范圍的限制，并且確切地知道我們可以從計數器訪問哪些屬性，此外，我們可以從編譯完成的代碼中受益，因為useCounter只是一個回傳某些屬性的函式，所以編輯器可以幫助我們進行型別檢查和建議，

這也是使用第三方庫的一種更優雅的方式，例如，如果我們想使用vuex，我們可以擴展useStore函式而不是污染Vue原型(this.$store)，

const { commit, dispatch } = useStore()

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/140513.html

標籤：JavaScript

上一篇：vuepress-theme-reco + Github Actions 構建靜態博客，部署到第三方服務器

下一篇：node 連接mysql失敗