十、Vue 3 Composition API 完全指南：从 setup 到 ref

一、Composition API 简介

（一）什么是 Composition API

Composition API 是 Vue 3 推出的全新组件逻辑组织方式。它借助 setup 函数，将组件相关逻辑整合一处，突破了 Vue 2 中 Options API 在复杂组件开发时的局限，为开发者带来更灵活的开发体验。

（二）Composition API 的优势

1. 逻辑复用便捷：可自定义 Hook，类似 React 的 Hook，能将通用逻辑抽取出来，在不同组件间复用。比如多个组件都有数据加载和缓存逻辑，用 Composition API 可封装成一个 Hook，避免重复代码。
2. 代码组织优化：把相关逻辑集中于 setup 函数内，代码结构更清晰，可读性和可维护性大幅提升。不像 Options API 那样，数据、方法、计算属性等逻辑分散在不同选项中。
3. 响应式系统灵活：提供 ref、reactive 等实用工具，极大简化了响应式数据的管理，让开发者能更高效地处理数据变化和视图更新。

二、Composition API 的核心概念

（一）setup 函数

setup 函数堪称 Composition API 的核心。它在组件创建前执行，承担定义组件逻辑的重任。该函数接收两个关键参数：

1. props：即组件的属性，用于接收父组件传递过来的数据。
2. context：包含 attrs（非响应式的 attribute 集合）、slots（插槽内容）和 emit（触发自定义事件的函数）等属性的上下文对象。

示例代码如下：

<template>
    <div>
        <p>计数：{
  
  { count }}</p>
        <button @click="increment">增加</button>
    </div>
</template>
<script>
import { ref } from 'vue';
export default {
    setup(props, context) {
        const count = ref(0);
        const increment = () => {
            count.value++;
        };
        return {
            count,
            increment
        };
    }
};
</script>

在上述代码中，setup 函数内定义了一个响应式数据 count 和一个用于增加计数的方法 increment，并将它们暴露给模板使用。

（二）ref 和 reactive

1. ref：主要用于创建基本类型（如数字、字符串、布尔值等）的响应式数据。使用时，通过 ref 包裹数据，访问数据时需通过 .value 属性。例如：

import {
   
    ref } from 'vue';
export default {
   
   
    setup() {
   
   
        const count = ref(0);
        return {
   
   
            count
        };
    }
};

2. reactive：专门用于创建对象类型的响应式数据。对传入的对象进行深层次的响应式转换，直接访问和修改对象属性即可触发视图更新。例如：

import {
   
    reactive } from 'vue';
export default {
   
   
    setup() {
   
   
        const user = reactive({
   
    name: '张三',