Vue 3 Composition API 数据（）函数

Question

阅读了Vue 3 的composition api 文档，我不太了解新的 Composition API 是如何工作的。你能解释一下这个data()功能在哪里吗？如果不再使用它，应该使用什么来代替？2021 年 10 月 23 日更新：data()链接中的文档已更新和扩展，以在 Composition API 介绍中提及，因此现在不推荐使用此问题。

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

Answer 2

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

组合 api 与选项 api 相比：

1. 将逻辑功能收集到可重用的逻辑片段中。

2. 使用一个选项，在创建组件之前执行的setup函数 ，一旦道具被解析，并作为组合 API 的入口点。

3. 将旧数据选项定义为ref或reactive属性

4. 计算和监视定义为：watch(...,()=>{...})或computed(()=>{...})

5. 定义为纯 JavaScript 函数的方法。

6. setup使用的选项而不是创建的钩子，它具有作为参数的props和context

7. 钩子mounted可以用作onMounted(()=>{...})，learn more

使用语法，您可以使用,和 ...script setup声明您的反应数据refreactivecomputed

<script setup >

import { ref, reactive, computed } from 'vue'

const isActive = ref(false)

const user = reactive({ firstName: 'John', lastName: 'Doe', age: 25 })

const fullName = computed(() => user.firstName + ' ' + user.lastName)

</script>