Options API (選項API)
傳統的組件隨着業務複雜度越來越高,代碼量會不斷的加大,整個代碼邏輯都不易閱讀和理解。
雖然儘量一個文件不要寫太多代碼(1000行內),但總有一些大型組件要一個文件寫很多代碼
優點:各選項編寫寫位置固定,結構清晰
缺點:
- 代碼組織性差,相似的邏輯代碼不便於複用
- 邏輯複雜代碼多了不好閱讀,同一功能的上下文代碼難找
Composition API (組合式api)
主要用於在大型組件中提高代碼邏輯的可複用性。
組合式 API 在 setup 內使用,按邏輯關注點對部分代碼進行分組,
然後提取邏輯片段並與其他組件共享代碼。因此編寫出更有條理的代碼。
優點:
- 同一功能相關的所有東西都寫在一起,快速閱讀和理解
- 功能複雜,代碼量大,還可以進行邏輯拆分處理,功能封裝。
寫法對比:
參考文章:https://www.jianshu.com/p/2cac57888886
https://www.runoob.com/vue3/vue3-composition-api.html