前言
在 Vue.js 的不同版本中，组件编写的 API 也在不断演进，用过VUE2的同学应该都知道两者的区别，主要是Vue 2 的 Options API 和 Vue 3 的 Composition API 就是两种典型的组件编写方式。本文将对这两种 API 进行详细的介绍和对比，帮助开发者更好地理解和使用它们。
Vue 2 的 Options API
在 Vue 2 中，我们通常使用 Options API 编写组件。Options API 基于一个包含多个选项的对象，这些选项包括 data、methods、computed、watch 等。这种方法的优点是结构清晰，易于理解。然而，它也有一些缺点：
- 代码重复：当在多个组件中复用相同的功能时，可能需要重复编写相同的代码。
- 难以追踪逻辑：当组件变得复杂时，追踪某个功能的具体实现可能变得困难。
- this 的使用：在 Options API 中，我们需要依赖 this 关键字来访问组件实例。这可能导致一些问题，尤其是在与其他库集成时。
使用 Options API创建组件，最终编写的结构如下：
最终，Options API 容易导致代码重复。当多个组件需要复用相同的功能时，可能需要在每个组件中重复编写相同的代码，这增加了开发的工作量，也降低了代码的可维护性，就行下面结构，同种颜色的重复多次。
下面就是Vue 2 的 Options API初始代码
export default {
// ES语法问题，要求组件名称用多个单词下划线拼接
name:'Person',
// -----定义数据
data(){
return {
name:'张三',
age:18,
tel:'13888888888'
}
},
// ------定义方法
methods:{
// 修改姓名
changeName(){
this.name = 'zhang-san'
},
// 修改年龄
changeAge(){
this.age += 1
},
// 展示联系方式
showTel(){
alert(this.tel)
}
}
}
Options API 的弊端
从上述可以看到Vue 2 的 Options API存在一定的弊端，Options类型的 API，数据、方法、计算属性等，是分散在：data、methods、computed中的，若想新增或者修改一个需求，就需要分别修改：data、methods、computed，不便于维护和复用。
Vue 3 的 Composition API
Vue 3 引入了 Composition API，这是一种新的组件编写方式。Composition API 基于 setup() 函数，允许我们将组件逻辑组织成一个或多个可重用的函数。这种方法的优点包括：
- 更好的逻辑复用：通过将组件逻辑提取到单独的函数中，我们可以更容易地在多个组件之间复用代码。
- 易于追踪逻辑：使用 Composition API，我们可以更直观地组织和追踪组件逻辑。
- 弱化了 this 的使用：在 Composition API 中，我们不再依赖 this 关键字来访问组件实例。这使得组件更易于测试和与其他库集成。
最终使用 Composition API创建组件，最终编写的结构如下：
同样使用Vue 3 的 Composition API初始化代码：
export default {
name:'Person_Vue3',
setup(){
//setup中的this是undefined，Vue3在弱化this了
console.log(this)
// -----定义数据
// 数据，原来是写在data中的，此时的name、age、tel都不是响应式的数据
let name = '张三11'
let age = 18
let tel = '13888888888'
// ------定义方法，需要注意的是，在vue3中，以下方法数据非响应式了，
function changeName() {
name = 'zhang-san' //注意：这样修改name，页面是没有变化的
console.log(name) //name确实改了，但name不是响应式的
}
function changeAge() {
age += 1 //注意：这样修改age，页面是没有变化的
console.log(age) //age确实改了，但age不是响应式的
}
function showTel() {
alert(tel)
}
// -------将数据、方法交出去，模板中才可以使用，只有return才会返回
return {name,age,tel,changeName,changeAge,showTel}
}
}
总结
综上所述，Vue 2 的 Options API 和 Vue 3 的 Composition API 分别代表了两种不同的组件编写方式。Options API 结构清晰，易于理解，但存在代码重复、难以追踪逻辑等问题。而 Composition API 则通过更加灵活和模块化的方式解决了这些问题，提供了更好的逻辑复用机制、更直观的逻辑追踪方式以及更易于测试和集成的特点。具体对比可以参考如下表：
| 特点 | Options API | Composition API |
|---|---|---|
| 结构 | 基于一个包含多个选项的对象 | 基于一个或多个函数 |
| 逻辑复用 | 代码重复的可能性较高 | 通过函数和自定义模块实现更好的逻辑复用 |
| 追踪逻辑 | 当组件变得复杂时，追踪逻辑可能变得困难 | 更直观地组织和追踪组件逻辑 |
| this 的使用 | 依赖 this 关键字访问组件实例 | 弱化了 this 的使用，更易于测试和集成 |
总之，Vue 2 的 Options API 和 Vue 3 的 Composition API 都有各自的优缺点，在实际项目中，可以根据需求和场景选择合适的 API。
