Vue 3.0 Data選項

#概覽

• 非兼容：data 組件選項聲明不再接收純 JavaScript object，而需要 function 聲明。

當(dāng)合并來自 mixin 或 extend 的多個 data 返回值時，現(xiàn)在是淺層次合并的而不是深層次合并的(只合并根級屬性)。

#2.x Syntax

在 2.x 中，開發(fā)者可以定義 data 選項是 object 或者是 function。

例如：

<!-- Object 聲明 -->
<script>
  const app = new Vue({
    data: {
      apiKey: 'a1b2c3'
    }
  })
</script>
<!-- Function 聲明 -->
<script>
  const app = new Vue({
    data() {
      return {
        apiKey: 'a1b2c3'
      }
    }
  })
</script>

雖然這對于具有共享狀態(tài)的根實例提供了一些便利，但是由于只有在根實例上才有可能，這導(dǎo)致了混亂。

#3.x Update

在 3.x，data 選項已標(biāo)準(zhǔn)化為只接受返回 object 的 function。

使用上面的示例，代碼只有一個可能的實現(xiàn)：

<script>
  import { createApp } from 'vue'
  createApp({
    data() {
      return {
        apiKey: 'a1b2c3'
      }
    }
  }).mount('#app')
</script>

#Mixin 合并行為變更

此外，當(dāng)來自組件的 data() 及其 mixin 或 extends 基類被合并時，現(xiàn)在將淺層次執(zhí)行合并：

const Mixin = {
  data() {
    return {
      user: {
        name: 'Jack',
        id: 1
      }
    }
  }
}
const CompA = {
  mixins: [Mixin],
  data() {
    return {
      user: {
        id: 2
      }
    }
  }
}

在 Vue 2.x中，生成的 $data 是：

{
  user: {
    id: 2,
    name: 'Jack'
  }
}

在 3.0 中，其結(jié)果將會是：

{
  user: {
    id: 2
  }
}

#遷移策略

對于依賴對象聲明的用戶，我們建議：

• 將共享數(shù)據(jù)提取到外部對象并將其用作 data 中的 property
• 重寫對共享數(shù)據(jù)的引用以指向新的共享對象

對于依賴 mixin 的深度合并行為的用戶，我們建議重構(gòu)代碼以完全避免這種依賴，因為 mixin 的深度合并非常隱式，這讓代碼邏輯更難理解和調(diào)試。