深入理解 Vue 3 的 `setup` 函数

阿珊和她的猫2026-02-17 10:47

🤍 前端开发工程师、技术日更博主、已过CET6

🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1

🕠 牛客 高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》

🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

    • [一、`setup` 函数的基本概念](#一、setup 函数的基本概念)
      • [（一）`setup` 函数的作用](#（一）setup 函数的作用)
      • [（二）`setup` 函数的参数](#（二）setup 函数的参数)
    • [二、`setup` 函数的底层实现原理](#二、setup 函数的底层实现原理)
      • [（一）`setup` 函数的调用时机](#（一）setup 函数的调用时机)
      • （二）响应式状态的实现
        • [1\. `ref`](#1. ref)
        • [2\. `reactive`](#2. reactive)
      • [（三）`setup` 函数的返回值](#（三）setup 函数的返回值)
      • [（四）`setup` 函数中的生命周期钩子](#（四）setup 函数中的生命周期钩子)
      • [（五）`setup` 函数中的异步逻辑](#（五）setup 函数中的异步逻辑)
    • [三、`setup` 函数的优势](#三、setup 函数的优势)
    • [四、`setup` 函数的限制](#四、setup 函数的限制)
      • [（一）无法访问 `this`](#（一）无法访问 this)
      • [（二）需要学习新的 API](#（二）需要学习新的 API)
    • 五、总结

Vue 3 引入了 Composition API，而 setup 函数是 Composition API 的核心入口。它为开发者提供了一种更灵活、更强大的方式来组织组件逻辑。本文将深入探讨 setup 函数的底层实现原理，帮助你更好地理解 Vue 3 的 Composition API。

一、setup 函数的基本概念

（一）setup 函数的作用

setup 函数是 Vue 3 中组件的入口函数，它在组件实例化之前被调用。setup 函数的主要作用是允许开发者使用 Composition API 提供的 API（如 ref、reactive、watch 等）来定义组件的响应式状态、计算属性、方法等。

vue 复制代码 
<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment
    };
  }
};
</script>

在这个例子中，setup 函数中定义了一个响应式状态 count 和一个方法 increment，并通过 return 将它们暴露给模板。

（二）setup 函数的参数

setup 函数可以接收两个参数：

  1. props：组件的属性，是一个响应式对象。
  2. context ：一个包含 attrs、slots 和 emit 的对象，用于访问组件的非响应式属性、插槽和事件发射器。
javascript 复制代码 
export default {
  props: {
    title: String
  },
  setup(props, context) {
    console.log(props.title); // 访问 props
    console.log(context.attrs.class); // 访问非响应式属性
    context.emit('update:title', 'New Title'); // 发射事件
  }
};

二、setup 函数的底层实现原理

（一）setup 函数的调用时机

setup 函数在组件实例化之前被调用。具体来说，它在 beforeCreate 钩子之前被调用。此时，组件的实例尚未创建，因此 setup 函数中无法访问 this。

javascript 复制代码 
export default {
  setup() {
    console.log('setup'); // 1
  },
  beforeCreate() {
    console.log('beforeCreate'); // 2
  },
  created() {
    console.log('created'); // 3
  }
};

输出顺序：

  1. setup
  2. beforeCreate
  3. created

（二）响应式状态的实现

在 setup 函数中，响应式状态是通过 ref 和 reactive 等 API 创建的。这些 API 的底层实现基于 Vue 3 的响应式系统。

1. ref

ref 用于创建一个响应式引用。它返回一个对象，包含一个 value 属性，用于访问和修改响应式值。

javascript 复制代码 
import { ref } from 'vue';

const count = ref(0);
console.log(count.value); // 0
count.value++;
console.log(count.value); // 1

ref 的底层实现基于 Proxy。Vue 3 使用 Proxy 来拦截对响应式对象的访问和修改，从而实现响应式更新。

2. reactive

reactive 用于创建一个响应式对象。它返回一个代理对象，该对象的所有属性都是响应式的。

javascript 复制代码 
import { reactive } from 'vue';

const state = reactive({
  count: 0
});
console.log(state.count); // 0
state.count++;
console.log(state.count); // 1

reactive 的底层实现同样基于 Proxy。Vue 3 使用 Proxy 来拦截对对象属性的访问和修改，从而实现响应式更新。

（三）setup 函数的返回值

setup 函数的返回值会被暴露给模板。返回值可以是一个对象，包含响应式状态、方法或计算属性。

javascript 复制代码 
export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment
    };
  }
};

在模板中，可以直接访问 setup 函数返回的对象中的属性和方法：

vue 复制代码 
<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

（四）setup 函数中的生命周期钩子

虽然 setup 函数中无法直接使用传统的生命周期钩子（如 beforeCreate、created 等），但可以通过 onMounted、onUpdated、onUnmounted 等 API 来访问生命周期钩子。

javascript 复制代码 
import { ref, onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    const count = ref(0);

    onMounted(() => {
      console.log('Component mounted');
    });

    onUnmounted(() => {
      console.log('Component unmounted');
    });

    return {
      count
    };
  }
};

这些生命周期钩子的底层实现基于 Vue 3 的渲染器 API。Vue 3 的渲染器会在组件的生命周期中调用这些钩子，从而允许开发者在 setup 函数中访问生命周期逻辑。

（五）setup 函数中的异步逻辑

setup 函数支持异步逻辑。如果 setup 函数返回一个 Promise，Vue 会等待 Promise 解决后再继续渲染组件。

javascript 复制代码 
import { ref } from 'vue';

export default {
  async setup() {
    const count = ref(0);

    // 模拟异步请求
    await new Promise(resolve => setTimeout(resolve, 1000));

    return {
      count
    };
  }
};

这种异步逻辑的实现基于 Vue 3 的渲染器 API。Vue 3 的渲染器会在 setup 函数返回 Promise 时，暂停组件的渲染，直到 Promise 解决。

三、setup 函数的优势

（一）更灵活的代码组织

setup 函数允许开发者使用 Composition API 提供的 API 来组织组件逻辑。这种方式使得代码更加模块化，便于复用和维护。

（二）更好的性能优化

setup 函数在组件实例化之前被调用，这意味着 Vue 可以在组件实例化之前完成响应式状态的初始化，从而提高性能。

（三）更强大的功能支持

setup 函数支持异步逻辑、生命周期钩子、响应式状态等，提供了强大的功能支持，使得开发者可以更灵活地实现复杂的组件逻辑。

四、setup 函数的限制

（一）无法访问 this

由于 setup 函数在组件实例化之前被调用，因此无法访问 this。如果需要访问组件实例，可以使用 setup 函数的参数或生命周期钩子。

（二）需要学习新的 API

setup 函数的使用需要学习新的 Composition API，这可能会增加学习成本。然而，一旦掌握了这些 API，你将能够更灵活地组织组件逻辑。

五、总结

setup 函数是 Vue 3 的核心入口函数，提供了强大的功能支持和灵活的代码组织方式。通过本文的介绍，你应该已经对 setup 函数的底层实现原理有了更深入的理解。

setup 函数的底层实现基于 Vue 3 的响应式系统和渲染器 API。它在组件实例化之前被调用，允许开发者使用 Composition API 提供的 API 来定义组件的响应式状态、计算属性、方法等。setup 函数的返回值会被暴露给模板，从而实现组件的渲染。

希望本文能帮助你更好地理解和使用 Vue 3 的 setup 函数，让你在开发中更加得心应手。

相关推荐
gis开发之家20 分钟前
《Vue3 从入门到大神29篇》单元测试与 E2E 测试 —— 保障 Vue3 项目的质量
前端·javascript·vue.js·单元测试·前端框架·vue3
爱勇宝28 分钟前
AI 时代，更稀缺的是「提出好问题」还是「判断好答案」?
前端·人工智能·后端
李伟_Li慢慢29 分钟前
three.js 中的WebGPU 有几成熟了？
前端·three.js
阿酷tony31 分钟前
纯HTML5播放器带倍速、带画质切换的播放器
前端·html·html5
ShiXZ21337 分钟前
指令集-NPM 常用指令速查手册
前端·npm·node.js
এ慕ོ冬℘゜43 分钟前
前端核心知识体系进阶：从安全机制、网络协议到原生 JS 实战全解析
前端·网络协议·安全
前端H44 分钟前
Biome & Rolldown：Rust 工具链接管前端基建
开发语言·前端·rust
forever_world1 小时前
# 💧 从前端视角，彻底搞懂 AI 流式输出 —— 从"接根水管"到 Vue 3 实战
前端·vue.js
灯澜忆梦1 小时前
GO---map函数
开发语言·前端·后端·golang
李剑一1 小时前
uni-app x 实现本地 JSON 文件的导入导出（APP端可用）
android·前端·uni-app
热门推荐
01GitHub 镜像站点02AI科技热点日报 | 2026年07月01日032026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片04幻兽帕鲁 - 服务器管理员权限与 GM 命令完全指南05GPT-5.5 对比 GPT-5.6 Sol、Terra、Luna：官方性能数据与选型分析062026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？07AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路082026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf092026 AI 编程工具终极实战指南：Cursor vs Claude Code vs Copilot，开发者该怎么选？102026 年 AI 大模型 & AI 编程工具实战全总结