vue3【侦测|过滤|数组方法】数据变化侦测&&信息筛选过滤&&常用数组方法.filter() .map() .forEach(). find()

在Vue 3中，数据的变化侦测可以通过响应式系统自动处理。信息筛选可以使用JavaScript数组的.filter()方法，它会创建一个新数组，其中包含通过提供的测试函数的所有元素。

以下是一个简单的例子，展示了如何在Vue 3中使用.filter()方法来筛选一个包含对象的数组，并显示满足特定条件的对象。

<template>
  <div>
    <div v-for="item in filteredList" :key="item.id">
      {{ item.name }}
    </div>
  </div>
</template>
 
<script setup>
import { reactive } from 'vue';
 
const items = reactive([
  { id: 1, name: 'Item 1', isActive: true },
  { id: 2, name: 'Item 2', isActive: false },
  { id: 3, name: 'Item 3', isActive: true },
  // ... 更多对象
]);
 
// 计算属性来筛选出所有 isActive 为 true 的对象
const filteredList = computed(() => items.filter(item => item.isActive));
</script>

在这个例子中，items数组是响应式的，每当数组中的对象的isActive属性变化时，计算属性filteredList都会自动更新，只包含isActive为true的对象。在模板中，v-for指令用来遍历filteredList，显示每个项目的name。