Vue中watch浅监听，深监听，同时监听多个属性（巧用computed）

Vue中的watch如何深度监听某个对象

export default {
 data () {
     return {
         name: '张三'
     }
 },
 watch: {
     // name 函数 是对应那个数据名字
     name (newValue, oldValue) {
         
     }
 }
}

上面代码中: 有个原则监听谁,写谁的名字,然后是对应的执行函数, 第一个参数为最新的改变值,第二个值为上一次改变的值, 注意: 除了监听 data,也可以监听计算属性 或者一个 函数的计算结果

那怎么深度监听对象 ,两种方式

1. 字符串嵌套方式

export default {
 data () {
     return {
        a: {
            b: {
                c :'张三'
            }
        }
     }
 },
 watch: {
     //想监听 c  此时 数据 是 a.b.c  比较深   深度监听
     //用这种写法，就不要使用简写了
     "a.b.c": function (newValue, oldValue) {
         
     }
 }
}

2. 启用深度监听方式

export default {
    data () {
        return {
           a: {
               b: {
                   c :'张三'
               }
           }
        }
    },
    watch: {
        a: {
// deep 为true  意味着开启了深度监听 a对象里面任何数据变化都会触发handler函数,
            deep: true,
            handler(val, oldval){
               // handler是一个固定写法
            }
        }
    }
}

另外，值得注意的是 immediate 属性

第三个是immediate：其值是true或false；确认是否以当前的初始值执行handler的函数
当immediate为true时，表示组件初始化的时候就会执行一次handle函数，
当immediate为false时，只有当监听的属性变化时，才会执行handle函数

export default {
    data () {
        return {
           a: {
               b: {
                   c :'张三'
               }
           }
        }
    },
    watch: {
        a: {
// deep 为true  意味着开启了深度监听 a对象里面任何数据变化都会触发handler函数,
            deep: true,
            immediate:true,
            handler(val, oldval){
               // handler是一个固定写法
            }
        }
    }
}

浅监听和深监听 完整的例子：

<template>
　　//观察数据为字符串或数组
　　 <input v-model="example0"/>
　　 <input v-model="example1"/>
　　//当数据examples2为对象时，如果键值发生变化，为了监听到数据变化，需要添加deep:true参数
　　 <input v-model="example2.inner0"/>
</template>
<script>
　　 export default {
　　　　　　data(){
　　　　　　　　return {
　　　　　　　　　　example0:"",
　　　　　　　　　　example1:"",
　　　　　　　　　　example2:{
　　　　　　　　　　　　inner0:1,
　　　　　　　　　　　　innner1:2
　　　　　　　　　　}
　　　　　　　　}
　　　　　　},
　　　　　　watch:{
　　　　　　　　example0(curVal,oldVal){
　　　　　　　　　　console.log(curVal,oldVal);
　　　　　　　　},
　　　　　　　　example1:'a'，//值可以为methods的方法名
　　　　　　　　example2:{
　//注意：当监听的数据为对象或数组时，curVal和oldVal是相等的，因为这两个形参指向的是同一个数据对象
　　　　　　　　　　handler(curVal,oldVal){
　　　　　　　　　　　　conosle.log(curVal,oldVal)
　　　　　　　　　　},
　　　　　　　　　　deep:true
　　　　　　　　}
　　　　　　},
　　　　　　methods:{
　　　　　　　　a(curVal,oldVal){
　　　　　　　　　　conosle.log(curVal,oldVal)
　　　　　　　　}
　　　　　　}
  }
</script>

同时监听多个数据

思路： 因为watch可以监听计算属性computed，可以通过computed把所有要监听的数据组成对象，再去监听该对象

computed: {
    dateRange () {
      const { start, end } = this
      return {
        start,
        end
      }
    }
  })

watch: {
    dateRange (val) {
      console.log(val)
    }
  }

利用computed同时监听多个数据 完整例子：

data () {
      return {
      		name1: '',
      		name2: '',
      }
 },
computed: {
      listenChange () {
        const {name1,name2} = this
        return {name1,name2}
      }
    },
    
    watch: {
      listenChange (val) {
      		console.log('listenChange :', val)
      		if (this.name1 === this.name2) {
           
          } else {
           
          }
      }
    }

笨方法： 需要监听的数据逐个写，这样重复的代码很多，不推荐
这里想要实现的功能是，数据改变了，比对name1和name2是否一致，显示巧用computed更胜一筹

data () {
      return {
      		name1: '',
      		name2: '',
      }
 },
 
    watch: {
    	'name1': function (val) {
      		if (this.name1 === this.name2) {
           
          } else {
           
          }
      },
       'name2': function (val) {
      	if (this.name1 === this.name2) {
           
          } else {
           
          }
      }
    }