vue父子组件传值的一些问题

最近用vue做项目的时候发现一些问题，当子组件需要接受父组件请求回来的数据时，由于父组件请求是异步的，可能会存在父组件数据还没拿到，但是子组件拿到了父组件传过来的原始值，此时如果需要在子组件created阶段中对数据进行处理，那么可能就得不到想要的结果。例：

// 父组件
<template>
  <view class="content">
    <home-title :list="list"></home-title>
  </view>
</template>

<script>
import homeList from "../../components/home-title/home-title.vue";
export default {
  data() {
    return {
      title: "Hello",
      list: [],
    };
  },
  onLoad() {
    setTimeout(() => {
      const list = ["小红", "小兰", "小明", "小聪"];
      for (let i = 0; i < 4; i++) {
        const obj = {};
        obj.id = i;
        obj.name = list[i];
        this.list.push(obj);
      }
    }, 5000);
  },
  methods: {},
};
</script>

 //子组件
 <template>
  <view class="root">
    <view class="list" v-for="(item, index) in list" :key="item.id">
      {{ index }}-----{{ item.id }}-----{{ item.name }}
    </view>
  </view>
</template>
<script>
export default {
  props: {
    list: {
      type: Array,
      default: [],
    },
  },
  created() {
    console.log(this.list); // 此时子组件结果： [__ob__: Observer]
  },
};
</script>

此时有两种解决方法：

一、在传值给子组件的时候加上判断，当有值的时候才传值

    // 父组件
    `<home-title :list="list" v-if="list.length"></home-title>`

    此时打印结果如下：
    `[{…}, {…}, {…}, {…}, __ob__: Observer]`

二、使用watch监听
    
    // 父组件
    <home-title :list="list"></home-title>
    
    // 子组件
    watch: {
        list(newValue) {
          console.log(newValue); // [{…}, {…}, {…}, {…}, __ob__: Observer]
        },
        deep: true,// 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深
        immediate: true,// 该回调将会在侦听开始之后被立即调用
     }