>[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' } ~~~