vuejs的watch监控对象

Posted on | Post modified:
使用vuejs的watch监控某个对象的具体元素

vuejs中watch监控对象的某个元素

使用deep来控制监控器对某个对象的具体一个元素进行监控

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div>
      <p>obj.a: {{obj.a}}</p>
      <p>obj.a: <input type="text" v-model="obj.a"></p>
</div>

new Vue({
  el: '#root',
  data: {
    obj: {
      a: 123
    }
  },
  watch: {
    obj: {
      handler(newName, oldName) {
         console.log('obj.a changed');
      },
      immediate: true,
      deep: true
    }
  } 
})
  • immediate:true代表如果在 wacth 里声明了 firstName 之后，就会立即先去执行里面的handler方法，如果为 false就跟我们以前的效果一样，不会在绑定的时候就执行
  • watch 里面的属性 deep，默认值是 false，代表是否深度监听
  • 监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何修改obj里面任何一个属性都会触发这个监听器里的 handler
  • 优化的方式就是使用字符串的方式来监听
  • 这样Vue.js才会一层一层解析下去，直到遇到属性a，然后才给a设置监听函数
1
2
3
4
5
6
7
8
9
watch: {
  'obj.a': {
    handler(newName, oldName) {
      console.log('obj.a changed');
    },
    immediate: true,
    // deep: true
  }
}