• 开始时间：2020-01-10
  • 目标主要版本：3.x
  • 引用 issue：N/A
  • 实现的 PR：N/A

摘要

data 选项接受两种类型的声明：function 或 object。最常见的是 function 声明，因为它为组件的每个实例创建一个新的状态。另一方面，object 声明在所有组件之间共享状态，并且只对根实例起作用。本 RFC 主要关注于删除 data 的 object 声明。

基本范例

N/A

动机

几乎没有根实例拥有共享状态的使用案例。即使你遇到这种情况，也可以用函数声明来实现。两种类型的声明对新手来说并不友好，如果没有适当的例子（目前文档中不存在这种例子），会让人感到困惑。另一个限制是， object 声明只能在根实例上进行，这也令人困惑。通过统一的声明，你可以达到同样的效果，并消除其中定人困惑的部分。

具体设计

object 声明应该不再有效，并产生一个错误，说明只有函数声明对根实例上的数据有效。它还应该包含一个指向 API 和迁移实例的链接。

之前，使用 object 声明：

  1. import { createApp, h } from 'vue'
  3. createApp().mount({
  4.   data: {
  5.     counter: 1,
  6.   },
  7.   render() {
  8.     return [
  9.       h('span', this.counter),
  10.       h('button', {
  11.         onClick: () => { this.counter++ }
  12.       }),
  13.     ]
  14.   },
  15. }, '#app')

之后，使用 function 声明：

  1. import { createApp, h } from 'vue'
  3. createApp().mount({
  4.   data() {
  5.     return {
  6.       counter: 1,
  7.     }
  8.   },
  9.   render() {
  10.     return [
  11.       h('span', this.counter),
  12.       h('button', {
  13.         onClick: () => { this.counter++ }
  14.       }),
  15.     ]
  16.   },
  17. }, '#app')

缺点

使用 object 声明的用户需要迁移到函数声明。

也不可能有顶层的共享状态。

使用 object 声明的例子应该使用 function 声明重写。

备选方案

N/A

采纳策略

由于根实例中的对象声明不是一种常见的模式，所以迁移应该相当容易。由于 v3 中根挂载 API 的变化（你总是使用根组件），这一变化的影响也被最小化。

迁移本身是直截了当的：

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

API 页面应该包含一个信息块，描述 object 声明已经被废弃，并提供如何迁移的指南。

可以提供一个适配器来保留向后的兼容性。

没有解决的问题

N/A