在vue中，使用数组进行数据绑定是非常常见的。然而，有时我们可能会遇到一个奇怪的问题：当我们使用赋值语句直接改变数组的值时，组件不会重新渲染。
这是因为Vue的响应式系统是基于JavaScript的setter实现的。当你尝试直接修改Vue实例中的数据时，Vue并没有捕获到这个操作，它无法更新视图以反映这些变化，也就是说，Vue不能保证对于非响应式数据的支持。
我们来看一个例子：
<template>
<div>
<ul>
<li v-for="(item, index) in items" :key="index">{{ item }}</li>
</ul>
<button @click="updateItems">Update Items</button>
</div>
</template>
<script>
export default {
data() {
return {
items: ["Apple", "Banana", "Cherry"]
};
},
methods: {
updateItems() {
this.items = ["Grape", "Orange", "Pineapple"];
}
}
};
</script>在这个组件中，我们有一个简单的数组items，它被用来显示一个无序列表。还有一个按钮，当我们点击它时，我们直接将items数组赋值为一个新数组。
当我们运行这个组件时，我们会发现点击按钮并没有更新列表。这是因为我们使用了赋值语句直接改变了items数组。在这种情况下，Vue无法检测到数组的变化。
立即学习“前端免费学习笔记（深入）”；
那么应该怎么做呢？
Vue提供了一些方法来解决这个问题。让我们来看看其中的一些。
1. Vue.set
Vue.set是Vue的一个全局方法，用来向响应式对象中添加响应式属性。在处理数组时，Vue.set还可以用来实现在指定位置插入一个新元素。
<template>
<div>
<ul>
<li v-for="(item, index) in items" :key="index">{{ item }}</li>
</ul>
<button @click="updateItems">Update Items</button>
</div>
</template>
<script>
export default {
data() {
return {
items: ["Apple", "Banana", "Cherry"]
};
},
methods: {
updateItems() {
Vue.set(this.items, 1, "Orange");
}
}
};
</script>在这个例子中，我们将updateItems方法中的数组赋值语句替换为Vue.set方法。第一个参数是要修改的数组，第二个参数是要修改的索引，第三个参数是要插入的新元素。
现在我们可以放心地修改数组了，视图也会跟着更新。
2. splice
JavaScript的splice方法可以在指定位置添加或删除元素。在Vue中，我们可以使用它来更新数组并触发视图重新渲染。
<template>
<div>
<ul>
<li v-for="(item, index) in items" :key="index">{{ item }}</li>
</ul>
<button @click="updateItems">Update Items</button>
</div>
</template>
<script>
export default {
data() {
return {
items: ["Apple", "Banana", "Cherry"]
};
},
methods: {
updateItems() {
this.items.splice(1, 1, "Orange");
}
}
};
</script>在这个例子中，我们用splice方法将Banana替换为Orange，并在原地更新了items数组。这样就会触发重新渲染。
当然，这并不是说我们应该在任何时候都使用splice方法，而是要根据自己的具体情况进行选择。
3. filter
当需要移除数组中的某些元素时，我们可以利用filter方法。它会返回一个新数组，该数组只包含满足条件的元素。
<template>
<div>
<ul>
<li v-for="(item, index) in items" :key="index">{{ item }}</li>
</ul>
<button @click="updateItems">Update Items</button>
</div>
</template>
<script>
export default {
data() {
return {
items: ["Apple", "Banana", "Cherry"]
};
},
methods: {
updateItems() {
this.items = this.items.filter(item => item !== "Banana");
}
}
};
</script>在这个例子中，我们使用filter方法创建了一个新的数组，只保留了不等于Banana的元素。然后我们将原来的数组赋值为这个新数组，这样就触发了视图的更新。
总结
在Vue中，数组的直接赋值并不会触发视图的重新渲染，这是由于Vue的响应式系统的实现机制所致。为了解决这个问题，Vue提供了很多可以应对不同情况的方法，例如Vue.set、splice和filter等等。选择适当的方法可以让我们更加方便地完成需要操作的功能，也使我们的代码更加可读和可维护。
