使用场景

• 避免在模板中写过多的逻辑，可以通过计算属性先计算结果，然后在模板上直接渲染结果。

const publishedBooksMessage = computed(() => {
  return author.books.length > 0 ? 'Yes' : 'No'
})

computed 计算属性函数接受一个 getter 函数作为参数。 当计算属性所涉及到的响应式依赖更新时，计算属性也会发生相应的更新，而方法的调用时期则是每次页面的重渲染。与之区别的是，方法计算结果可能是相同的，但是每次都要重新计算。 计算属性中参与运算的值发生更新，则 DOM 被引用的元素也会被更新，如果没有更新，则渲染被缓存的值。

可写计算属性

下面定义的计算属性是只读的，不允许直接赋值：

import {ref,computed} from 'vue'
    let firstName = ref('张')
    let lastName = ref('三')


    let fullName = computed(() =>{
        return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + lastName.value
    })

建立 setter 和 getter 方法，就可以将其变为可读可写的：

<script setup>
import { ref, computed } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')

const fullName = computed({
  // getter
  get() {
    return firstName.value + ' ' + lastName.value
  },
  // setter
  set(newValue) {
    [firstName.value, lastName.value] = newValue.split(' ')
    //通过解构语法将数据直接写到计算属性对象的属性中
  }
})
</script>

这里的写就是在 changeFullNmae 中修改值，读就是在 template 中插值引用 FullName 的值。