第一种写法

<template>
  <div>
    <p><input type="text" v-model="age"></p>
    <p><input type="text" v-model="nextAge"></p>
  </div>
</template>

<script>
import { computed, ref } from 'vue'
export default {
  setup() {
    const age = ref(18)
    const nextAge = computed(() => {
      return +age.value + 1
    })
    return { 
      age,
      nextAge
    }
  }
}

修改age，nextAge会跟着自动+1

但如果修改nextAge，会有警告：计算属性不能修改
第二种写法

<template>
  <div>
    <p><input type="text" v-model="age"></p>
    <p><input type="text" v-model="nextAge"></p>
  </div>
</template>

<script>
import { computed, ref } from 'vue'
export default {
  setup() {
    const age = ref(18)
    const nextAge = computed({
      get() {
        return +age.value+1
      },
      set(value) {
        console.log(value)  //  输出新修改的值
        return age.value = value - 1
      }
    })
    return { 
      age,
      nextAge
    }
  }
}

————————————————
版权声明：本文为CSDN博主「lannieZ」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/lannieZ/article/details/110233054