在 Vue.js 中，我们经常会使用 v-for 指令来渲染列表。但是，当我们在渲染时直接操作被循环数组，可能会导致一些意想不到的问题。
为什么不能直接操作被循环数组？
Vue.js 实现响应式的方式是通过对数据进行劫持，当数据发生变化时，Vue.js 会自动更新视图。但是，如果我们直接操作被循环数组，Vue.js 就无法检测到数据的变化，从而无法更新视图。
如何避免直接操作被循环数组？
为了避免直接操作被循环数组，我们可以使用 Vue.js 提供的一些方法来对数组进行操作，这些方法会触发数据的更新并重新渲染视图。这些方法包括：
push(): 在数组末尾添加一个元素pop(): 删除数组最后一个元素shift(): 删除数组第一个元素unshift(): 在数组开头添加一个元素splice(): 在指定位置添加或删除元素
除了以上方法，我们还可以使用 Vue.set() 或 this.$set() 方法来添加或修改数组中的元素，这样也能触发视图的更新。
示例代码
以下是一个使用 v-for 渲染列表的示例代码：
// javascriptcn.com 代码示例
<template>
<div>
<ul>
<li v-for="(item, index) in list" :key="index">{{ item }}</li>
</ul>
<button @click="addItem">添加元素</button>
</div>
</template>
<script>
export default {
data() {
return {
list: ['apple', 'banana', 'orange']
}
},
methods: {
addItem() {
// 直接操作被循环数组
this.list.push('pear')
}
}
}
</script>在上面的代码中，我们直接使用 push() 方法向数组中添加一个元素。这样做会导致 Vue.js 无法检测到数据的变化，从而无法更新视图。
为了避免这种情况，我们可以使用 splice() 方法来添加元素：
this.list.splice(this.list.length, 0, 'pear')
或者使用 Vue.set() 方法：
Vue.set(this.list, this.list.length, 'pear')
这样就能够正确地触发视图的更新了。
总结
在 Vue.js 中，使用 v-for 渲染列表时，切记不能直接操作被循环数组，否则会导致视图无法更新。我们应该使用 Vue.js 提供的一些方法来对数组进行操作，这样可以确保视图能够正确地响应数据的变化。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6579a892d2f5e1655d3bd2b5