在前端开发的世界里，Vue3可是个热门选手，它的响应式系统特别强大，能让数据变化自动更新到页面上。不过，在处理数组的时候，要是不小心就会掉进陷阱里，导致视图不更新。下面咱就来好好聊聊怎么正确操作数组，避免这些麻烦。
一、Vue3响应式数组基础认知
在Vue3里，我们可以用reactive和ref来创建响应式数据。对于数组来说，reactive用得比较多。咱先看个简单的例子：
<template>
<div>
<!-- 遍历渲染列表 -->
<ul>
<li v-for="(item, index) in fruits" :key="index">{{ item }}</li>
</ul>
<!-- 按钮点击添加水果 -->
<button @click="addFruit">添加水果</button>
</div>
</template>
<script setup>
import { reactive } from 'vue';
// 创建响应式数组
const fruits = reactive(['苹果', '香蕉']);
// 定义添加水果的方法
const addFruit = () => {
fruits.push('橙子');
};
</script>
在这个例子里，我们用reactive创建了一个响应式的水果数组fruits。当点击按钮调用addFruit方法时，会往数组里添加一个新水果“橙子”，页面也会自动更新显示新的水果列表。这就是Vue3响应式数组的基本用法。
二、常见的数组操作陷阱
直接通过索引修改数组元素
有时候，我们可能想直接通过索引来修改数组里的某个元素。看下面这个例子：
<template>
<div>
<ul>
<li v-for="(item, index) in numbers" :key="index">{{ item }}</li>
</ul>
<button @click="changeNumber">修改数字</button>
</div>
</template>
<script setup>
import { reactive } from 'vue';
// 创建响应式数组
const numbers = reactive([1, 2, 3]);
// 定义修改数字的方法
const changeNumber = () => {
// 直接通过索引修改元素
numbers[0] = 10;
};
</script>
在这个例子中，点击按钮调用changeNumber方法后，虽然数组的第一个元素被改成了10，但页面并不会更新显示。这就是一个陷阱，因为直接通过索引修改数组元素，Vue3的响应式系统没办法检测到这个变化。
修改数组长度
还有一种情况是直接修改数组的长度，看下面的代码：
<template>
<div>
<ul>
<li v-for="(item, index) in colors" :key="index">{{ item }}</li>
</ul>
<button @click="changeLength">修改数组长度</button>
</div>
</template>
<script setup>
import { reactive } from 'vue';
// 创建响应式数组
const colors = reactive(['红色', '蓝色', '绿色']);
// 定义修改数组长度的方法
const changeLength = () => {
// 直接修改数组长度
colors.length = 1;
};
</script>
点击按钮调用changeLength方法后，数组的长度被改成了1，但页面同样不会更新。这也是因为Vue3无法检测到这种直接修改数组长度的变化。
三、正确操作数组避免视图不更新
使用Vue3提供的方法
Vue3为我们提供了一些方法来正确操作数组，保证视图能正常更新。比如set方法（在Vue3里可以用toRefs结合解构赋值来模拟类似效果）。看下面的例子：
<template>
<div>
<ul>
<li v-for="(item, index) in numbers" :key="index">{{ item }}</li>
</ul>
<button @click="changeNumber">修改数字</button>
</div>
</template>
<script setup>
import { reactive, toRefs } from 'vue';
// 创建响应式数组
const state = reactive({
numbers: [1, 2, 3]
});
// 解构赋值获取响应式数组
const { numbers } = toRefs(state);
// 定义修改数字的方法
const changeNumber = () => {
// 创建新数组
const newNumbers = [...numbers.value];
newNumbers[0] = 10;
// 更新响应式数组
numbers.value = newNumbers;
};
</script>
在这个例子中，我们先创建了一个包含数组的响应式对象state，然后用toRefs解构出numbers。在changeNumber方法里，我们先复制一份数组，修改复制后的数组，再把修改后的数组赋值给响应式数组numbers.value。这样，页面就能正常更新了。
使用数组的原生方法
除了上面的方法，我们还可以使用数组的原生方法，像push、pop、splice等。这些方法Vue3的响应式系统是能检测到的。看下面的例子：
<template>
<div>
<ul>
<li v-for="(item, index) in names" :key="index">{{ item }}</li>
</ul>
<button @click="removeName">移除名字</button>
</div>
</template>
<script setup>
import { reactive } from 'vue';
// 创建响应式数组
const names = reactive(['张三', '李四', '王五']);
// 定义移除名字的方法
const removeName = () => {
// 使用splice方法移除元素
names.splice(0, 1);
};
</script>
在这个例子中，点击按钮调用removeName方法时，使用.splice方法移除了数组的第一个元素，页面会正常更新显示新的名字列表。
四、应用场景分析
列表展示与更新
在很多前端应用中，我们经常需要展示一个列表，并且可以对列表进行增删改操作。比如一个待办事项列表，用户可以添加新的待办事项，也可以删除已完成的事项。这时候就会用到Vue3的响应式数组，正确操作数组可以保证列表能实时更新显示。
<template>
<div>
<ul>
<li v-for="(todo, index) in todos" :key="index">{{ todo }}</li>
</ul>
<input v-model="newTodo" placeholder="输入新的待办事项">
<button @click="addTodo">添加待办</button>
<button @click="removeTodo">删除第一个待办</button>
</div>
</template>
<script setup>
import { reactive, ref } from 'vue';
// 创建响应式数组存储待办事项
const todos = reactive(['学习Vue3', '完成作业']);
// 创建响应式变量存储新输入的待办事项
const newTodo = ref('');
// 定义添加待办事项的方法
const addTodo = () => {
if (newTodo.value) {
todos.push(newTodo.value);
newTodo.value = '';
}
};
// 定义删除第一个待办事项的方法
const removeTodo = () => {
if (todos.length > 0) {
todos.splice(0, 1);
}
};
</script>
数据筛选与排序
在一些数据展示页面，我们可能需要对数据进行筛选和排序。比如一个商品列表，用户可以根据价格、销量等条件进行排序，也可以根据商品名称进行筛选。这时候就需要操作响应式数组，保证筛选和排序后的结果能正确显示在页面上。
<template>
<div>
<select v-model="sortType">
<option value="asc">升序</option>
<option value="desc">降序</option>
</select>
<input v-model="searchKeyword" placeholder="搜索商品">
<ul>
<li v-for="(product, index) in filteredAndSortedProducts" :key="index">{{ product.name }} - {{ product.price }}</li>
</ul>
</div>
</template>
<script setup>
import { reactive, computed, ref } from 'vue';
// 创建响应式数组存储商品数据
const products = reactive([
{ name: '手机', price: 3000 },
{ name: '电脑', price: 5000 },
{ name: '平板', price: 2000 }
]);
// 创建响应式变量存储排序类型
const sortType = ref('asc');
// 创建响应式变量存储搜索关键词
const searchKeyword = ref('');
// 计算属性，根据排序类型和搜索关键词筛选和排序商品
const filteredAndSortedProducts = computed(() => {
let filteredProducts = products.filter(product =>
product.name.includes(searchKeyword.value)
);
if (sortType.value === 'asc') {
filteredProducts.sort((a, b) => a.price - b.price);
} else {
filteredProducts.sort((a, b) => b.price - a.price);
}
return filteredProducts;
});
</script>
五、技术优缺点
优点
- 响应式更新方便：Vue3的响应式系统能让数据变化自动更新到页面上，开发者只需要关注数据的操作，不需要手动去更新DOM，大大提高了开发效率。
- 提供多种操作方法：Vue3提供了一些方法和数组的原生方法，让开发者可以正确操作数组，保证视图能正常更新。
缺点
- 容易掉进陷阱：如果不了解Vue3响应式数组的原理和正确操作方法，很容易掉进直接通过索引修改元素、修改数组长度等陷阱里，导致视图不更新。
- 学习成本：对于初学者来说，理解Vue3的响应式系统和正确操作数组可能需要一定的时间和精力。
六、注意事项
- 避免直接修改：尽量避免直接通过索引修改数组元素和直接修改数组长度，使用Vue3提供的方法或数组的原生方法来操作数组。
- 注意引用问题：在操作响应式数组时，要注意引用问题。比如在复制数组时，要使用展开运算符
...来创建新数组，避免直接引用原数组。 - 计算属性的使用：在进行数据筛选和排序等操作时，可以使用计算属性，这样可以保证每次数据变化时，筛选和排序的结果能自动更新。
七、文章总结
在Vue3开发中，响应式数组是一个非常重要的概念。虽然Vue3的响应式系统很强大，但在操作数组时还是有一些陷阱需要注意。我们要避免直接通过索引修改元素和直接修改数组长度，使用Vue3提供的方法或数组的原生方法来操作数组，保证视图能正常更新。同时，我们要根据不同的应用场景，正确使用响应式数组，提高开发效率。在实际开发中，要注意引用问题和计算属性的使用，避免出现不必要的错误。
评论