Vue 3 Composition API data() 函数

Question

阅读Vue 3的组合 API 文档，我不太明白新的 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辅助包装为反应性的非对象值，并reactive封装了一个对象。这比旧方式更清楚地揭示了 Vue 的基本原理，旧方式在幕后“神奇地”进行了包装，但在其他情况下表现相同。我个人喜欢它的一点是，您的setup()函数可以在移动中构建对象，同时将相关事物保持在一起，从而使其能够讲述一个有凝聚力的故事，而无需跳到不同的部分。

Answer 2

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

组合 api 与选项 api 的比较：

1. 将逻辑功能收集成可重用的逻辑片段。
2. 使用一个选项，该setup函数 在创建组件之前、解析 props 后执行，并作为组合 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>