1. 程式人生 > >vue-computed計算屬性

vue-computed計算屬性

params split ted 響應 data 多次 內部 str on()

計算屬性:用來封裝你想對一個屬性進行的操作

computed VS mothod實現的效果和定義一個methods中的function相同,但是他們的區別在於:methods的function當觸發重新渲染時總會重新執行,而計算屬性是基於他們的依賴進行緩存的,只有在它的相關依賴進行改變時才會改變,這就意味著它的相關依賴沒有發生改變時就算觸發重新渲染也不會執行該函數,我們為什麽需要緩存?假設我們有一個性能開銷比較大的的計算屬性 A,它需要遍歷一個巨大的數組並做大量的計算。然後我們可能有其他的計算屬性依賴於 A 。如果沒有緩存,我們將不可避免的多次執行 A 的 getter!如果你不希望有緩存,請用方法來替代。

computed VS $watch(偵聽屬性) 偵聽屬性用於觀察和響應 所依賴的實例上的改變,它的原理和computed相同,都是依賴改變時做出響應,但是區別在於有時候用computed代碼量會很簡潔很清晰但是用偵聽屬性可能需要寫重復的代碼如:

watch: {   firstName: function (val) {   this.fullName = val + ‘ ‘ + this.lastName   },   lastName: function (val) {   this.fullName = this.firstName + ‘ ‘ + val   } }偵聽屬性 computed: {   fullName: function () {
  return this.firstName + ‘ ‘ + this.lastName   } }計算屬性 計算屬性實際上默認內部是一個get函數,但是有時候我們需要改變它而引起別的值的改變,這時候我們需要實現一個setter 如:

var myVue = new Vue({
  el:‘#app‘,
  data:{
    firstname:‘pian‘,
    lastname:‘ruijie‘
  },
computed: {
  fullname:{  
    get: function(){
    return this.firstname +‘ ‘+ this.lastname
   },
    set: function(newvalue){
    var name = newvalue.split(‘ ‘)
    this.firstname = name[0]
    this.lastname = name[name.length-1]
   }
  }
}

這樣當改變fullname的值的時候,firstname和lastname也會做出改變。

                                                    

vue-computed計算屬性