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

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

以下是一個簡單的例子：

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

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

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

下面我們看一下如何在setup函數中定義一些響應式數據：

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

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

除了定義響應式數據之外，我們還可以使用computed和watch來實現一些邏輯，例如：

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函數來定義一個根據count計算出的雙倍數doubleCount。同時，我們還定義了一個increment函數用于增加count的值。

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