问题一、异步问题

问题描述

通过axios循环请求数据，并将返回数据放入到data中的arr中。后续使用拿不到数组中的数据，控制台可以输出数组数据，但是console.log（arr.length) ，输出结果为0

原理及解决方案（简单介绍

一、vue响应式原理方面的问题 涉及vue2响应式原理，它不能监听数组的数据更新。具体原理可以参考：juejin.cn/post/693265… Vue 不允许在已经创建的实例上动态添加新的响应式属性 若想实现数据与视图同步更新，可采取下面三种解决方案：

• Vue.set()
• Object.assign()
• $forcecUpdated()

二、axios是异步请求的问题 即数据还没有从后端拿到，因此可以采用： 1、同步 这里需要解决循环请求数据，如果返回的数据没有先后依赖，则可以通过采用Promise.all来并行请求数据。（注：Promise.all返回的数据与接收到的数组顺序是一样的）然后将返回的数组统一处理。 用法

Promise.all([runAsync(1), runReject(4), runAsync(3), runReject(2)])
  .then(res => console.log(res))
  .catch(err => console.log(err))

2、通过setTimeout等一会儿再进行后续操作。

问题二、数据更新立马获取，获取不到

问题描述

给data中赋值后立马去查看数据的，点击页面某个地块，请求地块具体信息，然后再进行弹框的数据更新，但是弹框数据显示不出来。

原理及解决方案

参考：juejin.cn/post/684490… Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替。

也就是说我们在设置this.msg = 'some thing'的时候，Vue并没有马上去更新DOM数据，而是将这个操作放进一个队列中；如果我们重复执行的话，队列还会进行去重操作；等待同一事件循环中的所有数据变化完成之后，会将队列中的事件拿出来处理。

这样做主要是为了提升性能，因为如果在主线程中更新DOM，循环100次就要更新100次DOM；但是如果等事件循环完成之后更新DOM，只需要更新1次。

为了在数据更新操作之后操作DOM，我们可以在数据变化之后立即使用Vue.nextTick(callback)；这样回调函数会在DOM更新完成后被调用，就可以拿到最新的DOM元素了。