在setup 中宣告函數共有4 種方式：直接宣告函數使用Vue.reactive 建立可變響應式物件使用Vue.computed 建立計算屬性使用Vue.watch 建立偵聽器
setup 函數提供了宣告反應式狀態、計算屬性和方法的新方式。以下是如何在setup 中宣告函數：
直接宣告函數###<code class="js">import { defineProps } from 'vue'
export default {
props: defineProps(['count']),
setup() {
function incrementCount() {
// ...
}
// 其他逻辑...
return {
// ...其他响应式状态
incrementCount
}
}
}</code>登入後複製
Vue.reactive建立可變響應式物件<code class="js">import { defineProps, reactive } from 'vue'
export default {
props: defineProps(['count']),
setup() {
const state = reactive({
count: 0,
increment: function() {
// ...
}
})
// 其他逻辑...
return {
// ...其他响应式状态
...state
}
}
}</code>登入後複製
Vue.computed建立計算屬性<code class="js">import { defineProps, computed } from 'vue'
export default {
props: defineProps(['count']),
setup() {
const incrementCount = computed(() => {
// ...
})
// 其他逻辑...
return {
// ...其他响应式状态
incrementCount
}
}
}</code>登入後複製
Vue .watch建立偵聽器透過這些方法，可以在Vue 3.0 的<code class="js">import { defineProps, watch } from 'vue'
export default {
props: defineProps(['count']),
setup() {
const incrementCount = watch('count', (newValue, oldValue) => {
// ...
})
// 其他逻辑...
return {
// ...其他响应式状态
incrementCount
}
}
}</code>登入後複製
函數中以響應式的方式宣告函數。
以上是vue中setup怎麼宣告函數的詳細內容。更多資訊請關注PHP中文網其他相關文章！
