Vue3 Composition API中ref更新后能否触发useFeature重新执行返回新值

你的现有写法无法在updateableSetting值变更时触发useFeature重新执行，也无法自动拿到更新后的feature值。

你在调用useFeature时传入的是updateableSetting.value，这是一个非响应式的普通字符串值，等价于直接把初始静态值'settingA'传入函数。而Vue组件的setup函数仅会在组件初始化时执行一次，useFeature也只会在这个阶段被调用一次，后续updateableSetting的变更完全不会触发这个函数重新执行。

方案1：传入完整ref对象（推荐） #

调整useFeature的传参与内部实现，直接传入整个ref对象，在useFeature内部基于响应式ref计算返回结果：

// 调用侧修改
const { feature } = useFeature(updateableSetting)

// useFeature内部实现示例
function useFeature(settingRef) {
  // 用computed包裹计算逻辑，依赖变更时自动更新
  const feature = computed(() => {
    // 此处替换为你实际的feature计算逻辑
    return settingRef.value === 'settingA' ? '功能A' : '其他功能'
  })
  return { feature }
}

这种方案符合Vue composable的最佳实践，内部逻辑完全响应式，不需要额外手动处理监听。

方案2：手动监听值变更触发重执行 #

如果useFeature是第三方提供的不可修改的函数，仅支持传入普通值，可以在父组件监听updateableSetting的变化，变更时手动重新调用useFeature更新结果：

setup() {
  const updateableSetting = ref('settingA')
  const feature = ref()

  // 监听设置变更，每次变更重新调用useFeature更新结果
  watch(updateableSetting, (newSetting) => {
    const { feature: newFeature } = useFeature(newSetting)
    feature.value = newFeature
  }, { immediate: true }) // immediate设为true保证初始化时也执行一次

  return { feature }
}

内容的提问来源于stack exchange，提问作者user4815162342