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也设置一下超时时间比较好。