Vue3 Options API中Watcher未触发的原因及解决方法

问题描述 #

我在使用Vue3的Options API开发时遇到一个问题：在watch对象中监听isToggleBtnLabelDigitizePolygon的变化，点击按钮调用onDigitizePolygon方法修改该变量值后，计算属性compPropsIsToggleBtnDigitizePolygon能正常响应变化，但对应的Watcher完全没执行，日志也无输出。

我尝试过监听'isToggleBtnLabelDigitizePolygon.value'，但依然无效。

相关代码如下：

<template>
    <button id="idBtnDigitizePolygon" class="clsBtnDigitizePolygon" @click="onDigitizePolygon()" :disabled="isBtnDigitizePolygonDisabled">
        {{ compPropsIsToggleBtnDigitizePolygon }}
    </button>
</template>

<script>
import { ref } from 'vue';

let isToggleBtnLabelDigitizePolygon = ref(true);

let debugTag = 'D.ButtonDigitizePolygon.vue::';
let infoTag = 'I.ButtonDigitizePolygon.vue::';

export default {
    data() {
        return {
            btnDigitizePolyhonState: this.isBtnDigitizePolygonDisabled,
        };
    },
    props: {
        isBtnDigitizePolygonDisabled: {
            type: Boolean,
            default: false,
        },
    },
    watch: {
        isToggleBtnLabelDigitizePolygon(newVal, oldVal) {
            console.info(infoTag, 'isToggleBtnLabelDigitizePolygon.newVal:', newVal)
            console.info(infoTag, 'isToggleBtnLabelDigitizePolygon.oldVal:', oldVal)

            if (newVal == true && oldVal == false) {
                console.log(debugTag, 'removeDigitized()');
            } else if (newVal == false && oldVal == true) {
                console.log(debugTag, 'digitize()');
            }
        },
    },
    computed: {
        compPropsIsToggleBtnDigitizePolygon() {
            if (isToggleBtnLabelDigitizePolygon.value == true) {
                return 'digitize'
            } else {
                return 'clear'
            }
        },
    },
    methods: {
        onDigitizePolygon() {
            isToggleBtnLabelDigitizePolygon.value = !isToggleBtnLabelDigitizePolygon.value;
        },
    },
};
</script>

原因分析 #

问题核心在于你定义的isToggleBtnLabelDigitizePolygon是组件外部的独立ref变量，不属于Vue组件实例的响应式属性。

Vue3 Options API的watch选项只能监听组件实例上的响应式成员，比如data返回的属性、props、computed属性这些挂载到this上的内容。而直接在组件外部声明的ref，并没有被纳入组件实例的响应式系统管理，所以watch选项无法捕捉到它的变化。

计算属性能正常工作是因为它直接访问了isToggleBtnLabelDigitizePolygon.value，手动触发了ref的依赖追踪，但这和watch选项的监听逻辑完全不同。

修复方案 #

方案一：将变量移入组件的data（符合Options API规范） #

把外部的ref改成data里的响应式属性，让watch能正常监听：

<template>
    <button id="idBtnDigitizePolygon" class="clsBtnDigitizePolygon" @click="onDigitizePolygon()" :disabled="isBtnDigitizePolygonDisabled">
        {{ compPropsIsToggleBtnDigitizePolygon }}
    </button>
</template>

<script>
let debugTag = 'D.ButtonDigitizePolygon.vue::';
let infoTag = 'I.ButtonDigitizePolygon.vue::';

export default {
    data() {
        return {
            btnDigitizePolyhonState: this.isBtnDigitizePolygonDisabled,
            isToggleBtnLabelDigitizePolygon: true // 移到data中，成为组件实例的响应式属性
        };
    },
    props: {
        isBtnDigitizePolygonDisabled: {
            type: Boolean,
            default: false,
        },
    },
    watch: {
        isToggleBtnLabelDigitizePolygon(newVal, oldVal) {
            console.info(infoTag, 'isToggleBtnLabelDigitizePolygon.newVal:', newVal)
            console.info(infoTag, 'isToggleBtnLabelDigitizePolygon.oldVal:', oldVal)

            if (newVal && !oldVal) {
                console.log(debugTag, 'removeDigitized()');
            } else if (!newVal && oldVal) {
                console.log(debugTag, 'digitize()');
            }
        },
    },
    computed: {
        compPropsIsToggleBtnDigitizePolygon() {
            return this.isToggleBtnLabelDigitizePolygon ? 'digitize' : 'clear' // 通过this访问组件实例属性
        },
    },
    methods: {
        onDigitizePolygon() {
            this.isToggleBtnLabelDigitizePolygon = !this.isToggleBtnLabelDigitizePolygon; // 通过this修改属性
        },
    },
};
</script>

方案二：使用Vue的watch API手动监听外部ref #

如果需要保留外部ref的定义（比如要在多个组件间共享状态），可以在组件的created钩子中调用Vue的watch函数手动监听：

<template>
    <button id="idBtnDigitizePolygon" class="clsBtnDigitizePolygon" @click="onDigitizePolygon()" :disabled="isBtnDigitizePolygonDisabled">
        {{ compPropsIsToggleBtnDigitizePolygon }}
    </button>
</template>

<script>
import { ref, watch } from 'vue';

let isToggleBtnLabelDigitizePolygon = ref(true);

let debugTag = 'D.ButtonDigitizePolygon.vue::';
let infoTag = 'I.ButtonDigitizePolygon.vue::';

export default {
    data() {
        return {
            btnDigitizePolyhonState: this.isBtnDigitizePolygonDisabled,
        };
    },
    props: {
        isBtnDigitizePolygonDisabled: {
            type: Boolean,
            default: false,
        },
    },
    created() {
        // 手动监听外部ref
        watch(isToggleBtnLabelDigitizePolygon, (newVal, oldVal) => {
            console.info(infoTag, 'isToggleBtnLabelDigitizePolygon.newVal:', newVal)
            console.info(infoTag, 'isToggleBtnLabelDigitizePolygon.oldVal:', oldVal)

            if (newVal && !oldVal) {
                console.log(debugTag, 'removeDigitized()');
            } else if (!newVal && oldVal) {
                console.log(debugTag, 'digitize()');
            }
        })
    },
    computed: {
        compPropsIsToggleBtnDigitizePolygon() {
            return isToggleBtnLabelDigitizePolygon.value ? 'digitize' : 'clear'
        },
    },
    methods: {
        onDigitizePolygon() {
            isToggleBtnLabelDigitizePolygon.value = !isToggleBtnLabelDigitizePolygon.value;
        },
    },
};
</script>

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