>[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 你只能这么写 -- 用函数的形式 ~~~ <script> import { createApp } from 'vue' createApp({ data() { return { age:'2021' } } }).mount('#app') </script> ~~~ >[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' } ~~~