Options API（选项式 API）

Options API 是 Vue2 的默认写法，Vue3 也完全兼容。

核心思想：把代码按照功能选项拆开，分别写到 data、methods、computed、watch、mounted 这些配置项里面。 你告诉 Vue：这里放数据、这里放方法、这里放监听、这里放生命周期。

完整示例（Vue2/Vue3 都能跑）

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="add">+1</button>
  </div>
</template>

<script>
// Options API 选项式API
export default {
  // 选项1：组件名字
  name: "Demo",

  // 选项2：定义响应式数据
  data() {
    return {
      count: 0
    }
  },

  // 选项3：存放所有事件方法
  methods: {
    add() {
      this.count++
    }
  },

  // 选项4：计算属性
  computed: {
    doubleCount() {
      return this.count * 2
    }
  },

  // 选项5：侦听器
  watch: {
    count(newVal) {
      console.log("count变了", newVal)
    }
  },

  // 选项6：生命周期钩子
  mounted() {
    console.log("组件挂载完成")
  }
}
</script>

特点

1. 按类型分组：数据放data，方法放methods，计算属性放computed。 同一个业务逻辑的代码会被拆分到不同地方。 比如：和 count 相关：变量在 data，add 方法在 methods，监听在 watch。代码分散。
2. 组件内部全部依靠 this 访问数据、方法：this.count、this.add()
3. Vue2 只能用这套；Vue3 可以继续写这套，也可以用组合式 API。