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

• 基本用法：
    当Name值变化时，watch监听到并且执行

<div>
      <p>Name: <input type="text" v-model="Name"></p>
</div> 
new Vue({
  el: '#root',
  data: {
    Name: 'wayne',
  },
  watch: {
    Name(newName, oldName) {
      console.log(newName)
    }
  } 
})

handler方法和immediate属性

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

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

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

<div id="app">
    <input type="text" v-model:value="childrens.name" />
    <input type="text" v-model:value="lastName" />
</div>
 
<script type="text/javascript">	
    var vm = new Vue( {
        el: '#app',
        data: {
            childrens: {
                name: '小强',
                age: 20,
                sex: '男'
            },
            tdArray:["1","2"],
            lastName:"张三"
        },
        watch:{
            childrens:{
                handler:function(val,oldval){
                    console.log(val.name)
                },
                deep:true//对象内部的属性监听，也叫深度监听
            },
            'childrens.name':function(val,oldval){
                console.log(val+"aaa")
            },//键路径必须加上引号
            lastName:function(val,oldval){
                console.log(this.lastName)
            }
        },//以V-model绑定数据时使用的数据变化监测
    } );
    vm.$watch("lastName",function(val,oldval){
        console.log(val)
    })//主动调用$watch方法来进行数据监测
</script>
</body>