3、計算屬性

---

title: 3、計算屬性
date: 2017-07-27 10:19:21
tags: vue筆記(妙味)

---

之前說過，模板內在插值中寫表達式很方便，但是如果放太多邏輯會讓模板過重難以維護。所以在模板內只適合簡單的運算，稍微複雜的語句就需要計算屬性了。

computed和methods

計算屬性應該放到computed屬性中，函數放到methods中，而實際上計算屬性的語句也是寫到函數裏，所以其實寫到methods也是可以的，但兩者還是有區別的。

<div id="app">
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
    <p>Methods reversed message: "{{ reversedMessage1() }}"</p>
</div>

var vm = new Vue({
        el:'#app',
        data:{
            message:'hello'
        },
    computed:{
        reversedMessage: function(){
            return this.message.split('').reverse().join('')
        }
    },
    methods:{
        reversedMessage1: function(){
            return this.message.split('').reverse().join('')
        }
    }
})

對於最終的結果，methods和computed是相同的，

不同的是computed是基於它們的依賴進行緩存的。計算屬性只有在它的相關依賴發生改變時纔會重新求值，這就意味着只要message還沒有發生改變，多次訪問reversedMessage計算屬性會立即返回之前的計算結果，而不必再次執行函數(假如函數裏有獲取當前時間的語句也不會執行)。

相比而言，只要發生重新渲染，methods調用總會執行該函數。

所以假如有一個性能開銷比較大的計算屬性A，而且可能別的計算屬性還依賴於A的返回值，那麼有緩存可以節省性能。但是不需要緩存時可以用methods代替。

watch

Vue提供了一種更通用的方式來觀察和響應Vue實例上的數據變動，就是watch屬性。

但是當有一些數據需要隨着其他數據變動而變動時，很容易濫用watch，通常更好的方法是使用computed屬性而不是命令式的watch。

<div id="app1">
    {{ fullName }}
</div>

<div id="app2">
    {{ fullName }}
</div>

watch的方式，只要data中的數據發生變化，watch就會監測到，並執行相對應的方法。

var app1 = new Vue({
    el:'#app1',
    data:{
        firstName:'Foo',
        lastName:'Bar',
        fullName:'Foo Bar'
    },
    watch:{
        firstName: function(val){
            this.fullName = val + ' ' + this.lastName;
        },
        lastName:function(val){
            this.fullName = this.firstName + ' ' + val;
        }
    }
})
app1.firstName = 'tim';

computed的方式，這裏就是上面說的，fullName會隨着firstName和lastName的改變而改變。很明顯在這裏使用computed的方法更簡潔。

var app2 = new Vue({
    el:'#app2',
    data:{
        firstName:'Foo',
        lastName:'Bar'
    },
    computed:{
        fullName: function(){
            return this.firstName + ' ' + this.lastName;
        }
    }
})
app2.firstName = 'tom';

get和set

computed中不僅有get，還有set方法。

之前介紹的都是get方法，也就是data中的數據作爲參數，通過函數內部計算，返回一個新的數據。而set方法是將計算後得新數據的值作爲參數，改變原本data中的數據。

<div id="app1">
    {{ fullName }}
</div>

var app1 = new Vue({
    el:'#app1',
    data:{
        firstName:'Foo',
        lastName:'Bar'
    },
    computed:{
        fullName:{
            get:function(){
                return this.firstName + ' ' + this.lastName;
            },
            // 這裏會將fullName的值最爲參數傳進來。
            set:function(newValue){
                var name = newValue.split(' ');
                this.firstName = name[0];
                this.lastName = name[name.length - 1];
            }
        }
    }
})

// 這裏更改fullName的值會調用set()，然後會改變firstName和lastName的值。在通過get展示在html中
app1.fullName = 'john Doe';

在使用Vue的時候，get會在改變data的數據時被調用，而set會在改變computed中新數據的返回值的時候被調用。