vue中监听属性、深度监听

本文介绍了Vue中watch函数的使用,包括正常写法、简写方法和深度监听。同时,对比了watch与computed的区别,强调watch的异步操作能力和无缓存特性。

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

  1. 监视属性watch: 当监听的属性变化时,回调函数自动调用,进行相关操作,监听的属性必须存在,才能进行监视!!!
  2. 监听属性的2种写法:

      正常写法
         第一种:new vue 时传入watch配置 
         watch:{
            监听的对象:{
               handler(){
                  
               }
            }
         }
         第二种:通过$.watch监视
         vm.$watch('监听的对象',
            {
               handler(){

         }
            })
      
      简写方法
      watch:{
            监听的对象(newvalue,oldvalue){
            }
         }

      vm.$watch('监听对象',handler(newValue,oldValue)=>{
         console.log('isHot被修改了',newValue,oldValue,this)
      }) 

3.深度监听:

(1).Vue中的watch默认只监听一层。

(2).在监视属性中配置deep:true可以监听对象内部值的改变,多层监听。

 "obj.onj.work.ss":{
                    deep:true,
                    handler(){
                        console.log('监听到对象的属性改变了');
                    }
                }

4.computed和watch之间的区别

(1). computed能完成的功能,watch都可以完成。

(2). watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作!!!!!!。

(3). watch没有缓存,computed有缓存

### Vue3 中 `watch` 的使用方法 在 Vue 3 中,`watch` 是一个非常强大的工具,专门用来监听响应式数据的变化,并在其变化时触发相应的处理逻辑。通过组合 API 形式的引入方式,在组件的 `setup()` 方法里可以直接调用此功能。 #### 基础语法结构 为了定义一个观察者来监视单个源或者多个源的数据变动情况,可以按照如下模式编写代码: ```javascript import { ref, watch } from 'vue'; export default { setup() { const count = ref(0); // 定义 watcher 来追踪 count 的更改 watch(count, (newVal, oldVal) => { console.log(`count 已经从 ${oldVal} 改变到 ${newVal}`); }); return { count, }; }, }; ``` 这段代码展示了如何创建一个简单的计数器变量 `count` 并设置了一个 `watcher` 来跟踪它的每次更新[^1]。 #### 处理复杂类型的响应式对象 除了基本类型外,还可以利用 `watch` 对象或数组这样的复合型态进行监控。对于这些更复杂的结构来说,需要注意的是,默认情况下只做浅层比较;如果希望深入检测内部属性的变化,则需传递额外选项给 `watch` 函数: ```javascript const user = reactive({ name: '', age: null, }); // 深度监听整个 user 对象中的所有字段变更 watch(user, () => { console.log('User info has been updated'); }, { deep: true }); ``` 这里演示了怎样配置深度监听以捕捉嵌套层次更深的状态转变[^3]。 #### 监听多条目以及异步场景下的应用实例 有时候可能需要同时关注几个不同状态项之间的相互影响,这时可以通过传入一组依赖作为第一个参数的方式轻松达成目的。另外,在涉及网络请求或其他耗时任务的情况下,合理运用 `immediate` 和 `flush` 参数能够更好地控制执行时机与顺序。 ```javascript // 同时监听两个以上的 state 更改 watch([firstState, secondState], ([fNew, sNew], [fOld, sOld]) => { /* ... */ }); // 异步加载过程中使用 watch 进行副作用管理 async function fetchData() { await someAsyncOperation(); } watch(someCondition, async () => { await fetchData(); // 当条件满足时立即发起新的请求 }); ``` 上述片段说明了针对并发事件流的有效策略,同时也体现了 `watch` 在实际项目开发里的灵活性和实用性[^4]。 #### 总结 综上所述,借助于 Vue 3 提供的强大而简洁的 `watch` 接口,开发者可以在不破坏原有业务流程的前提下高效地实现对各种动态行为的精确把控。无论是简单的数值增减还是复杂的交互逻辑,都能找到合适的解决方案[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

对卦卦上心

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值