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值都是獨立的非共用的。