选项式 API (Options API)

在 Vue 2 中引入并继续在 Vue 3 中支持的选项式 API，是一种通过声明式选项（如 data, methods, computed, watch, props, lifecycle hooks 等）来组织组件逻辑的方式。

数据和方法: 通过 data 返回一个对象来定义组件的状态，通过 methods 定义组件的方法。
计算属性和侦听器: 通过 computed 定义计算属性，通过 watch 监听响应式数据的变化。
生命周期钩子: 如 created, mounted, updated, destroyed 等，用于在组件的不同生命周期阶段执行代码。
模板: 使用声明式的 HTML-like 语法定义 UI

<template>
  <button @click="increment">Count is: {{ count }}</button>
  //元素绑定了一个点击事件处理器 (@click)，当按钮被点击时，会调用 increment 方法
</template>

<script>
export default {
  // data() 函数返回一个对象，该对象的属性是组件的状态，对象中的属性都是响应式的。这意味着，当这些属性的值改变时，Vue 会自动更新 DOM 以反映这些变化。名为 count 的状态属性，初始值为 0
  data() {
    return {
      count: 0
    }
  },

  // methods 定义了组件的方法，定义了一个 increment 方法，用于增加 count 的值
  methods: {
    increment() {
      this.count++
    }
  },

  // 生命周期钩子会在组件生命周期的各个不同阶段被调用，在这个例子中，当组件挂载完成后，mounted 钩子会执行，并打印初始的 count 值到控制台
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

组合式 API (Composition API)

Vue 3 引入的组合式 API 提供了一种更灵活的方式来组织和重用组件逻辑。它主要围绕 setup 函数展开，这个函数在组件创建之前执行，是定义组件逻辑的地方。

响应式引用: 使用 ref 和 reactive 定义响应式状态。
计算属性和侦听器: 使用 computed 和 watch，与选项式 API 类似，但用法更灵活。
生命周期钩子: 使用 onMounted, onUpdated, onUnmounted 等函数，这些与选项式 API 中的生命周期钩子等效，但用法不同。
逻辑重用和抽象: 可以将相关的逻辑组合在一起，易于重用和测试。通过自定义的“组合函数”（composition functions），你可以跨组件重用逻辑

使用 `<script setup>`

所有顶层的变量和函数都直接暴露给模板。这样，不需要在 setup 函数中返回它们

提高了代码的可读性，并减少了样板代码的数量

<template>
  <div>{{ fullName }}</div>
</template>

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

const firstName = ref('John');
const lastName = ref('Doe');

const fullName = computed(() => firstName.value + ' ' + lastName.value);
</script>

使用常规 `<script>` 和 `setup()`

定义一个 setup() 函数，并在这个函数中返回所有需要在模板中使用的响应式数据和方法

这种方式更适用于需要结合 Composition API 和 Options API（如 data, methods, computed, watch）的场景

或者对于更大、更复杂的组件，使用传统的 setup() 函数可能会使代码更容易管理和维护

<template>
  <div>{{ fullName }}</div>
</template>

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

export default {
  setup() {
    const firstName = ref('John');
    const lastName = ref('Doe');

    const fullName = computed(() => firstName.value + ' ' + lastName.value);

    return { fullName };
  }
}
</script>