vue 深度监听

首先要知道vue的watch(侦听器),侦听某属性,当属性发生变化时执行对应的操作函数.

watch:{
    attributeName:function(){
        //侦听到属性变化后的具体操作
    }
}

先看一个demo:

<template>
  <div class="hello">
    <input type="text" v-model="test.name" @click="cChange">
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return{
      test:{
        name:'zsy'
      }
    }
  },
  watch:{
    test:function(){
      console.log('test改变了');
    }
  },
  methods:{
    cChange:function(){
      this.test.name = 'fuck'
    }
  }
}
</script>

侦听一个object类型的属性,当改变它的一个键值时并没有改变侦听的该属性的地址,因此并不会触发侦听的执行函数.Array类型的同样如此.如果想实现预期的侦听操作则需要用到深度侦听了

watch侦听属性其实还有三个参数:

handler:回调函数,两个参数分别为所侦听的属性的 新值 和 旧值

depp: Boolean类型,是否深度侦听,即是否侦听对象内部值的变化(此参数则是本博客的核心

immediate:Boolean类型,是否立即调用(此处要说明一下,侦听器第一次绑定上时是不会立即执行的,只有当属性发生变化时才会触发),而此参数设置为true时第一次绑定侦听器时便会触发

<template>
  <div class="hello">
    <input type="text" v-model="test.name" @click="cChange">
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return{
      test:{
        name:'zsy'
      }
    }
  },
  watch:{
    test:{
      handler:function(newVal, oldVal){
        console.log('test改变了',newVal,oldVal);
      },
      deep:true,        //深度监听
      immediate:true    //初次绑定执行回调
    }
  },
  methods:{
    cChange:function(){
      this.test.name = 'fuck'
    }
  }
}
</script>