3.1 组合式API的了解

Vue3除了沿用传统的选项式API的代码模式，还引入了组合式API，它允许开发人员以更好的方式编写代码。使用组合式API，开发人员可以将逻辑代码块组合在一起，从而编写出可读性高的代码。

回顾一下选项式API的代码书写方式，其实选项式API暴露的最主要的一个问题是：操作同一内容目标的代码会被分散在不同的选项中，如data、methods、computed、watch及生命周期钩子函数等。

来看下方代码，如果我们想要操作的只有count这一个数据对象，那么选项式API的代码看起来会十分凌乱。

使用组合式API可以将代码组织成更小的逻辑片段，并将它们组合在一起，甚至在后续需要重用它们时可以进行抽离。

现在利用组合式API对上方代码进行重写，可以看到操作count数据对象的所有功能代码都被集中到一起，便于代码的编写、查看及后续维护。

上方代码只是对组合式API进行了简单展示，其实组合式API的优点远不止于此。除了更灵活的代码组织、更好的逻辑重用，组合式API还提供了更好的TypeScript类型接口支持，Vue3本身也是使用TypeScript编写实现的，为了提升性能还实现了treeShaking（treeShaking直译为摇树，是一种消除死代码的性能优化理论，比如，现在想引入lodash第三方类库中的方法，但不做全部引入，只是引入单个方法，此时其他的方法都不会被打包处理，程序只会将其单个方法的代码抽离），从而产生更小的生产包和更少的网络开销。 4xCRzCT5BpinSo8p3WR6I1udtGjchEZjkpRbGs4oDAMW23M55sT7xAvlgAGYC7YG