原题链接 (opens new window)

题目:

首先看到这个题目需要我们做什么，说的是在这个挑战中，我们需要创建一个可写的计算属性。

分析:

首先我们来回顾一下 computed，看到官方原话说的是接受一个 getter 函数，返回一个只读的响应式 ref 对象。该 ref 通过 .value 暴露 getter 函数的返回值。它也可以接受一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象。最后一句话是不是就是我们解决问题的核心。

解决：

<script setup>
import { ref, computed } from "vue";
const count = ref(1);
const plusOne = computed({
  get: () => {
    return count.value + 1;
  },
  set: () => {
    count.value++;
  },
});
/**
 * Make the `plusOne` writable.
 * So that we can get the result `plusOne` to be 3, and `count` to be 2.
 */
plusOne.value++;
</script>

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

这里我们通过将 plusOne 这个计算属性传入一个包含 get 和 set 这两个函数的对象来达到使得 count 的值为 2，plusOne 的值为 2 + 1 = 3