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

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

computed和methods

計算屬性應(yīng)該放到computed屬性中，函數(shù)放到methods中，而實際上計算屬性的語句也是寫到函數(shù)里，所以其實寫到methods也是可以的，但兩者還是有區(qū)別的。

<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('')
        }
    }
})

對于最終的結(jié)果，methods和computed是相同的，

不同的是computed是基于它們的依賴進(jìn)行緩存的。計算屬性只有在它的相關(guān)依賴發(fā)生改變時才會重新求值，這就意味著只要message還沒有發(fā)生改變，多次訪問reversedMessage計算屬性會立即返回之前的計算結(jié)果，而不必再次執(zhí)行函數(shù)(假如函數(shù)里有獲取當(dāng)前時間的語句也不會執(zhí)行)。

相比而言，只要發(fā)生重新渲染，methods調(diào)用總會執(zhí)行該函數(shù)。

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

watch

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

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

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

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

watch的方式，只要data中的數(shù)據(jù)發(fā)生變化，watch就會監(jiān)測到，并執(zhí)行相對應(yīng)的方法。

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中的數(shù)據(jù)作為參數(shù)，通過函數(shù)內(nèi)部計算，返回一個新的數(shù)據(jù)。而set方法是將計算后得新數(shù)據(jù)的值作為參數(shù)，改變原本data中的數(shù)據(jù)。

<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的值最為參數(shù)傳進(jìn)來。
            set:function(newValue){
                var name = newValue.split(' ');
                this.firstName = name[0];
                this.lastName = name[name.length - 1];
            }
        }
    }
})

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

在使用Vue的時候，get會在改變data的數(shù)據(jù)時被調(diào)用，而set會在改變computed中新數(shù)據(jù)的返回值的時候被調(diào)用。