首页 > 其他分享 >vue3 Composition API使用

vue3 Composition API使用

时间:2022-12-21 00:55:05浏览次数:49  
标签:goods const reactive 响应 API vue3 Composition

  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

相关文章

  • ElasticSearch系列---【SpringBoot集成elasticsearch及常用api的使用方法】
    SpringBoot集成elasticsearch及常用api的使用方法1.在Es官网找到你使用的es版本对应的JavaClient的文档官网地址:https://www.elastic.co/cn/   我这里以7.13.4为......
  • 网页DOM编程方法(API总结与应用)
    目录网页DOM编程Node、Document和Element三者关系DOM编程常用API总结DOM编程API应用网页DOM编程Node、Document和Element三者关系Node:各种类型的DOMAPI对象会从......
  • JS数组和字符串方法(API总结与应用)
    目录ArrayAPI静态方法数组首尾元素处理数组遍历(重要)数组查找数组过滤(重要)数组合并数组删除与截取数组排序StringAPI字符串查找与匹配字符串替换字符串合并字符串首尾空格......
  • 华为云APIArts:API全生命周期一体化解决方案,帮助您端到端呵护您的API
    摘要:华为云APIArts是API设计、API开发、API测试、API托管、API运维、API变现一体化协作平台,通过维护API各开发阶段数据高度一致,支持开发者高效实现API全流程一站式体验。​......
  • supervisor+gunicorn+uvicorn部署fastapi项目
    一、编写一个项目本项目是在虚拟环境下的:先启动虚拟环境:source.venv/bin/activate。(创建虚拟环境自己去找) 项目用于演示,所以非常简单,......
  • 龙邦快递 | 快递单号查询API
    本期讲解:龙邦快递查询快递单号的方法。纯干货,强烈建议收藏/转发给技术人员和管理人员学习。这里推荐大家去抖音(快递鸟)查看视频教程下面具体讲解实现过程。首先我们准备......
  • c++用rapidjson解析json串
    业务需要消息传递以json形式,使用rapidjson。把json所有的值对存进一个map里,再根据业务需要判断指令。定义usingrapidjson_object=rapidjson::GenericObject<false,r......
  • Python 任务自动化工具:nox 的配置与 API
    英文|​​Configuration&API​​​译者|豌豆花下猫@Python猫Github地址:​​https://github.com/chinesehuazhou/nox_doc_cn​​声明:本翻译基于CCBY-NC-SA4.0授权协......
  • Kubernetes监控手册06-监控APIServer
    写在前面如果是用的公有云托管的Kubernetes集群,控制面的组件都交由云厂商托管的,那作为客户的我们就省事了,基本不用操心APIServer的运维。个人也推荐使用云厂商这个服务,......
  • Vue3 清空Reactive定义的数组
    shallowRef定义得数组清空letcomponent_list=shallowRef([{unit:Head,name:'Head',id:1},{unit:TopClass,name:'TopClass',id:2},])component_lis......