东月的文档站 | 东月的文档站

Vue 提供了两种写代码的方式，官方叫"API 风格"。它们功能完全一样，只是写法不同。

选项式 API（Options API）

这种风格的特点是：用固定的"选项"来组织代码。就像填表格一样，数据放 data，方法放 methods，计算结果放 computed。

vue

<template>
  <p>点击次数：{{ count }}</p>
  <button @click="addOne">点我 +1</button>
</template>
<script>
export default {
  data() {
    return {
      count: 0       // 数据写这里
    }
  },
  methods: {
    addOne() {
      this.count++   // 方法写这里，用 this. 访问数据
    }
  }
}
</script>

💡 Tip：为什么是 this.count？ 在选项式 API 中，this 指代"当前组件"。data 里定义的数据会自动挂到 this 上，所以用 this.count 就能读到。

优点

结构固定，新手容易上手——所有组件长一个样
文档好查，每种功能有对应的固定位置

缺点

同一个功能的代码会散落在不同选项里（数据在 data，逻辑在 methods，计算在 computed），功能多了不好维护

组合式 API（Composition API）

这种风格的特点是：按功能组织代码，而不是按选项。用 Vue 提供的函数（ref、computed 等）来写逻辑。

vue

<template>
  <p>点击次数：{{ count }}</p>
  <button @click="addOne">点我 +1</button>
</template>
<script setup>
import { ref } from 'vue'
const count = ref(0)     // ref() 创建响应式数据
function addOne() {
  count.value++          // 注意！在 JS 里用 .value 访问
}
</script>

⚠️ Warning：两个关键区别

用 <script setup> 代替了 export default
数据用 ref() 创建，在 JavaScript 里访问需要 .value（但模板里不用）

优点

同一功能的代码写在一起，逻辑清晰
可以把一段逻辑抽出来复用（这是组合式 API 最大的优势）
TypeScript 支持更好

缺点

新手理解"响应式"要多花一点时间
需要记住 ref 要在 JS 里加 .value（忘了会报错）

两种风格怎么选？

一个直观的对比

同一个功能，两种写法放在一起看：

vue

<!-- ========== 选项式 API ========== -->
<script>
export default {
  data() {
    return { name: '小明', age: 18 }
  },
  computed: {
    intro() {
      return `${this.name}今年${this.age}岁`
    }
  },
  methods: {
    growUp() {
      this.age++
    }
  }
}
</script>

vue

<!-- ========== 组合式 API ========== -->
<script setup>
import { ref, computed } from 'vue'
const name = ref('小明')
const age = ref(18)
const intro = computed(() => `${name.value}今年${age.value}岁`)
function growUp() {
  age.value++
}
</script>

功能完全一样，只是"组织代码的方式"不同。

新手常见问题

Q：学了选项式还要学组合式吗？ A：先精通一种。建议从选项式入门理解 Vue 核心概念，然后再学组合式。组合式只是写法不同，核心概念（响应式、组件、指令）是一样的。 Q：能不能混着用？ A：同一个 .vue 文件里不要混用，但要学的知识点是通用的——条件渲染、列表渲染、事件处理这些在两个风格里用法完全一样。下一步： 💡 Tip：Composition API 写法速查 详见：和

选项式 API（Options API） #

优点 #

缺点 #

组合式 API（Composition API） #

优点 #

缺点 #

两种风格怎么选？ #

一个直观的对比 #

新手常见问题 #

选项式 API（Options API）

优点

缺点

组合式 API（Composition API）

优点

缺点

两种风格怎么选？

一个直观的对比

新手常见问题