[!info] 关联笔记

• 所属：Vue 基础 MOC
• 对照：Composition API · script setup
• 路线：Vue 学习路线

Vue Options API

这个概念为什么出现

Vue2 主流与大量遗留代码按 data/methods/computed/watch 分桶组织。读老代码、做迁移、看文档示例仍需懂 Options API；新项目虽多 Composition，但选项式仍是合法模型。

[!abstract] 一句话理解 Options API 用“选项桶”声明组件能力；逻辑按类型分散，而不是按业务特征聚合。

最小示例

场景：简易库存计数组件

<script>
export default {
  name: 'InboundCounter',
  data() {
    return { qty: 0 }
  },
  computed: {
    label() {
      return this.qty < 5 ? '偏低' : '正常'
    },
  },
  methods: {
    scan() {
      this.qty += 1
    },
  },
}
</script>

<template>
  <div>
    <p>{{ qty }}（{{ label }}）</p>
    <button type="button" @click="scan">扫码</button>
  </div>
</template>

核心选项

选项	职责
data	响应式状态工厂
computed	派生缓存
methods	方法
watch	侦听副作用
生命周期	mounted 等
props/emits	输入输出

与 Composition 对照

• Options：按类型分桶，学习曲线平缓
• Composition：按功能聚合，复杂逻辑/TS 更优
• 可在同一生态共存；新代码优先 Composition + script setup

常见误区

[!warning] 常见误区：data 写成对象而不是函数 组件复用时会共享同一状态引用；应用函数返回新对象。

本节总结

Options API 是 Vue 组件的经典组织法；理解它才能读历史代码，并用 Composition 做更好的聚合。

自测题

1. 为什么 data 必须是函数？

参考答案

确保每个组件实例拥有独立状态对象，避免实例间共享。