在vue构建页面的顺序为，父组件构建 → 子组件构建 → 父组件获取异步数据 → 子组件获取父组件异步数据 → 子组件更新，也就是说构建的时候生命周期只会执行一次。

父组件：

<template>
  <div id="app">
    <div>
      父组件：
      <child :child-object="asyncObject"></child>
      <button @click="getData">获取数据</button>
    </div>
  </div>
</template>

<script>
import child from './components/child.vue';
export default {
  name: 'app',
  props: [],
  data() {
    return {
      asyncObject: null,
    };
  },
  components: {
    child,
  },
  methods: {
    getData() {
      setTimeout(() => {
        this.asyncObject = { items: [4, 5, 6] };
        console.log('getData finish');
      }, 2000);
    },
  },
};
</script>

子组件：

<template>
  <span>
    {{childObject}}
  </span>
</template>
 
<script>
export default {
  props: {
    childObject: {
      types: Object,
      defalt: {},
    },
  },
  data() {
    return {};
  },
  methods: {
    updata(val) {
      console.log(val);
    },
  },
  created() {
    this.updata(this.childObject);
  },
};
</script>

刷新页面后，发现子组件打印的是null，生命周期执行完一次之后就不会再执行了，其实这是再正常不过的了，如果每次都想走生命周期，那就只能把组件销毁再生成，例如用v-if这种方法。

如果不想每次都销毁组件，那就需要改动一下子组件，使用watch去动态的监听，也能达到效果：

<template>
  <span>
    {{childObject}}
  </span>
</template>
 
<script>
export default {
  props: {
    childObject: {
      types: Object,
      defalt: {},
    },
  },
  data() {
    return {};
  },
  watch: {
    childObject(n,o) {
      this.updata(o);
      this.updata(n);
    },
  },
  methods: {
    updata(val) {
      console.log(val);
    },
  },
  created() {
    this.updata(this.childObject);
  },
};
</script>

感觉说的有一点乱，可能是表达的不太清楚吧……