<template>
  <div class="hello">
    <button @click="change1">改变msg</button>
    <h1>{{msg}}</h1>
    <hr>
    <button @click="change2">改变obj</button>
    <h2>{{obj.a}}</h2>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'hello',
      obj: {
        a: '123'
      }
    }
  },
  methods: {
    change1 () {
      this.msg = 'world'
    },
    change2 () {
      this.obj.a = '456'
    }
  },
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

普通监听

• 可以触发监听，拿到新的值和旧的值

  watch: {
    msg (newVal, oldVal) {
      console.log('new:' + newVal);
      console.log('old:' + oldVal);
    }
  }
1
2
3
4
5
6

深度监听

• 受 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。
• 当我们改变obj.a的值时，我们发现是无效的。没有深度监听对象，是无法触发监听。

  watch: {
    obj: {
      handler (newVal, oldVal) {
        console.log('watch1');
        console.log('new:' + newVal);
        console.log('old:' + oldVal);
      },
      // deep: true
    }
  }
1
2
3
4
5
6
7
8
9
10

• deep的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何修改obj里面任何一个属性都会触发这个监听器里的 handler。
• 引用类型需要深度监听才会触发监听，但是拿不到oldVal值

  watch: {
    obj: {
      handler (newVal, oldVal) {
        console.log('watch1');
        console.log('new:' + newVal.a);
        console.log('old:' + oldVal.a);
      },
      deep: true
    }
  }
1
2
3
4
5
6
7
8
9
10

• 优化，我们可以是使用字符串形式监听，可以不用深度监听。
• 可以触发监听，可以拿到oldVal值

  watch: {
    'obj.a': {
      handler (newVal, oldVal) {
        console.log('watch2');
        console.log('newVal:' + newVal);
        console.log('oldVal:' + oldVal);
      },
      // deep: true
    }
  }
1
2
3
4
5
6
7
8
9
10