Vue3 数据延迟显示

本贴最后更新于 1366 天前,其中的信息可能已经时移俗易

问题

本人前端小白,学了一段时间 Vue3.

为了适配自己的笔记在写一个插件.但是中见遇到了一些问题.我也不懂这是个什么问题.

SIyuan 透明.gif

必须要点击两次查询才能够显示数据.

<template> 部分是用 Element-Plus 写的.只是简单的绑定了一下数据.

JS 部分的代码
setup(){ let blocks = ref() let sqlcode = ref("SELECT * FROM blocks WHERE\n" + "content like '%@Project-%'") let currentId= "" let attributes=ref([]) let blocksAttrs=ref([]) //执行SQL function getQueryResult() { sqlQuery(sqlcode.value).then(response => { blocks.value = response.data //获取其属性 getAttr(blocks.value) }) } //查询块的属性 function getAttr(getBlocks){ let block=null for (block in getBlocks){ getBlockAttrs(getBlocks[block].id).then(response => { if (response.data.length != 0){ attributes.value.push(response.data) } }) } setDataView(attributes.value) } //将属性放入对象数组 function setDataView(getAttributes){ console.log("DataViewStart") let attr=null let attrs console.log(getAttributes) for(attrs in getAttributes){ let blockAttrs={} for(attr in getAttributes[attrs]){ let attrKey = getAttributes[attrs][attr].name let attrResult = getAttributes[attrs][attr].value blockAttrs[attrKey] = attrResult } blocksAttrs.value.push(blockAttrs) } console.log(blocksAttrs.value) } }
  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    25909 引用 • 107369 回帖
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    9948 引用 • 45189 回帖 • 77 关注

相关帖子

被采纳的回答
  • clark-cui

    没这么复杂吧,你代码都是同步的。只有思源接口是异步的,你用 promise 包一下思源的接口,接口返回后再去执行你的代码就行。
    // 接口
    return new promise((resoleve,reject)=>{

    // 调用 api,成功 resolve(res),失败 reject(e)

    })

    // 业务代码
    siyuanapi.then(res=>{
    // your code
    }).catch(e=>{})

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • clark-cui 1 评论

    调试和你打包出来的本来就不一样,一个是开发环境,不压缩代码,带 source-map 方便调试。一个是生成环境,代码包尽量缩小。不用怀疑,就是 vite 配置问题,这个应该是你配置里有 base 这个属性。查一查文档,就知道了。实在查不到,那就只能去 github 去搜 vite 的代码,看看人家怎么配的。
    不过,我还是建议你直接用别人配好的脚手架一把梭就行,初期不用太在意这些配置。

    谢谢老哥, 问了一下别人,确实是 Vite 配置的问题
    crowds21
  • 其他回帖
  • crowds21

    大佬我又来了.😭

    为什么我现在运行的时候啥事儿没有,build 之后 URL 并没有被正常替换掉.这个是和什么有关系呢,Vite 配置吗,我该配的应该都弄了.还是需要设置环境什么的.

    BECNGH4OER1X2SR.png

    1 回复
  • crowds21

    三个函数结尾处的 console.log blocks attributes 和 blocks

    image.png

    image.png

    似乎是因为 getAttr 还没有处理完数据,setDataView 函数就已经执行完了.这是要加一个 Promise 吗

  • clark-cui

    代码改一改吧,方便 debug。外面没有使用双向绑定的数据就别用 ref 了,多包一层 proxy 没必要,如果是多层的绑定用 reactive。循环的变量声明写括号里,let null 之类的写法,直接 let 就行,!=0 这种写法也别用,我不确定你的数据格式,如果是数组,别用 for in 来循环,用 for 循环或者 for of。如果是对象直接.就完事了,没必要写[]。不要用两个 for 循环,平方级复杂度了,看你处理啥数据了,假设是数组,用...直接解构,一个 for 循环拼起来就行;如果是对象,参考下树的遍历咋写的。

    2 回复
  • 查看全部回帖
crowds21
不带评论的观察是人类智力的最高形式 上海

推荐标签 标签

  • 心情

    心是产生任何想法的源泉,心本体会陷入到对自己本体不能理解的状态中,因为心能产生任何想法,不能分出对错,不能分出自己。

    59 引用 • 369 回帖
  • 持续集成

    持续集成(Continuous Integration)是一种软件开发实践,即团队开发成员经常集成他们的工作,通过每个成员每天至少集成一次,也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证,从而尽早地发现集成错误。

    15 引用 • 7 回帖 • 1 关注
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 35 关注
  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统,主要使用于便携设备。2005 年由 Google 收购注资,并拉拢多家制造商组成开放手机联盟开发改良,逐渐扩展到到平板电脑及其他领域上。

    336 引用 • 324 回帖
  • Openfire

    Openfire 是开源的、基于可拓展通讯和表示协议 (XMPP)、采用 Java 编程语言开发的实时协作服务器。Openfire 的效率很高,单台服务器可支持上万并发用户。

    6 引用 • 7 回帖 • 119 关注
  • FFmpeg

    FFmpeg 是一套可以用来记录、转换数字音频、视频,并能将其转化为流的开源计算机程序。

    23 引用 • 32 回帖
  • HBase

    HBase 是一个分布式的、面向列的开源数据库,该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable:一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样,HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 66 关注
  • GitHub

    GitHub 于 2008 年上线,目前,除了 Git 代码仓库托管及基本的 Web 管理界面以外,还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱(报表)、代码片段分享(Gist)等功能。正因为这些功能所提供的便利,又经过长期的积累,GitHub 的用户活跃度很高,在开源世界里享有深远的声望,并形成了社交化编程文化(Social Coding)。

    209 引用 • 2040 回帖
  • API

    应用程序编程接口(Application Programming Interface)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。

    79 引用 • 431 回帖
  • PostgreSQL

    PostgreSQL 是一款功能强大的企业级数据库系统,在 BSD 开源许可证下发布。

    22 引用 • 22 回帖
  • 人工智能

    人工智能(Artificial Intelligence)是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门技术科学。

    115 引用 • 317 回帖 • 1 关注
  • Sublime

    Sublime Text 是一款可以用来写代码、写文章的文本编辑器。支持代码高亮、自动完成,还支持通过插件进行扩展。

    10 引用 • 5 回帖
  • MongoDB

    MongoDB(来自于英文单词“Humongous”,中文含义为“庞大”)是一个基于分布式文件存储的数据库,由 C++ 语言编写。旨在为应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的。它支持的数据结构非常松散,是类似 JSON 的 BSON 格式,因此可以存储比较复杂的数据类型。

    91 引用 • 59 回帖 • 5 关注
  • CentOS

    CentOS(Community Enterprise Operating System)是 Linux 发行版之一,它是来自于 Red Hat Enterprise Linux 依照开放源代码规定释出的源代码所编译而成。由于出自同样的源代码,因此有些要求高度稳定的服务器以 CentOS 替代商业版的 Red Hat Enterprise Linux 使用。两者的不同在于 CentOS 并不包含封闭源代码软件。

    240 引用 • 224 回帖
  • OpenShift

    红帽提供的 PaaS 云,支持多种编程语言,为开发人员提供了更为灵活的框架、存储选择。

    14 引用 • 20 回帖 • 662 关注
  • Redis

    Redis 是一个开源的使用 ANSI C 语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库,并提供多种语言的 API。从 2010 年 3 月 15 日起,Redis 的开发工作由 VMware 主持。从 2013 年 5 月开始,Redis 的开发由 Pivotal 赞助。

    284 引用 • 248 回帖
  • 强迫症

    强迫症(OCD)属于焦虑障碍的一种类型,是一组以强迫思维和强迫行为为主要临床表现的神经精神疾病,其特点为有意识的强迫和反强迫并存,一些毫无意义、甚至违背自己意愿的想法或冲动反反复复侵入患者的日常生活。

    15 引用 • 161 回帖 • 6 关注
  • 游戏

    沉迷游戏伤身,强撸灰飞烟灭。

    185 引用 • 825 回帖
  • 知乎

    知乎是网络问答社区,连接各行各业的用户。用户分享着彼此的知识、经验和见解,为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖 • 1 关注
  • 博客

    记录并分享人生的经历。

    273 引用 • 2388 回帖
  • Logseq

    Logseq 是一个隐私优先、开源的知识库工具。

    Logseq is a joyful, open-source outliner that works on top of local plain-text Markdown and Org-mode files. Use it to write, organize and share your thoughts, keep your to-do list, and build your own digital garden.

    7 引用 • 69 回帖 • 4 关注
  • 创业

    你比 99% 的人都优秀么?

    82 引用 • 1395 回帖 • 1 关注
  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    25909 引用 • 107368 回帖
  • 七牛云

    七牛云是国内领先的企业级公有云服务商,致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景,七牛先后推出了对象存储,融合 CDN 加速,数据通用处理,内容反垃圾服务,以及直播云服务等。

    29 引用 • 230 回帖 • 126 关注
  • PHP

    PHP(Hypertext Preprocessor)是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点,主要适用于 Web 开发领域,据说是世界上最好的编程语言。

    167 引用 • 408 回帖 • 489 关注
  • RemNote
    2 引用 • 16 回帖 • 19 关注
  • 黑曜石

    黑曜石是一款强大的知识库工具,支持本地 Markdown 文件编辑,支持双向链接和关系图。

    A second brain, for you, forever.

    24 引用 • 242 回帖