對比Vue2中Options API 和 Vue3中Composition API

1 Options API

Options API 能夠翻譯爲選項API，字面意思可供使用者挑揀的分類條目，就是框架定義好選項，咱們能夠把咱們的功能寫在選項裏，如props 裏面設置接收參數、data 裏面設置變量、computed 裏面設置計算屬性、watch 裏面設置監聽屬性、methods 裏面設置事件方法你會發現 Options APi 都約定了咱們該在哪一個位置作什麼事。

export default {
  name: 'index',
  data() {
    return {}
  },
  watch: {},
  components: {},
  created() {},
  methods: {},
  computed: {}
}

缺點： 一個功能每每須要在Vue不一樣的配置項中定義屬性和方法，比較分散，若是項目比較小，組件邏輯功能很少，代碼結構還能保持清晰明瞭，可是項目大了後，一個methods中可能包含多個方法甚至幾十個方法，你每每分不清哪一個方法對應哪一個功能，耦合度相對較高。

2 Composition API

Composition API 能夠理解爲組合API，一個小功能的api都會放到一塊兒，下面一個簡單的例子，可能運行會報錯，這裏只是演示寫法。

export default {
  setup(props, context) {
    // 用戶登陸
    const login = reactive({ login: "1" });
    // 登陸驗證
    const loginonSubmit = e => {
      e.preventDefault();
      validate()
        .then(() => {})
        .catch(err => {});
    };

    // 用戶註冊
    const registered = reactive({ registered: "1" });
    const registeredonSubmit = e => {
      e.preventDefault();
      validate()
        .then(() => {})
        .catch(err => {});
    };

    return {
      login 
      loginonSubmit ,
      registered ,
      registeredonSubmit 
    };
  }
};

Composition API 根據邏輯相關性組織代碼，提升可讀性和可維護性，這樣作，即時項目很大，功能不少，咱們都能快速的定位到這個功能所用到的全部API。