Vue 的组件可以按两种不同的风格书写：选项式 API 和组合式 API。
vue2只支持选项式 API
vue3支持两种
选项式 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>