TA貢獻1934條經(jīng)驗 獲得超2個贊
在新的 Composition API 下，您之前定義的所有變量都data()只是setup()作為具有反應值的普通變量從您的函數(shù)返回。例如，具有如下數(shù)據(jù)功能的 Vue 2.0 組件：
data() {
return {
foo: 1,
bar: { name: "hi" }
}
}
setup()在 Vue 3 中變成這個函數(shù)：
setup() {
const foo = ref(1);
const bar = reactive({ name: "hi" });
return { foo, bar }
}
幫助ref程序包裝一個非對象值以進行反應，并reactive包裝一個對象。這比舊方法更清楚地揭示了 Vue 的基本原理，在舊方法中，包裝在幕后“神奇地”發(fā)生，但在其他方面表現(xiàn)相同。我個人喜歡它的一點是，你的setup()函數(shù)可以在移動中構建你的對象，同時將相關的東西放在一起，讓它講述一個有凝聚力的故事，而不需要跳到不同的部分。
TA貢獻2080條經(jīng)驗 獲得超4個贊
composition 是 Vue 3 自帶的新功能，作為 Vue 2 的插件，它不會取代舊的選項 api，但它們可以在同一個組件中一起使用。
組合 api 與選項 api 相比：
將邏輯功能收集到可重用的邏輯片段中。
使用一個選項，在創(chuàng)建組件之前執(zhí)行的setup函數(shù)?，一旦道具被解析，并作為組合 API 的入口點。
將舊數(shù)據(jù)選項定義為ref或reactive屬性
計算和監(jiān)視定義為：watch(...,()=>{...})或computed(()=>{...})
定義為純 JavaScript 函數(shù)的方法。
setup使用的選項而不是創(chuàng)建的鉤子，它具有作為參數(shù)的props和context
鉤子mounted可以用作onMounted(()=>{...})，learn more
使用語法，您可以使用,和?...script setup聲明您的反應數(shù)據(jù)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>
舉報