Vue學習筆記-常用屬性

computed、watcher和methods的異同

      1、方法執行

         computed屬性基于他所依賴的資料進行緩存（如果它依賴的資料沒有變化，多次調用傳回之前計算結果，不會每次都重複執行）；

        watcher屬性裡面的方法當需要的資料發生變化時執行。

        methods屬性裡面的方法在綁定事件的dom觸發時執行（觸發一次，執行一次）

  2、調用方法

       computed的屬性與data的屬性調用方式一樣，可以用{{}}。

<div id="example">
   <p>初始message：{{message}}</p>
   <p>計算後的message：{{reversedMessage}}</p>
</div>
           

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 一個 computed 屬性的 getter 函數
    reversedMessage: function () {
      // `this` 指向 vm 執行個體
      return this.message.split('').reverse().join('')
    }
  }
})
           

     watcher的屬性命名要與data屬性的屬性名對應（監控question變量的變化，watcher屬性就要用question命名）

<div id="watch-example">
  <p>
    問一個答案是 yes/no 的問題：
    <input v-model="question">
  </p>
  <p>{{ answer }}</p>
</div>
           

<!-- 對于 ajax 庫(ajax libraries)和通用工具方法的集合(collections of general-purpose utility methods)來說， -->
<!-- 由于已經存在大量與其相關的生态系統， -->
<!-- 是以 Vue 核心無需重新創造，以保持輕量的檔案體積。 -->
<!-- 同時這也可以使你自由随意地選擇自己最熟悉的。 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<script>
var watchExampleVM = new Vue({
  el: '#watch-example',
  data: {
    question: '',
    answer: '你要先提出問題，我才能給你答案！'
  },
  watch: {
    // 隻要 question 發生改變，此函數就會執行
    question: function (newQuestion, oldQuestion) {
      this.answer = '等待輸入停止……'
      this.getAnswer()
    }
  },
  methods: {
    // _.debounce 是由 lodash 提供的函數，
    // 在運作特别消耗性能的操作時，
    // 可以使用 _.debounce 來限制頻率。
    // 在下面這種場景中，我們需要限制通路 yesno.wtf/api 的頻率，
    // 等到使用者輸入完畢之後，ajax 請求才會發出。
    // 想要了解更多關于 _.debounce 函數（以及與它類似的 _.throttle）的詳細資訊，
    // 請通路：https://lodash.com/docs#debounce
    getAnswer: _.debounce(
      function () {
        if (this.question.indexOf('？') === -1) {
          this.answer = '問題通常需要包含一個中文問号。;-)'
          return
        }
        this.answer = '思考中……'
        var vm = this
        axios.get('https://yesno.wtf/api')
          .then(function (response) {
            vm.answer = _.capitalize(response.data.answer)
          })
          .catch(function (error) {
            vm.answer = '錯誤！API 無法處理。' + error
          })
      },
      // 這是使用者停止輸入操作後所等待的毫秒數。
      // （譯者注：500毫秒之内，使用者繼續輸入，則重新計時）
      500
    )
  }
})
</script>
           

     methods的屬性可以随意命名，調用是通過事件綁定機制來進行的（也可以傳參，擷取事件資訊用$event）。

new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})
           

<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>