Vue3 watch 监听函数 详细举例

1、watch函数(既要指明监视的属性,也要指明监视的回调)

坑:

1)监视reactive定义的响应式数据时:oldValue无法正确获取、强制开启了深度监视(deep配置失效)

2)监视reactive定义的响应式数据中某个属性时:deep配置有效

复制代码
setup(){
    let sum = ref(0)
     let msg = ref('ABCD')
    let person = reactive({
       name:'张三',
       age:18,
       job:{
          j1:{
             salary:20
          }
       }
    })
 
    //情况一:监视ref定义的响应式数据
    watch(sum,(newValue,oldValue)=>{
        console.log('sum变化了',newValue,oldValue)
    },{immediate:true})
 
    //情况二:监视多个ref定义的响应式数据
    watch([sum,msg],(newValue,oldValue)=>{
        console.log('sum或msg变化了',newValue,oldValue)
    }) 
 
    /* 情况三:监视reactive定义的响应式数据
            若watch监视的是reactive定义的响应式数据,则无法正确获得oldValue!!
            若watch监视的是reactive定义的响应式数据,则强制开启了深度监视 
    */
    watch(person,(newValue,oldValue)=>{
        console.log('person变化了',newValue,oldValue)
    },{immediate:true,deep:false}) //此处的deep配置不再奏效
 
    //情况四:监视reactive定义的响应式数据中的某个属性
    watch(()=>person.job,(newValue,oldValue)=>{
        console.log('person的job变化了',newValue,oldValue)
    },{immediate:true,deep:true}) 
 
    //情况五:监视reactive定义的响应式数据中的某些属性
    watch([()=>person.job,()=>person.name],(newValue,oldValue)=>{
        console.log('person的job变化了',newValue,oldValue)
    },{immediate:true,deep:true})
 
    //特殊情况
    watch(()=>person.job,(newValue,oldValue)=>{
        console.log('person的job变化了',newValue,oldValue)
    },{deep:true}) //此处由于监视的是reactive素定义的对象中的某个属性,所以deep配置有效
}
复制代码

2、watchEffect函数(不用指明监视哪个属性,监视的回调中用到哪个属性,那就监视哪个属性 )

watchEffect不需要指定监听的属性,它会自动的收集依赖, 只要我们回调中引用到了 响应式的属性, 那么当这些属性变更的时候,这个回调都会执行

watchEffect有点像computed,更注重的是过程(回调函数的函数体),不用写返回值

本文作者:seven&night

本文链接:https://www.cnblogs.com/bisiyuan/p/17283002.html

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   seven&night  阅读(226)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!
· 用 C# 插值字符串处理器写一个 sscanf
点击右上角即可分享
微信分享提示
💬
评论
📌
收藏
💗
关注
👍
推荐
🚀
回顶
收起
  1. 1 晴天 刘瑞琦
晴天 - 刘瑞琦
00:00 / 00:00
An audio error has occurred.