位置: IT常识 - 正文
Vue3中的watch监听(vue中watch监听对象的变化)
发布时间：2024-01-12目录
一、监听基础ref类型
1、监听单个ref数据
2、 监听多个ref数据
二、监听reactive类型
1、监听对象中单个属性
2、监听对象中多个属性
3、同时监听ref基本类型数据和reactive对象中的属性
4、监听整个对象
5、监听对象中值为对象的属性
三、watchEffect
一、监听基础ref类型1、监听单个ref数据
推荐整理分享Vue3中的watch监听(vue中watch监听对象的变化)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue watch监听localstorage变化,vue监听watch监听全局对象,vue watch监听,vue的watch监听props,vue的watch监听props,vue watch监听,vue3中的watch监听路由,vue中watch监听对象的变化,内容如对您有帮助，希望把文章链接给更多的朋友！
2、 监听多个ref数据二、监听reactive类型1、监听对象中单个属性监听 user.more.iPhone 属性，那么只有当iPhone属性发生变更时，才会触发 watch 方法，其他属性变更不会触发 watch 方法。注意，此时的第一个参数是一个箭头函数。
2、监听对象中多个属性 3、同时监听ref基本类型数据和reactive对象中的属性4、监听整个对象
当监听整个对象时，只要这个对象有任何修改，那么就会触发 watch 方法。无论是其子属性变更（如 user.name），还是孙属性变更（如 user.more.iPhone）...，都是会触发 watch 方法的。
5、监听对象中值为对象的属性方式1：不用箭头函数，则可以不用deep:true
方式二【推荐用箭头函数】：用箭头函数时，则必须加上{deep:true}才能触发监听
我们发现newValue和oldValue的值都是一样的， 这是因为它们的引用指向同一个对象/数组
推荐用箭头函数监听对象的原因就是，我们可以通过以下方式来使新旧值不一样
如果直接监听对象，别说监听对象的改变了，直接原对象都监听不到，如下：
总结：监听对象时，如果不关心旧值，那么直接监听对象更方便，因为不用手动设置deep为true；如果关心旧值，那么需要使用箭头函数，并序列化，设置deep:true
三、watchEffect不用指明监视哪个属性,监视的回调用到哪个属性，就去监视哪个属性
watch可以访问新值和旧值，watchEffect不能访问。watch需要指明监听的对象，也需要指明监听的回调。watchEffect不用指明监视哪一个属性,监视的回调函数中用到哪个属性,就监视哪个属性。watch只有监听的值发生变化的时候才会执行，但是watchEffect不同，每次代码加载watchEffect都会执行。<template> <div>nums:<input v-model="nums" /></div> <div>user.age:<input v-model="user.age" /></div> <button @click="user.more.iPhone = 22222">改变more</button></template><script setup>const nums = ref(1);const user = reactive({ name: "张三", age: 23, more: { iPhone: 1111, address: "aaa", },});watchEffect(() => { const x1 = nums.value; const x2 = user.age; const x3 = user.more.iPhone; console.log("watchEffect监听的回调执行了...");});watchEffect(() => { console.log("222222222...");});</script>上一篇：通往海滩的木板路，德国叙尔特岛 (© Kerstin Bittner/Westend61/Offset by Shutterstock)(通往海滩的木板有什么用)
下一篇：Antv/X6图编辑器的应用——流程图实现(anjedi编辑器)
