Vue3_计算属性

在我们通过方法进行返回数据时，每使用一次，执行一次

通过计算属性获得数据，每次使用时，如果和上次使用时，数据没有变化，则直接使用上一次的结果

<script setup >
import {ref,reactive,computed} from 'vue'
/*
计算属性
*/ 
const author = reactive({
  name:"张十三",
  books:["java入门","算法","Mysql"]

})

function hasBooks(){
  console.log("hasBooks")
  return author.books.length >0 ? "是":"否"
}

let bookMessage = computed(() => {
    console.log("bookMessage")
    return author.books.length >0 ? "是":"否"
})


</script>
<template>

<div>
  <p>作者：{{author.name}}</p>
  是否出版过图书：{{ hasBooks() }}<br>
  是否出版过图书：{{ hasBooks() }}<br>
  是否出版过图书：{{ hasBooks() }}<br>
  是否出版过图书：{{ bookMessage }}<br>
  是否出版过图书：{{ bookMessage }}<br>
  是否出版过图书：{{ bookMessage }}<br>
</div>
</template>

<style scoped>
</style>