Vue - 计算属性的妙用

计算属性的运用

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

相关推荐
小鱼人爱编程2 分钟前
Java基石--反射让你直捣黄龙
前端·spring boot·后端
JosieBook2 小时前
【web应用】如何进行前后端调试Debug? + 前端JavaScript调试Debug?
前端·chrome·debug
LBJ辉2 小时前
2. Webpack 高级配置
前端·javascript·webpack
灵感__idea8 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴9 小时前
Mix
前端·webgl
代码续发9 小时前
前端组件梳理
前端
试图让你心动10 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_10 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈不知代码10 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记10 小时前
sass中@mixin与 @include
前端·sass