Vue3组合式函数中如何监听Ref值的更新？

核心问题点 #

• 监听器参数错误：watch需监听ref对象本身，而非ref.value（原代码中watch(value.value, ...)传入的是原始值，丢失响应式）
• 参数传递错误：视图调用组合式函数时，传入的是testValue.value.houseNumber（原始字符串），但函数期望接收Ref<T>类型，导致监听失效
• 值更新逻辑错位：updateValue仅更新内部field变量，未同步到传入的响应式引用，无法联动视图v-model
• 冗余计算属性：getValue直接返回ref对象，无需用computed包装

修正后的组合式函数代码 #

export function useFieldValidationHelper3<T>(fieldValue: Ref<T>) {
  // 直接监听传入的响应式引用
  watch(
    fieldValue,
    (newValue) => {
      console.log("Field value updated in the composable", newValue);
      // 示例校验逻辑：非空校验
      errorMessage.value = newValue ? "" : "字段不能为空";
    },
    { deep: true } // 若T为对象/数组需开启，基本类型可移除
  );

  const errorMessage: Ref<string | undefined> = ref("");

  // 手动更新时直接修改传入的响应式引用，同步到视图
  function updateValue(newValue: T) {
    console.log("VALIDATE IS UPDATING THE HOUSE NUMBER", newValue);
    fieldValue.value = newValue;
  }

  return {
    fieldValue,
    errorMessage,
    updateValue
  };
}

修正后的视图代码 #

<script setup>
import { useFieldValidationHelper3 } from "@/composables/FieldValidationHelper3";
import { ref, computed } from "vue";

const testValue = ref({
  houseNumber: '1'
});

// 将对象属性包装为双向绑定的响应式引用，传递给组合式函数
const houseNumberRef = computed({
  get: () => testValue.value.houseNumber,
  set: (val) => testValue.value.houseNumber = val
});
const { fieldValue, errorMessage, updateValue } = useFieldValidationHelper3(houseNumberRef);

// 直接通过updateValue修改，自动同步到视图v-model
const updateText = () => {
  updateValue(fieldValue.value + "1");
};
</script>

<template>
  <v-text-field 
    hide-details="auto" 
    label="House Number" 
    v-model="testValue.houseNumber" 
    class="noBorders"
  ></v-text-field>
  <div v-if="errorMessage" class="text-red-500">{{ errorMessage }}</div>
  <button @click="updateText">Test</button>
</template>

关键说明 #

• 传递响应式引用时，若目标是对象的某个属性，用computed创建双向绑定的ref是最稳妥的方式；也可在组合式函数中通过watch(() => fieldValue.value.houseNumber, ...)直接监听属性路径
• 监听ref对象时，直接传入ref即可触发响应式监听；监听嵌套属性则需用回调函数返回目标值
• 手动更新值时，直接修改传入的fieldValue.value，即可自动同步到视图的v-model，无需维护内部变量

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