为何出现“赋值给val的值从未使用”？Vue输入框焦点事件问题求助

错误原因 #

1. 值传递的局限性：你传递给hideSymbol和showSymbol的totalAmount是ref自动解包后的原始字符串值，JavaScript中基本类型是值传递，函数内的val只是原始值的副本，修改它不会影响外部的totalAmount。
2. 未更新响应式变量：即便修改了val，你也没有将新值赋值回totalAmount.value，Vue的响应式系统无法感知到变化，因此输入框不会更新。
3. 无用赋值警告：函数内修改了val但未使用该值，编译器检测到后抛出The value assigned to 'val' is never used提示。

修正方案 #

直接在处理函数中操作ref对象的value属性（这是Vue响应式更新的核心），同时添加边界检查避免重复处理或报错：

模板代码

<input
  v-model="totalAmount"
  @focus="hideSymbol"
  @blur="showSymbol"
/>

脚本代码

const totalAmount = ref('')

const hideSymbol = () => {
  // 仅当值以" s"结尾时才移除后缀，避免空值报错或重复处理
  if (totalAmount.value.endsWith(' s')) {
    totalAmount.value = totalAmount.value.slice(0, -2)
  }
}

const showSymbol = () => {
  // 仅当值未包含后缀时添加，避免重复添加
  if (!totalAmount.value.endsWith(' s')) {
    totalAmount.value = `${totalAmount.value} s`
  }
}

关键知识点 #

• Vue的ref是一个响应式对象，只有修改其value属性，才能触发响应式更新。
• 基本类型（字符串、数字等）在函数参数中是值传递，修改参数不会影响外部变量；引用类型才是引用传递。
• 处理输入框状态时，需添加边界检查，避免空值、重复操作导致的异常。

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