vue3 Composition API使用总结

  Vue3新增了Composition API。我们只需将实现某一功能的相关代码全部放进一个函数中,然后return需要对外暴露的对象。不同功能的代码都是一个个函数,最终在setup()函数中导入这些函数API,来使用这些功能。

在Vue3中,我们在小型组件仍可以继续沿用Options API,而对于大型组件则推荐使用Composition  API。

Composition API没有this,如果要获取实例可以通过gitCurrentInstance这个函数,要使用它,需要手动引入,Composition API的生命周期,ref,toRef等要使用的话也是需要手动引入的。

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

reactive定义响应数据,reactive作用将一个普通对象转换成响应式对象,和vue2里面的Options里面的data一样里面的数据都是响应式的。

生命周期也发生了一些变化,setup是beforeCreate和created的组合,vue3中的生命周期除了卸载阶段名称变了,变成onbeforeUnmount和onUnmounted,其它的只是在前面添加了一个on。

vuex在Composition中使用,手动引入vuex,函数在onMounted生命周期中调用,生命周期中传入的是一个函数。调用vuex的方法,执行后直接给响应式数据属性赋值就行了。

最后在调用toRef或者toRefs对响应式数据属性做个处理,做个处理就可以直接使用这个属性(直接goods),不需要再去用“state.goods"的方式使用了。toRef或toRefs变量命名建议用xxx.Ref和xxx.Refs。

ref生成一个响应式数据,可用于模板和reactive(用于模板和reactive不需要通过.value),通过.value修改值。

toRef针对响应式对象(reactive定义的对象)的一个属性生成一个ref,ref具有响应式,二者保持引用关系。

toRefs将响应式对象reactive定义的对象转换成普通对象,对象的每个属性都是一个ref,二者保持引用关系。

要使用Composition中的方法也需要通过renturn导出,或者使用最新的setup的写法,setup写法可以简化一些代码。

通过toRef和toRefs转换之后可以直接使用变量不用再以obj.name的方式去使用

使用export default 和 vuex的写法,不推荐

<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", {
        id: "2",
        name: "苹果",
        num: 300,
      });
      getData();
    };

    onMounted(() => {
      getData();
    });

    //以toRef形式返回
     const goodsRef = toRef(state,'goods');
    return { goodsRef, addData };

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

 模板中使用 pinia 和setup的写法推荐

这种写法代码量少语法简洁,pinia是专门为Composition API设计的,它是vuex的升级版,setup写法不需要专门写return,变量定义以后可以直接在模板中使用。

<script setup>
import {onMounted, reactive, toRef, toRefs} from 'vue'
import {useStore} from './../store/modules/userStore'

const store = useStore()
store.getUserList();

const state = reactive({
  goods: [],
});

const getData = () => {
  store.getUserList().then(res=>{
    state.goods = res;
  })
};

onMounted(() => {
  getData();
});

//以toRef形式
const goodsRef = toRef(state,'goods');

//以toRefs形式
const { goods } = toRefs(state);

</script>

模板中使用

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

      <!-- 以toRefs形式返回直接取响应式对象属性 -->
      <!-- <li v-for="item in goods" :key="item.id">{{ item.name }}</li> -->
    </ul>
    <button @click="addData">ChildA-Add</button>
  </div>
</template>

 

posted @ 2022-12-21 00:42  雪旭  阅读(209)  评论(0编辑  收藏  举报