请问在Vue2中，如果你在data函数中声明了一个对象属性，那么初始值是赋{}还是null?

Question

如题所示，现在很纠结一个对象类型的属性，初始化赋值应该选哪种？

应该选{}，还是null？选择的理由是什么？有什么区别？求大神能解答下，谢谢

下面是选null

<template>
  <div>
    <p>{{ myObject.name }}</p>
    <button @click="updateObject">更新对象</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myObject: null, // 初始化为 null
    };
  },
  methods: {
    updateObject() {
      // 通过 this.myObject 来访问对象
      this.myObject = { name: 'value' };
    },
  },
    created(){
        this.myObject = { name: 'wt' };
    }
};
</script>

下面选{}

<template>
  <div>
    <p>{{ myObject.name }}</p>
    <button @click="updateObject">更新对象</button>
  </div>
</template>

<script>
export default {
    data() {
      return {
        myObject: {}, // 初始化为{}
      };
    },
    methods: {
      updateObject() {
        // 通过 this.myObject 来访问对象
        this.myObject = { name: 'value' };
      },
    },
    created(){
        this.myObject = { name: 'wt' };
    }
};
</script>

Answer 1

一般建议是数字初始化为0，字符串初始化为空字符，数组初始化为空数组，对象初始化为null，对象为Null更容易判断该对象是否已经被赋值，不过一般区别不大，
但是如果这个对象开始需要参与到视图渲染的，初始化为null可能会导致视图渲染报错，
总之不是固定的

Answer 2

如果每次更新都是直接 替换整个对象 ，那怎么声明都没差别，我个人习惯声明为 null ；如果改动只涉及属性，不涉及对象本身（索引）的替换那就用 {}

要说区别的话，空对象 {} 的布尔值也是 true （因为引用类型赋值后内存空间的索引就存在了），但 null 是 false，从这个角度来说，如果要 判断某个对象是否存在 再进行下一步操作，初始化为 null 是相对合理的选择

但也不是说 {} 就不能判断，只是说要额外操作（比如可以用 Object.keys().length 判断空对象），所以上述也只是我个人的选择，如果团队规范没有明确规定的话，可以参考参考

Answer 3

我的想法是直接用 {}，而不是使用 null。因为在设置为 null 的时候，在 props 传递给子组件是，就不会应用 prop 的 default 默认值。
以及有一些情况下可能会有直接 this.myObj.xxx = xxx 这样的赋值操作，如果没有做好判断是会抛出异常的。

当然直接覆盖掉整个变量，也不会 props 传递给子组件。那么就和楼上的2位大佬说的一样，就无所谓了。用 null 和 {} 都是可以的。