Vue3 数据延迟显示

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

问题

本人前端小白,学了一段时间 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) } }
  • 思源笔记

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

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

    25899 引用 • 107319 回帖
  • Q&A

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

    9947 引用 • 45173 回帖 • 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

    我试过了,第一次点击 button 的时候,setDataView 里面的 blocksAttrs 输出是 undefine.

    然后第二次点击就有数据了.

    主要是我前端不是很熟悉,我并不知道该用什么手段去解决这个问题. 比如是因为需要加一个 Promise 来限制函数的执行顺序吗?还是 ref() 用的不对?

    我就每天抽空稍微弄一弄,好几天才写了这点.😭 让我改我也整不出个头绪.

  • crowds21

    大佬我又来了.😭

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

    BECNGH4OER1X2SR.png

    1 回复
  • clark-cui

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

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

推荐标签 标签

  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务,所以该项目也已经停止维护了!

    35 引用 • 468 回帖 • 762 关注
  • 游戏

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

    185 引用 • 825 回帖
  • OAuth

    OAuth 协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是 oAuth 的授权不会使第三方触及到用户的帐号信息(如用户名与密码),即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权,因此 oAuth 是安全的。oAuth 是 Open Authorization 的简写。

    36 引用 • 103 回帖 • 34 关注
  • C

    C 语言是一门通用计算机编程语言,应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    86 引用 • 165 回帖 • 1 关注
  • Hadoop

    Hadoop 是由 Apache 基金会所开发的一个分布式系统基础架构。用户可以在不了解分布式底层细节的情况下,开发分布式程序。充分利用集群的威力进行高速运算和存储。

    92 引用 • 122 回帖 • 621 关注
  • TextBundle

    TextBundle 文件格式旨在应用程序之间交换 Markdown 或 Fountain 之类的纯文本文件时,提供更无缝的用户体验。

    1 引用 • 2 回帖 • 83 关注
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统,实现一个自托管的 Git 项目仓库,可通过 Web 界面操作公开或私有项目。

    46 引用 • 72 回帖 • 2 关注
  • Log4j

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

    20 引用 • 18 回帖 • 34 关注
  • Lute

    Lute 是一款结构化的 Markdown 引擎,支持 Go 和 JavaScript。

    29 引用 • 202 回帖 • 28 关注
  • 微服务

    微服务架构是一种架构模式,它提倡将单一应用划分成一组小的服务。服务之间互相协调,互相配合,为用户提供最终价值。每个服务运行在独立的进程中。服务于服务之间才用轻量级的通信机制互相沟通。每个服务都围绕着具体业务构建,能够被独立的部署。

    96 引用 • 155 回帖
  • Sphinx

    Sphinx 是一个基于 SQL 的全文检索引擎,可以结合 MySQL、PostgreSQL 做全文搜索,它可以提供比数据库本身更专业的搜索功能,使得应用程序更容易实现专业化的全文检索。

    1 引用 • 222 关注
  • Swift

    Swift 是苹果于 2014 年 WWDC(苹果开发者大会)发布的开发语言,可与 Objective-C 共同运行于 Mac OS 和 iOS 平台,用于搭建基于苹果平台的应用程序。

    34 引用 • 37 回帖 • 553 关注
  • jsoup

    jsoup 是一款 Java 的 HTML 解析器,可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API,可通过 DOM,CSS 以及类似于 jQuery 的操作方法来取出和操作数据。

    6 引用 • 1 回帖 • 490 关注
  • Quicker

    Quicker 您的指尖工具箱!操作更少,收获更多!

    37 引用 • 157 回帖 • 2 关注
  • 阿里巴巴

    阿里巴巴网络技术有限公司(简称:阿里巴巴集团)是以曾担任英语教师的马云为首的 18 人,于 1999 年在中国杭州创立,他们相信互联网能够创造公平的竞争环境,让小企业通过创新与科技扩展业务,并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 58 关注
  • Sym

    Sym 是一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)系统平台。

    下一代的社区系统,为未来而构建

    524 引用 • 4601 回帖 • 712 关注
  • OnlyOffice
    4 引用 • 25 关注
  • golang

    Go 语言是 Google 推出的一种全新的编程语言,可以在不损失应用程序性能的情况下降低代码的复杂性。谷歌首席软件工程师罗布派克(Rob Pike)说:我们之所以开发 Go,是因为过去 10 多年间软件开发的难度令人沮丧。Go 是谷歌 2009 发布的第二款编程语言。

    499 引用 • 1395 回帖 • 245 关注
  • Markdown

    Markdown 是一种轻量级标记语言,用户可使用纯文本编辑器来排版文档,最终通过 Markdown 引擎将文档转换为所需格式(比如 HTML、PDF 等)。

    171 引用 • 1537 回帖
  • FreeMarker

    FreeMarker 是一款好用且功能强大的 Java 模版引擎。

    23 引用 • 20 回帖 • 464 关注
  • Dubbo

    Dubbo 是一个分布式服务框架,致力于提供高性能和透明化的 RPC 远程服务调用方案,是 [阿里巴巴] SOA 服务化治理方案的核心框架,每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 615 关注
  • WebClipper

    Web Clipper 是一款浏览器剪藏扩展,它可以帮助你把网页内容剪藏到本地。

    3 引用 • 9 回帖 • 1 关注
  • Sublime

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

    10 引用 • 5 回帖
  • Gitea

    Gitea 是一个开源社区驱动的轻量级代码托管解决方案,后端采用 Go 编写,采用 MIT 许可证。

    5 引用 • 16 回帖 • 1 关注
  • Hibernate

    Hibernate 是一个开放源代码的对象关系映射框架,它对 JDBC 进行了非常轻量级的对象封装,使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。

    39 引用 • 103 回帖 • 727 关注
  • WordPress

    WordPress 是一个使用 PHP 语言开发的博客平台,用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统(CMS)来使用。WordPress 是一个免费的开源项目,在 GNU 通用公共许可证(GPLv2)下授权发布。

    45 引用 • 114 回帖 • 176 关注
  • DNSPod

    DNSPod 建立于 2006 年 3 月份,是一款免费智能 DNS 产品。 DNSPod 可以为同时有电信、网通、教育网服务器的网站提供智能的解析,让电信用户访问电信的服务器,网通的用户访问网通的服务器,教育网的用户访问教育网的服务器,达到互联互通的效果。

    6 引用 • 26 回帖 • 538 关注