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

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章