javascript - Vue 3 组合 API 数据()函数

Question

阅读composition api documentation对于 Vue 3，我不太了解新的 Composition API 是如何工作的。你能解释一下在哪里data()功能已经消失，如果不再使用，应该改用什么？
2021 年 10 月 23 日更新:链接中的文档已更新和扩展，包括在 Composition API 介绍中提及 data() ，因此现在不推荐使用此问题。

Answer 1

在新的 Composition API 下，您之前在 data() 中定义的所有变量刚从您的 setup() 返回用作具有反应值的正常变量。例如，具有如下数据函数的 Vue 2.0 组件:

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

变成这个 setup() Vue 3 中的函数:

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

  return { foo, bar }
}

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