VUE 3合成API data()函数 [英] Vue 3 Composition API data() function

问题描述

阅读Vue 3的composition api documentation时，我不太理解新的组合API是如何工作的。您能解释一下data()函数到哪里去了吗？如果不再使用它，应该用什么来代替？

更新日期23.10.2021：链接中的文档已更新和扩展，在合成API简介中提到了data()，因此现在不建议使用此问题。

推荐答案

在新的组合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()功能可以在移动中建立你的对象，同时保持相关的东西在一起，允许它讲述一个连贯的故事，而不需要跳到不同的部分。

这篇关于VUE 3合成API data()函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！