vue3.0 watch监听

最新推荐文章于 2024-05-13 18:00:50 发布
最新推荐文章于 2024-05-13 18:00:50 发布
阅读量981 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： vue3.0 文章标签： vue js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45780818/article/details/119190963
本文详细介绍了Vue2.x和Vue3.0中的watch函数用法，包括单个ref、多个ref的监听，以及针对reactive对象的注意事项，深度探讨了配置immediate和deep的区别，帮助开发者理解响应式编程的精髓。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

watch监听

vue2.x watch

vue2.x watch

<template>
  <h2>求和：{{ sum }}</h2>
  <button @click="sum++">++</button>
</template>

<script>
import { ref } from "vue";
export default {
  // vue2.x 简易写法
  watch: {
    sum(newval, oldval) {
      console.log(newval, oldval);
    },
  },
  setup() {
    const sum = ref(0);
    return {
      sum,
    };
  },
};
</script>

正常打印，说明vue3中也可以使用vue2.x的写法
在这里插入图片描述
完整写法就是带有配置项的

<template>
  <h2>求和：{{ sum }}</h2>
  <button @click="sum++">++</button>
</template>

<script>
import { ref } from "vue";
export default {
  // vue2.x 简易写法
  // watch: {
  //   sum(newval, oldval) {
  //     console.log(newval, oldval);
  //   },
  // },
  watch: {
    sum: {
      immediate:true, // 立即执行一次
      deep:true,// 深度监听
      handler(ewval, oldval) {
        console.log(newval, oldval);
      },
    },
  },
  setup() {
    const sum = ref(0);
    return {
      sum,
    };
  },
};
</script>

vue3.0 watch

监听ref和多个ref

vue3中的watch是一个函数，所以需要单独引入

<template>
  <h2>求和：{{ sum }}</h2>
  <button @click="sum++">++</button>
</template>

<script>
import { ref, watch } from "vue";
export default {
  setup() {
    const sum = ref(0);
    // 是一种行为 所以没有返回
    watch(sum, (newval, oldval) => {
      console.log("vue3.0", newval, oldval);  
    });
    return {
      sum,
    };
  },
};
</script>

在这里插入图片描述
以上演示了监听单个ref响应式数据，现在演示监听多个，比较简单的写法就是用两个watch

<template>
  <h2>求和：{{ sum }}</h2>
  <button @click="sum++">++</button>
  <hr />
  <h2>招呼：{{ info }}</h2>
  <button @click="info += '!'">打招呼</button>
</template>

<script>
import { ref, watch } from "vue";
export default {
  setup() {
    const sum = ref(0);
    const info = ref("hello");
    // 1.监听ref单个响应式数据
    watch(sum, (newval, oldval) => {
      console.log("求和", newval, oldval);
    });
    // 2.监听多个响应式数据 在vue2.x中watch是个配置项，所以只能写一个watch，vue3.0中是函数，可以写多个
    watch(info, (newval, oldval) => {
      console.log("招呼：", newval, oldval);
    });
    return {
      sum,
      info,
    };
  },
};
</script>

在这里插入图片描述

<template>
  <h2>求和：{{ sum }}</h2>
  <button @click="sum++">++</button>
  <hr />
  <h2>招呼：{{ info }}</h2>
  <button @click="info += '!'">打招呼</button>
</template>

<script>
import { ref, watch } from "vue";
export default {
  setup() {
    const sum = ref(0);
    const info = ref("hello");
    // 1.监听ref单个响应式数据
    // watch(sum, (newval, oldval) => {
    //   console.log("求和", newval, oldval);
    // });
    // 2.监听多个响应式数据 在vue2.x中watch是个配置项，所以只能写一个watch，vue3.0中是函数，可以写多个
    watch([sum, info], (newval, oldval) => {
      console.log("新值newval", newval);
      console.log("旧值oldval", oldval);
    });
    return {
      sum,
      info,
    };
  },
};
</script>

在这里插入图片描述
immediate，deep配置如下，

<template>
  <h2>求和：{{ sum }}</h2>
  <button @click="sum++">++</button>
  <hr />
  <h2>招呼：{{ info }}</h2>
  <button @click="info += '!'">打招呼</button>
</template>

<script>
import { ref, watch } from "vue";
export default {
  setup() {
    const sum = ref(0);
    const info = ref("hello");
    // 1.监听ref单个响应式数据
    watch(
      // 第一个参数，监视的数据
      sum,
      // 第二个参数，监视的回调
      (newval, oldval) => {
        console.log("求和", newval, oldval);
      },
      // 第三个参数，监视的配置
      { immediate: true}
    );
    // 2.监听多个响应式数据 在vue2.x中watch是个配置项，所以只能写一个watch，vue3.0中是函数，可以写多个
    // watch([sum, info], (newval, oldval) => {
    //   console.log("新值newval", newval);
    //   console.log("旧值oldval", oldval);
    // });
    return {
      sum,
      info,
    };
  },
};
</script>

在这里插入图片描述

监听ref注意点

不需要.value（会报错），因为需要watch监听一个保存数据的响应式reflmpl对象结构，并不是一个.value的静态属性

<template>
  <h2>求和：{{ sum }}</h2>
  <button @click="sum++">++</button>
</template>

<script>
import { ref, watch } from "vue";
export default {
  setup() {
    const sum = ref(0);
    watch(sum.value, (newval, oldval) => {
      console.log("求和", newval, oldval);
    });
    return {
      sum,
    };
  },
};
</script>

在这里插入图片描述
另外在ref监听对象类型时，是需要加上.value的，因为（比如说peson)对象是被reflmpl所包裹的对象

<template>
  <h2>个人信息</h2>
  <p>姓名：{{ person.name }}</p>
  <p>姓名：{{ person.age }}</p>
  <p>工资：{{ person.job.salary.current }}</p>
  <button @click="person.age++">++</button>
  <button @click="person.job.salary.current++">++工资</button>
  <button @click="person.name += '!'">打招呼</button>
</template>

<script>
import { ref, watch } from "vue";
export default {
  setup() {
    const person = ref({
      name: "张三",
      age: 18,
      job: {
        salary: {
          current: 20,
        },
      },
    });
    console.log("person", person);
    watch(
      person,
      (newval, oldval) => {
        console.log("newval", newval);
        console.log("oldval", oldval);
      },
    );
    return {
      person,
    };
  },
};
</script>

监听person仅仅只是监听了Reflmpl中的变化，并不能监听到.value，也就是Proxy中的变化（因为内存地址没有发生改变，需要Proxy中的属性内存发生改变才能够监听到）
在这里插入图片描述

监听reatcive的坑

监听reactive数据
如果watch监听reactive响应式数据的话，会有点坑。演示代码和打印如下

<template>
  <h2>个人信息</h2>
  <p>姓名：{{ person.name }}</p>
  <p>姓名：{{ person.age }}</p>
  <button @click="person.age++">++</button>
  <button @click="person.name += '!'">打招呼</button>
</template>

<script>
import { ref, watch, reactive } from "vue";
export default {
  setup() {
    const person = reactive({
      name: "张三",
      age: 18,
    });
    // 1.监听ref单个响应式数据
    watch(person, (newval, oldval) => {
      console.log("newval", newval);
      console.log("oldval", oldval);
      console.log("数据监听");
    });
    return {
      person,
    };
  },
};
</script>

在这里插入图片描述
通过打印可以发现，watch无法正确获取oldval的数据（ref定义的对象也不行，因为ref定义的对象本质上还是通过reactive转为响应式）。
另外，相比于vue2.x，vue3.0的监听对象如果是reactive对象，会强制开启deep深度监听。

<template>
  <h2>个人信息</h2>
  <p>姓名：{{ person.name }}</p>
  <p>姓名：{{ person.age }}</p>
  <p>工资：{{ person.job.salary }}</p>
  <button @click="person.age++">++</button>
  <button @click="person.job.salary++">++工资</button>
  <button @click="person.name += '!'">打招呼</button>
</template>

<script>
import { ref, watch, reactive } from "vue";
export default {
  setup() {
    const person = reactive({
      name: "张三",
      age: 18,
      job: {
        salary: 20,
      },
    });
    // 1.监听ref单个响应式数据
    watch(person, (newval, oldval) => {
      console.log("newval", newval);
      console.log("oldval", oldval);
      console.log("数据监听");
    });
    return {
      person,
    };
  },
};
</script>

在这里插入图片描述
是不需要开启deep的，并且deep为false也无效。

reactive 中的某个属性

如果要监听reactive中某个属性值时，需要写成函数

<template>
  <h2>个人信息</h2>
  <p>姓名：{{ person.name }}</p>
  <p>姓名：{{ person.age }}</p>
  <p>工资：{{ person.job.salary }}</p>
  <button @click="person.age++">++</button>
  <button @click="person.job.salary++">++工资</button>
  <button @click="person.name += '!'">打招呼</button>
</template>

<script>
import { ref, watch, reactive } from "vue";
export default {
  setup() {
    const person = reactive({
      name: "张三",
      age: 18,
      job: {
        salary: 20,
      },
    });
    // 1.监听reactive中某个属性
    watch(
      () => person.age,
      (newval, oldval) => {
        console.log("newval", newval);
        console.log("oldval", oldval);
        console.log("数据监听");
      }
    );
    return {
      person,
    };
  },
};
</script>

在这里插入图片描述

监听reactive中某些属性

在这里插入代码片

<template>
  <h2>个人信息</h2>
  <p>姓名：{{ person.name }}</p>
  <p>姓名：{{ person.age }}</p>
  <p>工资：{{ person.job.salary }}</p>
  <button @click="person.age++">++</button>
  <button @click="person.job.salary++">++工资</button>
  <button @click="person.name += '!'">打招呼</button>
</template>

<script>
import { ref, watch, reactive } from "vue";
export default {
  setup() {
    const person = reactive({
      name: "张三",
      age: 18,
      job: {
        salary: 20,
      },
    });
    // 1.监听reactive中某些属性
    watch([() => person.name, () => person.age], (newval, oldval) => {
      console.log("newval", newval);
      console.log("oldval", oldval);
      console.log("数据监听");
    });
    return {
      person,
    };
  },
};
</script>

在这里插入图片描述

特殊情况 监听reactive中的对象

监听reactive中的对象是要加上deep的

<template>
  <h2>个人信息</h2>
  <p>姓名：{{ person.name }}</p>
  <p>姓名：{{ person.age }}</p>
  <p>工资：{{ person.job.salary.current }}</p>
  <button @click="person.age++">++</button>
  <button @click="person.job.salary.current++">++工资</button>
  <button @click="person.name += '!'">打招呼</button>
</template>

<script>
import { ref, watch, reactive } from "vue";
export default {
  setup() {
    const person = reactive({
      name: "张三",
      age: 18,
      job: {
        salary: {
          current: 20,
        },
      },
    });
    // 1.监听reactive中某些属性
    watch(
      () => person.job,
      (newval, oldval) => {
        console.log("newval", newval);
        console.log("oldval", oldval);
        console.log("数据监听");
      },
      { deep: true }
    );
    return {
      person,
    };
  },
};
</script>

在这里插入图片描述

总结

1、监听普通ref属性，可配置immediate，不需要配置deep，因为ref定义基本数据类型。
2、监听reactive定义的一个响应式对象的所有属性，如果是直接监听person，也就是代理数据，那是不需要deep的，因为deep是强制开启的，并且oldval是无法正确获取，
3、监听reactive定义的响应式数据中某个属性时，要写成函数。
4、监听reactive定义的响应式数据中多个属性时，写成函数数组。
5、监听reactive定义的响应式数据中的一个对象中的属性，要加deep。

vue3.0 watch侦听器
m0_60970928的博客
02-12 1714
今天给大家讲解的是vue3.0中watch侦听器的使用及语法，看完文章希望能够帮助到你！以上就是Vue3.0 中watch侦听器的使用方法。希望本篇文章能够帮助到你，不懂得可以评论区或者私信问我，我也会一 一解答。我的其他文章:https://blog.csdn.net/m0_60970928?type=blog。
vue3之watch监听
热门推荐
stars的博客
02-24 1万+
vue3的监听跟vue2有点不一样. 引入watch后直接在setup里面使用, 调用方式是以回调函数的方式呈现. 1.先引入watch import { ref, defineComponent, watch } from "vue"; 2.在setup里面引用 /*监听props*/ watch(props,(newProps, oldProps) => { showModal.value = newProps.isOpened; editData.value = newPr
vue3.0-watch侦听器
qq_52822043的博客
04-22 2100
目录 1. watch侦听器 1）watch侦听器 2）watch侦听器的基本语法 3）immediate选项 4）deep选项 5）监听对象单个属性的变化 6）计算属性vs侦听器 2. 组件的生命周期 1）组件运行的过程 2）如何监听组件的不同时刻 3）如何监听组件的更新 4）组件中主要的生命周期函数 5）组件中全部的生命周期函数 3. 组件之间的数据共享 1）组件之间的关系 2）父子组件之间的数据共享 ①父->子共享数据 ②子->父共享数据 ③父&...
vue3.0的watch监听
weixin_49696014的博客
12-12 516
<template> <div>count的值为---{{count}}</div> <button v-on:click="addCount">count的值加1</button> <hr> <div>num的值为---{{obj.num}}</div> <button v-on:click="addNum">num的值加1</button> <hr>
vue3.0监听watch
瘦瘦瘦大人的博客
09-08 330
运行结果如下：（点击按钮会改变todo触发watch重新加载）
vue3.0watch监听属性
qq_39175450的博客
03-20 1380
（6）一个特殊情况,当需要监听的是对象里面嵌套的对象中的数据时，就需要加deep:true，这个时候设置deep:true是有效的。（4）：情况四:监听reactive定义的一个响应式对象中的某一个属性,是需要将监听的对象以函数的方式展示出来。（5）情况五：监听reactive定义的一个响应式对象中的多个属性，也是利用数组的方式展示出来。(2).情况二:监视ref定义的多个响应式数据（vue3.0可以调用n次watch函数）（3）情况三:监听reactive定义的一个响应式对象中的全部数据。
vue3.0 watch监听对象不生效
wz_cmyc的博客
10-10 2723
vue3 watch监听对象不生效
vue watch监听对象及对应值的变化详解
08-27
本文主要针对Vue框架中的watch属性进行详细的讲解，特别是如何监听对象及其内部值的变化。为了更好地理解知识点，我们首先需要了解几个核心概念：Vue实例的data、watch以及computed属性。 Vue实例中的data对象用于...
vue3.0 watch 监听对象
09-04
以下是使用watch监听对象的步骤： 首先，我们需要使用`watch`函数来定义一个watcher实例并指定需要监听的对象。例如： ``` const myObject = { firstName: &#39;John&#39;, lastName: &#39;Doe&#39; } watch(myObject, ...
vue3.0学习笔记 （watch监听特性）
m0_58849641的博客
07-08 501
注意: deep:true是深度监听 开启后能够复杂的结构对象或数组 immediate:true是一开始就监听 wacthEffect默认immediate:true 在wacthEffect里 谁用到了 就会监听谁computed注重计算出来的结果(回调函数的返回值),所以必须要写返回值wacthEffect更注重过程(回调函数的函数体),所以返回值不是必须的...
【Vue3.0】数据监听(watch)
票票的博客
06-27 1328
vue3.0数据监听
初识Vue 3.0 —— $watch:侦听器
QUX轻博客
12-14 239
<h5>15.侦听器</h5> <div class="watchs"> <p>count:{{nowtime}}...
vue3.0 监听器
m0_56683897的博客
01-30 254
2023年是vue2.0最后一年维护了，更新vue3.0迫在眉睫。当该对象更新后，会执行对应的回调函数。要返回一个响应式对象。
vue3.0(八) 监听器（watch），高级监听器（watchEffect）
最新发布
chengcheng9876的博客
05-13 3080
vue3.0(八) 监听器（watch），高级监听器（watchEffect）
vue3.0 watch监听器使用方法
weixin_44590591的博客
01-24 5094
vue3.0 watch监听器使用方法 Vue2 export default { watch:{ } } Vue3 1、侦听ref创建的data数据 import {ref,watch,} from 'vue' export default { setup() { const name = ref("张三") /** * watch：侦听数据变化 * oldvalue：系统自动注入，更新之前的数据 *
vue3.0 watch 深度监听
敲之的博客
02-26 1万+
vue3.0 watch 设置深度监听 <script> import { watch } from 'vue'; export default { props:["filter"], setup(props){ watch( () => { return props.filter }, state => { getStatistics(state.value) }, {
Vue3.0属性侦听器 watch()
m0_64986878的博客
09-20 626
watch(),Vue3.0属性侦听器
Vue3.0-监听属性
qq_64067728的博客
09-20 568
注意：监听reactive定义的响应式数据的时候，会强制开启深度监视并且oldvalue无法正确获取。监听reactive定义的响应式数据的某一个值的时候：deep 配置有效。与Vue2.x中的watch配置功能一直。
Vue3.0监听器watch与watchEffect
study_way的博客
12-11 1792
在 Vue 3 中，watch仍然是一种用于监听数据变化并执行相应操作的方式，不过在组合式 API 中，watch的使用方式与选项式 API 略有不同。以下是关于 Vue 3 中的watch。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值