组合式api（Composition API）是vue3对我们开发者来说变化非常大的更新，我们先不关注具体语法，先对它有一个大的感知。通过vue2, vue3两种形式实现同一个需求，理解`vue3的compition api` 带来的好处两个独立的功能： 0. 通过点击按钮来控制div的显示和隐藏 0. 通过点击按钮控制div内字体颜色的变化 # 用vue2实现这个需求 option Api ```js ``` # 用vue3来实现 composition api版本 ```js ``` # composition vs options options API（Vue2）开发出来的vue应用如左图所示。它的特点是理解容易，好上手。因为各个选项都有固定的书写位置（比如数据就写到data选项中，操作方法就写到methods中，等等），应用大了之后，相信大家都遇到过来回上下找代码的困境。 composition API(Vue3)开发的vue应用如右图所示。它的特点是特定功能相关的所有东西都放到一起维护，比如功能A相关的响应式数据，操作数据的方法等放到一起，这样不管应用多大，都可以快读定位到某个功能的所有相关代码，维护方便设置，如果功能复杂，代码量大，我们还可以进行逻辑拆分处理 ![04.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6c2a22b42d42458e87d9d1c0e13bacfd~tplv-k3u1fbpfcp-watermark.image) # composition api版本优化拆解setup功能代码成函数通过定义功能函数，把两个功能相关的代码各自抽离到一个独立的小函数中，然后通过在setup函数中再把两个小功能函数组合起来，这样一来，我们既可以把setup函数变得清爽，又可以方便维护快速定位功能位置 ```js ``` 选项式API的精妙之处：分散定义，组合使用 # 小结由于vue3中提供了一个新的写代码的方式(老方式也是可以使用的)，为了区别vue2，给他们各自取了不同的名字： Vue2选项式API(option api) 优点：简单，各选项各司其职；缺点：不方便功能复用；功能代码分散维护代码横跳 Vue3组合式API(composition api) 优点：功能代码组合维护, 不方便功能复用；