筆記 - Composition API 與 Options API 的差別

Vue 2.0 使用的是 Options API，不過 Vue 3 新增了 Composition API。

Options API

所有功能依據程式邏輯進行拆分

以下的 data、methods、computed、created 都屬於程式邏輯。

所有功能依據程式邏輯進行拆分，對於初學者比較容易學習。Options API 這麼好用，為什麼 Vue 3 還要新增 Composition API ?

其實 Options API 還是有缺點，會把商業邏輯拆分至各處。尤其在元件功能越來越多時更明顯，會發現同一個商業邏輯被拆分在同地方，時間一久就不利維護。

而 Vue 3 這次新增的 Composition API 就可以把商業邏輯、功能集中在同一區塊。

const App = {
  data() {
    return {
      texts: [],
      filterString: '',
    }
  },
  methods: {
    getText() {
      //...
    },
  },
  computed: {
    filterText() {
      //...
    }
  },
  created() {
    this.getText();
  }
}

Composition API

可以將所有程式碼整合在 setup 中，具有高度的彈性，不受 Options API 將程式碼分散在各個程式邏輯的限制，也可以方便引入外部函式庫。不過 Composition API 相對複雜，需要具有一定的 JS 基礎知識才能進行開發。

把同一個邏輯放在同一個區塊，在功能越來越多時，也能方便維護，不用跳來跳去找程式碼。

const App = {
  setup() {
    //整合程式碼在 setup 中
  }
}

2021-03-30

git push 到 github & Github Pages 筆記

git

筆記 - Composition API 與 Options API 的差別

Options API

Composition API

菜鳥學前端

文章目錄

連結

分類

標籤雲

最新文章

彙整

標籤

最新文章

彙整

標籤