vue中watch的详细讲解(包括深度监听等属性)

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

二、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被改变了')
                 }
             }
        }

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

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

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------')
            }
           }

        }