讲一下Vue 数组响应式

Vue 数组响应式是指当数组中的元素发生变化时，Vue 会自动更新页面上对应的部分。Vue 通过重写数组的一些方法实现数组的响应式：

1. push()：在数组末尾添加一个或多个元素
2. pop()：删除数组最后一个元素
3. shift()：删除数组第一个元素
4. unshift()：在数组开头添加一个或多个元素
5. splice()：删除或替换数组中的元素
6. sort()：排序数组
7. reverse()：反转数组

当使用这些方法修改数组时，Vue 会通过观察者模式，检测到数组的变化并执行相应的更新操作。但是，如果直接修改数组中的某个元素，Vue 是无法检测到的，需要使用 Vue 提供的 $set() 方法或者使用数组的响应式 API。

例如，如果有以下数据：

data() {
  return {
    list: ['apple', 'banana', 'orange']
  }
}

如果使用 push() 方法添加一个元素，Vue 会自动更新页面：

this.list.push('melon');

但是如果直接修改数组中的某个元素，Vue 是无法检测到的：

this.list[0] = 'pear';

此时需要使用 Vue 的 $set() 方法：

this.$set(this.list, 0, 'pear');

或者使用数组的响应式 API：

Vue.set(this.list, 0, 'pear');

相关问题

vue3 响应式数组

在Vue3中，响应式数组可以通过使用`reactive`函数来定义。下面是一个示例代码：

import { reactive } from 'vue'

const state = reactive({
  array: \['apple', 'banana', 'orange'\]
})

state.array.push('grape')

console.log(state.array) // \['apple', 'banana', 'orange', 'grape'\]

在上面的代码中，我们使用`reactive`函数定义了一个响应式对象`state`，其中包含一个数组`array`。我们可以像操作普通数组一样操作`state.array`，并且任何对数组的修改都会触发响应式更新。

请注意，Vue3中的响应式数组不再需要使用特殊的方法（如`push`、`pop`等）来触发更新，而是直接使用普通的数组方法即可。
#### 引用[.reference_title]
- *1* *2* *3* [Vue3 数据响应式](https://blog.csdn.net/hx_1551/article/details/124623872)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]

过滤Vue3响应式数组

在Vue3中，可以使用 `computed` 和 `watchEffect` 来过滤响应式数组。

下面是使用 `computed` 来过滤响应式数组的示例代码：

import { ref, computed } from 'vue'

const list = ref([
  { id: 1, name: 'apple', category: 'fruit' },
  { id: 2, name: 'banana', category: 'fruit' },
  { id: 3, name: 'carrot', category: 'vegetable' },
  { id: 4, name: 'orange', category: 'fruit' },
])

const filteredList = computed(() => {
  return list.value.filter(item => item.category === 'fruit')
})

在上面的代码中，我们使用 `computed` 创建了一个新的响应式数组 `filteredList`，它会根据 `list` 数组中的元素进行过滤，只保留 `category` 为 'fruit' 的元素。

如果你需要在过滤条件发生变化时重新过滤数组，可以使用 `watchEffect` 监听过滤条件的变化，示例代码如下：

import { ref, computed, watchEffect } from 'vue'

const list = ref([
  { id: 1, name: 'apple', category: 'fruit' },
  { id: 2, name: 'banana', category: 'fruit' },
  { id: 3, name: 'carrot', category: 'vegetable' },
  { id: 4, name: 'orange', category: 'fruit' },
])

const filterCategory = ref('fruit')

const filteredList = computed(() => {
  return list.value.filter(item => item.category === filterCategory.value)
})

watchEffect(() => {
  filteredList.value // 重新过滤数组
})

在上面的代码中，我们创建了一个新的响应式变量 `filterCategory`，用于存储过滤条件。然后，我们使用 `watchEffect` 监听 `filterCategory` 的变化，并在回调函数中重新过滤数组。当 `filterCategory` 发生变化时，`filteredList` 会自动更新。