vue3.0中setup中异步转同步的实现

目录
  • vue3 setup中异步转同步
    • vue3中setup前加上async后页面不显示
    • 子组件
    • 父组件中需要单独设置
  • 使用vue3中的异步

vue3 setup中异步转同步

vue3中setup前加上async后页面不显示

**问题描述 **在开发 vue3 中，因为通过接口数据为异步函数获取，导致最后数据无法成功赋值进 return 中的数据。所以需要setup函数异步转同步，后设置了async 后异步转同步，结果导致页面空白不显示。

解决问题 在Vue3中，如果当前组件的setup使用了async/await，那么其调用组件的父组件的外层需要嵌套一个suspense标签，例如：

异步组件：

子组件

HTML

<template>
    <div>······</div>
</template>

JS

export default {
    async setup () {
        let ···
        // 接口A
        await getAAA().then(() => {
            ···
        }).catch(() => {
            ···
        })
        // 接口B
        await getBBB().then(() => {
            ···
        }).catch(() => {
            ···
        })
        return {
            ···
        }
    }
}

父组件中需要单独设置

<suspense>
    <async-component/>
</suspense>

使用vue3中的异步

在vue3中使用ajax请求数据的时候，由于不能在setup前面使用async，使用后会导致return的返回值全部变成promise的返回值，所以在执行的时候得使用一些特定的钩子来发送请求

和vue2一样，选择在dom节点渲染完成的时候发送请求，

(getdata为封装的数据)

这样写完之后会发现

页面显示没有数据，但是tableData却可以显示数来数据，但是因为vue的承诺是相应式数据发生改变，页面就会重新渲染，所以是tabledata的响应式被替换成了不能响应的数据

把数据压入原来的设置成响应式的数组就可以检测到了

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue3中的setup执行时机与注意点说明

    Vue3中的setup执行时机与注意点说明

    目录 setup执行时机与注意点 Vue3.0 setup()函数 setup执行时机与注意点 setup执行时机在beforeCreate之前 在setup中是不能使用data和methods,因为还没初始化好 由于不能再setup函数中使用data和methods,所以Vue为了避免我们错误的使用,它直接将setup函数中的this修改成undefined. setup只能同步,不能异步 Vue3.0 setup()函数 setup()函数作为在组件内部使用组合API的入口点.setup()

  • 详解如何在Vue3使用＜script lang=“ts“ setup＞语法糖

    目录 迁移组件 隐式返回 defineProps defineEmits 默认关闭和defineExpose Vue 3.2 引入了语法,这是一种稍微不那么冗长的声明组件的方式.您可以通过向 SFC 的元素添加属性来启用它,然后可以删除组件中的一些样板.script setupsetupscript 让我们举一个实际的例子,并将其迁移到这个语法! 迁移组件 以下组件有两个道具(要显示的和一个标志).基于这两个道具,计算模板中显示的小马图像的URL(通过另一个组件).该组件还会在用户单击它时发出一

  • Vue3在Setup中使用axios请求获取的值方式

    目录 Setup中使用axios请求获取的值 Vue3+Setup使用知识点 Setup中使用axios请求获取的值 上次我们使用axios给项目搞上了网络请求,从此项目数据不再是静态的.对于后端返回的值如何赋值给data里面的变量并且赋予数据响应式,写此日记记录踩坑过程. axios返回的项目数据无法通过函数返回值返回,如何获取返回值呢? <script> import { defineComponent, reactive, onMounted, toRefs, ref } from &q

  • Vue3使用setup如何定义组件的name属性详解

    Vue3使用setup如何定义组件的name属性详解

    目录 问题: 描述: 解决: 第一种: 第二种: 总结 问题: 解决Vue3中使用setup如何定义组件的name属性 描述: 这几天在尝试改写基于vue2的组件至vue3版本,使用了最新的setup也就是如下这种方式编写组件 <script lang="ts" setup> // ...代码块 </script> 由于个人还是比较喜欢Element那种组件注册方式,也就是如下 import TButton from './src/index.vue'; TBu

  • Vue3编程流畅技巧使用setup语法糖拒绝写return

    目录 Vue3.2 setup语法糖 1.<script setup>在<template/>使用 2.<script setup>引入组件将自动注册 3.组件通信: defineProps 代替props defineEmit 代替emit 4.<script setup>需主动向父组件暴露子组件属性 :defineExpose 5.语法糖其他功能 6.在setup访问路由 Vue3.2 setup语法糖 Vue3.2 setup语法糖 [ 单文件组件的语

  • 关于vue3中setup函数的使用

    关于vue3中setup函数的使用

    概述 一. 初识setup函数 组件中所用到的:数据.方法等等均要配置在setup中,这也就意味着在Vue2中写的data.methods在这里都不再推荐使用. 这样的配置让对象式编程趋近于了函数式编程. <script>export default { name: 'App', // 最为原始的对象写法是这样,但是通过es6我们可以简写 // setup: function(){} setup () { // 数据 let name = '黑猫几绛' let age = 20 // 方法 f

  • vue3.0中setup中异步转同步的实现

    vue3.0中setup中异步转同步的实现

    目录 vue3 setup中异步转同步 vue3中setup前加上async后页面不显示 子组件 父组件中需要单独设置 使用vue3中的异步 vue3 setup中异步转同步 vue3中setup前加上async后页面不显示 **问题描述 **在开发 vue3 中,因为通过接口数据为异步函数获取,导致最后数据无法成功赋值进 return 中的数据.所以需要setup函数异步转同步,后设置了async 后异步转同步,结果导致页面空白不显示. 解决问题 在Vue3中,如果当前组件的setup使用了a

  • vue3.0+vite2实现动态异步组件懒加载

    vue3.0+vite2实现动态异步组件懒加载

    创建一个vite项目 性能决定成败;vite确实快: cmd 命令行(默认你已经安装了node & npm),执行npm init @vitejs/app vue-study – --template vue: cd至vue-study,npm install(安装依赖); npm run dev(启动项目): 创建组件 新建一个目录为pages,pages下面再新建一个目录contents,contens下面可以新建具体的组件目录页面,此时目录结构为 App.vue <template&g

  • 精读《Vue3.0 Function API》

    1. 引言 Vue 3.0 的发布引起了轩然大波,让我们解读下它的 function api RFC详细了解一下 Vue 团队是怎么想的吧! 首先官方回答了几个最受关注的问题: Vue 3.0 是否有 break change,就像 Python 3 / Angular 2 一样? 不,100% 兼容 Vue 2.0,且暂未打算废弃任何 API(未来也不).之前有草案试图这么做,但由于用户反馈太猛,被撤回了. Vue 3.0 的设计盖棺定论了吗? 没有呀,这次精读的稿子就是 RFC(Reques

  • vue3.0封装轮播图组件的步骤

    vue3.0封装轮播图组件的步骤

    接着上一篇文章,熟悉vue3.0的基本用法,和使用一段时间以后,开始准备开发适用于vue3.0使用的pc端的组件库.会陆续跟新一些组件库的写法和注意事项,有兴趣的同学可以多多关注哦,不多bb,开始. 开发一个轮播图组件,适用pc端,(暂无考虑app), 使用于vue3.0 + TS 大致的实现效果是这样: 图片自由轮播,对应圆点图片跳转,左右指示器跳转等.暴露以下options配置: 以上是主要的options,下面展开来说一下具体如何封装. 一:封装思想 在vue3.0和vue2.0中封装组件

  • 详解vue3.0 diff算法的使用(超详细)

    前言:随之vue3.0beta版本的发布,vue3.0正式版本相信不久就会与我们相遇.尤玉溪在直播中也说了vue3.0的新特性typescript强烈支持,proxy响应式原理,重新虚拟dom,优化diff算法性能提升等等.小编在这里仔细研究了vue3.0beta版本diff算法的源码,并希望把其中的细节和奥妙和大家一起分享. 首先我们来思考一些大中厂面试中,很容易问到的问题: 1 什么时候用到diff算法,diff算法作用域在哪里? 2 diff算法是怎么运作的,到底有什么作用? 3 在v-f

  • vue3.0中setup使用(两种用法)

    一.setup函数的特性以及作用 可以确定的是 Vue3.0 是兼容 Vue2.x 版本的 也就是说我们再日常工作中 可以在 Vue3 中使用 Vue2.x 的相关语法 但是当你真正开始使用 Vue3 写项目时 你会发现他比 Vue2.x 方便的多 Vue3 的一大特性函数 ---- setup 1.setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数 也就说在 setup函数中是无法 使用 data 和 methods 中的数据和方法的 2.

  • vue3.0中setup的两种用法实例

    目录 前言 一.setup函数的特性以及作用 二.setup函数的注意点: 用法1:结合ref使用 用法2:代码分割 总结 前言 这篇文章主要介绍了vue3.0中setup使用,本文通过两种用法给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下 什么是setup setup是vue3新增的生命周期函数,setup的加入就是为了让vue3使用组合式API(Composition API).使用组合式API更符合大型项目的开发,通过setup可以将该部分抽离成函数,

  • 简单聊聊vue3.0 sfc中setup的变化

    目录 前言 标准的sfc写法 script-setup 变量暴露 组件挂载 props 自定义事件 总结 前言 在vue中,sfc(单文件组件)指的是文件后缀名为.vue的特殊文件格式,它允许将 Vue 组件中的模板.逻辑 与 样式封装在单个文件中. 以下是一个基本的sfc <script> export default {   data() {     return {       greeting: 'Hello World!'     }   } } </script> &l

  • 详解vue3中setUp和reactive函数的用法

    详解vue3中setUp和reactive函数的用法

    1 setUp的执行时机 我们都知道,现在vue3是可以正常去使用methods的. 但是我们却不可以在setUp中去调用methods中的方法. 为什么了??? 我们先了解一下下面这两个生命周期函数,分别是: beforeCreate 表示data 中的数据还没有初始化,是不可以使用的 Created : data已经被初始化了,可以使用 setUp在beforeCreate 和 Created 这两个函数之间. 是不是就知道为啥setUp中不可以去调用methods中的方法了. 2.setU

  • vue3.0中的watch侦听器实例详解

    vue3.0中的watch侦听器实例详解

    目录 前言 侦听器和计算属性的区别 vue3如何使用watch呢? 基本使用 监听多个响应式数据 侦听reactive定义的响应式数据 监听reactive定义的响应式数据的某一个属性 配置选项用法 总结 前言 虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器.这就是为什么 Vue 通过watch选项提供了一个更通用的方法,来响应数据的变化.当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的. 侦听器和计算属性的区别 计算属性里不可以做异步操作,侦听器可以做异步操作

随机推荐