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

• Z时代
• 2024-03-13
• 分类：IT

场镜

做一个复选框全选功能，复选框绑定一个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的更改也被监听了呢？

回答：

watch(checkedAll, () => {
  keyList.forEach((item) => {
    // 是否少写了.value
    checkData[item.key] = checkedAll.value
  })
})

回答：

import { ref, reactive, watch } from 'vue'
const keyList = [
  { key: 'name', text: '姓名' },
  { key: 'age', text: '年龄' },
  { key: 'hobby', text: '爱好' },
]
const checkedAll = ref(false)
const checkData = reactive({
  name: false,
  age: false,
  hobby: false
})
watch(checkedAll, (value) => {
  // 在 $nextTick 回调函数中更新组件的状态
  nextTick(() => {
    keyList.forEach((item) => {
      checkData[item.key] = value
    })
  })
})

以上是 vue3的watch除了监听指定的对象，回调函数里的对象为什么也被监听了？ 的全部内容， 来源链接： utcz.com/p/934061.html