【Vue】计算属性

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p>currentTime1:{{currentTime1()}}</p>
    <p>currentTime2:{{currentTime2}}</p>
</div>
 
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data:{
            message:"hello,java"
        },
        methods: {
            currentTime1:function () {
                return Date.now();
            }
        },
        computed:{//计算属性
            currentTime2:function () {
                this.message;
                return Date.now();
            }
        }
    });
 
</script>
</body>
</html>

  

总结:

调用方法时,每次都需要进行计算,既然有计算过程则必定产生系统开销,如果这个结果不是经常变化的,此时就可以考虑将这个结果缓存起来,采用计算属性可以很防备的做到这一点,计算属性的主要特性就是为了将不经常变化的计算结果进行缓存,以节约我们系统的开销。

 

posted @   iTao0128  阅读(108)  评论(0编辑  收藏  举报
编辑推荐:
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律
点击右上角即可分享
微信分享提示