组件props传对象的的坑

问题

对象传递，但是数据更新但页面不更新问题

测试代码

父组件

<template>
  <div>
    <h1>父组件{{object}}</h1>
    <child :obj="object"></child>
  </div>
</template>

<script>
import child from "./child";
export default {
  components: {
    child
  },
  data() {
    return {
      object: {}
    };
  },
  mounted() {
    setTimeout(() => {
      this.object.name = "1234";
      this.object.age = "1234";
      console.log("变化后--父组件", this.object);
    }, 3000);
  }
};
</script>
<style scoped>
</style>

子组件

<template>
  <div>
    <h2>子组件 obj:{{obj}}</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    obj: {
      type: Object,
      default: function() {
        return {
          name:'a',
          age:'a'
        };
      }
    }
  },
  methods: {},
  mounted() {
      console.log('子组件',this.obj);
      
  }
};
</script>
<style scoped>
</style>

数据不更新情况，如下

1.当父组件为空对象时

Vue在实例化的时候会给data中的每个属性加上getter setter以实现响应式更新，但是新增的属性无法实现响应式更新，这里我们的父组件中message初始值为{},3秒中后设置他的属性，因为是新增的属性，实例初始化的时候并没有给这些属性加上getter和setter所以watch失败。

解决方法

this.$set(this.object, "name", "1234");
this.$set(this.object, "age", "1234");

修改后

2.当对象初始化数据与异步数据一致时

object: {
	name: "1234"
}
//异步
this.object.name = "1234";
this.object.age = "1234";

解决方法

初始化数据设置成null.

3. 使用v-if 当拿到值后再渲染组件