作者：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()