vue3(1)——选项式api和组合式api的区别

2,145 阅读1分钟

vue两种api(选项式和组合式)得区别

① 选项Options API

什么是选项 API : 在 vue2.x 项目中使用(data、methods、computed、watch)中定义属性和方法的就是选项API 写法

  • 代码风格:date选项写数据,methods选项写函数,一个功能逻辑的代码分散
  • 优点:易于学习和使用,写代码的位置已经约定好了,新手上手简单
  • 缺点:代码组织性差,相似的逻辑代码不便于复用,逻辑复杂代码多了不好阅读。
  • 虽然提供了 mixins 用来封装逻辑,但是出现数据函数覆盖的概率很大,不好维护

② 组合Compositon API

什么是组合 API : 在 vue3 中使用的就是 组合API 写法

代码风格:一个功能逻辑的代码组织在一起(包括数据,函数)

优点:功能逻辑复杂繁多情况下,各个功能逻辑代码组织再一起,便于阅读和维护

缺点:需要有良好的代码组织能力和拆分逻辑能力 (在 vue3 中也可以支持 vue2 选项API 写法)

③ 选项式和组合式 API 的关系

  1. 组合式 API 的目的是增强,不是取代选项式 API , vue3 对两种 API 都支持
  2. 简单的场景使用选项式 API 更加简单方便
  3. 需要强烈支持 TS 的项目首选组合式 API
  4. 需要大量逻辑复用的场景首选组合式 API