vue3compute数据不响应的问题

在vue3中,我们在写前端数据处理的时候,特别是在store中,特别容易代入后端处理思维,本身没有错,但是特别容易导致数据不响应,使用前端js的方式处理就可以解决这一问题,下面就是一些例子

1. forEach
   用途: 执行数组的每一项，不返回结果。

示例:

javascript
const numbers = [1, 2, 3];
numbers.forEach(num => {
    console.log(num); // 输出每个数字
});

2. map
   用途: 创建一个新数组，其中每个元素是原始数组中每个元素经过函数处理后的结果。

示例:

javascript
const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // 输出 [2, 4, 6]

3. filter
   用途: 创建一个新数组，其中包含所有通过测试的元素。

示例:

javascript
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // 输出 [2, 4]

4. find
   用途: 返回数组中第一个通过测试的元素。

示例:

javascript
const numbers = [1, 2, 3, 4, 5];
const firstEven = numbers.find(num => num % 2 === 0);
console.log(firstEven); // 输出 2

5. some
   用途: 测试数组中的至少一个元素是否通过了测试。

示例:

javascript
const numbers = [1, 2, 3, 4, 5];
const hasEven = numbers.some(num => num % 2 === 0);
console.log(hasEven); // 输出 true

6. every
   用途: 测试数组中的所有元素是否都通过了测试。

示例:

javascript
const numbers = [2, 4, 6];
const allEven = numbers.every(num => num % 2 === 0);
console.log(allEven); // 输出 true

7. reduceRight
   用途: 从右向左遍历数组，执行归纳操作，返回最终的结果。

示例:

javascript
const numbers = [1, 2, 3];
const sum = numbers.reduceRight((acc, num) => acc + num, 0);
console.log(sum); // 输出 6

8. flatMap
   用途: 先使用 map 方法创建一个新数组，然后将所有子数组连接成一个新数组。

示例:

javascript
const arrays = [[1, 2], [3, 4], [5]];
const flat = arrays.flatMap(arr => arr);
console.log(flat); // 输出 [1, 2, 3, 4, 5]

9. for...of
   用途: 直接遍历数组的每个元素，适用于任意可迭代对象。

示例:

javascript
const numbers = [1, 2, 3];
for (const num of numbers) {
    console.log(num); // 输出每个数字
}

10. for...in
    用途: 遍历对象的可枚举属性，但通常不建议用在数组上，因为它也会遍历数组的原型链。

示例:

javascript
const obj = { a: 1, b: 2 };
for (const key in obj) {
    console.log(key, obj[key]); // 输出属性名和值
}

每种遍历方法都有其特定的用途和适用场景。选择合适的方法可以让代码更加简洁和高效。