vue3.0 Composition Api 设计动机

开发长期迭代需要维护的大型项目时，复杂组件难以看懂，函数太过分散，描述一个场景太过分散。

用组件的选项 (data、computed、methods、watch) 组织逻辑在大多数情况下都有效。然而，当我们的组件变得更大时，逻辑关注点的列表也会增长。这可能会导致组件难以阅读和理解，尤其是对于那些一开始就没有编写这些组件的人来说。非常痛苦。

2.0 示例（获取鼠标位置）

vue3.0示例

区别

看着代码行数都差不多，这只是最简单的一个示例，如果给获取鼠标位置添加各种业务

• vue2.0 OptionApi：会直接在当前页面添加各种函数，获取使用mixins 混入，mixins 会导致属性来源不清楚，导致后期维护困难。
• vue3.0 ComponsitionApi： 此时获取鼠标位置模块已经不需要改变，只需要在外部再次添加业务场景即可，非常好用。