Vue 3.0 中令人激動的新功能：Composition API

正如你所期望的那樣，Vue 3帶來了很多令人興奮的新功能。值得慶幸的是，Vue團隊主要是在當前API的基礎(chǔ)上引入了一些補充和改進，而不是進行重大更改，所以已經(jīng)了解Vue 2的人應(yīng)該很快就會對新的語法感到適應(yīng)。

讓我們從你們大多數(shù)人可能聽說過的API開始吧......

Composition API

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

當前，我們使用所謂的Options API構(gòu)建組件。為了向Vue組件添加邏輯，我們填充（選項）屬性，例如數(shù)據(jù)，方法，計算的等。這種方法的最大缺點是，這本身并不是有效的JavaScript代碼。您需要確切了解模板中可以訪問哪些屬性，以及此關(guān)鍵字的行為。在后臺，Vue編譯器需要將此屬性轉(zhuǎn)換為工作代碼。因此，我們無法從自動建議或類型檢查中受益。

Composition API的目的是通過將當前可用組件屬性作為JavaScript函數(shù)暴露出來的機制來解決這個問題。Vue核心團隊將Composition API描述為“一組基于功能的附加API，可以靈活地組合組件邏輯”。使用 Composition API 編寫的代碼更易讀，而且沒有任何幕后的魔力，更容易閱讀和學習。

讓我們來看看一個非常簡單的例子，看看使用新的Composition API的組件是如何工作的。

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

<script>
import { reactive, computed } from 'vue'

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

    function increment() {
      state.count++
    }

    return {
      state,
      increment
    }
  }
}
</script>

現(xiàn)在，讓我們把這段代碼分解成幾段，以了解發(fā)生了什么事

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

正如我之前提到的Component API是以函數(shù)的形式展示組件屬性，所以第一步就是導(dǎo)入我們需要的函數(shù)。在我們的例子中，我們需要用 ref創(chuàng)建reactive reference，用 computed 創(chuàng)建computed屬性，用onMounted訪問mounted的掛載生命周期鉤子。·

現(xiàn)在你可能會想知道這個神秘的 setup 方法是什么？

export default {
  setup() {}
}

簡而言之，它只是一個函數(shù)，向模板返回屬性和函數(shù)。就是這樣。我們在這里聲明所有的反應(yīng)式屬性、計算屬性、watchers和生命周期鉤子，然后返回它們，這樣它們就可以在模板中使用。·

我們沒有從setup函數(shù)中返回的東西將不能在模板中使用

const count = ref(0)

根據(jù)上面的內(nèi)容，我們用ref函數(shù)聲明了一個叫count的反應(yīng)式屬性。它可以包裹任何基元或?qū)ο螅⒎祷厮姆磻?yīng)式引用。傳入的元素的值將被保存在創(chuàng)建的引用的value屬性中。例如，如果你想訪問count引用的值，你需要顯式請求count.value。

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

function increment() {
  count.value++
}

而這正是我們在聲明計算屬性雙倍和增量函數(shù)時所做的

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

當組件被掛載時，我們用onMounted鉤子記錄一些消息，只是為了讓你知道你可以 simle

return {
  count,
  double,
  increment
}

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

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

現(xiàn)在我們可以像以前的Options API一樣，在模板中訪問由setup方法返回的屬性和函數(shù)

這是一個簡單的例子，用Options API也可以很容易實現(xiàn)。新的Composition API的真正好處不僅僅是以不同的方式編碼，當涉及到重用我們的代碼/邏輯時，好處就會顯現(xiàn)出來

使用Composition API重用代碼

新的Composition API有更多的優(yōu)勢。考慮到代碼的重用。目前，如果我們想在其他組件之間共享一些代碼，有兩種選擇----mixins和scoped slots。這兩種方案都有其缺點。

假設(shè)我們想提取 counter 的功能，并在其他組件中重用。下面你可以看到它如何與可用的API和新的Component API一起使用

讓我們從mixins開始說起

import CounterMixin from './mixins/counter'

export default {
  mixins: [CounterMixin]
}

mixins最大的缺點是，我們對它究竟在我們的組件中加入了什么東西一無所知。這使得它不僅難以推理，而且還可能導(dǎo)致與現(xiàn)有的屬性和函數(shù)的名稱碰撞。·

這時候就到了加scoped slots的時候了

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

有了scoped slots，我們就可以通過v-slot屬性準確地知道我們可以通過v-slot屬性訪問哪些屬性，這樣就更容易理解代碼了。這種方法的缺點是，我們只能在模板中訪問，而且只能在Counter組件作用域中使用

現(xiàn)在是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
    }
  }
}

更加優(yōu)雅了，不是嗎？我們不受模板和組件范圍的限制，可以準確地知道我們可以從counter中訪問哪些屬性。此外，我們還可以從編輯器中的代碼完成中受益，因為useCounter只是一個返回一些屬性的函數(shù)。在幕后沒有什么魔法，所以編輯器可以幫助我們進行類型檢查和建議。

這也是一種比較優(yōu)雅的使用第三方庫的方式。例如，如果我們想使用Vuex，我們可以顯式使用Store函數(shù)，而不是污染Vue原型（this.$store）。這種方法也消除了Vue插件的幕后魔法

const { commit, dispatch } = useStore()

如果你想了解更多關(guān)于Composition API和它的用例，我強烈推薦你閱讀Vue團隊的這篇文檔，它解釋了新的API背后的原因，并推薦了它的最佳用例。還有一個很好的資源庫，里面有Vue核心團隊的Thorsten Lünborg提供的Composition API使用案例

以上示例來自：https://composition-api.vuejs.org/#basic-example

posted on 2020-09-08 10:29 菜鳥的飛翔夢閱讀(2299) 評論(6) 收藏舉報

刷新頁面返回頂部