摘要

在使用vue watch的时候，对于deep的用法，一般都是在对对象的监听的时候，才会去使用，今天遇到一个bug，发现还可以对普通数据监听的时候使用。

起因

今天笔者在写bug的时候发现一个bug，有一个子组件，接受父组件的一个传值，获取了之后将该值截取前面两位保存为自己的一个变量（例如: '36213'前面的'36'），子组件监听该变量，并做相应的回调；

但是，当我们的父组件的传值由'36213'变成'36242'的时候，子组件里面获取到的值是'36'，这时候是不会触发watch回调的，笔者想了一下，就在截取父组件的值之前，手动的将子组件的值改了一下，然后再截取父组件的值。以为已经成竹在胸了，一看，还是没watch到。。。最后，莫名其妙加了个deep才解决问题；

经过

于是，笔者做了一个测验，vue里面测验代码如下

data() {
        return {
            test: 0,
        }
    },
    watch: {
        test: {
            handler() {
                console.log(this.test, 'change')
            },
            deep: true,
        },
    },
    mounted() {
        this.init()
    },
    methods: {
        init() {
            for (let i = 0; i < 3; i++) {
                this.test += 1
            }
            for (let i = 0; i < 3; i++) {
                this.test -= 1
            }
        },
    },

我发现，当我们将test监听的deep:true注释掉的时候，控制台不会console任何东西，当我们对test监听加上deep:true的时候，控制台的console如下

结果

当我们对一个普通值快速变化并变回之前的值时，不加deep时，watcher只会惊叹一声：好快的变化。不会做任何事，加上deep才能知道该值其实已经变过一次，虽然他还是和前面长得一样。

如果大家有遇到相同的watch的情况，也可以加上deep试试。当然，源码太深奥没看