Vue中watch的使用

最新推荐文章于 2024-07-27 10:22:27 发布

勇敢小陈

最新推荐文章于 2024-07-27 10:22:27 发布

阅读量1.9k

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/ct5211314/article/details/125876392

版权

这篇博客介绍了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>