[TOC] # Composition API ## 核心概念與用法 | 概念 | 作用 | 用法 | | --------- | ------------------------ |------------------| |setup | 組件選項,所有 Composition API 相關邏輯都在此使用|export default {<br> setup() { ... }<br>}| |ref | 創建響應式數據 |const count = ref(0)| |readonly | 創建只讀的 ref |const readonlyCount = readonly(0)| |computed |從其他響應式數據派生計算屬性|const doubledCount = computed(() => count.value * 2)| |watch | 觀察響應式數據的變化 |watch(count, (newVal, oldVal) => { ... })| |provide | 在祖先組件中提供響應式數據 |provide('count', count)| |inject | 在子孫組件中注入祖先組件提供的數據 |const count = inject('count')| |reactive | 將普通對象轉為響應式對象|const state = reactive({ count: 0 })| |toRefs | 創建指向響應式對象內部數據的 ref |const { count } = toRefs(state)| |toRef | 為響應式對象的某個屬性創建 ref |const count = toRef(state, 'count')| |readonly | 為 ref 創建只讀代理 |const readonlyCount = readonly(count)| |isRef | 檢查一個值是否為 ref 對象 |isRef(count) // true| |isReactive| 檢查一個對象是否是 reactive 創建的響應式 proxy|isReactive(state) // true| |customRef | 創建自定義 ref |const count = customRef((track, trigger) => { ... })| > ### 使用 Composition API 的過程: 1. 在組件中使用 setup 選項,所有 Composition API 相關邏輯在此處完成。 2. 導入需要的 API,如: js import { ref, computed, watch, provide, inject } from 'vue' 3. 在 setup 中使用這些 API 來構建組件邏輯,并 return 需要在模板中使用的響應式數據或方法。 4. 在模板中使用 setup 返回的值來渲染或綁定數據。 ## 高級用法,可以構建出更加復雜和強大的組件 ### 1\. ref :可以創建可變的響應式數據,在渲染函數和生命周期鉤子中使用。 ~~~ js import { ref } from 'vue' setup() { const count = ref(0) // 讀取 count 值 console.log(count.value) // 設置 count 值 count.value++ } ~~~ ### 2\. computed :可以從其他響應式數據派生計算屬性。 ~~~ js import { ref, computed } from 'vue' setup() { const count = ref(0) const doubledCount = computed(() => count.value * 2) console.log(doubledCount.value) // 0 count.value++ console.log(doubledCount.value) // 2 } ~~~ ### 3\. watch :可以觀察響應式數據的變化。 ~~~ js import { ref, watch } from 'vue' setup() { const count = ref(0) watch(count, (newVal, oldVal) => { console.log(`${oldVal} -> ${newVal}`) }) count.value++ // Logs "0 -> 1" } ~~~ ### 4\. provide / inject :可以在祖先組件中提供響應式數據,然后在子孫組件中注入使用。 ~~~ js // 祖先組件 import { provide, ref } from 'vue' setup() { const count = ref(0) provide('count', count) } // 子組件 import { inject } from 'vue' setup() { const count = inject('count') console.log(count.value) // 從祖先組件獲取的值 } ~~~ ### 5\. 組合組件 :可以將多個 Composition API 的組合在一起,構建出強大的組件邏輯。 ~~~ js import { ref, computed, watch } from 'vue' export default { setup() { const count = ref(0) const doubledCount = computed(() => count.value * 2) watch(count, (newVal) => { /* ... */ }) function increment() { count.value++ } return { count, doubledCount, increment } } } ~~~