計算屬性的getter和setter

setter：設置值時觸發，

getter：獲取值時觸發，

vue中computed屬性默認為getter，但是它還提供了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]
    }
  }
}

需要注意的是，不是說我們更改了getter里使用的變量，就會觸發computed的更新，前提是computed里的值必須要在模板里使用才行。如下：

<template>
    <div id="demo">
         <!-- <p> {{ fullName }} </p> -->
         <input type="text" v-model="firstName">
         <input type="text" v-model="lastName">
    </div>
</template>
 
var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'zhang',
    lastName: 'san'
  },
  computed: {
    fullName: function () {
      console.log('computed getter...')
      return this.firstName + ' ' + this.lastName
    }
  },
  updated () {
     console.log('updated')
  }
})

注釋div中的fullName語句，當firstName或者lastName改變時，console.log('computed getter...')不會改變。

還需要注意的是，並不是觸發了setter也就會觸發getter，他們兩個是相互獨立的。我們這里修改了fullName會觸發getter是因為setter函數里有改變firstName 和 lastName 值的代碼。