Vue.js 计算属性(computed)

时间 2019-11-17

标签 vue.js vue 计算属性 computed 栏目 JavaScript 繁體版

原文原文链接

Vue.js 计算属性(computed)

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

实例 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>

计算属性缓存

缓存是计算属性的一大特色，使用计算属性时，每次获取的值是基于依赖的缓存值，也就是说，当数据源未发生变更时，获取的值将一直是缓存值。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。vue

计算属性与methods的区别

计算属性能实现的功能，使用方法（methods）也能实现，但二者仍是有本质的不一样，区别以下：web

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

计算属性中的函数在dom加载后立刻执行，并将结果显示在页面上。methods中的函数须要必定的触发条件，不然不会执行。app

计算属性 Getter 和 Setter 方法

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

实例1中 computed 里面的代码也能够写成：dom

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

Vue.js 计算属性(computed)

Vue.js 计算属性(computed)

实例 1

计算属性 缓存

计算属性与methods的区别

计算属性 Getter 和 Setter 方法

实例 3

计算属性缓存