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

相关推荐
chimpro几秒前
都2025年了还不会flex?一篇文章带你理顺flex!
前端
LeeAt几秒前
AI单词拍照识别移动端项目(一)
前端·react.js·ai编程
Mintopia9 分钟前
三维空间的 “切蛋糕大师”:八叉树的底层奥秘与妙用
前端·javascript·计算机图形学
布兰妮甜20 分钟前
单例模式在前端(JavaScript)中的实现与应用
前端·javascript·单例模式
Mintopia21 分钟前
Three.js 加载模型文件:从二进制到像素的奇幻漂流
前端·javascript·three.js
StrongerIrene30 分钟前
rs build 的process.env的值undefined解决方案
开发语言·javascript·ecmascript
前端小巷子39 分钟前
跨域问题解决方案:JSONP
前端·javascript·面试
eric*16881 小时前
尚硅谷张天禹老师课程配套笔记
前端·vue.js·笔记·vue·尚硅谷·张天禹·尚硅谷张天禹
程序员爱钓鱼1 小时前
Go语言中的反射机制 — 元编程技巧与注意事项
前端·后端·go
GIS之路1 小时前
GeoTools 结合 OpenLayers 实现属性查询(二)
前端·信息可视化