computed

  1. 使用方法
    computed可以添加很多實例屬性,這些屬性可以通過實例直接獲取到,是通過將作用函數作為屬性的getter,通過訪問屬性就能調用getter來返回值
    所以使用的是屬性,而不是屬性聲明的函數;
<p>{{ message }}</p>
<p>Reversed Message : "{{ reverseMessage1 }}"</p>  
<p>Reversed Message : "{{ reverseMessage2() }}"</p>
computed: {
      reverseMessage1: function () {
      return this.message.split('').reverse().join('');
      },
}
methods: {
      reverseMessage2: function () {
      return this.message.split('').reverse().join('');
      },
}

所以在上面代碼中模板中調用的是屬性所以不帶括號,而methods定義的是方法所以在使用的時候要加 ( ) ;

  1. getter與setter
    computed中屬性定義的時候,若只定義一個函數則默認為getter函數,
    若要定義setter可以使用{}聲明多個屬性方法
computed: {
  newProperty: {
    // getter
    get: function () {
      return this.msg + this.msg
    },
    // setter
    set: function (newValue) {
      this.msg = this.msg + newValue
    }
  }
}

調用setter函數的方法是vm.newProperty = 'newValue' 直接參數賦值即可

  1. 與method的不同
<input type="text" v-model="message">
<p>{{ message }}</p>
<p>{{ now1 }}</p>
<p>{{ now2 }}</p>
computed: {
    now1: function () {
       return Date.now();
    }
},
 methods: {
     now2: function () {
       return Date.now();
     }
}

input標簽和message雙向綁定,當input內容發生變化,頁面會實時進行渲染

  • method只要頁面有渲染就調用方法
    當input內容變化,message更新,發生渲染所以now2也會發生變化
  • computed會緩存數據只有當依賴的數據發生變化才會調用函數,
    否則直接返回緩存的結果
    當input內容變化,message更新,因為now1中return中沒有數據內容只會渲染一次,所以不會調用多一次屬性定義的函數。(其實是因為依賴沒有,也就不會再發生變化了)
  1. 與watched方法的不同
    為了觀察數據變化然后做出相應行為,往往使用簡單直接的watched來管擦數據變化,然后對觀察的數據定義變化后要實行的函數
    官方例子
    <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
    }
  }
})

這里為了讓firstName或者lastName發生變化時能讓fullName也一起變化,這個時候就要添加watch來觀察變化且對fullName數據進行更新,
這樣做很繁瑣,要定義多個方法來對一個數據進行更新。

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

使用computed不用專門建立watch來觀察變化,而是依賴于firstName和 lastName,當發生變化時就會調用函數來對fullName進行渲染。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容