vue3:watch和watcheffect的根本性区别
问:
watch和watcheffect的根本性区别
回答:
watch
watch(()=>fileDetailList.value.length,
(newVal)=>{
useFile.inZip = newVal > 0 ? 1 : 0
},
{deep:true},{immediate : true}
)
watcheffect
watchEffect(()=>{
useFile.inZip = fileDetailList.value.length > 0 ? 1 : 0
})
上述比对:
watch是在第一个回调中指定了监听对象:fileDetailList.value.length
watchEffect是在回调函数中的等号的右侧指定了监听对象fileDetailList.value.length,两者的监听对象都是fileDetailList.value.length。
当然watchEffect可以直接写成:
watchEffect(()=>{
fileDetailList.value.length > 0 ? 1 : 0
})
这样写也是监听fileDetailList.value.length
上述这种需求中,
✅ 推荐选择
如果你只是想根据 fileDetailList 的长度更新 inZip 状态,推荐使用 watchEffect,因为它更简洁且能自动响应变化。
但如果未来需要更复杂的逻辑(比如区分新增还是删除、做防抖等),建议用 watch。
当然也可以选用watch或者watchEffect,只不过如果使用watch监听fileDetailList.value.length的长度,而不是用watchEffect,就会出现只要fileDetailList.value.length长度改变就会触发watch逻辑,
watchEffect是在满足fileDetailList.value.length > 0满足的时候才会触发watchEffect的逻辑。
更多推荐


所有评论(0)