vue基礎篇-計算屬性（第三章 ）

計算屬性
一、methods vs computed
computed： 是計算屬性，實時響應的，比如你要根據data裏一個值隨時變化做出一些處理，就用computed。
Methods：是方法，比如你點擊事件要執行一個方法，這時候就用methods。

相同：兩者達到的效果是同樣的。
不同：計算屬性是基於它們的依賴進行緩存的，只有相關依賴會發生改變時纔會重新求職。只要相關依賴未改變，只會返回之前的結果，不再執行函數。

 <p>Reversed message: "{{ reversedMessage() }}"</p>

computed：

 var vm = new Vue({
    el: '#example',
    data: {
    message: 'Hello'
    },
    computed: {
    // a computed getter
    reversedMessage: function () {
    // `this` points to the vm instance
    return this.message.split('').reverse().join('')
    }
    }
    })

methods：

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

將同一函數定義爲一個 method 或者一個計算屬性（computed）。對於最終的結果，兩種方式確實是相同的
不同的是computed計算屬性是基於它們的依賴進行緩存的。計算屬性computed只有在它的相關依賴發生改變時纔會重新求值。

總結：數據量大，需要緩存的時候用computed；每次確實需要重新加載，不需要緩存時用methods

二、computed VS watched
共同點：都是希望在依賴數據發生改變的時候，被依賴的數據根據預先定義好的函數，發生“自動”的變化。
不同： watch和computed各自處理的數據關係場景不同
(1).watch擅長處理的場景：一個數據影響多個數據
(2).computed擅長處理的場景：一個數據受多個數據影響

var vm = new Vue({
el: '#demo',
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
}
}
})

上面代碼是命令式的和重複的，computed屬性：代碼更簡單。

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

總結：儘量用computed計算屬性來監視數據的變化，因爲它本身就這個特性，用watch沒有computed“自動”，手動設置使代碼變複雜。

三、注意computed的屬性調用
computed是屬性調用，而methods是函數調用
computed帶有緩存功能，而methods不是

例子：

 <!--HTML部分-->
<div id="app">
    <h1>{{message}}</h1>
    <p class="test1">{{methodTest}}</p>
    <p class="test2-1">{{methodTest()}}</p>
    <p class="test2-2">{{methodTest()}}</p>
    <p class="test2-3">{{methodTest()}}</p>
    <p class="test3-1">{{computedTest}}</p>
    <p class="test3-2">{{computedTest}}</p>
</div>

<!--script部分-->
let vm = new Vue({
    el: '#app',
    data: {
        message: '我是消息，'
    },
    methods: {
        methodTest() {
            return this.message + '現在我用的是methods'
        }
    },
    computed: {
        computedTest() {
            return this.message + '現在我用的是computed'
        }
    }
})

computed的屬性調用：在HTML的插值裏
computed定義的方法我們是以屬性訪問的形式調用的，{{computedTest}}
methods定義的方法，我們必須要加上()來調用，如{{methodTest()}}，否則，視圖會出現test1的情況，見下圖