watch 监测 Vue 实例上的数据变动

原创

用户7365393

修改于 2021-09-26 17:33:33

4700

修改于 2021-09-26 17:33:33

文章被收录于专栏：人生得意须尽欢

watch 是监测 Vue 实例上的数据变动，通俗地讲，就是检测 data 内声明的数据。不仅可以监测简单数据，还可以监测对象或对象属性。

Demo1：监测简单数据

<input v-model="first" > <br>
  
data(){
 return{
  first:'美女',
  }
 },
watch:{
 first( newVal , oldVal ){
 console.log('newVal',newVal) // first 的最新值
 console.log('oldVal',oldVal) // first上一个值
 }
},
// 修改 first的值的时候，立马会打印最新值

Demo2：监测对象

监听对象的时候，需要使用深度监听。

<input v-model="per.name">
  
data(){
 return{
  per:{
   name:'倩倩',
   age:'18'
   }
  }
 },
watch:{
 per:{
  handler(oldVal,newVal){
   console.log('newVal',newVal)
   console.log('oldVal',oldVal)
  },
  deep:true,
 }
},

修改 per.name 的时候，发现 newVal 和 oldVal 的值是一样的，是因为他们存储的指针指向的是同一个地方，所以深度监听虽然可以监听到对象的变化，但是无法监听到具体的是哪个属性发生变化了。

Demo3：监听对象的单个属性

// 方法1：直接引用对象的属性
<input v-model="per.name">
  
data(){
 return{
  per:{
   name:'倩倩',
   age:'18'
   }
  }
 },
watch:{
 'per.name':function(newVal,oldVal){
   console.log('newVal->',newVal)
   console.log('oldVal->',oldVal)
  }
},

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

存储