vue watch的用法及新旧值一样问题解决

    今天来聊聊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开发学习’，会分享一些前端的学习心得及总结，欢迎大家关注。

                ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​