Vue中如何避免向函数传递ref时自动解包？

直接用箭头函数包裹事件回调，就能把原始ref传进方法里：

修改模板代码：

<input v-model="day" class="border p-2" @blur="() => pad(day)" />

此时pad方法里拿到的day就是原始的ref对象，直接修改day.value就能同步更新数据：

const pad = (day) => {
  // 现在day是ref引用，可直接修改value
  day.value = day.value.padStart(2, '0');
}

为什么原来的写法会自动解包？ #

Vue模板中直接访问ref变量时，会自动解包成它的value值，所以@blur="pad(day)"相当于把day.value传进了方法，而非ref本身。用箭头函数的话，是在组件setup的上下文里直接引用原始的ref变量，不会触发模板的自动解包逻辑，自然就能拿到ref对象。

另一种方案：把ref放进reactive对象 #

如果不想用箭头函数，也可以把ref包裹在reactive对象里，因为reactive对象中的ref不会被自动解包：

import { ref, reactive } from 'vue';

const form = reactive({
  day: ref(null)
});

模板调整为：

<input v-model="form.day" class="border p-2" @blur="pad(form.day)" />

这样pad方法里拿到的同样是原始ref，可直接修改day.value。

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