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 {
           
          }
      }
    }
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐