computed、watch和methods特性比較

計算屬性(computed)

舉例:html

<div id='example'>
    <p>Original message: "{{message}}"</p>
    <p>Computed reversed message: "{{reversedMessage}}"</p>
</div>
複製代碼
let vm = new Vue({
    el: '#example',
    data: {
        message: 'Hello'
    },
    computed: {
        reversedMessage: function () {
            return this.message.split('').reverse().join('')
        }
    }
})
複製代碼

計算屬性緩存(computed) vs 方法(methods)

使用方法實現一樣的效果:數組

<p>Reversed message: "{{reversedMessage()}}"</p>
複製代碼
methods: {
    reversedMessage: function () {
        return this.message.split('').reverse().join('');
    }
}
複製代碼

咱們能夠將同一函數定義爲一個方法而不是一個計算屬性。兩種方式的最終結果確實是徹底相同的。 不一樣的是計算屬性是基於它們的依賴進行緩存。計算屬性只有在它的相關依賴發生改變時纔會從新求值。緩存

爲何須要緩存?
假設咱們有一個性能開銷比較大的的計算屬性 A,它須要遍歷一個巨大的數組並作大量的計算。而後咱們可能有其餘的計算屬性依賴於 A 。若是沒有緩存,咱們將不可避免的屢次執行 A 的 getter!若是你不但願有緩存,請用方法來替代。異步

計算屬性(computed) vs 偵聽屬性(watch)

偵聽屬性函數

<div id="demo">{{ fullName }}</div>
複製代碼
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;
        }
    }
})
複製代碼

計算屬性的setter

計算屬性默認只有getter,不過在你須要時你也能夠提供一個setter:this

computed: {
    fullName: {
        get: function () {
            return this.firstName + this.lastName;
        },
        set: function (newValue) {
            var names = newValue.split(' ');
            this.firstName = names[0];
            this.lastName = names[names.length - 1];
        }
    }
}
複製代碼

這時運行vm.fullName = 'John Doe'時,setter會被調用,vm.firstNamevm.lastName 也會被相應的更新。spa

偵聽器(watch)使用

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

相關文章
相關標籤/搜索