Vue 3.0 所采用的 Composition Api 与 Vue 2.x使用的Options Api 有什么区别？

Composition Api 设计动机
Vue 2.x在开发中小型项目的时候已经很好用了，但是在开发一些长期迭代的大型项目的时候会有一些限制，项目中可能会有一些功能比较复杂的组件，我们在看他人开发的组件时，可能会很难看懂，原因是Vue 2.x采用的是Options Api，指的是一个描述组件选项的对象，来创建组件的方式，这种方式我们经常使用。我们在创建组件的时候经常使用到data、methods、props、computed、生命周期钩子函数等，这些选项组成一个对象来描述组件，那么同一个功能的代码可能涉及到data、methods、props、computed等多个选项，也就是同一个功能的代码被拆分到多个选项中，为了查看某个功能需要不停的上下滑动滚动条来找到同一功能对应的代码，例如

Composition Api

• Vue 3.0新增的API
• 一组基于函数的API
• 可以更灵活的组织代码逻辑
  使用composition api书写代码逻辑，将将当前功能的逻辑封装在一个函数中，查看的时候只需要找到该功能所对应的函数就行
  
  通过官方提供的这张图，感受下Composition Api 与 Options Api 的区别，同一色块代表同一功能，在Options Api中可以很直观的感受出来同一功能被拆分成多个代码块，不利于代码的提取和重用
  
  总结
  Composition Api提供了一种基于函数的API，让我们可以更灵活的组织代码逻辑，使用Composition Api可以更合理的组织组件代码结构，还可以把一些功能从组件中提取出来，方便其他组件重用