Vue.js 提供了一个方法 watch，它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。具体的用法可以直接看下面的示例，简单直接。
<span style="color:#006600"><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方法来进行数据监测</span>
</script>
</body>
大家都知道，在vue.js中给我们提供了watch的方法来做对象变化的监听，而且在callback中会返回两个对象，分别是oldValue和newValue.因为Object是引用类型，所以，如果你在vue中watch一个对象或者数组，那么你收到的新老值是一样的，
我们看下面的例子，组件有一个变量instanceInfo，是一个Object。
我们多次修改instanceInfo的name属性，只有第一次新老值不一致，后面多次修改新老对象竟然一致了。
这是因为watch并没有做缓存，遇到基础类型，还好说，遇到引用类型，就无法正确的获取oldVal了。
这时候我们要解决这个问题，就需要用到一个属性，就是computed是有缓存的这个特性。我们就需要借助computed来解决这个问题，
我们把instanceInfo通过在computed里面生成一个模拟变量，返回一个Object.assign新对象，注意一定是新对象，他有独立的引用。
然后我们watch这个在computed里面的tempObj，就可以监听新老值了。
当然，如果instanceInfo里面的某个属性，是引用类型，这种方法还需要，监听这个属性才能获取新老值。
