【Vue3】05-Options API和Composition API的区别

其它篇章：
1.【Vue3】01-创建Vue3工程
2.【Vue3】02-Vue3工程目录分析
3.【Vue3】03-编写app组件——src
4.【Vue3】04-编写vue实现一个简单效果
5.【Vue3】05-Options API和Composition API的区别
6.【Vue3】06-利用setup编写vue（1）
7.【Vue3】07-利用setup编写vue（2）-setup的语法糖
合集篇：
1.【Vue3】创建并运行一个简易的Vue3项目
2.【Vue3】编写vue实现一个简单效果，并使用setup糖简化代码

Options API和Composition API的区别

• vue2的API设计是Options（配置）风格的。
• vue3的API设计是Composition（组合）风格的。
• 它们的区别在于一个是vue2用的，一个是vue3用的。

1. Options API

a. 什么是Options API

概念：

• Options API使用一个包含多个属性的对象来定义组件，这些属性包括data、methods、computed等。
• 这种方式使得相关功能的代码可能会分散在不同的配置项中，尤其是在大型项目中，一个methods对象可能包含多个不同功能的方法，这可能会导致代码的可维护性降低。

假设：

• 若要实现一个功能，那这个功能就得有数据、交互、方法。
• 该功能的 数据 要放在data()里。
• 该功能如果有一个 方法，那这个方法就要放在methods里。
• 该功能如果需要一些 计算属性，还要把功能的计算属性写在computed里。

分析：

从结果来看，它把东西都拆散了，这就是选项式API，即Options API。

总结：

• 不管是什么数据，只要是在这个组件里，这个数据就得写在data()里。

• 不管是什么方法，只要是这个组件的方法，就得写在methods里。

• 这样的API就是选项式API，即OptionsAPI。

b. 特点

看以下内容：

<script lang="ts">
    export default{
        name:"person",
        data() {
            return{
                name:'zhangsan',
                age:20,
                birth:'2005.1.1'
            }
        },
        methods:{
            show(){
                alert(this.birth)
            }
        }
    }
</script>

里面的name、data()、methods都是选项（配置项），对于vue2来说，学习vue2，就是学习这些配置项。

• 缺点：Options类型的API，数据、方法、计算属性等是分散在data、methods、computed中的，如果要修改一个需求，就需要分别修改data、methods、computed，比较麻烦，不利于维护和复用。

2. Composition API

a. 什么是Composition API

概念：

• Composition API允许开发者根据逻辑功能来组织代码，提高了代码的内聚性和低耦合性。
• 在Composition API中，所有相关的代码都放在一起，使得即使在大型项目中也能快速定位到功能所用到的所有API。
• 组合式API，即Composition API。

问题：

组合了什么呢？

分析：

数据、方法、计算属性等都组合在一起，修改对应函数地功能，找到对应地函数，不管数据，还是方法等，都可以直接在该函数中修改，不用像OptionsAPI一样，分别到data、methods、computed找对应地内容修改了。

b. 特点

• 可以用函数的方式，更加优雅的组织代码，让相关功能的代码更加有序地组织在一起。
• 优点：修改对应函数地功能，找到对应地函数能修改所有内容，更加便捷，不像OptionsAPI那么麻烦，提高了可读性和可操作性。

其它篇章：
1.【Vue3】01-创建Vue3工程
2.【Vue3】02-Vue3工程目录分析
3.【Vue3】03-编写app组件——src
4.【Vue3】04-编写vue实现一个简单效果
5.【Vue3】05-Options API和Composition API的区别
6.【Vue3】06-利用setup编写vue（1）
7.【Vue3】07-利用setup编写vue（2）-setup的语法糖
合集篇：
1.【Vue3】创建并运行一个简易的Vue3项目
2.【Vue3】编写vue实现一个简单效果，并使用setup糖简化代码