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”。