計(jì)算屬性 vs watch

Vue明確的提供了一個通用的手段來發(fā)現(xiàn)數(shù)據(jù)的變化并為之做出響應(yīng)车酣，這就是使用watch選項(xiàng)曲稼。當(dāng)一些數(shù)據(jù)需要根據(jù)其它數(shù)據(jù)的變化做出相應(yīng)的改變時，使用watch確實(shí)是一種誘人的辦法湖员，尤其對于那些很熟悉AngularJS的同學(xué)更是如此贫悄。不過在這里我們還是更提倡使用計(jì)算屬性而不是watch，看看下面的例子就能區(qū)分它們的優(yōu)劣了：

<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
    }
  }
})

上面的代碼顯得很繁瑣娘摔，但又是不可避免的窄坦。再看看下列使用計(jì)算屬性實(shí)現(xiàn)的代碼：

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

顯而易見，使用計(jì)算屬性的代碼簡潔多了！
通過以上的了解鸭津，我們知道在大多數(shù)情況下使用計(jì)算屬性是更合適的彤侍，然而有個時候我們確實(shí)需要自定義watcher來滿足某些需求，這也是Vue提供了一個watch選項(xiàng)的原因曙博。假設(shè)有這樣一個需求：我們要對數(shù)據(jù)的改變做出異步響應(yīng)或做些消耗巨大的操作拥刻。請看下列代碼：

<div id="watch-example">
  <p>
    Ask a yes/no question:
    <input v-model="question">
  </p>
  <p>{{ answer }}</p>
</div>

<script src="https://cdn.jsdeliver.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
<script>
  var watchExampleVM = new Vue({
    el: '#watch-example',
    data: {
      question: ' ',
      answer: 'I cannot give you an answer until you ask a question!'
    },
    watch: {
      question: function ( newQuestion, oldQuestion ) {
        this.answer = 'Waiting for you to stop typing...'
        this.debouncedGetAnswer()
      }
    },
    created: function () {
      this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
    },
    methods: {
      getAnswer: function () {
        if (this.question.indexOf('?') === -1) {
          this.answer = 'Questions usually contain a question mark. ;-)'
          return
        }
        this.answer = 'Thinking...'
        var vm = this
        axios.get('https://yesno.wtf/api').then(function (response) {
          vm.answer = _.capitalize(response.data.answer)
        }).catch(function (error) {
            vm.answer = 'Error! Could not reach the API. ' + error
        })
      }
    }
  })
</script>

在上面的代碼中，我們在watch選項(xiàng)中執(zhí)行了一個異步操作（通過axios訪問api）父泳，并且限制了訪問這個api的頻次般哼，還可以在服務(wù)器返回最終結(jié)果之前顯示不同的提示信息。這些東西都是計(jì)算屬性實(shí)現(xiàn)不了的惠窄。除了在Vue實(shí)例的選項(xiàng)中使用watch蒸眠，還可以通過vm.$watch的方式來使用它。

計(jì)算屬性的 setter 方法

計(jì)算屬性默認(rèn)只提供 getter 方法杆融，必要的話我們可以提供對應(yīng)的 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]
    }
  }
}

現(xiàn)在我們可以運(yùn)行vm.fullname = ' John Doe '來測試一下，會發(fā)現(xiàn) setter 被調(diào)用了且vm.firstName和vm.lastName的值
被更新脾歇。