Vue3 数据延迟显示

问题

本人前端小白,学了一段时间 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)
    }
}
  • Vue.js

    Vue.js(读音 /vjuː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    232 引用 • 652 回帖 • 433 关注
  • 思源笔记求助问答
    720 引用 • 2483 回帖 • 7 关注
  • Q&A

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

    2585 引用 • 14386 回帖 • 514 关注

广告 我要投放

被采纳的回答
  • clark-cui
    订阅者

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

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

    })

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

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • clark-cui
    订阅者

    这跟 vue3 没关系吧,代码执行有问题吧。你打几个断点 debug 下,看看具体执行,就知道错在哪里了。或者就加几个 console,看看打印顺序

    1 回复
  • clark-cui
    订阅者

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

    2 回复
  • crowds21
    订阅者 作者

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

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

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

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

  • crowds21
    订阅者 作者

    数据是访问思源接口获得的.整个过程是

    • 获取思源中特定的文本块
    • 再获取文本块的属性
    • 每个文本块的属性放入一个对象
    • 最后所有对象放入数组
    • 表格显示

    js 没怎么写过,语法规范这些我确实不熟悉,感谢老哥.

  • crowds21
    订阅者 作者

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

    image.png

    image.png

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

  • clark-cui 2 评论
    订阅者

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

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

    })

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

    1 回复
    晚上再试一下,感谢.没写过 JS 属实头大了
    crowds21
    调了半天,发现是因为异步请求导致获取的数组 length 为 0.
    crowds21
  • crowds21
    订阅者 作者

    大佬我又来了.😭

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

    BECNGH4OER1X2SR.png

    1 回复
  • clark-cui 1 评论
    订阅者

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

    谢谢老哥, 问了一下别人,确实是 Vite 配置的问题
    crowds21
请输入回帖内容 ...