Vue2中的Options API在一个vue文件中的methods、computed、watch、data中定义属性和方法,共同处理页面逻辑。这种方式有一个明显的缺点,一个功能往往需要在不同的vue配置项中定义属性和方法,比较分散,项目小了还好,项目大了以后一个methods中会包含几十种方法,维护代码的时候往往会分不清这个方法对应这哪个功能,增加了代码的维护时间。 Vue3中舍弃了这种 Options API,而换用 Composition API。在vue3 Composition API中,组件根据逻辑功能来组织,一个功能所定义的所有 API 会放在一起(更加的高内聚,低耦合)即使项目很大,功能很多,我们都能快速的定位到这个功能所用到的所有 API。
优劣比较:
- 在逻辑组织和逻辑复用方面,Composition API是优于Options API。
- Composition API对 tree-shaking 友好,代码也更容易压缩。
- Composition API中见不到this的使用,减少了this指向不明的情况。
- 如果是小型组件,可以继续使用Options API,也是十分友好的。