vue使用prop传递数值，子组件没有获取到数值

Question

现有一个父组件和一个子组件，

在父组件中，从数据库获取了一个数据，存入了一个map中，

然后将这个数据props给子组件，子组件是一个地图，在生命周期mounted上面直接初始化地图以及使用了props的属性来加载mark点。

但是发现地图加载了，mark点没有加载，最后发现，是由于子组件mounted初始化的时候，props的属性还没有数值。

这个问题怎么解决：

父组件 从数据库获取数据

      /* 从数据库获取初始设备位置数据*/
      async initWzDataFromServer() {
        let data = await getInitData() || []
        data.result.map(item => {
          this.wzSocket.set(item.deviceSn, item)
        })
      },

传递给子组件

 <MapMark :initWzData="wzSocket"/>

子组件获取props

          init() {
        this.initMap()
        this.initMarkerData()
      },


    mounted() {
      this.init()
    },

希望各位可以帮帮忙

补充这是watch

    watch: {
      /* 如果initWzData更新了那么就重新标记点*/
      localWzData: function (newValue) {
        this.initMarkerData()
        // for (let value of newValue.values()) {
        //   console.log(value)
        // }
      }
    },

这是data

    data() {
      return {
        map: null,
        localWzData: this.initWzData
      }
    },

Answer 1

问题解决了，主要是因为我的数据结构使用的是map，所以没法监测到变化，后面我把map换成了数组，可以监测是获取到数据了

Answer 2

console.log('还有这种问题')

Answer 3

用 watch，参考文档 侦听器。

Answer 4

我也刚遇到类似的问题，

Answer 5

给子组件使用v-if来确保prop的属性有值后才开始渲染

Answer 6

async initWzDataFromServer() {
  let data = await getInitData() || []
  this.wzSocket = new Map(
    data.result.map(item => [item.deviceSn, item])
  )
},