咨询Vue 3各类API定义：Options、Composition等术语解析

Hey there! I totally get how confusing all these API names can be when you're just starting out with Vue 3. Let's break each one down clearly so you can wrap your head around them:

Options API (a.k.a. Object-based API) #

This is the classic, object-focused way to write Vue components—you might know it as Object-based API from older resources, but Vue's official docs now standardize on Options API.

It works by exporting an object with predefined "options" that Vue recognizes, like data(), methods, computed, and watch. All your component logic gets split into these separate sections. Here's a quick example:

<template>
  <button @click="increment">Count: {{ count }}</button>
</template>

<script>
export default {
  // Option for reactive data
  data() {
    return { count: 0 }
  },
  // Option for methods
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

Great for small components, but can get messy in large projects when related logic is spread across different options.

Composition API (a.k.a. Function-based API) #

This is Vue 3's flagship new API, originally called Function-based API during its early development phase before getting its official name.

It lets you organize component logic by feature rather than by option type. The core is the setup() function, which acts as the entry point for all your composition logic. You use Vue's reactivity utilities to create reactive data, then return what you need to use in the template. Example:

<template>
  <button @click="increment">Count: {{ count }} (Double: {{ doubleCount }})</button>
</template>

<script>
import { ref, computed } from 'vue'

export default {
  setup() {
    // Reactive primitive value
    const count = ref(0)
    // Method tied to count
    const increment = () => count.value++
    // Computed value based on count
    const doubleCount = computed(() => count.value * 2)

    // Return values to expose to template
    return { count, increment, doubleCount }
  }
}
</script>

Perfect for large components—you can even extract reusable logic into separate functions and import them wherever needed.

Class-Based API #

This was an alternative way to write Vue 2 components using ES6 classes, requiring third-party libraries like vue-class-component and vue-property-decorator to work. It never became an official core API, and Vue 3 doesn't prioritize it anymore (since Composition API solves its use cases better).

Here's what a Class-Based component looked like:

<template>
  <button @click="increment">Count: {{ count }}</button>
</template>

<script>
import { Vue, Component } from 'vue-class-component'

@Component
export default class Counter extends Vue {
  // Reactive data as class property
  count = 0

  // Method as class method
  increment() {
    this.count++
  }
}
</script>

If you're working on a legacy Vue 2 project, you might still see this, but there's no need to learn it for new Vue 3 projects.

Reactivity API #

This is the low-level core of Vue's reactive system—all other APIs (Options, Composition) build on top of it. Vue 3 exposes these utilities directly so you can use them anywhere, even outside of components.

Key utilities include:

• ref(): Makes primitive values (strings, numbers) reactive
• reactive(): Makes objects reactive
• computed(): Creates a reactive computed value
• watch(): Watches for changes to reactive values and runs a callback
• effect(): Runs a function whenever reactive dependencies change

Example of using it standalone:

import { ref, effect } from 'vue'

const count = ref(0)
// This effect runs automatically when count changes
effect(() => {
  console.log(`Current count: ${count.value}`)
})

// Update count—triggers the effect
count.value++ // Logs "Current count: 1"

内容的提问来源于stack exchange，提问作者karlos