数据选项

重大变更

概述

• 重大变更: data 组件选项声明不再接受普通的 JavaScript object，并期望一个 function 声明。

• 重大变更: 当合并来自 mixin 或 extends 的多个 data 返回值时，合并现在是浅层而不是深层（仅合并根级属性）。

2.x 语法

在 2.x 中，开发者可以使用 object 或 function 定义 data 选项。

例如

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

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

虽然这在根实例具有共享状态方面提供了一些便利，但由于它仅在根实例上可能，因此导致了混淆。

3.x 更新

在 3.x 中，data 选项已标准化为仅接受返回 object 的 function。

使用上面的示例，代码将只有一种可能的实现

<script>
  import { createApp } from 'vue'

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

Mixin 合并行为变更

此外，当合并组件及其 mixin 或 extends 基类的 data() 时，合并现在是浅层执行的

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 中，结果将是

{
  "user": {
    "id": 2
  }
}

迁移构建标志: OPTIONS_DATA_FN

迁移策略

对于依赖于对象声明的用户，我们建议

• 将共享数据提取到外部对象，并在 data 中将其用作属性
• 将对共享数据的引用重写为指向新的共享对象

对于依赖于 mixin 的深层合并行为的用户，我们建议重构您的代码以完全避免这种依赖，因为来自 mixin 的深层合并非常隐式，并且会使代码逻辑更难理解和调试。

迁移构建标志

• OPTIONS_DATA_FN
• OPTIONS_DATA_MERGE