Vue3：通过组件Prop控制复选框选中状态异常问题排查

场景说明 #

• 父组件：创建一个包含checked: true状态的reactive类型Todo对象，作为prop传递给Todo子组件。
• Todo子组件：接收Todo prop，将checked值绑定到复选框；切换复选框时触发update事件通知父组件，父组件通过setTimeout异步将Todo的checked设为false。

代码示例 #

父组件代码 #

<template>
  <Todo @update="handleUpdate" :todo="todo" />
</template>

<script setup>
import { reactive } from "vue";
import Todo from "./components/Todo.vue";

let todo = reactive({ checked: true });

let handleUpdate = (e) => {
  setTimeout(() => {
    // 测试用，始终设为false
    todo.checked = false;
  }, 1000);
};
</script>

子组件代码 #

<template>
  <input type="checkbox" v-model="checkboxProxy" />
</template>

<script setup>
const { computed, defineProps, defineEmits } = require("vue");

let props = defineProps(["todo"]);
let emit = defineEmits(["update"]);

let checkboxProxy = computed({
  get() {
    return props.todo.checked;
  },
  set(val) {
    emit("update", val);
  },
});
</script>

问题 #

勾选复选框后，预期1秒后复选框自动取消选中，但实际未生效。尝试改用<input type="checkbox" :checked="todo.checked" @change="emit('update')" />的绑定方式，仍无法同步Todo状态，测试环境为Brave浏览器。

原因分析与解决方法 #

问题核心是浏览器复选框的原生行为与Vue响应式更新的时序冲突：

1. 用户点击复选框时，浏览器会立刻修改DOM的选中状态，此时Vue的响应式更新尚未触发。
2. 父组件通过setTimeout异步修改todo.checked时，Vue会认为DOM状态已经和数据一致，不会触发子组件的重新渲染，导致视图与数据不同步。

解决方法1：通过key强制子组件重新渲染 #

在父组件中给子组件添加key属性，将key与todo.checked绑定。当todo.checked变化时，key值改变，Vue会销毁旧的子组件实例并创建新的，确保DOM状态与数据同步：

<!-- 父组件模板修改 -->
<Todo @update="handleUpdate" :todo="todo" :key="todo.checked" />

解决方法2：手动监听数据变化同步DOM状态 #

在子组件中通过watch监听todo.checked的变化，直接操作DOM更新复选框状态：

<!-- 修改后的子组件代码 -->
<template>
  <input ref="checkboxRef" type="checkbox" :checked="todo.checked" @change="handleChange" />
</template>

<script setup>
import { watch, ref, defineProps, defineEmits } from "vue";

const props = defineProps(["todo"]);
const emit = defineEmits(["update"]);
const checkboxRef = ref(null);

// 监听todo.checked变化，手动同步复选框状态
watch(() => props.todo.checked, (newVal) => {
  if (checkboxRef.value) {
    checkboxRef.value.checked = newVal;
  }
});

const handleChange = (e) => {
  emit("update", e.target.checked);
};
</script>

解决方法3：使用Vue标准双向绑定（推荐） #

遵循Vue的v-model规范实现双向绑定，自动处理数据与视图的同步：

<!-- 修改后的子组件代码 -->
<template>
  <input type="checkbox" :checked="modelValue" @change="handleChange" />
</template>

<script setup>
import { defineProps, defineEmits } from "vue";

const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  }
});
const emit = defineEmits(["update:modelValue"]);

const handleChange = (e) => {
  emit("update:modelValue", e.target.checked);
};
</script>

<!-- 修改后的父组件模板 -->
<Todo v-model="todo.checked" />

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