快捷導(dǎo)航

vue3 Composition API使用示例教程

更新時(shí)間：2022年12月21日 08:48:06 作者：雪旭

Vue3新增了Composition API，我們只需將實(shí)現(xiàn)某一功能的相關(guān)代碼全部放進(jìn)一個(gè)函數(shù)中，然后return需要對外暴露的對象，這篇文章主要介紹了vue3 Composition API使用,需要的朋友可以參考下

Vue3新增了Composition API。我們只需將實(shí)現(xiàn)某一功能的相關(guān)代碼全部放進(jìn)一個(gè)函數(shù)中，然后return需要對外暴露的對象。不同功能的代碼都是一個(gè)個(gè)函數(shù)，最終在setup()函數(shù)中導(dǎo)入這些函數(shù)API，來使用這些功能。

在Vue3中，我們在小型組件仍可以繼續(xù)沿用Options API，而對于大型組件則推薦使用Composition API。

Composition API沒有this，如果要獲取實(shí)例可以通過gitCurrentInstance這個(gè)函數(shù),要使用它，需要手動(dòng)引入，Composition API的生命周期，ref，toRef等要使用的話也是需要手動(dòng)引入的。

<script>
import { useStore } from "vuex";
import { getCurrentInstance } from 'vue'
export default {
  name: "ChildA",
  setup() {
       const instance = getCurrentInstance();
       console.log('instance--',instance);
    return {};
  },
};
</script>

用reactive定義響應(yīng)數(shù)據(jù),reactive作用將一個(gè)普通對象轉(zhuǎn)換成響應(yīng)式對象，和vue2里面的Options里面的data一樣里面的數(shù)據(jù)都是響應(yīng)式的。

生命周期也發(fā)生了一些變化，setup是beforeCreate和created的組合，vue3中的生命周期除了卸載階段名稱變了，變成onbeforeUnmount和onUnmounted,其它的只是在前面添加了一個(gè)on。

vuex在Composition中使用，手動(dòng)移入vuex，用reactive定義響應(yīng)式數(shù)據(jù)，該數(shù)據(jù)有屬性goods,函數(shù)在onMounted生命周期中調(diào)用，生命周期中傳入的是一個(gè)函數(shù)。調(diào)用vuex的方法，執(zhí)行后直接給響應(yīng)式數(shù)據(jù)屬性賦值就行了。

最后在調(diào)用toRef或者toRefs對響應(yīng)式數(shù)據(jù)屬性做個(gè)處理，做個(gè)處理就可以直接使用這個(gè)屬性（直接goods），不需要再去用“state.goods"的方式使用了。toRef或toRefs變量命名建議用xxx.Ref和xxx.Refs。

ref生成一個(gè)響應(yīng)式數(shù)據(jù)，可用于模板和reactive（用于模板和reactive不需要通過.value），通過.value修改值。

toRef針對響應(yīng)式對象的一個(gè)屬性生成一個(gè)ref，ref具有響應(yīng)式，二者保持引用關(guān)系。

toRefs將響應(yīng)式對象轉(zhuǎn)換成普通對象，對象的每個(gè)屬性都是一個(gè)ref,二者保持引用關(guān)系。

要使用Composition中的方法也需要通過renturn導(dǎo)出。

<script>
import { useStore } from "vuex";
import { reactive, onMounted, toRef, toRefs } from 'vue'
export default {
  name: "ChildA",
  setup() {
    const store = useStore();
    const state = reactive({
      goods:[]
    });

    const getData = () => {
      store.dispatch("products/getProducts").then((res) => {
        state.goods = res
      });
    };
    const addData = () => {
      store.dispatch("products/setProducts");
      getData();
    };
    
    onMounted(() => {
      getData();
    });    
    
    //以toRef形式返回
    const goodsRef = toRef(state,'goods');
    return { goodsRef, addData };

     //以toRefs形式返回
    /* const goodsRefs = toRefs(state);
    return goodsRefs */
  },
};
</script>

模板中使用

<template>
  <div class="child-a">
          ChildA:
    <ul>
      <!-- 以toRefs形式返回直接取響應(yīng)式對象屬性 -->
      <!-- <li v-for="item in goods" :key="item.id">{{ item.name }}</li> -->

      <!-- 以toRef形式返回 -->
      <li v-for="item in goodsRef" :key="item.id">{{ item.name }}</li>
    </ul>

    <button @click="addData">ChildA-Add</button>
  </div>
</template>

到此這篇關(guān)于vue3 Composition API使用的文章就介紹到這了,更多相關(guān)vue3 Composition API使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: