watch 深度监听 immediate，handler，deep的使用

Vue.js 提供了一个方法 watch，它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。具体的用法可以直接看下面的示例，简单直接。

  当Name值变化时，watch监听到并且执行

<div>
      <p>Name: <input type="text" v-model="Name"></p>
</div> 

 export default {
  data() {
    return {
      Name: 'wayne'
    }
  },
  watch: {
    Name(newName, oldName) {
      console.log(newName)
    }
  }
}

 

 

handler方法和immediate属性

上面的例子是值变化时候，watch才执行，我们想让值最初时候watch就执行就用到了handler和immediate属性。

 <div>
        <p>Name: <input v-model="Name" type="text"></p>
      </div>

export default {
  data() {
    return {
      Name: 'wayne'
    }
  },
  watch: {
    Name: {
      handler(newName, oldName) {
        console.log(newName)
      },
      // 代表在wacth里声明了Name这个方法之后立即先去执行handler方法，如果设置了false，那么效果和上边例子一样
      immediate: true
    }
  }
}

 

 

 

deep属性（深度监听，常用语对象下面属性的改变）

data（） {
    return {
        docData: {
            'doc_id': 1,
            'tpl_data': 'abc'
        }
    }
}，
watch: {
    docData: {
        handler(newVal) {
            this.change_number++
        },
    deep: true
    }    
}