Vue3 大量赋值导致reactive响应丢失问题

问题阐述

       

        如上图所示,我定义了响应式对象arr=reactive({data:[]}),尝试将indexedDB两千条数据一口气赋值给arr.data。但事与愿违,页面上的{{}}在展示先前数组的三秒后变为空。

问题探究

vue3的响应应该与console.log有异曲同工之妙,如下图所示,我使用console.log打印reactive对象时,会访问即时数据,此时赋值操作并未结束,列表元素为空?!但当我们展开这个reactive对象会发现数组此时此刻有731个元素(无特殊意义)。

问题解决

        从其他文章得到灵感,我们可以把赋值操作搬进cursorGetData(db, storeName,target)这个函数里,通过数组对象内置的push函数添加元素,可以使reactive保持响应,并持续更新数据,直到游标走完。(内部target能修改外部arr.data应该是浅拷贝的缘故)

        推此及彼,axios.post也设置一下超时时间比较好。

上一篇:Prompt-RAG:在特定领域中应用的革新性无需向量嵌入的RAG技术


下一篇:与 IRIS 的连接