Vue3 watch函数未更新：文件输入框变化监听无响应问题

问题原因 #

Vue的响应式系统无法追踪DOM原生元素（比如HTMLInputElement）的属性变化，input.value?.files是浏览器原生的FileList对象，它的更新不会触发Vue的依赖收集机制，所以无论是watch、computed还是watchEffect都无法检测到它的变化。

正确解决方案：监听change事件 #

文件输入框的文件选择操作会触发change事件，直接监听这个事件是最可靠的方式：

脚本代码 #

const input = ref<HTMLInputElement | null>(null)
const filename = ref("Foo")

const handleFileChange = () => {
  if (input.value?.files?.length) {
    filename.value = input.value.files[0].name
    console.log(filename.value)
  }
}

模板代码 #

<div>
   {{ filename }}
</div>
<input type="file" class="hidden" ref="input" @change="handleFileChange"/>

补充说明 #

如果尝试过用watch监听DOM元素属性，本质上是因为Vue的响应式只作用于它自己创建的响应式对象，原生DOM元素的属性更新不在这个体系里，所以必须通过DOM事件来捕获变化。

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