粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

需要调研 vue 2 到 vue 3 的迁移方案，来做内部分享。

我看网上貌似目前只有一人翻译了，翻译了前几章。

但是我着急用，只能自己翻了。译者四级没过，全靠有道和谷歌了。

vue 3 官方文档原文—— data option

Data 选项 `breaking`

概览

破坏性改动：

data 选项只可声明为 function，不可再使用纯粹的 object 来声明。

2.x 语法

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

例如：

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

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

尽管这种方式在共享根实例状态方面提供了一些便利，但是也导致了可能在根实例上出现混淆的情况。

3.x 语法

在 3.x 中，data 选项已标准化，只能使用返回 object 的 function 来声明。

上面的示例在 3.x 中只有一种实现方式：

<script>
  import { createApp } from 'vue'

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

迁移策略

对于使用 object 来声明的开发者，我们建议：

将共享的数据提取到外部对象中，并将其用作 data 中的属性
重写对共享数据的引用，以指向新的共享对象 (Rewrite references to the shared data to point to a new shared object)
版权声明：著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。作者: zhaozhe0831 原文链接：https://juejin.im/post/6865126297602818056

Data 选项 breaking

概览

2.x 语法

3.x 语法

迁移策略

Data 选项 `breaking`