vue3 +ts 第二篇
1.watch watchEffect 监听汇总
| watch | watchEffect |
| 默认情况是惰性的，也就是说仅在侦听的源数据变更时才执行回调。 | 不需要手动传入依赖 |
| 更明确哪些状态的改变会触发侦听器重新运行副作用； | 会先执行一次用来自动收集依赖 |
| 获取到侦听状态变化前后的值。 | 无法获取到变化前的值， 只能获取变化后的值 |
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检测 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 内的属性
| deep | true | fasle |
| immediate | true | false |
| fluse | pre | sync | post |
| pre | 在组件更新更新前运行,默认为'pre' |
| sync | 强制效果始终同步触发。然而，这是低效的，应该很少需要。 |
| post | 在组件更新更新后运行 |