vue3 迁移 - data 选项接收值类型和合并方式

data 组件选项声明不再接收纯 JavaScript object，而需要 function 声明

就是 vue2 根组件的 data 可以是 object 或 function, vue3 所有组件的 data 只可以是 function

// vue2
data: {
	s: 2
},
// 这种写法作废

在 data 改变了的还有 Mixin 行为

举例

var c1 = {
	data: function() {
		return {
			u: {
				c1: "c1-1",
				c2: "c1-2",
				c3: "c1-3",
			},
			c1: "c1-1",
			c2: "c1-2",
			c3: "c1-3",
		}
	},
};

var c3 = {
	mixins: [c1],
	data: function() {
		return {
			u: {
				c1: "c3-1",
			},
			c1: "c3-1",
		}
	},
	created() {
		console.log(this.$data)
	},
};

vue2 mixins 是无论浅层属性还是深层属性, 都是"c3 覆盖 c1 的结果, 作为 c3 的 mixins 结果"
结果如下

// vue2
{
	"u": {
		"c1": "c3-1",
		"c2": "c1-2",
		"c3": "c1-3"
	},
	"c1": "c3-1",
	"c2": "c1-2",
	"c3": "c1-3"
}

vue3 mixins 仅有浅层属性, 才有"c3 覆盖 c1 的结果, 作为 c3 的 mixins 结果"
同名的浅层属性被替换掉, 深层属性自然就不再被考虑了
结果如下

// vue3
{
	"u": {
		"c1": "c3-1"
	},
	"c1": "c3-1",
	"c2": "c1-2",
	"c3": "c1-3"
}

这里可以对比浅拷贝深拷贝来思考

参考材料:Vue.js

end