Vue3中watch监听ref变量未触发的原因及解决方法

问题原因 #

你混淆了Vue3组合式API和选项式API的写法逻辑：

• isBtnDigitizePolygonClicked是用组合式API的ref()创建的响应式变量
• 但你却用了选项式API的watch配置块来监听，这种写法在组合式API环境下完全不生效，选项式的watch只能监听data选项中声明的响应式属性。

解决办法 #

在Vue3组合式API中，必须使用watch()函数来监听ref变量，替换掉原来的选项式watch配置。

修正后的完整代码 #

import { ref, watch, computed } from 'vue';
// 请确保values、digitizePolygonInteractions已正确初始化
const debugTag = 'DigitizePolygon';

const isBtnDigitizePolygonClicked = ref(true);

// 使用组合式watch函数监听变量变化
watch(isBtnDigitizePolygonClicked, (newVal, oldVal) => {
    console.log(debugTag, 'newVal:', newVal);
    console.log(debugTag, 'oldVal:', oldVal);
    if (digitizePolygonInteractions) {
        newVal ? digitizePolygonInteractions.remove() : digitizePolygonInteractions.add();
    } else {
        throw new Error('digitizePolygonInteractions 未初始化');
    }
}, { immediate: false });

// 组合式写法的computed
const compPropsIsBtnDigitizePolygonDisabled = computed(() => {
    return isBtnDigitizePolygonClicked.value ? values.CONST_STRING_DIGITIZE : values.CONST_STRING_STOP_DIGITIZE;
});

// 组合式写法的方法
const onDigitizePolygon = () => {
    console.info(debugTag, 'onDigitizePolygon()');
    isBtnDigitizePolygonClicked.value = !isBtnDigitizePolygonClicked.value;
};

模板代码（保持不变） #

<button @click="onDigitizePolygon">{{ compPropsIsBtnDigitizePolygonDisabled }}</button>

额外说明 #

如果你的代码是写在选项式API的setup()函数内部，同样需要在setup()里调用watch()函数，不能把watch配置写在setup外部的选项式结构中。

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