在Vue 2中，我们可以使用
Options API来编写 Vue 组件。但是，在 Vue 3中，我们还有了新的Composition API。那么这两种API有什么区别呢？
Vue.js是一款受欢迎的前端框架，它提供了多种不同的API，其中包括Options API和Composition API。虽然它们都是用来编写Vue组件的，但它们在设计和使用方面存在一些差异。在本篇文章中，我们将深入探讨两者之间的区别，并提供相关的代码示例。
1. Options API
Options API 是 Vue.js 最早期版本采用的方式，也是目前大多数 Vue.js 2.x 项目中使用的方式。最基本的 Options API 组成包括 data、methods、computed、 watch等选项，这些选项用于描述一个 Vue 组件的各种属性和行为，通常情况下是通过一个 JavaScript 对象来定义的，例如：
export default {
name: 'HelloWorld',
data() {
return {
msg: 'Hello Vue.js!'
}
},
methods: {
reverseMsg() {
this.msg = this.msg.split('').reverse().join('')
}
},
computed: {
uppercaseMsg() {
return this.msg.toUpperCase()
}
},
watch: {
msg(newVal, oldVal) {
console.log(`New message is: ${newVal}, and the old message is: ${oldVal}`)
}
}
}
通过上述代码，我们可以创建一个名为 HelloWorld 的 Vue 组件，该组件拥有一个数据属性 msg，默认值为 'Hello Vue.js!'，并且有一个方法 reverseMsg，该方法将 msg 属性的值翻转。此外，还有一个计算属性 uppercaseMsg，该属性返回 msg 的大写值；以及一个监视器 watch，用于监视 msg 属性值的变化。
虽然 Options API 提供了一种简单易用的方式来描述 Vue 组件，但是当组件变得复杂时，代码会变得混乱难以维护，并且每个选项可能会包含大量的代码，导致代码臃肿不堪。因此，Vue.js 推出了 Composition API，以解决这些问题。
2. Composition API
Composition API 是 Vue.js 3.x 推出的一项全新的 API，它的核心思想是将组件中的逻辑划分为更小的函数，以便更好的组织和重用代码。同时，Composition API 也提供了更灵活和可组合的方式来组织和管理组件代码。
2.1. 基本使用
Composition API 的基本用法是使用 setup函数来替换传统的 Options API 入口点，例如：
import { reactive, computed, watch } from 'vue'
export default {
name: 'HelloWorld',
setup() {
const state = reactive({
msg: 'Hello Vue.js!'
})
function reverseMsg() {
state.msg = state.msg.split('').reverse().join('')
}
const uppercaseMsg = computed(() => state.msg.toUpperCase())
watch(() => state.msg, (newVal, oldVal) => {
console.log(`New message is: ${newVal}, and the old message is: ${oldVal}`)
})
return { state, reverseMsg, uppercaseMsg }
}
}
在上述代码中，我们首先引入了 reactive、computed、 watch 等函数，用于创建响应式数据，计算属性和监视器。然后，我们使用 setup 函数来设置组件的初始状态，并将相关的数据、方法和计算属性返回给 Vue.js 运行时系统。
需要注意的是，setup 函数只要负责设置组件的初始状态，并不需要修改组件的模板。如果需要修改模板，则可以将相关的函数等作为返回值传递给模板。例如，我们可以使用 JSX 来重写模板：
import { reactive, computed, watch } from 'vue'
export default {
name: 'HelloWorld',
setup() {
const state = reactive({
msg: 'Hello Vue.js!'
})
function reverseMsg() {
state.msg = state.msg.split('').reverse().join('')
}
const uppercaseMsg = computed(() => state.msg.toUpperCase())
watch(() => state.msg, (newVal, oldVal) => {
console.log(`New message is: ${newVal}, and the old message is: ${oldVal}`)
})
return () => (
<div>
<p>{state.msg}</p>
<button onClick={reverseMsg}>Reverse Message</button>
<p>{uppercaseMsg.value}</p>
</div>
)
}
}
在上述代码中，我们使用 return 关键字返回一个函数而不是对象。该函数用于渲染组件的模板，并根据需要直接使用相关的数据、方法和计算属性。
2.2. 组合函数
Composition API 允许将多个相关的组件逻辑组合成一个更大的函数，以便更好的组织和重用代码。例如，我们可以将计算属性和监视器组成一个名为 useMsg 的函数：
import { reactive, computed, watch } from 'vue'
export function useMsg(defaultMsg) {
const state = reactive({
msg: defaultMsg
})
function reverseMsg() {
state.msg = state.msg.split('').reverse().join('')
}
const uppercaseMsg = computed(() => state.msg.toUpperCase())
watch(() => state.msg, (newVal, oldVal) => {
console.log(`New message is: ${newVal}, and the old message is: ${oldVal}`)
})
return { state, reverseMsg, uppercaseMsg }
}
在上述代码中，我们定义了一个名为 useMsg 的函数，它接收一个名为 defaultMsg 的参数，用于设置初始的消息文本。该函数内部使用了 reactive、computed 和 watch 等函数，创建了一个名为 state 的响应式对象，并且定义了 reverseMsg 方法用于翻转消息文本，以及 uppercaseMsg 计算属性用于获取大写的消息文本。最后，useMsg 函数将这些相关的数据、方法和计算属性一起返回。
我们可以在组件中使用 useMsg 函数，以便获取相关的数据、方法和计算属性：
import { useMsg } from './useMsg'
export default {
name: 'HelloWorld',
setup() {
const { state, reverseMsg, uppercaseMsg } = useMsg('Hello Vue.js!')
return () => (
<div>
<p>{state.msg}</p>
<button onClick={reverseMsg}>Reverse Message</button>
<p>{uppercaseMsg.value}</p>
</div>
)
}
}
在上述代码中，我们首先将 useMsg 函数导入到了组件中，并且在 setup 函数中调用该函数来获取相关的数据、方法和计算属性。然后，我们可以直接在渲染函数中使用这些相关的数据、方法和计算属性。
2.3. 生命周期钩子
Composition API 还提供了一种更加灵活的方式来管理组件的生命周期钩子。与 Options API 不同的是，Composition API 通过 onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount 和 onUnmounted 等函数来管理生命周期钩子，而不是将其作为选项传递给 Vue.js。例如：
import { reactive, computed, watch, onMounted } from 'vue'
export function useMsg(defaultMsg) {
const state = reactive({
msg: defaultMsg
})
function reverseMsg() {
state.msg = state.msg.split('').reverse().join('')
}
const uppercaseMsg = computed(() => state.msg.toUpperCase())
watch(() => state.msg, (newVal, oldVal) => {
console.log(`New message is: ${newVal}, and the old message is: ${oldVal}`)
})
onMounted(() => {
console.log('Component is mounted.')
})
return { state, reverseMsg, uppercaseMsg }
}
在上述代码中，我们使用 onMounted 函数来添加 mounted 生命周期钩子。在组件被挂载后，该函数会被触发，并输出一条信息到控制台。
需要注意的是，如果我们需要提供多个生命周期钩子，可以将其全部声明在同一个 setup 函数中，也可以将其拆分成多个函数并将其导入为其他函数的依赖项。
3. 深入比较
Options API 和 Composition API 在设计和使用方面存在一些显著的差异。下面我们将进行更深入的比较。
3.1. 设计理念
Options API 的设计理念是从 Vue.js 早期的版本开始形成的，并且在面对少量的选项以及简单的组件时表现出色。但随着应用程序变得更加复杂和庞大，Options API 的缺点也变得越来越明显，例如代码可读性和维护性不佳，代码膨胀等问题。
Composition API 的设计理念正是为了解决这些问题而产生的，它通过函数式编程的方式将组件逻辑分解为更小的函数，并允许将这些函数组合起来。该设计理念与 React Hooks 类似，也是现代前端框架中普遍采用的方式。
3.2. 代码可读性
Options API 的代码可读性通常较差，因为每个选项都可能包含大量的代码，使得组件的整体结构难以理解和跟踪。此外，由于不同的选项可能会相互交织，因此难以将组件的逻辑归类和组织。
Composition API 的代码可读性通常较好，因为将组件逻辑划分为更小的函数可以使代码更加清晰和简洁。此外，由于每个函数通常只关注一个具体的逻辑方面，因此更容易将组件逻辑按照功能进行归类和组织。
3.3. 代码维护性
由于 Options API 中每个选项可能包含大量的代码，因此代码维护性通常较差。例如，当需要重构或修改组件逻辑时，可能需要同时涉及多个选项，并且修改代码可能会导致不可预测的后果。此外，由于数据属性等选项的存在，可能会导致组件的状态变得复杂和难以管理。
Composition API 的代码维护性通常较好，因为将组件逻辑划分为更小的函数可以使代码更加清晰和简洁。此外，由于函数之间的依赖关系通常较为明确，并且可能的状态变化也更容易控制，因此组件的状态变得更加可预测和可维护。
3.4. 功能扩展
Options API 提供了一些基本的选项，例如 data、methods、computed、watch 等，用于描述组件的行为和属性。虽然可以通过定义新的选项来扩展功能，但其效果并不理想，并且在某些情况下可能会对组件的性能产生负面影响。
Composition API 具有更好的扩展性，因为可以通过组合函数或导入其他库来添加新的功能。例如，可以使用 ESLint 插件来检查代码错误，也可以使用 Axios 库来进行数据请求和处理等。
4. 结论
虽然 Options API 和 Composition API 在设计和使用方面存在一些差异，但它们都是 Vue.js 中非常重要的一部分。在编写 Vue.js 组件时，您可以根据实际情况选择使用 Options API 或 Composition API，以便更好地组织和管理组件代码，并提高应用程序的可读性、可维护性和可扩展性。