Vue 3 組合 API 數據（）函數

Question

閱讀 Vue 3 的組合 API 文檔，我不太了解新的組合 API 是如何工作的。 您能否解釋一下data()函數去了哪里，如果不再使用它，應該改用什么？

23.10.2021 更新：鏈接中的文檔已更新和擴展，包括在 Composition API 介紹中提及 data()，因此此問題現已棄用。

Answer 1

在新的 Composition 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 helper 為響應性包裝了一個非對象值，而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選項而不是 created 鈎子，它具有props和context作為參數
7. 像 mount 這樣的鈎子可以用作mounted onMounted(()=>{...}) ，learn more

使用script setup語法，您可以使用ref 、 reactive和computed ... 聲明您的反應數據。

<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>