Vue.js 计算属性(computed)

如果在模板中使用一些复杂的表达式，会让模板显得过于繁重，且后期难以维护。对此，vue.js 提供了计算属性（computed），你可以把这些复杂的表达式写到里面。

实例 1

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue.js 计算属性(computed)</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="css/mui.min.css">
    <title>Vue.js 计算属性(computed)</title>
    <script src="http://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
    <div id="app">
        a={{ a }}, b={{ b }}   <!-- a = 1; b = 2;  -->
    </div>
    <script>
        var app= new Vue({
            el: '#app',
            data: {
                a: 1
            },
            computed: {
                b: function () {
                    return this.a + 1     //返回的值是2 所以b=2;
                }
            }
        })
    </script>
</body>
</html>

计算属性缓存

缓存是计算属性的一大特点，使用计算属性时，每次获取的值是基于依赖的缓存值，也就是说，当数据源未发生变动时，获取的值将一直是缓存值。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue.js 计算属性(computed)</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="css/mui.min.css">
    <title>Vue.js 计算属性(computed)</title>
    <script src="http://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
    <div id="app">
        a={{ a }}, b={{ b }}    <!-- a = 1; b = 2;  -->
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                a: 1
            },
            computed: {
                b: function () {
                    return this.a + 1   //返回的值是2 ,b=2   因为 b 是依赖于 a 的;
                }
            }
        })
        vm.b = 8;
    </script>
</body>
</html>

上述实例中，我们对 b 进行了重新赋值，但是没有改变a的值，因为 b 是依赖于 a 的，所以最终 b 的结果还是2。

计算属性与methods的区别

计算属性能实现的功能，使用方法（methods）也能实现，但两者还是有本质的不同，区别如下：

计算属性获取的是缓存值，而methods是直接调用函数进行计算所得。

计算属性中的函数在dom加载后马上执行，并将结果显示在页面上。methods中的函数需要一定的触发条件，否则不会执行。

计算属性 Getter 和 Setter 方法

vue.js 计算属性有两个方法，分别为 getter 和 setter，当没有指明方法时，默认使用 getter。

实例1中 computed 里面的代码也可以写成：

computed: {
    b: {
        get:function () {
            return this.a + 1
        }
    }
}

运行结果是一样的。

实例 3

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue.js 计算属性(computed)</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="css/mui.min.css">
    <title>Vue.js 计算属性(computed)</title>
    <script src="http://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
    <div id="app">{{message}}</div>   <!-- 显示为my second lesson -->
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                title: 'my first lesson'
            },
            computed: {
                message: {
                    // getter
                    get: function () {
                        return this.title
                    },
                    //setter
                    set: function (newValue) {
                        this.title = newValue
                    }
                }
            }
        })
        vm.message = 'my second lesson'; // vue.js会执行set方法，从而改变message的值，
                                        //如果不使用set方法，message值为“my first lesson”。
    </script>
</body>
</html>

上述实例中，在给message重新赋值时，vue.js会执行set方法，从而改变message的值，如果不使用set方法，message值为“my first lesson”。