Composition API 深度解析 - 重新理解 Vue 的组件化编程

之歆2026-04-08 12:34

写在前面

很多人学 Composition API 是从"怎么用 ref"开始的，但这样学到的只是语法。本篇想从更根本的地方出发：Vue 2 的 Options API 在大型项目里遇到了什么问题？Composition API 是如何从设计层面解决这些问题的？响应式系统底层是怎么工作的？为什么 ref 要加 .value？组合函数和 mixin 本质上的差距在哪里？和 Vite 的关系又是什么？

本文主要参考 Vue 3 官方文档 - 组合式 API 常见问答、响应式基础、组合式函数。

目录

  • [1. Options API 的局限：不是"旧"，而是"不够灵活"](#1. Options API 的局限：不是"旧"，而是"不够灵活")
  • [2. Composition API 的设计目标：三个核心解决的问题](#2. Composition API 的设计目标：三个核心解决的问题)
  • [3. Vue 响应式系统：Proxy 的工作原理](#3. Vue 响应式系统：Proxy 的工作原理)
  • [4. ref()：为什么需要 .value？](#4. ref()：为什么需要 .value？)
  • [5. reactive()：代理对象的能力与局限](#5. reactive()：代理对象的能力与局限)
  • [6. ref vs reactive：如何做选择？](#6. ref vs reactive：如何做选择？)
  • [7. computed 与 watch：依赖追踪的两种用法](#7. computed 与 watch：依赖追踪的两种用法)
  • [8. 生命周期钩子：执行时机全解析](#8. 生命周期钩子：执行时机全解析)
  • [9. 组合函数（Composables）：逻辑复用的正确姿势](#9. 组合函数（Composables）：逻辑复用的正确姿势)
  • [10. <script setup>：编译层面的优化](#10.