背景：笔者最近在依托Vue框架和可视化组件库DataV在实现简单的数据大屏，尝试从后端获取数据并渲染到页面上，如下图：
可以看到，需要从后端获取数据并渲染，采用数组/对象序列作为data将会更方便，
下面主要以DataV中数字翻牌器为例，解决从后端获取数据后渲染不生效的情况
ps:笔者是小白，有时候往往不求甚解，有不当之处望批评指正啦！~
一、错误案例
封装axios后调用api获取记录总数，并将getData挂载在mounted中。
此时，在函数内部打印的sumRecords，确实为176700，但无论是在mounted中调用getData后打印，还是直接在getData中（getSumRecords外）打印this.sunRecords始终是0...
二、原因分析
由于js的限制，Vue不能检测以下出现变动的数组
①直接利用索引值赋值，如this.dataList[index] = newValue（上述错误应该就是因为这个T T
②修改数组长度，如this.dataList.length = newLength
详解参考：(blog.csdn.net/qq_35713752…)
补充： data中数据格式如下
三、解决方案
其实，DataV官方给出了修改数据的模板，对应于详解中的方法二——重写数组里的整个对象，但是实际并非直接全部属性给他再写一遍（费劲得很！），利用扩展符...来解决即可。
解决步骤如下：
（1）修改数据，对应赋值即可，如this.config.data = response.data.list
（2）重写对象，this.config（新的） = { ...this.config（原来的） }
改造后对应代码如下：
getSumRecords().then(resp => {
// 先改变数据
this.digitalFlopData[0].config.number[0] = resp.data
// 再统一重写对应的对象，this.config = { ...this.config }
this.digitalFlopData[0].config = { ...this.digitalFlopData[0].config }
})
二者缺一不可！！！
补充： 注意number和content有具体类型要求，附上官网原图👇
并且注意：
number中的元素将被用于替换content内容模版中的{nt}标记，其替换顺序与模版标记的顺序一一对应：
const number = [1, 2, 3, 4]
const content = '数字{nt},数字{nt},数字{nt},数字{nt}'
// 实际显示效果：'数字1,数字2,数字3,数字4'
所以不能自己改成数字/字符串喇~
