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的组合,vue2中的生命周期除了卸载阶段名称变了,变成onbeforeUnmount和onUnmounted,其它的只是在前面添加了一个on。
vuex在Composition中使用,手动移入vuex,用reactive定义响应式数据,该数据有属性goods,函数在onMounted生命周期中调用,生命周期中传入的是一个函数。调用vuex的方法,执行后直接给响应式数据属性赋值就行了。
最后在调用toRef或者toRefs对响应式数据属性做个处理,做个处理就可以直接使用这个属性(直接goods),不需要再去用“state.goods"的方式使用了。
ref生成一个响应式数据,可用于模板和reactive(用于模板和reactive不需要通过.value),通过.value修改值。
toRef针对响应式对象的一个属性生成一个ref,ref具有响应式,二者保持引用关系。
toRefs将响应式对象转换成普通对象,对象的每个属性都是一个ref,二者保持引用关系。
要使用Composition中的方法也需要通过renturn导出。
<script> import { useStore } from "vuex"; import { reactive, onMounted, toRef } 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(); }); const goodsRef = toRef(state,'goods'); return { goodsRef, addData }; }, }; </script>
模板中使用
<template> <div class="child-a"> ChildA: <ul> <li v-for="item in goodsRef" :key="item.id">{{ item.name }}</li> </ul> <button @click="addData">ChildA-Add</button> </div> </template>
标签:goods,const,reactive,响应,API,vue3,Composition From: https://www.cnblogs.com/zimengxiyu/p/16995426.html