Vue中watch的使用

这篇博客介绍了Vue中使用watch进行数据监听的两种方式,包括简写形式和完整形式。简写的watch无法实现深度监视和初始化监听,而完整版的watch通过设置`deep`和`immediate`属性可以实现这些功能。示例代码展示了如何监听`num`和`obj`的变化,并在值改变时打印相关信息。
摘要由CSDN通过智能技术生成

        在Vue中可以通过watch进行对某个值的监听,当值发生变化时,运行对应的逻辑,比如请求接口等。不会产生新的值。

一、简写的watch

<template>
<div>
    <div><input type="text" v-model="num"></div>
  <div>{{obj}}</div>
  <div @click="obj.per.name+=1">更改属性</div>
</div>
</template>

<script>
export default {
  watch:{
    num(newValue,oldValue){
      console.log(`num的值发生变化了新值${newValue}旧值${oldValue}`);
    },
    obj(newValue,oldValue){
      console.log(`num的值发生变化了新值${newValue}旧值${oldValue}`);
    }
  },
  data(){
    return {
      num:444,
      obj:{
        per:{
          name:'勇敢小陈'
        }
      }
    }
  }
}
</script>

<style>

</style>

简写的不足点:没办法进行深度监视以及初始化进行监听

二、watch的完整版

        

<template>
<div>
    <div><input type="text" v-model="num"></div>
  <div>{{obj}}</div>
  <div @click="obj.per.name+=1">更改属性</div>
</div>
</template>

<script>
export default {
  watch:{
    num(newValue,oldValue){
      console.log(`num的值发生变化了新值${newValue}旧值${oldValue}`);
    },
    obj:{
      handler(newValue,oldValue){
      console.log(`num的值发生变化了新值${newValue}旧值${oldValue}`);
    },
    deep:true,
    immediate:true
    }
  },
  data(){
    return {
      num:444,
      obj:{
        per:{
          name:'勇敢小陈'
        }
      }
    }
  }
}
</script>

<style>

</style>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值