Vue.js中如何高效监听JSON数组中每个对象特定属性长度的变化？

在Vue.js应用中，高效监听数据变化至关重要。本文探讨如何有效监听JSON数组内每个对象特定属性（例如age属性）长度的变化。目标是：当数组中所有对象的age属性数组长度都为0时，返回true；否则返回false。

直接使用watch监听整个JSON数组效率低下，因为它会触发不必要的重新计算。更优方案是利用Vue的computed属性。computed属性会在其依赖数据变化时自动重新计算，且仅在必要时计算，从而提升性能。

我们可以创建一个computed属性来判断data数组中所有对象的age属性长度是否都为0。代码示例如下：

import { ref, computed } from 'vue';const data = ref([]);// 计算data数组中所有对象的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: [] } // 修改Charlie的age属性为空数组  ];}, 1000);

登录后复制