【vue 7】计算属性

诗若颜

已于 2023-02-20 14:47:15 修改

阅读量108

点赞数

分类专栏： Vue 文章标签： vue html5

于 2023-02-20 14:45:52 首次发布

本文链接：https://blog.csdn.net/qq_44718582/article/details/129119466

版权

Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.什么是计算属性

计算属性的重点突出“属性”两个字上（属性是名词），首先它是个属性，其次这个属性有计算的能力（计算是动词），这里的计算就是个函数；简单点说，它就是一个能够将计算结果缓存起来的属性（将行为转化成了静态的属性），仅此而已；可以想象为缓存！
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <div id="app" >
        <p>{{currentTime1()}}</p>
        <p>{{currentTime2}}</p>
        
    </div>
</body>
<!--引入js文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data:{
            message: "hello,ws"
        },
        methods:{
            currentTime1: function(){
                return Date.now();
            }
        },
        computed:{    // currentTime2是一个属性不是方法
            currentTime2: function(){
                return Date.now();
            }
        }

    });   
</script>
</html>

注意：methods和computed里的东西不能重名

methods：定义方法，调用方法使用currentTime1(),需要带括号
computed：定义计算属性，调用属性使用currentTime2，不需要带括号
结论：
调用方法时，每次都需要进行计算，既然有计算过程必定产生系统开销，那如果这个结果是不经常变化的呢？此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点，计算的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销。