javascript - vue页面重绘导致第三方组件重新渲染的问题？

Question

// 父组件
<div>
 <child :item="item" />
<div>
  
const item = ref(0);
setInterval(() => {
    item.value += 1
}, 1000)
  
// 子组件
<div>
  <div>{{ props.item }}</div>
  <van-calendar
    ref="calendar"
    :poppable="false"
    :max-date="new Date()"
    switch-mode="year-month"
    :show-confirm="false"
    @select="handleCalendar"
  />
<div>
const props = defineProps({
  item: {
    type: Number,
    required: true
  }
})

calendar组件每次点上一月之后，都会自动切换回7月，就像是重新渲染了一样？这种情况该如何去处理？

Answer 1

正常情况下calendar组件是不会重新渲染的，有可能是你触发了组件内部的监听导致刷新了。
你检查是你的代码看有没有以下一下可能导致刷新的写法：

1. 试试van-calendar上的max-date不要写new Date()，而是绑定一个data中的变量。
2. 检查van-calendar组件上的属性是否有变化有没有可能导致刷新
 比如绑定的v-model，option之类的属性
3.有key属性导致强制刷新
<child :item="item" :key="item"/>