【VUE】計算屬性：getter與setter

vue的計算屬性

一、基礎用法只有getter

代碼寫法簡單，在getter函數內return計算結果。

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    // 計算屬性的 getter
    fullName: function () {
      // 1、`this` 指向 vm 實例
      // 2、return計算結果
      return this.firstName + ' ' + this.lastName
    }
  }
})

 

二、高級用法增加setter

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

現在再運行 vm.fullName = 'John Doe' 時，setter 會被調用，vm.firstName 和 vm.lastName也會相應地被更新；進而會觸發getter被調用。