Vue 3 Composition API data() 函数

Question

阅读 Vue 3 的 composition api documentation，我不太了解新的 Composition API 是如何工作的。你能解释一下 data() 功能在哪里吗？如果不再使用它，应该用什么代替？

2021 年 10 月 23 日更新：link 中的文档已更新和扩展，在组合 [=19= 中提到了 data() ] 简介，所以这个问题现在已经弃用了。

Answer 1

在新组合 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 帮助程序包装了一个 non-object 值以进行反应，reactive 包装了一个对象。这比旧方法更清楚地揭示了 Vue 的基本原理，在旧方法中，包装在幕后“神奇地”发生，但在其他方面表现相同。我个人喜欢它的一点是，您的 setup() 函数可以在旅途中构建您的对象，同时将相关的东西放在一起，让它讲述一个有凝聚力的故事，而不需要跳到不同的部分。

Answer 2

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

组合 api 与选项 api 相比：

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

Vue 3 Composition API data() 函数

Vue 3 Composition API data() function

javascript

vue.js

vue-component

vuejs3

vue-composition-api