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