本人面试—Vue3 所采用的 Composition Api 与 Vue2 使用的 Options A...

佛门与网络

• Options API
  Options API，即大家常说的选项 API，即以 vue 为后缀的文件，通过定义 methods，computed，watch，data 等属性与方法，共同处理页面逻辑。
  当组件变得复杂，导致对应属性的列表也会增长，这可能会导致组件难以阅读和理解。
• Composition Api
  在 Vue3 Composition API 中，组件根据逻辑功能来组织的，一个功能所定义的所有 API 会放在一起（更加的高内聚，低耦合）。
  即使项目很大，功能很多，我们都能快速的定位到这个功能所用到的所有 API。
• 对比
  1、逻辑组织
  Options API 中，假设一个组件是一个大型组件，其内部有很多处理逻辑关注点。选项的分离掩盖了潜在的逻辑问题。此外，在处理单个逻辑关注点时，我们必须不断地跳转相关代码的选项块。
  Composition API 中，逻辑关注点相关的代码全都放在一个函数里，这样当需要修改一个功能时，就不再需要在文件中跳来跳去。
  2、逻辑复用
  在 Vue2 中，我们是用过 mixin 去复用相同的逻辑，使用单个 mixin 似乎问题不大，但是当我们一个组件混入大量不同的 mixins 的时候，会存在两个非常明显的问题：命名冲突、数据来源不清晰。
  Composition API 中，可将逻辑抽离出去，整个数据来源清晰，即使去编写更多的 hook 函数，也不会出现命名冲突的问题。
• 总结
  1、在逻辑组织和逻辑复用方面，Composition API 是优于 Options API。
  2、因为 Composition API 几乎是函数，会有更好的类型推断。
  3、Composition API 对 tree-shaking 友好，代码也更容易压缩。
  4、Composition API 中见不到 this 的使用，减少了 this 指向不明的情况。
  5、如果是小型组件，可以继续使用 Options API，也是十分友好的。
  
  

getify

学习了

caae

学习了