2021-08-16 vue 父子组件传对象默认值default: () => {} 语法的一个小坑

众所周知如果这么用：

 props: {
    content: {
      type: Array,
      default: []
    },
}

那么控制台一定会给你报一个错：

[Vue warn]: Invalid default value for prop "content": Props with type Object/Array must use a factory function to return the default value.

根据报错信息提示，Object/Array类型不能直接定义空对象或空数组，必须使用 工厂函数 return 回一个默认值。
至于为什么要返回工厂函数，这里能够得到答案：
https://forum.vuejs.org/t/vue-prop/116083

但。。。这不是我想说的问题。
如果我们按照这个惯性去用，数组和对象例如下面这么去使用（网上很多都是这么写的，会误人子弟。。其实数组和对象的组件传参如果你想用es6的箭头函数表示默认值，尤其是空值，写法还是有区别的。。）：

  props: {
    map: {
      type: Array,
      default: () => [],
    },
    tagMapKeys: {
      type: Object,
      default: () => {},
    },
  },
  created() {
    cosole.log("this.tagMapKeys111111",this.tagMapKeys)
  },

看着好像没毛病。但实际上类型为Object类型这样写是有问题的。。打印this.tagMapKeys你会发现它为undefined

除非你不想用箭头函数你可以如下这么写也不会有问题：

    tagMapKeys: {
      type: Object,
      default: function(){
         return {}
       },
    },

或者

    tagMapKeys: {
      type: Object,
      default() {
         return {}
      },
    },

这是因为引擎识别 { } 是函数作用域而非对象，加了小括号引擎就可以识别了
所以。。如果你想用箭头函数还是对象类型我们应该这么写 () => ({})

    tagMapKeys: {
      type: Object,
      default: () => ({}),
    },

没啥技术含量，仅此记录一下问题，也给正在疑惑或者踩坑的老哥留个醒。。