[Component] [date-picker] 日期选择器清空时触发两次 `change` 的完整机制分析

<template>
  <el-date-picker
    :model-value="toPickerValue(date)"
    type="date"
    clearable
    @update:modelValue="handleUpdate"
    @change="handleChange"
  />
</template>

<script setup>
import { ref } from 'vue'

const date = ref('')

function toPickerValue(value) {
  if (!value) return ''
  return value
}

function handleUpdate(val) {
  date.value = val ?? ''
}

function handleChange(val) {
  console.log('[change]', val)
}
</script>

[change] null
[change] ''

click 事件捕获阶段
    ↓
ElInput 的 handleClick（捕获监听器）
    → 输入框未聚焦，执行 input.focus()
    → focus 事件触发 afterFocus
    → pickerVisible = true（面板打开）
    ↓
浏览器微任务检查点（watch 打开分支执行）
    ↓
click 事件目标/冒泡阶段
    ↓
清空按钮的 onClearIconClick
    → emitInput(null)（父组件更新绑定值）
    → emitChange(null, true)（第一次 change）
    → onHide() → pickerVisible = false（面板关闭）
    ↓
浏览器微任务检查点（watch 关闭分支执行）
    → nextTick 中 emitChange(props.modelValue)
    → 比较发现值不相等
    → 第二次 change

const handleClick = (event) => {
  if (
    disabled.value ||
    isFocusable(event.target) ||
    (wrapperRef.value?.contains(document.activeElement) &&
      wrapperRef.value !== document.activeElement)
  )
    return

  target.value?.focus()
}

function afterFocus() {
  if (!props.automaticDropdown) return
  pickerVisible.value = true   // 面板打开
}

watch(pickerVisible, (val) => {
  if (!val) {
    // 关闭分支，稍后分析
  } else {
    nextTick(() => {
      if (val) {
        valueOnOpen.value = props.modelValue  // 记录旧日期
      }
    })
  }
})

const onClearIconClick = (event) => {
  event.stopPropagation()
  emitInput(null)                    // 发出 update:modelValue
  emitChange(null, true)             // 第一次 change
  onHide()                           // 关闭面板
}

function handleUpdate(val) {
  date.value = val ?? ''   // null 被转成 ''
}

const emitChange = (val, isClear) => {
  if (isClear || !valueEquals(val, valueOnOpen.value)) {
    emit(CHANGE_EVENT, val);
    isClear && (valueOnOpen.value = val);   // 清空时同步更新 valueOnOpen
  }
};

pickerVisible.value = false

watch(pickerVisible, (val) => {
  if (!val) {
    userInput.value = null;
    nextTick(() => {
      emitChange(props.modelValue);   // 第二次 change 的源头
    });
  }
})

if (isClear || !valueEquals(val, valueOnOpen.value)) {
  emit(CHANGE_EVENT, val)
}

<div id="outer"><button id="btn">点我测试</button></div>
<script>
  let _value = false;
  let dirty = false;
  let lastWritten = false;

  const state = {
    get value() { return _value; },
    set value(v) {
      _value = v;
      lastWritten = v;
      if (!dirty) {
        dirty = true;
        Promise.resolve().then(() => {
          console.log('watch 触发，最终值:', lastWritten);
          dirty = false;
        });
      }
    }
  };

  const outer = document.getElementById('outer');

  outer.addEventListener('click', () => {
    console.log('listener 1: set true');
    state.value = true;
  });

  outer.addEventListener('click', () => {
    console.log('listener 2: set false');
    state.value = false;
  });
</script>

listener 1: set true
watch 触发，最终值: true
listener 2: set false
watch 触发，最终值: false

let isClearing = false;

const onClearIconClick = (event) => {
  isClearing = true;
  // ... 清空逻辑
  onHide();
  isClearing = false;
};

function afterFocus() {
  if (!props.automaticDropdown) return;
  if (isClearing) return;   // 清空引发的聚焦不打开面板
  pickerVisible.value = true;
}

<template>
  <el-date-picker v-model="date" type="date" clearable @change="handleChange" />
</template>

<script setup>
import { ref } from 'vue'

const date = ref(null)  // 初始为 null

function handleChange(val) {
  console.log('[change]', val)  // 清空时只有一次 change，值为 null
}

function submit() {
  const payload = {
    date: date.value ?? ''  // 提交时再转成空字符串
  }
  // 发送请求
}
</script>