vue watch如何如监听一个json的变化来改变状态？

Question

const data = [
  { "id": 1, "name": "Alice", age: [{ id: 4, status: 0 },{ id: 4, status: 1 }] },
  { "id": 2, "name": "Bob", age: [{ id: 4, status: 1 }] },
  { "id": 3, "name": "Charlie", age: [{ id: 4, status: 1 }] }
];

如何监听data里面的所有age的长度是否为0，所有age的长度为0则返回true，否则返回false

Answer 1

写一个 computed 来计算所有项的 age 属性长度是否都为 0 呗，我觉得不需要用 watch。

不知道你怎么操作的 data，因为你描述的是 json 所以我操作整个data覆盖了。

const data = ref([])
// data里面的所有age的长度是否为0，所有age的长度为0则返回true，否则返回false
const allAgeEmpty = computed(() => data.value.every(i => !i.age.length))

// 模拟数据
setTimeout(() => {
  data.value = [
    { "id": 1, "name": "Alice", age: [{ id: 4, status: 0 },{ id: 4, status: 1 }] },
    { "id": 2, "name": "Bob", age: [{ id: 4, status: 1 }] },
    { "id": 3, "name": "Charlie", age: [{ id: 4, status: 1 }] }
  ]
}, 1000)

Vue SFC Playground