Vue3 组合式 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>
php
345 Bytes
© 菜鸟-创作你的创作

• ref：创建响应式数据
• computed：计算属性
• 返回值：在 <script setup> 中自动暴露给模板

---

三、setup() 参数

setup(props, context) {
  // props: 父组件传递的属性
  // context: 提供 attrs, slots, emit
}
php
82 Bytes
© 菜鸟-创作你的创作

参数	说明
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 };
  }
}
php
189 Bytes
© 菜鸟-创作你的创作

---

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

1. 基本响应式

import { ref } from 'vue';
const message = ref('Hello Vue 3');
function updateMessage() {
  message.value = 'Hello Setup!';
}
php
127 Bytes
© 菜鸟-创作你的创作

2. 响应式对象

import { reactive } from 'vue';
const state = reactive({
  count: 0,
  name: '阿杰'
});
function increment() {
  state.count++;
}
php
129 Bytes
© 菜鸟-创作你的创作

---

五、组合函数（Composition Functions）

• 将逻辑抽离到独立函数，实现复用：

import { ref } from 'vue';
export function useCounter() {
  const count = ref(0);
  function increment() {
    count.value++;
  }
  return { count, increment };
}
php
163 Bytes
© 菜鸟-创作你的创作

• 在组件中使用：

import { useCounter } from './useCounter';
setup() {
  const { count, increment } = useCounter();
  return { count, increment };
}
php
131 Bytes
© 菜鸟-创作你的创作

---

六、生命周期钩子

• 在 setup 中使用 onMounted、onUnmounted 等：

import { onMounted, onUnmounted } from 'vue';
setup() {
  onMounted(() => console.log('组件挂载'));
  onUnmounted(() => console.log('组件卸载'));
}
php
140 Bytes
© 菜鸟-创作你的创作

---

七、常见注意事项

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

---

💡 总结

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

https://www.52runoob.com/archives/5963