本文讲述了作者在Vue2项目中遇到的异步数据更新DOM不实时的问题，通过探索发现是由于响应式原理导致的，最后通过`$set`方法解决了问题，并反思了对Vue底层理论的应用和实践提升。
场景是这样的，下面表格中的实验次数是从第三方接口请求过来，然后根据id一一对应到表格数据中，但是请求过来的数据一一对应后，并不能实时渲染到DOM中，打印出来的数据也是对的，下面是解决方法和解决过程
原代码：数据是改变了，但是渲染数据没有变
res.data.dataList.map(async item=>{
await this.getTableData(item.PlanId)
item.syNum=this.num
return item
})
解决方法：
res.data.dataList.map(async item=>{
await this.getTableData(item.PlanId)
this.$set(item,'syNum',this.num)
return item
})
出现这种情况的原因：是因为vue2底层的响应式原理是发布订阅模式+数据劫持，这不能检测到对象的添加或删除。
下面说我的从头到尾解决的一个过程
方法一：
首先数据要一一对应，直接在DOM中请求就然后return返回就是了，如图：
但是有一个问题，请求是异步的，返回的只是初始数据，要解决这个问题怎么办呢，当然是async await了，但是async await返回的是一个promise对象呀，这要怎么解决，我尝试用变量去接收 await 之后的值再返回，也不能，看来是此路不通了，那就换个方法。
方法2：
既然DOM中请求直接返回不行，那我在请求返回表格数据的时候，直接循环返回数据，在循环中去请求第三方接口，再做数据处理，如图：
表格数据接口处理：
实验次数接口数据处理：
到此处，打印数据实验次数已经正确，但是DOM中渲染不出来，首先想到让数据实时更新渲染的方法$nexttick() ,想到就用呗
用上再在看看效果，还是不对，这时候就开始想是不是玄学的原因了，没办法就休息，睡一觉起来，再看看。
果然，睡一觉起来就想到了，vue2的响应式弊端。那就再试试呗
欸，可以了，当然这个代码还可以优化一下，我现在是不想动了。后面有时间再说。
反思：对vue的底层理论运用于实践把控还是没有特别精准，没有形成条件反射，显然这次经历让我以后可能遇到的问题又少了一个，加油。
此文章用于加深自己记忆，若对大家没有帮助，敬请理解，大佬勿喷，我胆小
7420
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
