Composition API

語雀入口

　https://www.yuque.com/along-n3gko/ezt5z9

介紹

Composition API的主要思想是，我們將它們定義為從新的 setup 函數返回的JavaScript變量，而不是將組件的功能（例如state、method、computed等）定義為對象屬性。

 

案例對比

• 下面是一個經典的vue2的計數器案例.

//Counter.vue
export default {
  data: () => ({
    count: 0
  }),
  methods: {
    increment() {
      this.count++;
    }
  },
  computed: {
    double () {
      return this.count * 2;
    }
  }
}

 

• 下面是使用Composition API定義的完全相同的組件

// Counter.vue
import { ref, computed } from "vue";

export default {
  setup() {
    const count = ref(0);
    const double = computed(() => count * 2)
    function increment() {
      count.value++;
    }
    return {
      count,
      double,
      increment
    }
  }
}

 

ref:導入了ref函數,表示該函數允許我們定義一個響應式變量,其作用與data變量幾乎相同。

count.value：increment方法是一個普通的javascript函數，需要更改子屬性count的value才能更改響應式變量，這是因為使用red創建的響應式變量必須是對象，以便在傳遞的時候保持一致。

 

代碼提取

Composition API的第一個明顯優點是提取邏輯很容易。使用Composition提取上面Counter.vue組件代碼。

//useCounter.js
import { ref, computed } from "vue";

export default function () {
  const count = ref(0);
  const double = computed(() => count * 2)
  function increment() {
    count.value++;
  }
  return {
    count,
    double,
    increment
  }
}

 

代碼重用

要在組件中使用該函數，我們只需將模塊導入組件文件並調用它（注意導入是一個函數）。這將返回我們定義的變量，隨后我們可以從 setup 函數中返回它們。

// MyComponent.js
import useCounter from "./useCounter.js";

export default {
  setup() {
    const { count, double, increment } = useCounter();
    return {
      count,
      double,
      increment
    }
  }
} 

解決mixins命名沖突

在vue2中，可能會有相同命名的變量或者函數，會導致沖突，使用composition代替后，就可以解決了。

export default {
  setup () {
    const { someVar1, someMethod1 } = useCompFunction1();
    const { someVar2, someMethod2 } = useCompFunction2();
    return {
      someVar1,
      someMethod1,
      someVar2,
      someMethod2
    }
  }
}