Vue 3 组合 API 数据（）函数答案

【问题标题】：Vue 3 Composition API data() functionVue 3 组合 API 数据（）函数
【发布时间】：2021-01-14 04:59:17
【问题描述】：

阅读 Vue 3 的 composition api documentation，我不太了解新的 Composition API 是如何工作的。您能否解释一下data() 函数去了哪里，如果不再使用，应该改用什么？

2021 年 10 月 23 日更新： 链接中的文档已更新和扩展，包括在 Composition API 介绍中提及 data()，因此此问题现已弃用。

【问题讨论】：

它没有消失。必须将data 定义为一个函数，而不仅仅是一个对象。
@MattEllen 我的意思是，如果您查看 Options API 文档vuejs.org/v2/api，您可以在目录的左侧找到它，但是 Сomposition API 的文档没有提及它composition-api.vuejs.org/api.html这让我很困惑。
This article 显示了本质的区别。正如我所说，与data 的区别在于它不能是一个普通的对象，它必须是一个函数。
@MattEllen data 始终必须是一个函数（至少在 Vue 2 中），虽然 Vue 3 仍然支持包含 data 方法的 Options API，但 Composition API 不支持包括data()。
@MattEllen 啊——我假设 OP 指的是构建组件的 data() 方法，而不是实例化 Vue 时传递的 data 属性。后者是正确的。

标签： javascript vue.js vue-component vuejs3 vue-composition-api

【解决方案1】：

在新的 Composition API 下，您之前在 data() 中定义的所有变量都将作为具有反应值的普通变量从您的 setup() 函数中返回。例如，具有如下数据功能的 Vue 2.0 组件：

data() {
  return {
    foo: 1,
    bar: { name: "hi" }
  }
}

在 Vue 3 中成为 setup() 函数：

setup() {
  const foo = ref(1);
  const bar = reactive({ name: "hi" });

  return { foo, bar }
}

ref 帮助器包装了一个非对象值以进行反应，reactive 包装了一个对象。这比旧方式更清楚地揭示了 Vue 的基本原理，旧方式在幕后“神奇地”发生了包装，但在其他情况下表现相同。我个人喜欢它的一点是，您的 setup() 函数可以在旅途中构建您的对象，同时将相关的东西放在一起，让它讲述一个有凝聚力的故事，而不需要跳到不同的部分。

【讨论】：

此外，您仍然可以使用 this.foo 在选项 API 中访问由 setup() 返回的变量。

【解决方案2】：

组合是 Vue 3 附带的新功能，作为 Vue 2 的插件，它不会取代旧的选项 api，但它们可以在同一个组件中一起使用。

组合 api 与选项 api 的比较：

将逻辑功能收集到可重用的逻辑片段中。
使用一个选项，即setup 函数在组件创建之前执行，一旦 props 被解析，并用作组合 API 的入口点。
将旧数据选项定义为 ref 或 reactive 属性
computed 和 watch 定义为：watch(...,()=>{...}) 或 computed(()=>{...})
定义为普通 javascript 函数的方法。
使用setup 选项而不是创建的钩子，它具有props 和context 作为参数
像mounted 这样的钩子可以用作onMounted(()=>{...})、learn more

【讨论】：