Vue

Vue的计算属性

2021年7月21日 /

一 什么是计算属性

说白了，简单理解就是调用方法的另外一种形式。啥意思呢？提前把方法的返回值计算好，缓存起来，到时候如果需要调用的话，直接把方法的返回值拿走即可。不再需要重新计算。

2021.07.07补充：However, the difference is that computed properties are cached based on their reactive dependencies. A computed property will only re-evaluate when some of its reactive dependencies have changed. This means as long as message has not changed, multiple access to the reversedMessage computed property will immediately return the previously computed result without having to run the function again.

查看官网新收获：https://vuejs.org/v2/guide/computed.html

因此，相比较方法而言，其性能可能会更好一些；另外，对于在模板中需要使用的一些复杂的逻辑计算的地方，不太建议直接写出那些复杂的计算逻辑和表达式，可能使用计算属性会更直观一些。

二 使用方法和计算属性分别获取系统时间的例子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>8计算属性</title>
        <script src="vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <p>系统当前时间，方法：{{ getCurrentTime() }}</p>
            <p>系统当前时间，计算属性：{{compCurrentTime}}</p>
        </div>

        <script type="text/javascript">
            let app = new Vue({
                el:'#app',
                methods:{
                    getCurrentTime:function(){
                        return new Date().toLocaleString();
                    }
                },
                computed:{
                    compCurrentTime:function(){
                        return new Date().toLocaleString();
                    }
                }
            })  
        </script>
    </body>
</html>

注意事项：

1方法和计算属性的定义非常类似；

2 方法和计算属性的调用方式不太一样，计算属性调用时不带括号()；

3 控制台上，通过app.getCurrentTime()和app.compCurrentTime分别调用多次，可以看到结果的差别。计算属性的值，由于被cache了，其结果保持不变，而方法则每次调用其结果都不一样。

app.compCurrentTime
1625561721435
app.getCurrentTime()
1625562694057

三 官网的计算属性的例子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>8.1官网计算属性</title>
        <script src="vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="example-8">
            <p>Original message: "{{message}}"</p>
            <p>Computed reversed message:"{{reverseMessage}}"</p>
            <p>不使用计算属性反转message："{{  this.message.split('').reverse().join('') }}"</p>
        </div>

        <script type="text/javascript">
            let app = new Vue({
                el:"#example-8",
                data:{
                    message:'Hello'
                },
                computed:{
                    // a computed getter
                    reverseMessage:function(){
                        // `this` point to the vm instance
                        return this.message.split('').reverse().join('');
                    }
                }               
            })
        </script>
    </body>
</html>

从例子中，可以看到，通过计算属性获取message的反转数据，比较容易理解，而不是一股脑儿的写到p标签上。同时，记得调用计算属性的时候，不需要圆括号，这是跟调用方法的区别。

Post Views: 2,499

留言