[JavaScript知识库]vue中watch的详细讲解(包括深度监听等属性)

一、什么是watch？什么时候使用watch

watch是vue实例的一个属性，主要用来监听数据的变化，并做出一些操作

二、watch的使用

2.1简单数据类型的使用

info:{
        handler(newValue,oldValue){
        console.log('旧值：',oldValue)//改变之前的值
        console.log('新值：',newValue)//改变之后的值
        },

以上写法针对于简单的数据类型，例如字符串、数字、布尔类型等

2.2复杂数据类型的使用

2.2.1监听对象中某个属性的变化

//以data中的number为例，监听number中a属性的变化
 data: {
        isHot: true,
        numbers: {
            a: 1,
            b: 2
        }
    },
//监听多级结构中某个属性的变化
    watch: {
            //监听多级结构中某个属性的变化
            //当numbers中的a属性发生变化时就会执行handler
            'numbers.a':{
                 handler(newvalue,oldvalue){
                     console.log('旧值', oldvalue)
                     console.log('新值', newvalue)
                     console.log('a被改变了')
                 }
             }
        }

Vue自身可以监测对象内部值的改变，但vue提供的watch默认不可以，所以检测某个属性值的时候需要用对象.属性名的写法

2.2.2监听对象中所有属性的变化

//同样以data中的numbers为例，监听整个numbers中所有属性的变化
 data: {
        isHot: true,
        numbers: {
            a: 1,
            b: 2
        }
    },
//监听多级结构中某个属性的变化
  watch: {
             deep:true,
             handler(newvalue,oldvalue){
             console.log('numbers改变了')
            }
         }

使用deep属性可以监测到整个对象所有值的变化，但是此处的oldvalue和newvalue不生效，Vue自身可以监测对象内部值的改变，但vue提供的watch默认不可以
解决方法：
使用序列化和反序列化
将计算属性和侦听器搭配使用
1.首先将需要侦听的属性通过JSON.parse和stringfy进行深拷贝
2.然后用侦听器去侦听计算属性，这样就可以得到原来的旧值了

data: {
       numbers: {
            a: 1,
            b: 2
        }
    },
computed: {
       newnumbers(){
           return JSON.stringify(this.numbers)
        }
    },
watch: {
        //利用计算属性进行数据深拷贝，侦听计算属性，拿到oldvalue
         newnumbers:{
           deep:true,
           handler(newvalue,oldvalue){
                console.log('newnumbers改变了')
                 let obj = JSON.parse(newvalue)
                 let obj2 = JSON.parse(oldvalue)
                 console.log(obj,'obj------')
                 console.log(obj2,'obj------')
            }
           }

        }