計算屬性和監聽器 (VUE)

計算屬性和監聽器

計算屬性

首先咱們知道，模版內的表達式很是便利，可是設計他們的初衷時因爲簡單運算的，在模版中國放入太多的邏輯會這個模版難以維護。所以計算屬性應運而生。

若是不適用計算屬性帶來的複雜程度能夠看下面的例子
```html

對於複雜的邏輯而言，咱們更多的應該使用計算屬性

下面咱們來看一個基礎的例子

<div id="app">
    <p>{{ msg }}</p>
    <!-- 及其複雜的邏輯表達式很是不容易去維護 -->
    <p>{{ msg.split('').reverse().join('') }}</p>
</div>

const vm = new Vue({
    el: '#app',
    data: {
        msg: 'hello'
    }
})

當咱們使用計算屬性的時候，看看效果的方便

<div id="app">
        <p>{{ msg }}</p>
        <p>{{ msg.split('').reverse().join('') }}</p>
        <p>{{ reveredMessage }}</p>
    </div>

js

const vm = new Vue({
    el: '#app',
        data: {
            msg: 'hello',
        },
        computed: {
            // 計算屬性的getter 
            reveredMessage: function () {
                // this 指向時vm的實例
                return this.msg.split('').reverse().join('')
                }
            }
     })

計算屬性緩存vs方法

固然咱們能夠注意到，咱們能夠在表達式中調用方法來達到一樣的效果。

如同下面這個使用方法的例子

<!-- 這個方法直接調用來methods中的方法 -->
<p> 調用methods中的方法 {{ changeMsg() }} </p>

js部分

// 直接簡寫
methods: {
    changeMsg() {
        return this.msg.split('').reverse().join('')
    }
}

咱們能夠將同一個函數定義一個方法而不是一個計算屬性。兩種方式的最終結果確實徹底相同的，然而，不一樣的計算屬性是基於他們的響應式依賴進行緩存的，只在相關響應式依賴發生改變時，他們纔會從新求值。這就意味這隻要msg還沒發生改變，屢次訪問reveredMessage計算屬性會當即返回以前的計算結果，而沒必要再次執行函數。

這樣也一樣的意味這下面的計算屬性將再也不更新，由於 Date.now()不是響應式依賴：

computed: {
    now: function () {
        return Date.now()
    }
}

相比之下，每當觸發從新渲染時，調用方法總會再次執行函數

思考 咱們爲何使用computed計算屬性，在我看來，簡單來講，計算屬性能夠緩存。

爲們爲何須要緩存？假如咱們有一個性能開銷比較大的計算屬性getCount, 它須要遍歷一個巨大的數組並做出大量的計算。而後咱們有可能有其餘的計算屬性依賴於getCount,若是沒有緩存，咱們將不可避免的屢次去執行getCount的getter！。。。。固然了，若是你不但願有緩存，換一句話來講，你可使用方法來代替。

計算屬性vs偵聽屬性

Vue提供了一種更爲通用的方式來觀察和響應Vue實列上的數據變化：偵聽屬性。固然你有一些數據須要隨着其餘數據的變化而變更時你很容易濫用wathch，--。
然而呢，咱們最好的作法時使用計算屬性而不是命令式的watch回調。

下面咱們能夠想一想這個例子

<p> {{ fullName }} </p>

主要看js代碼

cosnt vm = new Vue({
    el: '#app',
    data: {
        firstName: '',
        lastName: '',
        fullName: '',
    },
    watch: {
        firstName: function (newVal, oldVal) {
            this.fullName = newVal + this.lastVal
        },
        lastName: function (newVal, oldVal) {
            this.fullName = this.firstName + newVal
        }
    }
})

使用watch的話每次就只能監聽到一個屬性。並且命令是重複的，將它和計算屬性進行對比。

<p> {{ fullName }} </p>

看js代碼

cosnt vm = new Vue({
    el: '#app',
    data: {
        firstName: '',
        lastName: '',
        // fullName: '',
    },
    computed: {
        fullName: {
            // 只須要執行一次就OK
            return this.firstName + this.lastName
        }
    }   
})

偵聽器

雖然計算屬性在大多數狀況下更加適合，但有時候也須要一個自定義的偵聽器。這就是爲何Vue經過watch選項提供了一個更加通用的方法，來響應數據的變化。當須要在數據變化時執行異步或者開銷較大的操做時，這個方法時最有用的。

總結 以上這個例子，使用的watch選項中容許咱們執行異步操做（訪問一個API），限制咱們執行該操做的頻率，並在咱們最終結果前，設置中間狀態／。這些計算屬性是沒法作到的。

固然咱們除了有watch以外，咱們還可使用vm.$watch 這個API。