文章目录
前言
Vue.js 提供了两种主要的 API 风格来组织组件的代码：选项式 API（Options API）和组合式 API（Composition API）。这两种 API 风格在 Vue 3 中都得到了支持，但组合式 API 是在 Vue 3 中引入的新特性，旨在解决大型组件中逻辑难以组织和复用的问题。
接下来我们来使用一个时钟的案例来展示同样的用法，不通的代码风格。
一、选项式 API（Options API）
在 Vue 2 和 Vue 3 中，选项式 API 是默认的 API 风格。它使用 export default 返回一个对象，该对象包含组件的各种选项，如 data、methods、computed、watch、mounted 等。
1. 代码
<script>
//选项式 API
export default {
data() {
return {
msg: '选项式 API时钟功能',
currentTime: ''
};
},
methods: {
updateTime() {
const now = new Date();
this.currentTime = `${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`;
}
},
mounted() {
this.updateTime(); // 在组件加载时获取一次时间
setInterval(this.updateTime, 1000); // 每秒更新一次时间
},
beforeDestroy() {
clearInterval(this.intervalId); // 在组件销毁前清除定时器
}
};
</script>
<template>
<h1>{{ msg }}</h1>
<div><p>当前时间: {{ currentTime }}</p></div>
</template>
<style>
h1{
color:rgb(0, 255, 115);
}
</style>
2. 效果
二、组合式 API（Composition API）
组合式 API 是在 Vue 3 中引入的一种新特性，它允许你使用更具函数式编程风格的代码来组织组件逻辑。组合式 API 提供了一系列函数，如 ref、reactive、computed、watch、setup 等，这些函数可以在 setup 函数中一起使用，以定义组件的状态、方法和计算属性。
1. 代码
<!-- 组合式 API -->
<script setup>
import { ref,onMounted,onBeforeUnmount} from 'vue'
// 定时器的引用
let intervalId = null;
const msg = ref('组合式 API时钟功能')
const currentTime = ref('')
function updateTime() {
const now = new Date();
currentTime.value = `${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`;
}
onMounted(() => {
updateTime(); // 在组件加载时获取一次时间
intervalId = setInterval(updateTime, 1000); // 每秒更新一次时间
})
onBeforeUnmount(() => {
clearInterval(this.intervalId); // 在组件销毁前清除定时器
})
</script>
<template>
<h1>{{ msg }}</h1>
<div><p>当前时间: {{ currentTime }}</p></div>
</template>
<style>
h1{
color:rgb(0, 255, 115);
}
</style>
2. 效果
三、两者之间的区别
-
逻辑组织：组合式 API 允许你将相关的逻辑组合在一起，而不是分散在组件的各个选项中。这有助于提高代码的可读性和可维护性。
-
代码复用：使用组合式 API，你可以更容易地提取和复用逻辑代码段。你可以创建可复用的函数，这些函数可以接收
ref、reactive等作为参数，并返回计算属性、方法等。 -
TypeScript 支持：组合式 API 与 TypeScript 配合得更好，因为它允许你明确地定义组件的状态和类型。
-
响应式系统：组合式 API 提供了更底层的响应式系统 API，如
ref和reactive，这些 API 可以更直接地操作响应式数据。 -
向后兼容性：Vue 3 同时支持选项式 API 和组合式 API，以确保与 Vue 2 的向后兼容性。但是，Vue 官方推荐使用组合式 API 来开发新的 Vue 3 应用程序。
总结
回到顶部
总的来说，选择哪种 API 风格取决于你的具体需求和偏好。对于小型、简单的组件，选项式 API 可能已经足够。但是，对于大型、复杂的组件，组合式 API 可以提供更清晰、更可维护的代码结构。