解决vue3百度地图的实时更新问题

最新推荐文章于 2025-07-26 07:30:00 发布

原创最新推荐文章于 2025-07-26 07:30:00 发布 · 712 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文介绍了一种在Vue应用中实现百度地图上标记点实时更新的方法。通过使用watch监听器来观察特定数组的变化，并利用async/await配合nextTick确保DOM更新后调用地图渲染方法。

问题描述：要实现当数据变化时百度地图上的标记点跟随数据，重新渲染
需要用到监听器,

解决方案

watch(
  godown,#监听到该数组的变化，来渲染百度地图
  async () => {#通过async await来阻塞nextTick方法
    await nextTick();#当你在 Vue 中更改响应式状态时，最终的 DOM 更新并不是同步生效的，而是由 Vue 将它们缓存在一个队列中，直到下一个“tick”才一起执行。这样是为了确保每个组件无论发生多少状态改变，都仅执行一次更新。
    getMap()#渲染百度地图的方法
  },
  { deep: true }
);