如何在Vuetify 3 Labs日期选择器设默认日期？解决递归更新错误

问题原因 #

设置日期选择器默认值时出现「Maximum recursive updates exceeded in component」警告，核心是响应式数据更新触发了双向绑定循环，常见诱因包括：

• 子组件中通过watch或computed重复修改父组件传递的绑定值，父组件更新后又触发子组件更新，形成闭环
• 默认值初始化方式不当，比如在模板或计算属性中动态修改绑定数据源，引发重复更新

修复步骤 #

1. 修正子组件DateInput.vue的绑定逻辑 #

严格遵循单向数据流，子组件仅通过emit通知父组件更新，避免直接修改props或触发无意义的循环监听：

<!-- 错误示例：watch中重复emit导致循环 -->
<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

// 错误：监听props值后直接emit，父组件更新会再次触发此watch
watch(props.modelValue, (newVal) => {
  emit('update:modelValue', newVal)
})
</script>

<!-- 正确示例：仅在用户交互时更新并emit -->
<script setup>
import { ref } from 'vue'
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

// 用本地变量维护组件内部状态
const localDate = ref(props.modelValue)

const handleDateChange = (val) => {
  localDate.value = val
  emit('update:modelValue', val)
}
</script>

<template>
  <v-date-picker v-model="localDate" @update:model-value="handleDateChange" />
</template>

2. 优化父组件App.vue的默认值初始化 #

在setup中一次性完成默认值赋值，避免在模板中使用动态表达式修改绑定值：

<script setup>
import DateInput from './components/DateInput.vue'
import { ref } from 'vue'

// 正确：一次性初始化默认日期，避免动态触发响应式更新
const selectedDate = ref(new Date('2024-01-01'))
</script>

<template>
  <DateInput v-model="selectedDate" />
</template>

3. 规范Vuetify组件的使用 #

确保v-date-picker的v-model绑定没有嵌套的响应式依赖：

• 不要将v-model绑定到计算属性的返回值，除非计算属性的set逻辑能正确处理更新且不会触发循环

核心注意事项 #

• 始终遵循Vue单向数据流原则，子组件仅通过emit传递更新，不直接修改props
• 默认值初始化采用静态赋值，避免动态表达式引发不必要的响应式更新

内容的提问来源于stack exchange，提问作者Ersin Güvenç