《vue3数组的常用方法》
在Vue3项目中，我们经常需要对数组进行各种操作，如添加、删除、查找元素等。为了解决这些问题，Vue3提供了丰富的数组方法，并且可以结合JavaScript原生的数组方法来实现功能。
一、直接使用JavaScript原生数组方法
Vue3基于JavaScript构建，因此可以直接使用JavaScript原生数组方法。
1. 添加元素
- push()：向数组末尾添加一个或多个元素。
javascript
let arr = [1, 2, 3];
arr.push(4); // arr变为[1, 2, 3, 4]
- unshift()：向数组开头添加一个或多个元素。
javascript
let arr = [1, 2, 3];
arr.unshift(0); // arr变为[0, 1, 2, 3]
2. 删除元素
- pop()：删除数组最后一个元素。
javascript
let arr = [1, 2, 3];
arr.pop(); // arr变为[1, 2]
- shift()：删除数组个元素。
javascript
let arr = [1, 2, 3];
arr.shift(); // arr变为[2, 3]
- splice()：可删除任意位置的元素，还可以用于插入和替换元素。
javascript
let arr = [1, 2, 3, 4, 5];
// 删除下标为2（即值为3）的元素
arr.splice(2, 1); // arr变为[1, 2, 4, 5]
// 在下标为2的位置插入6
arr.splice(2, 0, 6); // arr变为[1, 2, 6, 4, 5]
二、Vue3响应式数组操作
为了保证数组操作的响应式，在Vue3组件中使用数组时有一些特殊之处。
1. 修改数组元素
如果要修改数组中的某个元素，不能直接通过索引赋值，否则不会触发视图更新。可以使用Vue.set()或者将整个数组重新赋值。
```javascript
- {{ item }}
import { ref } from 'vue';
export default {
setup() {
let items = ref([1, 2, 3]);
const changeItem = () => {
// 错误的方式
// items.value[0] = 10;
// 正确的方式1
// Vue.set(items.value, 0, 10);
// 正确的方式2
items.value = [...items.value.slice(0, 0), 10, ...items.value.slice(1)];
};
return {
items,
changeItem
};
}
};
```
2. 数组过滤
有时候我们需要根据条件过滤数组中的元素并展示到页面上。
```javascript
- {{ item }}
import { computed, ref } from 'vue';
export default {
setup() {
let items = ref([1, 2, 3, 4, 5]);
let filterValue = ref(3);
const filteredItems = computed(() => {
return items.value.filter(item => item > filterValue.value);
});
return {
filteredItems
};
}
};
``
这里使用了属性来根据条件计算过滤后的数组filteredItems，当filterValue变化时，filteredItems`会自动重新计算，从而实现视图的更新。
