Vue 3 beta版本已經(jīng)發(fā)布，其中引入了新的組件配置方式——setup。相較于之前的Options API，setup更加簡潔明了且易于維護(hù)。那么我們來一起了解一下Vue 3 setup的具體用法吧。

在Vue 3中，每個組件都有一個setup函數(shù)。setup函數(shù)是一個模板函數(shù)，它的第一個參數(shù)是一個包含所有屬性的對象（props, attrs, slots, emit），而setup函數(shù)本身可以有返回值。

以下是一個簡單的例子：

import { defineComponent } from 'vue'
export default defineComponent({
props: {
name: String
},
setup(props) {
console.log(props.name)
}
})

在上面的例子中，我們可以看到setup函數(shù)的第一個參數(shù)是props對象，該對象包含了組件的所有屬性。在這里，我們打印出props.name的值。

除了props之外，setup函數(shù)還會接收到attrs、slots和emit對象。attrs對象包含了傳遞給組件的所有非props屬性，而slots對象則包含了插槽的內(nèi)容。emit對象用于通過自定義事件來觸發(fā)父級組件的方法。

下面我們看一下如何在setup函數(shù)中定義一些響應(yīng)式數(shù)據(jù)：

import { defineComponent, ref } from 'vue'
export default defineComponent({
setup() {
const count = ref(0)
return { count }
}
})

在上面的例子中，我們使用了ref函數(shù)來定義一個響應(yīng)式數(shù)據(jù)count，并在setup函數(shù)中返回一個包含count屬性的對象。在這里我們還可以使用reactive函數(shù)來定義響應(yīng)式數(shù)據(jù)對象。

除了定義響應(yīng)式數(shù)據(jù)之外，我們還可以使用computed和watch來實現(xiàn)一些邏輯，例如：

import { defineComponent, ref, computed } from 'vue'
export default defineComponent({
setup() {
const count = ref(0)
const doubleCount = computed(() =>count.value * 2)
const increment = () =>count.value++
return { count, doubleCount, increment }
}
})

在上面的例子中，我們通過computed函數(shù)來定義一個根據(jù)count計算出的雙倍數(shù)doubleCount。同時，我們還定義了一個increment函數(shù)用于增加count的值。

綜上所述，setup函數(shù)是Vue 3中定義組件邏輯的一種新方式。通過使用setup函數(shù)，我們可以更加清晰和簡潔地組織我們的代碼。