VUE2/3差异之模板写法

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