Vue3中watch监听使用详解

vue3.0 watch vue3 watch vue中watch的使用 2022-11-13 14:11:10 1030人浏览独家记忆

摘要

目录Vue2使用watchvue3使用watch情况1情况2情况3情况4情况5特殊情况总结Vue2使用watch <template> <div&g

Vue2使用watch

<template>
  <div>总合：{{ sum }}<button @click="sum++">点击累加</button></div>
</template>
<script>
import { ref } from "vue";
export default {
  // vue2中使用watch
  watch: {
    sum: {
      deep: true,
      handler(newValue, oldValue) {
        console.log("总合 sum 变化：", newValue, oldValue);
      },
    },
  },
  setup() {
    let sum = ref(0);
    return {
      sum,
    };
  },
};
</script>

<style>
</style>

Vue3使用watch

watch有三个参数：

参数1：监听的参数

参数2：监听的回调函数

参数3：监听的配置（immediate）

情况1

监视ref所定义的一个响应式数据

<template>
  <div>总合：{{ sum }}<button @click="sum++">点击累加</button></div>
</template>

// 监视ref所定义的一个响应式数据
<script>
import { ref, watch } from "vue";
export default {
  setup() {
    let sum = ref(0);
    // 监视ref所定义的一个响应式数据
    watch(sum, (newValue, oldValue) => {
      console.log("sum ==> ", newValue, oldValue);
    });
    return {
      sum,
    };
  },
};
</script>

情况2

监视ref所定义的多个响应式数据

<template>
  <div>总合：{{ sum }}<button @click="sum++">点击累加</button></div>
  <hr />
  <div>
    msg：{{ msg }}
    <button @click="msg += '~'">改变msg</button>
  </div>
</template>

<script>
import { ref, watch } from "vue";
export default {
  setup() {
    let sum = ref(0);
    let msg = ref("watch使用"):
    // 情况2：监视ref所定义的多个响应式数据
    watch([sum, msg], (newValue, oldValue) => {
      console.log("sum/msg ==> ", newValue, oldValue);
    },{immediate:true});
    return {
      sum,
      msg,
    };
  },
};
</script>

情况3

监视Reactive所定义的一个响应式数据

注意：

这里无法正确获取oldValue
强制开启了深度监听（deep配置不生效）

<template>
  <div>
     <h3>情况3：:监视reactive所定义的一个响应式数据</h3>
      <div>姓名：{{person.name}}</div>
      <div>年龄：{{person.age}}</div>
    <button @click="person.name += '~'">修改姓名</button>
    <button @click="person.age ++">修改年龄</button>
  </div>
 </template>

<script>
import { ref, watch,reactive } from "vue";
export default {
  setup() {
    let person = reactive({
      name: "lisa",
      age: 18,
      job: {
        joblist: {
          money: 10,
        },
      },
    });
        // 情况3、监视reactive所定义的一个响应式数据
    
    watch(person,(newValue, oldValue) => {
        console.log("person ==> ", newValue, oldValue);
      },{immediate:true,deep:false}//这里的deep配置不再奏效
    );
    return {
      person,
    };
  },
};
</script>

情况4

监视reactive所定义的一个响应式数据中的某个属性

<template>
  <div>
     <h3>情况4：:监视reactive所定义的一个响应式数据中的某个属性</h3>
      <div>姓名：{{person.name}}</div>
      <div>年龄：{{person.age}}</div>
    <button @click="person.name += '~'">修改姓名</button>
    <button @click="person.age ++">修改年龄</button>
  </div>
 </template>

<script>
import { ref, watch,reactive } from "vue";
export default {
  setup() {
    let person = reactive({
      name: "lisa",
      age: 18,
      job: {
        joblist: {
          money: 10,
        },
      },
    });
    // 情况4、监视reactive所定义的一个响应式数据中的某个属性
    watch(()=>person.name,(newValue, oldValue) => {
        console.log("person.name ==> ", newValue, oldValue);
      });

    return {
      person,
    };
  },
};
</script>

情况5

监视reactive所定义的一个响应式数据中的某些属性

<template>
  <div>
     <h3>情况4：:监视reactive所定义的一个响应式数据中的某个属性</h3>
      <div>姓名：{{person.name}}</div>
      <div>年龄：{{person.age}}</div>
    <button @click="person.name += '~'">修改姓名</button>
    <button @click="person.age ++">修改年龄</button>
  </div>
 </template>

<script>
import { ref, watch,reactive } from "vue";
export default {
  setup() {
    let person = reactive({
      name: "lisa",
      age: 18,
      job: {
        joblist: {
          money: 10,
        },
      },
    });
    // 情况5、监视reactive所定义的一个响应式数据中的某些属性
    watch([()=>person.name,()=>person.age],(newValue, oldValue) => {
        console.log("person.name/person.age ==> ", newValue, oldValue);
    });
    return {
      person,
    };
  },
};
</script>

特殊情况

watch监听reactive中对象的嵌套对象

<template>
  <div>
      <div>姓名：{{person.name}}</div>
      <div>年龄：{{person.age}}</div>
      <div>薪资：{{person.job.joblist.money}} K</div>
    <button @click="person.name += '~'">修改姓名</button>
    <button @click="person.age ++">修改年龄</button>
    <button @click="person.job.joblist.money ++">提薪</button>
  </div>
 </template>

<script>
import { ref, watch,reactive } from "vue";
export default {
  setup() {
    let person = reactive({
      name: "lisa",
      age: 18,
      job: {
        joblist: {
          money: 10,
        },
      },
    });
    // 特殊情况、监视reactive所定义嵌套对象
    watch(()=>person.job,(newValue, oldValue) => {
        console.log("person.job对象发生变化 ==> ", newValue, oldValue);
    },{deep:true});//此处由于监视的是reactive素定义的对象中的某个属性，所以deep配置有效

    return {
      person,
    };
  },
};
</script>

总结

到此这篇关于Vue3中watch监听使用详解的文章就介绍到这了,更多相关Vue3中watch使用内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Vue3中watch监听使用详解

本文链接: https://www.lsjlt.com/news/171734.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

Vue3中watch监听使用详解

目录Vue2使用watchVue3使用watch情况1情况2情况3情况4情况5特殊情况总结Vue2使用watch <template> <div&g...

99+

2022-11-13

vue3.0 watch vue3 watch vue中watch的使用
VUE3中watch监听使用实例详解

目录watch介绍watch监听的不同情况1 监听单个refimpl数据2 监听多个refimpl数据3 监听proxy数据4 监听proxy数据的某个属性5 监听proxy数据的某...

99+

2024-04-02
详解Vue3中Watch监听事件的使用

目录一、watch的使用1、引入watch2、多个数据源监听3、监听数组变化4、侦听对象5、结论一、watch的使用 watch(WatcherSource, Callback, [...

99+

2023-02-10

Vue3 Watch监听事件使用 Vue3 Watch监听 Vue3 Watch
vue3怎么使用watch/watchEffect监听数据

这篇文章主要介绍“vue3怎么使用watch/watchEffect监听数据”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“vue3怎么使用watch/watchEffect监听数据”文章能帮助大家解...

99+

2023-07-06
vue3如何使用watch监听props中的数据

目录情况一：监听 props 中基本数据类型情况二：监听 props 中引用数据类型且父组件不改变地址指向情况三：监听 props 中引用数据类型且父组件改变地址指向总结写在最后情况...

99+

2022-11-13

vue3监听props数据变化 vue3 监听props vue props监听
VUE3中watch监听使用的方法有哪些

这篇文章主要介绍“VUE3中watch监听使用的方法有哪些”，在日常操作中，相信很多人在VUE3中watch监听使用的方法有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”VUE3中watch监听使用的方法...

99+

2023-07-01
详解Vue3中侦听器watch的使用教程

目录watch 侦听器使用。侦听器监听 reactive监听多个参数执行各自逻辑监听多个参数执行相同逻辑上一节我们简单的介绍了一下 vue3 项目中的计算属性，这一节我们继续 vue...

99+

2024-04-02
Vue3中watch无法监听的解决办法

下面的代码在对ref实例赋值完之后。既：test.value = { name: 1 }，会发现不执行watch里面的回调函数了，这是为什么呢？ <!DOCTYPE html&...

99+

2023-05-19

Vue3 watch无法监听 Vue3 watch 监听
vue3如何使用watch监听router的改变

这篇文章主要介绍“vue3如何使用watch监听router的改变”，在日常操作中，相信很多人在vue3如何使用watch监听router的改变问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue3如何使用w...

99+

2023-07-04
Vue3中怎么使用watch监听对象的属性值

这篇文章主要介绍“Vue3中怎么使用watch监听对象的属性值”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Vue3中怎么使用watch监听对象的属性值”文章能帮助大家解决问题。Vue3 中使用 w...

99+

2023-07-04
Vue3 Watch踩坑实战之watch监听无效

目录ref 与 reactivewatch总结ref 与 reactive ref函数和reactive函数都是用来定义响应式数据但是reactive更适合定义引用类型、ref适合...

99+

2023-05-19

vue watch监听 vue watch监听 vue watch监听函数
vue3怎么数据监听watch/watchEffect

目录watch()函数watchEffect()函数watch 与 watchEffect之间的联系与区别我们都知道监听器的作用是在每次响应式状态发生变化时触发，在组合式 API 中...

99+

2023-02-23

vue3数据监听watch/watchEffect vue3数据监听 vue3 watch vue3 watchEffect
Vue2和Vue3如何使用watch侦听器详解

watch:侦听数据变化（某个值的change事件） vue2.x data（）{ return{ num:10 } }， watc...

99+

2024-04-02
Vue3中watch的使用详解

目录Vue3中watch的详解Vue2使用watchVue3使用watch情况1情况2情况3情况4情况5特殊情况Vue3中watch的详解 Vue2使用watch <templ...

99+

2022-11-16

Vue3 watch Vue3 中的watch Vue watch详解
vue3如何数据监听watch/watchEffect

我们都知道监听器的作用是在每次响应式状态发生变化时触发，在组合式 API 中，我们可以使用 watch()函数和watchEffect()函数,当你更改了响应式状态，它可能会同时触发 Vue 组件更新和侦听器回调。默认情况下，用户创建的侦听...

99+

2023-05-14

Vue3 watcheffect watch
vue3界面使用router及使用watch监听router的改变

目录前言： 1、路由跳转2、页面使用watch监听router跳转vue3使用watch监听当前路由变化前言： &...

99+

2022-11-13

vue3 watch监听router vue3 使用router vue监听
如何使用watch监听路由变化和watch监听对象

这篇文章主要介绍了如何使用watch监听路由变化和watch监听对象，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。一、watch监听路由变化...

99+

2024-04-02
VUE watch监听器的基本使用方法详解

目录1、下面代码是watch的一种简单的用法2、immediate 立即监听3、handler方法 4、 deep属性总结侦听器一般来说是用来监听数据的变化，默认是在数据发生变化时...

99+

2024-04-02
详解Vue3中的watch侦听器和watchEffect高级侦听器

目录1watch侦听器2watchEffect高级侦听器清除副作用：就是在触发监听之前会调用一个函数可以处理你的逻辑例如防抖停止跟踪 watchEffect 返回一个函数调用之后将...

99+

2022-11-13

Vue3 watch侦听器 vue3 watchEffect侦听器
Vue中的 watch监听属性详情

目录一.watch监听一般数据的变化(数值，字符串，布尔值)1.数值2.字符串3.布尔值二.watch 监听复杂类型数据的变化1.对象2.数组3.对象数组4.对象数组的属性首先要确...

99+

2024-04-02