观察者不触发

我正在使用带有选项 API 的 Vue 3。

如下面发布的代码所示，在watch对象，我监视发生的变化isToggleBtnLabelDigitizePolygon。在方法中onDigitizePolygon我改变的值isToggleBtnLabelDigitizePolygon，然而，当后者的值改变时， 计算属性compPropsIsToggleBtnDigitizePolygon被执行表明改变isToggleBtnLabelDigitizePolygon，但观察者isToggleBtnLabelDigitizePolygon永远不会执行，换句话说，该观察程序内的日志语句是 从未被执行过。

为了解决这个问题，我还尝试了以下方法

watch: {
    'isToggleBtnLabelDigitizePolygon.value'(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()');
        }
    },
},

但它也不起作用

为什么观察者不触发以及如何修复？

app.vue:

<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>

我发现您当前正在尝试将 ref() 与选项 API 上的 Composition 属性一起使用。如果您修复语法，代码将正常工作。我希望我能帮忙。

作为示例代码：

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

<script>

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

export default {
  props: {
    isBtnDigitizePolygonDisabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      isToggleBtnLabelDigitizePolygon: false,
    };
  },
  computed: {
    compPropsIsToggleBtnDigitizePolygon() {
      if (this.isToggleBtnLabelDigitizePolygon.value === true) {
        return 'digitize';
      } else {
        return 'clear';
      }
    },
  },
  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()');
      }
    },
  },
  methods: {
    onDigitizePolygon() {
      this.isToggleBtnLabelDigitizePolygon = !this.isToggleBtnLabelDigitizePolygon;
    },
  },
};
</script>

或者您可以在设置函数中使用 ref() ，如下所示：

setup() {
    const isToggleBtnLabelDigitizePolygon = ref(false);
    return {
      isToggleBtnLabelDigitizePolygon,
    };
  }