[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 } } } ~~~