vue3计算属性

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