watch 深度监听

<template>
  <div class="about">
    <p>about</p>
    <span>{{obj.name}}</span>
    <button @click="handleName">改名</button>
  </div>
</template>

<script>
export default {
  data(){
    return{
      obj:{
        name:"告白气球",
        age:18
      }
    }
  },
  methods:{
    handleName(){
      this.obj.name='夏天的风'
    }
  },
  watch:{
    obj:{
      handler(newValue, oldValue) {
      console.log(newValue,oldValue)
    },
    deep: true,
    immediate:true
    }
  }
}
</script>

总结:immediate:true 表示 watch 声明了 obj 后 就立即执行 handler 方法
deep 为 true 代表深度监听
上面这种写法是给 对象的 所有属性都加上了这个监听器,开销大
某个属性修改了都会触发这个监听器,可以使用如下方法

 watch:{
    'obj.name':{
      handler(newValue, oldValue) {
      console.log(newValue,oldValue)
    },
    deep: true,
       immediate:true
    }
  }

你可能感兴趣的:(vue)