Data选项 — 非兼容
最后更新于：2022-04-02 08:13:58
>[success] # Data 选项
~~~
1.非兼容：data 组件选项声明不再接收纯 JavaScript object，而需要 function 声明。
2.当合并来自 mixin 或 extend 的多个 data 返回值时，现在是浅层次合并的而不是深层次合并的(只合并根级属性)
~~~
>[info] ## Vue 2.x data Option 的声明
~~~
1.vue2.x data声明形式有两种一种是对象形式，一种是函数形式
~~~
>[danger] ##### 对象形式 -- 常用于 Vue 根实例
~~~
const app = new Vue({
data: {
age:'2021'
}
})
~~~
>[danger] ##### 函数形式 -- 常用于 Vue 组件
~~~
const app = new Vue({
data() {
return {
age:'2021'
}
}
})
~~~
>[info] ## Vue3.x data Option 的声明
~~~
1.在 3.x，data 选项已标准化为只接受返回 object 的 function
~~~
>[danger] ##### 在vue3.x 你只能这么写 -- 用函数的形式
~~~
~~~
>[success] # Mixin 的改变
~~~
1.在vue2.x时候mixin 是进行深层次的合并，vue3.x 变为浅层次
~~~
~~~
const Mixin = {
data() {
return {
user: {
name: 'Jack',
id: 1
},
pwd: '123456'
}
}
}
const CompA = {
mixins: [Mixin],
data() {
return {
user: {
id: 2
},
pwd: '121212'
}
}
}
~~~
>[danger] ##### 2.x
~~~
1.data的合并是深拷贝形式。以ComA的data为主，Mixin的data里的属性将逐一跟ComA的data里的属性比较。
如果属性ComA data里存在的，且是对象，则进入对象内部进行比较；若不是对象，则跳过；如果属性在ComA
data里不存在，则直接添加到ComA data
~~~
* 合并后效果
~~~
{
user: {
id: 2,
name: 'Jack'
},
pwd: '121212'
}
~~~
>[info] ## vue3.x
~~~
1.Vue 3.x不会进入对象的内部进行比较。因此，但 Vue 发现user属性在ComA的data已经存在时，就直接跳过了。
~~~
* 上面案例合并效果
~~~
{
user: {
id: 2
},
pwd: '121212'
}
~~~
';