vue2中Options API 和 vue3中Composition API 的对比

回顾一下：

在vue2中如何组织代码的，我们会在一个vue文件中methods，computed，watch，data中等等定义属性和方法，共同处理页面逻辑，（特定的区域写特定的代码，随着业务复杂度提高，会导致后续维护复杂、复用性不高）

我们称这种方式为Options API

在这里插入图片描述

缺点： 一个功能往往需要在不同的vue配置项中定义属性和方法，比较分散，项目小还好，清晰明了，但是项目大了后，一个methods中可能包含20多个方法，你往往分不清哪个方法对应着哪个功能

vue3中的Composition API就是用来解决这个问题的

在vue3 Composition API 中，我们的代码是根据逻辑功能来组织的，一个功能所定义的所有api会放在一起（更加的高内聚，低耦合），这样做，即时项目很大，功能很多，我们都能快速的定位到这个功能所用到的所有API，而不像vue2 Options API 中一个功能所用到的API都是分散的，需要改动功能，到处找API的过程是很费劲的

一个功能所定义的所有api会放在一起:

在这里插入图片描述

在这里插入图片描述

为什么要使用 Composition API：

• Composition API 是根据逻辑相关性组织代码的，提高可读性和可维护性
• 基于函数组合的 API 更好的重用逻辑代码（在vue2 Options API中通过Mixins重用逻辑代码，容易发生命名冲突且关系不清）