计算属性的运用

Vue 组件的计算属性是一种通过对已有数据进行实时计算，生成新的数据的方式。在下面的代码中，我们通过计算属性 publishedBooksMessage 实时展示作者发布的书籍信息。

<template><div><p>作者: {{ author.name }}</p><p>发布的书: {{ publishedBooksMessage }}</p><ul><li v-for="(book, index) in author.books" :key="index">{{ book }}</li></ul><p>当前时间: {{ currentTime }}</p><button @click="changeAuthorName">改变作者名字</button></div>
</template><script>
export default {data() {return {author: {name: "张三",books: ["Vue 2 - Advanced Guide","Vue 3 - Basic Guide","Vue 4 - The Mystery"]},currentTime: ""};},computed: {publishedBooksMessage() {return this.author.books.length > 0 ? "Yes" : "No";}},methods: {changeAuthorName() {this.author.name = "李四";},getCurrentTime() {return new Date().toLocaleTimeString();}},created() {this.currentTime = this.getCurrentTime();setInterval(() => {this.currentTime = this.getCurrentTime();}, 1000);}
};
</script><style scoped>
</style>

计算属性的优势

计算属性的一大优势在于它们会进行缓存，只有在相关依赖发生改变时才会重新计算。在这个例子中，publishedBooksMessage 只在 author.books 数组发生变化时才会重新计算，这有效地减少了不必要的计算开销。

实时展示发布的书籍信息

通过计算属性，我们轻松地实现了实时展示作者发布的书籍信息。当书籍数量大于 0 时，显示 “Yes”，否则显示 “No”。