Vue - 计算属性的妙用

lfsun6662023-12-28 21:48

计算属性的运用

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"。