Vue中如何监听JSON嵌套数组属性长度变化并改变状态？

Vue中高效监听JSON嵌套数组属性长度变化

本文探讨在Vue应用中，如何有效监听包含嵌套数组的JSON数据变化，并根据变化动态更新应用状态。 我们将关注如何判断一个JSON对象中所有嵌套数组的特定属性长度是否均为零。

问题描述：假设存在一个包含多个对象的数组data，每个对象都含有一个名为age的属性，而age本身是一个数组。目标是监听data中所有对象的age数组长度，如果所有age数组长度都为0，则返回true，否则返回false。

推荐使用Vue的computed属性而非watch来实现这一功能。 computed属性会在其依赖项变化时自动更新，无需显式监听，代码更简洁易维护。

立即学习“前端免费学习笔记（深入）”；

以下示例代码使用computed属性实现：

import { ref, computed } from 'vue';const data = ref([]);// 计算所有age数组长度是否都为0const allAgeEmpty = computed(() => data.value.every(item => !item.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: [] } // 添加一个age数组长度为0的例子  ];}, 1000);

登录后复制