发门网
vue3 +ts 第二篇
创始人
2024-04-30 10:21:09
0次

1.watch watchEffect 监听汇总

watchwatchEffect
默认情况是惰性的，也就是说仅在侦听的源数据变更时才执行回调。不需要手动传入依赖
更明确哪些状态的改变会触发侦听器重新运行副作用；会先执行一次用来自动收集依赖
获取到侦听状态变化前后的值。无法获取到变化前的值， 只能获取变化后的值

watch

监视单个

let num = ref(10)watch(num,(nv,ov)=>{console.log(nv,ov);
})

监视多个普通  返回的也是数组形式

let num = ref(10)
let str = ref('你好')watch([num,str],(nv,ov)=>{console.log(nv,ov);
})

检测ref 对象    ref传入多级结构对象要加 deep 属性

let refObj = ref({r1:{r2:'r1'}
})
watch (refObj,(nv,ov)=>{console.log(nv,ov,'refObj');},{deep:true
}) 

检测 reactive 对象  vue默认加了 deep 属性
 

type propObj = {name:string;hobby:Object;home: {pri: string;};aa: Object
};let ins = reactive([{name: "ww",hobby: ["play", "sing"],home: {pri: "henna",},aa: {bb: {cc: "ccc",},},},
]);watch(ins[0],(nv,ov)=>{console.log(nv,ov);})
 

ref 和 reactive  检测对象是 都检测不到 旧值  nv ov 都是最新的值
 

检测目标是多级对象某个属性    第一个参数写成回调的形式  这种形式能检测到旧的值
 

let ins = reactive([{name: "ww",hobby: ["play", "sing"],home: {pri: "henna",},aa: {bb: {cc: "ccc",},},},
]);watch(()=>ins[0].aa.bb.cc,(nv,ov)=>{console.log(nv,ov);  // c变了 ccc 
})let change =()=>{ins[0].aa.bb.cc = 'c变了'
}
 

watchEffect
 

 

 
 

let str  = ref('watchEffect1');let watchStop= watchEffect((watchEcb)=>{console.log(str);watchEcb(()=>{console.log('watchEcb');})})let ws = ()=>{watchStop()}
 

watchEffect接收一个副作用函数 《watchEcb》
 

此外，watchEffect 接受一个函数作为参数 在函数体内用到的数据发生改变时会重新 触发该函数执行，而且 该函数还接受一个回调作为参数 《watchEcb》  watchEcb内的函数执行的时机 要比
 

watchEffect 调用的函数 执行的要快 ，可以再这里面 做防抖等 ，watchEffect 返回一个 回调
 

当停止监视时，执行该回调 会再触发一次 《watchEcb》  以后就不在监视
 

 

watch 和watchEffect 的 配置对象 option 内的属性
 

deeptrue  | fasle    
immediatetrue  | false     
flusepre  | sync | post   


pre在组件更新更新前运行,默认为'pre'
sync强制效果始终同步触发。然而，这是低效的，应该很少需要。
post在组件更新更新后运行


                
            
            
            

                
                
                词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。
                            

            

                

                    上一篇：「设计模式」享元模式

                

                

                    下一篇：spring之Bean的循环依赖问题                

            

            
            

                
                
相关内容

                
            

            

            
            

                
            



        
        
    
    

    
    

        
        

            
            

                
                

                    
                    

                        
                        热门资讯
                        
                    

                    
                

                
            

            
            
            


                                
                

                    
                    

                        

                    

                    
                    
                    

                        监控摄像头接入GB28181平...
                        流程简介将监控摄像头的视频在网站和APP中直播，要解决的几个问题是：1&...
                    

                    
                

                                
                

                    
                    

                        

                    

                    
                    
                    

                        Windows10添加群晖磁盘...
                        在使用群晖NAS时，我们需要通过本地映射的方式把NAS映射成本地的一块磁盘使用。 通过...
                    

                    
                

                                
                

                    
                    

                        

                    

                    
                    
                    

                        protocol buffer...
                        目录   目录 什么是protocol buffer 1.protobuf 1.1安装  1.2使用...
                    

                    
                

                                
                

                    
                    

                        

                    

                    
                    
                    

                        在Word、WPS中插入AxM...
                        引言 我最近需要写一些文章，在排版时发现AxMath插入的公式竟然会导致行间距异常&#...
                    

                    
                

                                
                

                    
                    

                        

                    

                    
                    
                    

                        【PdgCntEditor】解...
                        一、问题背景 大部分的图书对应的PDF，目录中的页码并非PDF中直接索引的页码...
                    

                    
                

                                
                

                    
                    

                        

                    

                    
                    
                    

                        Fluent中创建监测点
                        1 概述某些仿真问题，需要创建监测点，用于获取空间定点的数据࿰...
                    

                    
                

                                
                

                    
                    

                        

                    

                    
                    
                    

                        educoder数据结构与算法...
                                                                          ...
                    

                    
                

                                
                

                    
                    

                        

                    

                    
                    
                    

                        MySQL下载和安装（Wind...
                        前言：刚换了一台电脑，里面所有东西都需要重新配置，习惯了所...
                    

                    
                

                                
                

                    
                    

                        

                    

                    
                    
                    

                        修复 爱普生 EPSON L4...
                        L4151 L4153 L4156 L4158 L4163 L4165 L4166 L4168 L4...
                    

                    
                

                                
                

                    
                    

                        

                    

                    
                    
                    

                        MFC文件操作
                         MFC提供了一个文件操作的基类CFile，这个类提供了一个没有缓存的二进制格式的磁盘...