具有更新 refs 的 Vue 3 组合 API

【问题标题】：Vue 3 composition API with updating refs具有更新 refs 的 Vue 3 组合 API
【发布时间】：2021-11-01 21:47:00
【问题描述】：

我将一个 ref 值传递给一个可组合函数 updateableSetting。这有一个初始值settingA，但可以由用户更新。更新后，我们是否可以让 useFeature 再次运行并返回更新后的 feature 值？

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

【问题讨论】：

请分享useFeature的代码

标签： vue.js vuejs3 vue-composition-api

【解决方案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 }
  }
})

如果您的意思是“每次更新值更改时运行一个函数”，您可以使用

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

【讨论】：