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