从 Vue3 回望 Vue2：组件设计升级——Options API vs Composition API

一语点睛：组件不是逻辑堆叠，而是能力组合。

1、组件范式：框架设计思想的投影

Vue 中的一切皆组件，组件的编写方式不仅影响开发效率，更是框架设计哲学的直观体现。从 Vue2 的 Options API 到 Vue3 的 Composition API，这场变革不仅是代码结构的调整，更是从“配置式开发”走向“组合式设计”的理念跃迁。

本文将以 Vue2 为历史起点，通过对比与实战，引导读者理解 Vue3 组件设计的优势与挑战，完成从使用者到设计者的思维转变。

---

2、Vue2：Options API 的结构与局限

结构清晰：新手友好、职责分明

Vue2 的 Options API 通过对象配置划分组件职责，结构上包括：

export default {
  data() {
    return {
      count: 0
    }
  },
  computed: {
    double() {
      return this.count * 2
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  watch: {
    count(newVal) {
      console.log('count changed:', newVal)
    }
  },
  mounted() {
    console.log('component mounted')
  }
}

每个功能点（数据、方法、副作用）都有对应的选项块，初学者能快速上手，IDE 补全也较友好。

---

核心痛点：逻辑分散，难以聚合复用

• 同一功能被拆散在多个选项中：例如“倒计时”逻辑可能分布在 data、mounted、methods、watch 中。
• 逻辑复用高度依赖 mixins：容易变量冲突、来源不明确。
• 生命周期钩子分散：组件越大，逻辑越零散，阅读难度倍增。

---

3、Vue3：Composition API 的设计初衷与优势

setup()：组合逻辑的舞台

Vue3 推出的 Composition API 将逻辑组织中心前置到了 setup() 中：

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

export default {
  setup() {
    const count = ref(0)
    const double = computed(() => count.value * 2)
    const increment = () => count.value++

    watch(count, (newVal) => {
      console.log('count changed:', newVal)
    })

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

    return {
      count,
      double,
      increment
    }
  }
}

更强逻辑聚合与复用能力

• 所有与“count”相关的逻辑集中书写。
• 可提取为 composable（如 useCounter()），实现逻辑复用。
• 生命周期、响应式、副作用统一在顶层语义中声明。

---

4、实战对比：同一个计数器组件的两种实现

Vue2 - Options API 版本

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  computed: {
    double() {
      return this.count * 2
    }
  },
  watch: {
    count(newVal) {
      console.log('watch:', newVal)
    }
  },
  mounted() {
    console.log('mounted')
  }
}

Vue3 - Composition API 版本

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

export default {
  setup() {
    const count = ref(0)
    const double = computed(() => count.value * 2)
    const increment = () => count.value++

    watch(count, (val) => console.log('watch:', val))
    onMounted(() => console.log('mounted'))

    return { count, double, increment }
  }
}

---

5、结构对比图示：从“纵向配置”到“横向组合”

Options API（Vue2）：
+ data
+ methods
+ computed
+ watch
+ lifecycle
=> 纵向拆分逻辑块

Composition API（Vue3）：
+ setup()
   └─ ref()
   └─ computed()
   └─ watch()
   └─ 生命周期
=> 横向组合功能块

---

6、优劣对比分析表

对比维度	Options API（Vue2）	Composition API（Vue3）
逻辑聚合	❌ 分散在多个选项中	✅ 相关逻辑集中，易读维护
类型推导	❌ 较弱（尤其在 methods 中）	✅ TS 友好，类型推导精准
逻辑复用	❌ 依赖 mixins、继承	✅ composables（函数级复用）
学习曲线	✅ 容易上手	❌ 初学者需理解响应式与 setup 机制
工具支持	✅ Vue2 DevTools 成熟	✅ Vue3 DevTools 更直观追踪逻辑
团队协作	✅ 各选项独立，职责清晰	✅ 明确逻辑边界，可抽离共享逻辑模块

---

7、现代实践：组合 Composition API + TypeScript + Pinia

import { defineComponent, ref, computed } from 'vue'
import { useUserStore } from '@/stores/user'

export default defineComponent({
  setup() {
    const userStore = useUserStore()
    const input = ref('')
    const isValid = computed(() => input.value.length > 3)

    const submit = async () => {
      if (!isValid.value) return
      await userStore.login(input.value)
    }

    return { input, isValid, submit }
  }
})

实现优势：

• 状态（Pinia）解耦；
• TS 语义清晰；
• 响应式逻辑与 UI 行为紧密绑定，提升可测试性与团队协作效率。

---

8、Composition API 的挑战与迁移建议

挑战

• 对响应式原理需更深理解（如 ref vs reactive）。
• 需要熟悉生命周期组合函数（如 onMounted, onBeforeUnmount 等）。
• 初学者可能因 setup 抽象过多而感到困惑。

迁移策略

• 从“小组件”先试水；
• 团队统一 useXXX composable 规范；
• 使用

---

9、实战提问 & 面试关注点

面试核心对比点 & 快速答要

题目	简明回答要点
setup() 的执行时机？	在 beforeCreate 之前调用，不能访问 this
ref 与 reactive 有何区别？	ref 用于基本类型，reactive 用于对象；前者.value 才访问数据
Options API 为什么难以复用逻辑？	因为逻辑被拆分在多个块，无法提取为独立函数
如何迁移大型 Options API 组件？	拆分成逻辑单元，逐步迁移到 composables，测试保障逻辑一致性
Composition API 与 TS 配合优势？	TS 自动推导返回类型，IDE 补全强，逻辑函数可复用
使用 Composition API 时如何组织代码？	遵循“功能分组 + 局部组合 + 最小暴露”设计原则

---

结语：从配置者到设计者，框架演化是开发者思维的进化

Vue3 的 Composition API 不仅是新的写法，更是组件组织理念的升级。它鼓励我们以“功能为单位”进行思考与设计，打造可复用、可组合、可维护的现代组件。

从 Options 到 Composition，不只是范式的切换，更是开发者走向专业化的里程碑。