今天来聊聊vue中的watch的用法。
vue官网上描述watch是一个侦听器，来响应数据的变化，我们在项目开发中也是经常用到的，watch就是一个监听器，我们把需要监听变化的对象放到watch中，这个对象要在组件中，然后设置数据变化时要执行的函数。
上面是通常的写法，监听函数有两个参数，第一个是新值，第二个是旧值。
但是watch有几个特点：一：当值第一次绑定时并不会执行监听函数；二：默认情况下，watch不监听不到复杂对象的属性变化。所以针对以上两个特点，watch还提供了handler方法和immediate、deep两个属性来解决以上两个特点带来的问题。
handler方法就是上图中的function，所以使用的写法是这样的：
immediate的使用也是非常需要的，比如，父组件传值到子组件时，我们在子组件中把传递的值来监听变化，在首次传递时，子组件并不会执行监听函数，但有些场景中，我们又需要在首次传递时也执行监听函数，这个时候我们就可以通过immediate属性来做到，immediate的属性值是bolean类型，true或者false，默认是false。写法很简单，直接加上就可以了。
另外，在有些时候我们修改一个复杂对象的属性，但是watch中，并没有监听到，导致这个问题的原因很可能就是watch的第二个特性导致的，要避免这个问题，解决方法也很简单，把deep属性设置为true即可，也是直接加上就可以了：
在以上的基础上，有时候可能还会发现一个奇怪的问题，我们监听复杂对象的属性变化时，值变化，监听函数也执行了，但是，我们得到的新旧值是一样的，也就是说虽然监听到对象属性的变化，但是，监听函数中的newVal和oldVal是一样的，当我们需要拿新值和旧值做比较的时候就没办法了。比如，一个复杂的对象，我们给对象新增属性或者删除属性时，就可能出现这个问题。例如：我们给表格新增一行
我们点击新增一行，给表格添加一行数据时，我们就会发现watch中的新值和旧值就是一样的。
我们查找官网上watch的文档，有下面一段解释：
也就是说，watch监听到对象的变化，但是在对对象或数组做变更操作时，删除或添加属性，监听函数中的新值和旧值都指向了同一个对象或数组，并且Vue不会保留变更之前的副本。这种情况下我们怎么拿到旧值呢？还是有办法的，我们可以再设置一个计算属性，保存tableData为副本，然后监听这个副本的变化：
然后点击新增一行，我们在打印中可以看出新值和旧值不一样了。
以上内容来自微信公众号 ‘HTML开发学习’，会分享一些前端的学习心得及总结，欢迎大家关注。
如果觉得《vue watch的用法及新旧值一样问题解决》对你有帮助，请点赞、收藏，并留下你的观点哦！
