Vue計算屬性和偵聽器

fsrookie發表於2018-10-29
Vue

計算屬性

模板內的表示式非常便利，但是在模板中放入太多的邏輯會讓模板過重切難以維護。對於任何複雜邏輯都應該使用計算屬性。

<p>{{ reverseMsg }}</>

var vm = new Vue({
    el: `#example`,
    data: {
        message: `hello`
    },
    computed: {
        reverseMsg: function() {
            return this.message
        }
    }
})

這裡宣告一個計算屬性reverseMsg。我們提供的函式將作用屬性vm.reverseMsg的getter函式。

我們可以在表示式中呼叫方法來達到和計算屬性相同的作用。但是計算屬性是基於它們的依賴快取的。只有在相關依賴改變的時候才會重新求值。這就意味著只要message沒有改變，多次訪問reverseMsg還是返回同樣的值，而不是執行函式。

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

如上是不會發生改變的，應該不是響應式依賴。

  1. 計算屬性的setter

計算屬性預設只有getter，不過在需要時也可以提供一個setter。

computed: {
    fullName: {
        get: function() {},
        set: function() {
            
        }
    }
}

偵聽器

雖然計算屬性在大多數情況下更合適，但有時也需要一個自定義的偵聽器。這就是為什麼 Vue 通過 watch 選項提供了一個更通用的方法，來響應資料的變化。當需要在資料變化時執行非同步或開銷較大的操作時，這個方式是最有用的。

相關文章