vue3的watch除了监听指定的对象,回调函数里的对象为什么也被监听了?

作者站长头像
站长
· 阅读数 5

场镜

做一个复选框全选功能,复选框绑定一个checkedAll的ref,然后其他选项比较多,我使用了一个reactive,然后我监听checkedAll,循环更改其他复选框。

代码

const keyList = [
  { key: 'name', text: '姓名' },
  { key: 'age', text: '年龄' },
  { key: 'hobby', text: '爱好' },
  
]
watch(checkedAll, () => {
  keyList.forEach((item) => {
    checkData[item.key] = checkedAll
  })
})

现象

全选功能没问题,点击全选之前,单独点击下面的选项,全选不受影响,但是点击过全选之后,也就是watch执行后,再点击下面的选项,全选也会受影响,然后就又执行watch了。

为什么执行过watch后,checkData的更改也被监听了呢?

回复
1个回答
avatar
test
2024-07-05
watch(checkedAll, () => {
  keyList.forEach((item) => {
    // 是否少写了.value
    checkData[item.key] = checkedAll.value
  })
})
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容