Vue3可写计算属性修改对象属性时不触发Setter及响应式问题

问题原因 #

1. 可写计算属性的setter仅在直接给计算属性的.value赋值完整对象时触发。修改gapSize.value.value这类嵌套属性，本质是操作getter返回的临时对象，与计算属性的setter无绑定关系，自然不会触发。
2. 你的getter每次返回新对象（return { value: ..., unit: ... }），修改这个临时对象的属性不会关联到原始gap ref，因此视图也无响应式更新。
3. 模板存在语法错误：{{ gapSize.value }}{{ gapSize.unit }}应改为{{ gapSize.value.value }}{{ gapSize.value.unit }}，因为gapSize是计算属性，.value才是对应的Size对象。

解决方案 #

方案1：直接赋值完整对象（适合简单场景） #

修改randomize函数，直接给gapSize.value赋值完整的Size对象，触发计算属性的setter：

function randomize() {
  const randomValue = Math.floor(Math.random() * 101)
  const randomUnit = units[Math.floor(Math.random() * units.length)]
  // 直接赋值完整对象，触发setter
  gapSize.value = {
    value: randomValue,
    unit: randomUnit
  }
}

方案2：返回响应式对象（适合复杂嵌套场景，如Pinia复杂对象） #

如果需要支持嵌套属性直接修改且自动同步，让计算属性返回一个带get/set的响应式对象，直接关联原始数据源：

const gapSize = computed({
  get(): Size {
    return reactive({
      get value() {
        return Math.round(parseInt(`${gap.value.value}`))
      },
      set value(newVal) {
        gap.value.value = newVal
      },
      get unit() {
        return gap.value.unit
      },
      set unit(newUnit) {
        gap.value.unit = newUnit
      }
    })
  },
  // 支持完整对象赋值的场景
  set(newValue: Size) {
    gap.value.value = newValue.value
    gap.value.unit = newValue.unit
  }
})

此时修改gapSize.value.value或gapSize.value.unit会直接同步到原始gap ref，无需额外watch，视图也会自动更新。

方案3：基于原始响应式对象封装（更轻量化） #

如果不需要对返回值做额外处理，可直接基于原始gap ref封装，避免创建新对象：

const gapSize = computed({
  get(): Size {
    // 直接返回原始响应式对象，嵌套属性修改会自动触发响应式
    return gap.value
  },
  set(newValue: Size) {
    gap.value = newValue
  }
})
// 若需要对value做格式化，可单独给value加计算属性
const formattedGapValue = computed(() => Math.round(parseInt(`${gap.value.value}`)))

模板中使用格式化后的属性：

<template>
  <div>{{ formattedGapValue }}{{ gapSize.value.unit }}</div>
  <button @click="randomize">Randomize</button>
</template>

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