Type of the default value for 'propsTree' prop must be a function

Type of the default value for ‘propsTree’ prop must be a function

今天在运行项目时候发现有报错信息，心里很难受，怎么可以有红。

环境：

vue cli 3.0初始化带有eslint项目

触发位置：

组件的props内部

思考：

之前没怎么用eslint，也很少用到设置默认值，因此没有发现这样的问题。

...
props: {
	treeData: {
      type: Array,
      default: []
    },
	propsTree: {
   		default: {},
   		type: Object
	},
}
...

propsTree明明是需要一个对象，为什么还报错默认值是要一个方法，原需要的对象不能改变，又想要是方法，只能改成方法返回对象了。

...
props: {
	treeData: {
      type: Array,
      default: () => []
    },
	propsTree: {
      default: () => ({
        children: 'children',
        label: 'label'
      }), // 返回对象要用()包裹，或者写成{return {...}}
      type: Object
    },
}
...

果然解决了！！！查找一番，发现vue官网教程示例里面有说要用方法但是没说原因。github上vue仓库有一个关于本问题的Issues。

根据我的理解，对象、数组的默认值需要使用工厂函数获取是因为：不使用的情况下，如果没有对对应的prop传参，组件使用了默认值，此时所有的组件实例会共用这个默认值，因此会产生很多问题，每一个组件实例不再是独立的一部分；使用之后可以保证每个组件实例的prop值都是独立的非共用的。