Vue 3.0 Data選項(xiàng)

#概覽

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

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

#2.x Syntax

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

例如：

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


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

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

#3.x Update

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

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

<script>
  import { createApp } from 'vue'


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

#Mixin 合并行為變更

此外，當(dāng)來自組件的 data() 及其 mixin 或 extends 基類被合并時(shí)，現(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é)果將會(huì)是：

{
  user: {
    id: 2
  }
}

#遷移策略

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

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

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