好的阿杰，我帮你整理一份 Vue 3 组合式 API 核心 —— setup() 函数详解指南，涵盖核心概念、语法、实用技巧和示例。

🖥 Vue 3 组合式 API 核心 —— setup() 函数详解

一、setup() 函数简介

  • setup() 是 Vue 3 组合式 API 的核心入口，用于在组件实例创建前初始化状态、定义方法和注册副作用。
  • 特点：
    1. 在组件创建前执行
    2. 访问 props，但不能访问 this
    3. 返回的数据会暴露给模板使用

二、setup() 基本语法

<script setup>
import { ref, computed } from 'vue';

const count = ref(0);

function increment() {
  count.value++;
}

const doubleCount = computed(() => count.value * 2);
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>
  • ref：创建响应式数据
  • computed：计算属性
  • 返回值：在 <script setup> 中自动暴露给模板

三、setup() 参数

setup(props, context) {
  // props: 父组件传递的属性
  // context: 提供 attrs, slots, emit
}
参数说明
props接收父组件传递的数据
context包含 attrs、slots 和 emit
context.emit触发自定义事件
context.slots获取插槽内容
context.attrs获取未声明的属性

示例：

export default {
  props: ['title'],
  setup(props, { emit }) {
    function handleClick() {
      emit('customEvent', 'Hello!');
    }
    return { handleClick, title: props.title };
  }
}

四、响应式数据与模板绑定

1. 基本响应式

import { ref } from 'vue';

const message = ref('Hello Vue 3');

function updateMessage() {
  message.value = 'Hello Setup!';
}

2. 响应式对象

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  name: '阿杰'
});

function increment() {
  state.count++;
}

五、组合函数（Composition Functions）

  • 将逻辑抽离到独立函数，实现复用：
import { ref } from 'vue';

export function useCounter() {
  const count = ref(0);
  function increment() {
    count.value++;
  }
  return { count, increment };
}
  • 在组件中使用：
import { useCounter } from './useCounter';

setup() {
  const { count, increment } = useCounter();
  return { count, increment };
}

六、生命周期钩子

  • 在 setup 中使用 onMounted、onUnmounted 等：
import { onMounted, onUnmounted } from 'vue';

setup() {
  onMounted(() => console.log('组件挂载'));
  onUnmounted(() => console.log('组件卸载'));
}

七、常见注意事项

  1. setup 中不能使用 this
  2. 返回值：只有返回对象中的属性和方法会暴露给模板
  3. 响应式数据：ref 访问时要 .value，模板中自动解包
  4. 组合函数：逻辑复用利器，提升代码可维护性

💡 总结

  • setup() 是 Vue 3 组合式 API 的入口
  • 负责初始化状态、方法、计算属性和副作用
  • 配合 ref、reactive、生命周期钩子和组合函数，可实现模块化、可复用和易维护的组件逻辑