Vue 3复合API与更新参考

Question

我正在传递一个ref值给一个可组合函数，updateableSetting。它有一个初始值settingA，但可以由用户更新。更新时，我们是否有可能再次运行useFeature并返回更新的feature值?

export default defineComponent({
setup() {
const updateableSetting = ref('settingA')
const { feature } = useFeature(updateableSetting.value)
}
})

Answer 1

当然。使用计算属性

import { ref, defineComponent, computed} from 'vue'
const useFeature = (initialRef) => {
const feature = computed(() => initialRef.value + ' - I am always up to date!')
return {
feature
}
}
export default defineComponent({
setup() {
const updateableSetting = ref('settingA')
//make sure you don't pass .value here - pass the whole ref object instead
const { feature } = useFeature(updateableSetting) 
return { feature }
}
})

如果你的意思是"每次updatedValue改变时运行一个函数"，你可以使用

watch(
[updatedValue], 
() => {console.log('updatedValue changed! doing some calculations...')}
)

Answer 2

我在next 3中使用可组合件时遇到了同样的问题。在接下来的3个新的反应状态是可用的称为useState。请尝试使用useState代替ref.
更多信息请参阅next 3文档:useState nuxt3