watch

watch瞭解更多

詳細

一個對象，鍵是需要觀察的表達式，值是對應回調函數。值也可以是方法名，或者包含選項的對象。Vue 實例將會在**實例化時調用 $watch()**，遍歷 watch 對象的每一個屬性。

示例

var vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3
  },
  watch: {
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
    // 方法名
    b: 'someMethod',
    // 深度 watcher
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    }
  }
})
vm.a = 2 // => new: 2, old: 1

下面是一個有趣的例子，詳情請點擊，我在這裏簡化了許多

HTML:

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

<script>
    var watchExampleVM = new Vue({
        el: '#watch-example',
        data: {
            question: '',
            answer: 'I cannot give you an answer until you ask a question!',
            change: '沒有改變'
        },
        watch: {
            // 如果 question 發生改變，這個函數就會運行
            question: function (newQuestion) {
                this.answer = 'Waiting for you to stop typing...',
                this.change = "有改變"
            }
        }
    })
</script>