Vue3中computed的使用

第一种写法

<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
    }
  }
}