VUE2/3差异之模板写法

发布时间 2023-05-31 10:42:45作者: 前端-大雄

Options API (选项API)

传统的组件随着业务复杂度越来越高,代码量会不断的加大,整个代码逻辑都不易阅读和理解。
虽然尽量一个文件不要写太多代码(1000行内),但总有一些大型组件要一个文件写很多代码


优点:各选项编写写位置固定,结构清晰
缺点:

  1. 代码组织性差,相似的逻辑代码不便于复用
  2. 逻辑复杂代码多了不好阅读,同一功能的上下文代码难找

 


Composition API (组合式api)

主要用于在大型组件中提高代码逻辑的可复用性。
组合式 API 在 setup 内使用,按逻辑关注点对部分代码进行分组,
然后提取逻辑片段并与其他组件共享代码。因此编写出更有条理的代码。

优点:

  1. 同一功能相关的所有东西都写在一起,快速阅读和理解
  2. 功能复杂,代码量大,还可以进行逻辑拆分处理,功能封装。

写法对比:

 

 

参考文章:https://www.jianshu.com/p/2cac57888886
https://www.runoob.com/vue3/vue3-composition-api.html