Vue3 Options API中重复赋值相同值触发监听器的解决方案

问题场景 #

用Vue3 Options API开发时，子组件点击按钮调用refresh()方法，通过v-model:vModel向父组件传递true，希望父组件的vModel监听器每次点击都执行，但实际只有第一次生效。核心原因是每次传递的值都是true，没有发生变化，Vue响应式系统不会重复触发监听。

解决方案 #

方法1：切换布尔值强制触发更新 #

利用Vue响应式更新机制，先将值设为相反状态，再通过nextTick切换回目标值，强制触发两次更新，确保监听器执行：

修改子组件的refresh方法：

<script>
// ... 原有其他代码
export default {
  // ... 原有其他选项
  methods: {
    async refresh() {
      console.log('V.Child.vue::refresh():');
      // 先切换为false
      this.compPropsVModel = false;
      // 等待DOM更新完成后再切回true
      await this.$nextTick();
      this.compPropsVModel = true;
    },
  },
};
</script>

方法2：用非布尔类型的动态值 #

把v-model绑定的值改成每次都不同的类型（比如数字、时间戳），确保每次传递的都是新值，从而触发监听：

父组件修改：

<script>
export default {
  data() {
    return {
      vModel: 0, // 初始值设为数字
    };
  },
  watch: {
    vModel(newVal, oldVal) {
      console.log('@watch vModel');
      // 这里执行你的刷新逻辑
    },
  },
}
</script>

子组件修改：

<script>
export default {
  props: {
    vModel: {
      type: Number, // 类型改为数字
    },
  },
  methods: {
    refresh() {
      console.log('V.Child.vue::refresh():');
      // 每次传递当前时间戳，保证值唯一
      this.compPropsVModel = Date.now();
    },
  },
};
</script>

方法3：用自定义事件替代v-model #

如果只是需要触发父组件的刷新逻辑，不需要维护状态，直接在子组件触发自定义事件，父组件监听即可：

子组件修改：

<script>
export default {
  emits: ['refresh'], // 声明自定义事件
  methods: {
    refresh() {
      console.log('V.Child.vue::refresh():');
      this.$emit('refresh'); // 触发自定义事件
    },
  },
};
</script>

父组件修改：

<template>
  <Child @refresh="handleRefresh"></Child>
</template>

<script>
export default {
  methods: {
    handleRefresh() {
      console.log('执行刷新逻辑');
      // 这里写原本watch里的代码
    },
  },
}
</script>

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