setup 函数是 Vue3 Composition API 的核心入口点，其核心作用是替代 Vue2 中分散在 data、methods、computed、watch 等选项中的逻辑，将所有组件逻辑集中在一个函数内进行组织和声明。它通过以下机制实现这一替代：

一、执行时机与上下文隔离
setup 在组件实例创建之前、beforeCreate 生命周期钩子之前执行。这意味着在 setup 内部，this 的值为 undefined，从而强制开发者放弃对组件实例 (this) 的依赖，转向基于函数作用域和闭包的、更明确的依赖声明与组合模式。

二、集中式逻辑声明
在 Vue2 的 Options API 中，一个组件的响应式数据、方法、计算属性和侦听器被分散定义在不同的选项对象中。setup 函数通过提供一个统一的函数作用域，允许开发者将所有相关逻辑声明在一起。例如，一个“用户管理”功能的全部变量和函数可以聚合在同一个代码块内，而非分散在 data 和 methods 中。

import { ref, computed, onMounted } from 'vue';

export default {
  setup(props, context) {
    // 1. 响应式状态 (替代 data)
    const userList = ref([]);
    const searchKeyword = ref('');

    // 2. 计算属性 (替代 computed 选项)
    const filteredUsers = computed(() => {
      return userList.value.filter(user => 
        user.name.includes(searchKeyword.value)
      );
    });

    // 3. 方法 (替代 methods)
    const fetchUsers = async () => {
      const response = await fetch('/api/users');
      userList.value = await response.json();
    };

    // 4. 生命周期钩子 (替代 created, mounted 等)
    onMounted(() => {
      fetchUsers();
    });

    // 5. 必须返回模板可用的内容
    return {
      searchKeyword,
      filteredUsers,
      fetchUsers
    };
  }
};

三、参数与返回值机制
setup 接收两个参数并提供明确的返回值接口，以此映射和替代 Options API 中的多种能力：

四、逻辑复用与代码组织的范式转变
setup 函数最根本的优势在于它促成了逻辑关注点的聚合，而非技术选项的分离。这解决了 Options API 在复杂组件中常见的“碎片化”问题，即同一功能的代码（如数据、计算、方法）被迫分散在不同选项区块。通过 setup，开发者可以更自然地使用纯 JavaScript 函数来提取和复用逻辑（自定义 Hook），例如将上述用户获取与过滤逻辑抽象为 useUserManagement() 函数，然后在多个组件的 setup 中调用。

五、与 Options API 的兼容性与优先级
Vue3 允许 setup 与 Options API 共存以实现渐进式迁移，但存在明确的优先级规则。当 setup 中返回的属性与 data 或 methods 中的属性同名时，setup 返回的属性具有更高优先级。然而，setup 内部无法直接读取 data 或 methods 中定义的属性。这种设计鼓励开发者向新的组合模式迁移，而非混合使用。

综上所述，setup 函数通过提供一个前置的、无 this 的、集中式的函数上下文，从根本上重构了组件的逻辑组织方式。它并非简单地对 Options API 进行一对一的语法替换，而是引入了一种基于函数组合、依赖关系显式声明、以及逻辑关注点自由聚合的新范式，从而显著提升了复杂组件的可读性、可维护性和逻辑复用能力。

参考来源

• Vue3新特性——Composition API详解