目前在Vue世界中，最熱門的話題是Composition API，這是Vue 3.0中引入的基于函數(shù)的API。在本文中，我們將學(xué)習(xí)這個新API，然后學(xué)習(xí)如何使用基于函數(shù)的API。我也嘗試以盡可能簡單的方式解釋它。

所以，讓我們開始吧~

在我們深入探討之前，無需擔(dān)心組合API將徹底改變Vue。Composition API是現(xiàn)有組件附加的功能，因此Vue 3.0中沒有重大更改，此外，Vue團隊還創(chuàng)建了一個與Vue 2.x兼容的插件（vue-composition）。

我們先來看一些問題！

為什么需要Vue的組合API？

隨著Vue的日益普及，人們也開始在大型和企業(yè)級應(yīng)用程序中采用Vue。由于這種情況，在很多情況下，此類應(yīng)用程序的組件會隨著時間的推移而逐漸增長，并且有時使用單文件組件人們很難閱讀和維護。因此，需要以邏輯方式制動組件，而使用Vue的現(xiàn)有API則不可能。

Vue已有的替代方案缺點是什么？

在引入新的API之前，Vue還有其他替代方案，它們提供了諸如mixin，HOC（高階組件），作用域插槽之類的，提高組件之間的復(fù)用性，但是所有方法都有其自身的缺點，由于它們未被廣泛使用。

1. Mixins：一旦應(yīng)用程序包含一定數(shù)量的mixins，就很難維護。開發(fā)人員需要訪問每個mixin，以查看數(shù)據(jù)來自哪個mixin。
2. HOC：這種模式不適用于.vue 單文件組件
3. 作用域插槽：在組件模板中放置了越來越多的插槽，導(dǎo)致數(shù)據(jù)來源不明確。

簡而言之，組合API有助于

1. 由于API是基于函數(shù)的，因此可以有效地組織和編寫可復(fù)用的代碼。
2. 通過將共享邏輯分離為功能來提高代碼的可讀性。
3. 實現(xiàn)代碼分離。
4. 在Vue應(yīng)用程序中更好地使用TypeScript。

讓我們來使用API構(gòu)建一個簡單的應(yīng)用程序。

1）導(dǎo)入vue-composition插件

npm install @vue/composition-api --save

2）在導(dǎo)入任何其他API之前，將插件安裝到Vue應(yīng)用程序。需在其他任何插件之前進行注冊，Composition API可以在其他插件中使用，就像它是Vue的內(nèi)置功能一樣。

import VueCompositionApi from '@vue/composition-api';
Vue.use(VueCompositionApi);

3）使用組合API，讓我們創(chuàng)建一個小的功能以更好地了解API。創(chuàng)建一個名為composition-fns的新文件夾，并創(chuàng)建一個名為 toggle.js 的文件

在這里，我們從API導(dǎo)入ref，并使用它聲明變量 isVisible，其默認(rèn)值為 false。除此之外，還有一種稱為“切換”的方法，它負(fù)責(zé)用于切換 isVisible 的值。

import { ref } from "@vue/composition-api";


export const useToggle = () => {
  const isVisible = ref(false);


  const toggle = () => {
    return (isVisible.value = !isVisible.value);
  };


  return {
    isVisible,
    toggle
  };
};

4）首先，導(dǎo)入useToggle 函數(shù)，然后在組件中使用，Composition API提供了 setUp() 函數(shù)。這個啟動函數(shù)再組件渲染時會執(zhí)行。

import { useToggle } from "./composition-fn/toggle";


setup() {
  const { isVisible, toggle } = useToggle();
  // expose to template
  return {
    isVisible,
    toggle
  };
}

5）最后，模板由按鈕和div組成，以顯示和隱藏切換值。

<div>{{ isVisible }}</div>


<button type="button" @click="toggle">
  {{isVisible ? 'hide' : 'show' }} Toggle
</button>

點“閱讀原文”查看完整代碼！

main.js

import Vue from "vue";
import App from "./App.vue";
import VueCompositionApi from '@vue/composition-api';

Vue.use(VueCompositionApi);

Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

app.vue

<template>
  <div id="app">
    <div>{{ isVisible }}</div>
    <button type="button" @click="toggle">{{isVisible ? 'hide' : 'show' }} Toggle</button>
  </div>
</template>

<script>
import { useToggle } from "./composition-fn/toggle";
export default {
  name: "App",
  setup(props, context) {
    const { isVisible, toggle } = useToggle();
    // expose to template
    return {
      isVisible,
      toggle
    };
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

composition-fn/toggle.js

import { ref } from "@vue/composition-api";

export const useToggle = () => {
  const isVisible = ref(false);

  const toggle = () => {
    console.log(isVisible);
    return (isVisible.value = !isVisible.value);
  };

  return {
    isVisible,
    toggle
  };
};