vue3的计算属性，在<script setup></script>标签中 需要借助compute函数来实现
如下

<template><div><ul><li v-for="book in books" :key="book.id">{{ book.name }}</li></ul><span>书本总数量：</span><span>{{bookNums }}</span></div></template><script setup>import { reactive,computed } from 'vue';const books=reactive([{id:1,name:"简爱"},{id:2,name:"钢铁是怎样炼成的"},{id:3,name:"老子道德经"}])const bookNums= computed(()=>{return books.length})</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>

计算属性可以直接应用于模版，计算属性的原理和vue2一样，有缓存的机制，除非计算属性关联的响应式数据发生改变，才会被重新计算，这个是和使用函数的区别之一，计算属性也支持setter方法，但是不建议使用，一般只做set方法

https://cn.vuejs.org/guide/essentials/computed.html