Options API VS Composition API

• Vue2
  • options API
    • 优点：
      • 低耦合：横向切割清晰，数据全放 data，方法全放 methods
    • 缺点：
      • 逻辑不内聚
        • 一旦 methods 中有上十个、上百个方法，要更改 data 下上百个数据，维护起来就很困难了，得上下滚动页面到处找修改的出处
• Vue3
  • composition API 组合式API（基于函数）
    • 优点：
      • 高内聚低耦合
      • 基于函数：
        • 为什么要基于函数？
          • 因为函数最好抽离、最好抽象、最好组合、还能利用闭包缓存数据、更改 this 等好处
    • 在 setup 中可以提逻辑

把计算逻辑提成一个 composition API

• 就和 vue3 自己提供给我们的各种组合式API函数一样（useStore、useRouter），我们可以封装一个自定义 composition API 放到外边去：

  

• 直接调用传值就可以使用了，setup 中就干净许多了：

  

对比 Vue3 逻辑分明，可维护性高：

Vue3.0 新特性

• 重写双向数据绑定
• VDOM 性能瓶颈
• Fragments
• Tree-Shaking 的支持
• Composition API

重写双向数据绑定

• Vue2
  • 基于 Object.defineProperty() 实现
• Vue3
  • 基于 Proxy 实现

Proxy 的优势

• 可以监听数组变化