Vue.js无缓存计算属性：输入组件状态转换与输出计算属性setter问询

我来帮你落地这个输入框组件的核心逻辑，完全贴合你描述的输入→状态→样式的对应规则，同时实现带setter的输出计算属性来管理内部状态：

先明确核心规则 #

把你提到的四类输入场景的转换逻辑整理成清晰的条目，避免歧义：

• 输入为空字符串时：内部状态为 undefined，组件添加样式类 is-empty，输入框显示空字符串
• 输入任意有效正数（包括整数、浮点数）时：内部状态为该正数数值，无额外样式类，输入框显示该正数
• 输入恰好为单个 - 字符时：内部状态为 -1，组件添加样式类 is-unknown，输入框显示 -
• 其他所有输入（比如负数、非数字字符、混合内容等）：内部状态为 -2，组件添加样式类 is-invalid，输入框显示空字符串

核心实现（以Vue 3为例，适配计算属性setter要求） #

因为你提到了带setter的输出计算属性来修改内部状态，这里用Vue的计算属性实现双向绑定逻辑，同时处理输入转换：

<template>
  <input
    :value="displayValue"
    :class="inputClass"
    @input="handleInput"
    type="text"
    placeholder="请输入内容"
  />
</template>

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

// 内部私有状态：存储转换后的数字状态
const internalState = ref()

// 对外暴露的计算属性：带setter，用于外部修改内部状态
const outputState = computed({
  get() {
    return internalState.value
  },
  set(newVal) {
    // 外部赋值时，反向映射到输入框显示值
    switch (newVal) {
      case undefined:
        displayValue.value = ''
        break
      case -1:
        displayValue.value = '-'
        break
      case -2:
        displayValue.value = ''
        break
      default:
        if (typeof newVal === 'number' && newVal > 0) {
          displayValue.value = String(newVal)
        }
    }
    // 同步更新内部状态
    internalState.value = newVal
  }
})

// 输入框实际显示的内容
const displayValue = ref('')

// 动态计算样式类
const inputClass = computed(() => {
  const state = internalState.value
  if (state === undefined) return 'is-empty'
  if (state === -1) return 'is-unknown'
  if (state === -2) return 'is-invalid'
  return ''
})

// 输入事件处理：将用户输入转换为内部状态
const handleInput = (e) => {
  const inputVal = e.target.value.trim()
  
  if (inputVal === '') {
    internalState.value = undefined
    displayValue.value = ''
  } else if (inputVal === '-') {
    internalState.value = -1
    displayValue.value = '-'
  } else {
    const num = parseFloat(inputVal)
    // 验证是否为有效正数：非NaN、有限数、大于0
    if (!isNaN(num) && isFinite(num) && num > 0) {
      internalState.value = num
      displayValue.value = inputVal // 保留用户输入的原始格式（比如100.00）
    } else {
      internalState.value = -2
      displayValue.value = ''
    }
  }
}
</script>

<style scoped>
input {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.is-empty {
  border-color: #ccc;
  background-color: #f8f9fa;
}
.is-unknown {
  border-color: #6c757d;
  background-color: #e9ecef;
}
.is-invalid {
  border-color: #dc3545;
  background-color: #fff5f5;
}
</style>

关键细节说明 #

1. 状态与显示分离：internalState 专门存储转换后的数字状态，displayValue 控制输入框实际显示内容，避免状态逻辑和UI显示耦合
2. 带setter的计算属性：outputState 作为对外的接口，外部可以通过 v-model="outputState" 或者直接赋值来修改内部状态，同时自动同步输入框的显示内容
3. 输入验证逻辑：通过parseFloat结合边界判断，确保只有合法的正数才会被转换为对应状态，单个-做特殊处理，其他非法输入直接标记为无效并清空显示
4. 动态样式管理：通过计算属性inputClass根据当前内部状态自动切换样式类，完全匹配你要求的样式规则

内容的提问来源于stack exchange，提问作者gervais.b