Vue 3.0 Composition API - 中文翻譯
阿新 • • 發佈：2020-04-26
# Composition API
**釋出轉載請附原文連結 https://www.cnblogs.com/zgh-blog/articles/composition_api.html**
*這兩天初步瞭解了下 vue 3.0 相關的一些內容，對於 Composition API 的指導文件過了一遍 (當然根據經驗，有些重要的地方可能需要在實踐過程中反覆思考)。依據自己的理解，對 Composition API 做了一下中文的說明，這裡放一下，方便大家在學習的時候能更直接的閱讀和理解。如果有誤或者有更好的理解，歡迎指出評論～*
一套新增的， 基於函式的 api 讓元件邏輯更加靈活。
## 原因，動機
### 邏輯複用和程式碼組織
過去使用 vue 的原因是快速，簡單的構建中小型專案。隨著 vue 使用者的發展，被用來構建大型專案，這會使團隊對專案進行迭代需要耗費更長的時間。過去的時間我們見證了這些專案被 vue 當前的 api 的程式設計模型所限制，大概有兩類問題：
- 複雜元件在不斷擴充套件中，變得難以理解。特別在我們讀別人寫的程式碼時，根本原因是 現有 API 強制按 options 組織程式碼，沒有邏輯關係，實際上，按邏輯關係組織程式碼更有意義。
- 缺少一個乾淨，無成本的機制，在多個元件之間提取和重用邏輯。
新增 API 的目的是提供更靈活的元件組織程式碼方式。現在不使用 options，而是使用 function 組織程式碼。使多個元件複用邏輯的提取更直接，甚至是外部的元件。
### 更好的型別檢查機制
另一個來自大型專案開發者的聲音是對 TS 的支援。當前 的 api 和 TS 整合使用時帶來了一些挑戰，大部分原因是 vue 依賴 this 上下文來暴露屬性，在元件中 this 使用更多比簡單的 js。(例如： 在方法中我們用 this 指向 元件本身，而不是 methods 物件。) 現有 API 設計時沒有考慮型別推斷，這使得當你使用 TS 造成了大量的複雜性。
大多人在 vue 中使用 TS 用 vue-class-component. 允許元件被命名為 TS class. 在 3.0, 我們提供了 built-in Class API 更好的解決之前的型別問題。在設計方面的討論和迭代中，我們發現 Class API 解決型別問題，依賴裝飾器，這在實現細節中增加了很多不確定的提議，這是一個危險的基礎。
相比較，本 API 大多使用簡單的變數和函式，對型別更友好。新的 API 可以享受完整的型別推斷，使用新的 api 編寫的程式碼在 TS 和 JS 看起來幾乎相同，即使你不用 TS , 也可以獲得更好的 IDE 支援。
## 詳細設計
### API 介紹
新的 API 沒有新的概念，而是將 VUE 的核心功能暴露為獨立的函式。比如 建立狀態響應機制。這裡將介紹一些最基本的 API，如何用這些 API 代替 2.x 選項來表示元件邏輯。這裡介紹幾本思想，不是所有的 API.
#### 狀態響應和一些作用
宣告響應狀態: reactive 等同於 2.x 的 Vue.observable(), 重新命名避免和 RxJS observates 混淆。 監測資料變化： watchEffect 類似於 effect, 不需要分離監控資料來源。 Composition API 提供 watch function 類似於 2.x.
我們之前返回的 data ,內部使用 reactive 建立響應狀態，模版編譯在一個渲染函式 watchEffect，使用了這些響應狀態。
我們不需要關注 innerHTML 或者 eventListeners. 我們用 假定的API renderTemplate 使我們把關注放在響應方面。
```js
import {reactive, watchEffect} from 'vue'
// 宣告響應狀態
const state = reactive({
count: 0
})
function increment() {
state.count++
}
const renderContext = {
state,
increment
}
// 監聽響應狀態的改變
watchEffect(() => {
// hypothetical internal code, NOT actual API
renderTemplate(
``,
renderContext
)
})
```
computed: 一個狀態依賴另一個狀態。 那麼 computed 是如何實現的呢？如果直接監控原始資料型別，或者物件屬性的值，直接監測時不起作用的。那麼很自然的，我們會把他包裝為一個物件，使用物件替代。此外，我們還需要攔截物件的屬性讀寫操作，便於我們執行跟蹤和執行資料渲染變更。現在我們使用引用型別，不用擔心丟失響應性。 類似於 dobule 我們稱為 ref，是對內部的參考， 你已經意識到之前內部屬性 refs 引用 dom element/component, 現在還可以包括 邏輯狀態。
除了 computed ， 我們還可以直接建立 ref
```js
import { reactive, computed, watchEffect, ref } from 'vue'
const state = reactive({
count: 0
})
const double = computed(() => state.count * 2)
watchEffect(() => {
console.log(double.value)
})
state.count++ // -> 2
// 內部簡單程式碼
function computed (getter) {
const ref = {
value: null
}
watchEffect(() => {
ref.value = getter()
})
return ref
}
const cc = ref(0)
console.log(cc.value) // 0
```
ref 內部: 在渲染上下文暴露 ref 屬性， 在內部， vue 對 ref 進行特殊處理，在遇到渲染上下文時，直接公開 ref 的內部值。也就是在 template 中，直接使用 count 而不是 count.value.
此外，ref 在作為屬性在一個響應物件中，也會自動展開。
```js
import { ref, watch, reactive, computed } from 'vue'
const state = reactive({
count: 0,
dobule: computed(() => state.count * 2)
})
console.log(state.dobule) // 不是 state.dobule.value
const count = ref(0)
function increment() {
count.value++
}
const renderContext = {
count,
increment
}
watchEffect(() => {
renderTemplate(
`