Vue计算属性computed

最新推荐文章于 2023-06-02 14:31:01 发布

好运haoyun

最新推荐文章于 2023-06-02 14:31:01 发布

阅读量85

点赞数

分类专栏： Vue 文章标签： vue 缓存 es6 javascript vue.js

本文链接：https://blog.csdn.net/qq_43439968/article/details/108425732

版权

Vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

Vue计算属性

计算出来的结果保存在属性中，保存在内存中，可以想象成一个缓存

Demo：和定义方法进行对比

<body>

<div id="vue">
    <!--需要通过括号去调用-->

    <p>{{currentTime1()}}
    <!--主要区别就是上面通过方法来调用，下面通过属性来调用-->
    <p>{{currentTime2}}</p>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script >
    var vm = new Vue({
        el:'#vue',
        data:{
            message:"hello"
        },
        methods:{
            currentTime1:function () {
                return Date.now();
            }
        },
        /*不建议重名*/
        computed:{
            currentTime2:function () {
                this.message;
                return Date.now();
            }

        }
    });
</script>
</body>

这是一个缓存的概念，主要体现在能节省计算机的性能，比如一些不常用的资源，方法是每调用一次是会重新执行一次计算结果的，但是有些不常用的数据，不用经常刷新，只是在改变内部数据后才需要进行刷新，像是mybatis的缓存一样，光是查询的时候是不刷新缓存的，当执行修改操作的时候缓存被清空，这是数据显示的区别
还有就是调用的一个区别，定义的方法通过加（）来调用，而计算属性是计算好得出的结果存放在属性中，使用属性值就开始计算，然后存放在属性中，属性又存放在内存中，调用的时候速度快，数据变更重新计算
当currentTime2中的数据发生改变时，缓存重新刷新，属性值重新计算，currentTime1（）本身就是一个方法，每调用一次就要重新计算一次
属性存放在内存中，速度会快一点点，