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>