4 - 可写的计算属性

[ehxie]

<script setup lang="ts">
import { ref, computed } from "vue"

const count = ref(1)
const plusOne = computed(
  {
    get(){
      return count.value + 1
    },
    set(val){
      count.value = val - 1
    }
  }
)

/**
 * Make the `plusOne` writable.
 * So that we can get the result `plusOne` to be 3, and `count` to be 2.
*/
// plusOne.value = plusOne.value + 1
// 先 get 一次再 set，在 set 时值为 3，减去在 get 时加的 1 就对了
plusOne.value++

</script>

<template>
  <div>
    <p>{{ count }}</p>
    <p>{{ plusOne }}</p>
  </div>
</template>