目录
探索 Vue 的 API 风格：选项式 API 与组合式 API 全解析
在 Vue 项目开发中，API 风格的选择对代码的结构和可维护性有着重要影响。Vue 主要提供了两种 API 风格：选项式 API 和组合式 API。本文将详细介绍这两种风格，并重点演示组合式 API 的使用，帮助大家更好地理解和应用于实际项目中。
一、Vue API 风格概述
（一）选项式 API
这是我们之前常用的格式，使用包含多个选项的对象来描述组件逻辑。例如：
export default {
data() {
return {
// 声明响应式数据
};
},
methods: {
// 声明方法
},
mounted() {
// 声明构造函数，在组件挂载时执行
}
}
（二）组合式 API
相对更灵活，推荐在实际开发中使用。例如在大事件项目开发中就会采用此风格。
二、组合式 API 详细解析
（一）使用前提
在script标签上添加setup标识，告诉 Vue 需要进行特殊处理，以简洁地使用组合式 API。
（二）声明响应式变量
使用REF函数声明响应式变量，需先导入REF。
- 导入
REF：
import { REF } from 'vue';
- 声明变量：
const count = REF(0);
（三）声明函数
直接编写函数，无需借助其他特殊语法。
function increment() {
// 函数逻辑
}
（四）声明钩子函数
使用 Vue 提供的unmounted等函数来完成，需先导入。
- 导入
unmounted：
import { REF, onMounted } from 'vue';
- 使用
unmounted：
onMounted(() => {
console.log('Vue已经挂载完毕');
});
（五）将数据绑定到 HTML 元素
- 在
template中声明 HTML 元素，并使用差值表达式绑定数据。例如：
<template>
<button>{{ count }}</button>
</template>
（六）处理事件绑定
使用v-on指令（简写为@）绑定函数，如@click="increment"。
（七）易错点提醒
在组合式 API 中，务必将数据定义为响应式数据，即使用REF函数包裹。否则可能导致数据更新不生效。
三、组合式 API 示例演示
（一）创建示例文件
- 新建一个
.vue文件（如API.vue），包含script、template和style（若用到）部分。
（二）在script中使用组合式 API
- 添加
setup标识：
<script setup>
- 声明响应式数据
count：
import { REF } from 'vue';
const count = REF(0);
- 声明函数
increment用于数据自增：
function increment() {
count.value++;
}
- 声明
unmounted钩子函数：
import { REF, onMounted } from 'vue';
onMounted(() => {
console.log('Vue已经挂载完毕');
});
（三）在template中绑定数据和事件
- 绑定数据：
<template>
<button>{{ count }}</button>
</template>
- 绑定事件：
<template>
<button @click="increment">{{ count }}</button>
</template>
（四）在app.vue中导入并使用API.vue组件
- 导入
API.vue：
import API from './API.vue';
- 在
template中声明API组件标签：
<template>
<API></API>
</template>
通过以上步骤，我们完整地演示了 Vue 组合式 API 的使用流程，包括从创建文件、声明数据和函数、处理事件绑定到在其他组件中导入使用。希望本文能帮助大家更好地掌握 Vue 的 API 风格，在实际项目开发中灵活运用组合式 API。
标签：组合式,Vue,vue,REF,API,声明 From： https://blog.csdn.net/m0_57836225/article/details/144172725