详解vue 数组和对象渲染问题

详解详解vue 数组和对象渲染问题数组和对象渲染问题

主要介绍了详解vue 数组和对象渲染问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随

小编过来看看吧

最近项目有点忙碌，遇到好多问题都没有总结(╥﹏╥)，在开发过程中，取vuex中的数组渲染完成之后，再次修改数组的值，

数据更新了，但是视图并没有更新。以为是数组更新的问题，后来又以为是因为vuex导致的问题. 最后强制刷新组件解决了问

题，但是还没有找到根本问题的所在...

数组更新检测数组更新检测

1. 在 vue 中使用数组的push()、pop()、shift()、unshift()、splice()、sort()、reverse() 、filter()、concat() 方法时，改变数

this.arr.splice(indexOfItem, 1, newValue)

(2)利用索引直接设置一个项时，例如：this.arr[indexOfItem] = newValue

this.arr.splice(newLength)

demo如下：

<template>

<div class="demo">

<div class="list-item" v-for="item in arr[0].elements" :key="item.name">{{item.name}}</div>

<div class="change-btn" @click="changeArr">改变列表的值</div>

</div>

</template>

elements: [{

name: '0'

}, {

name: '1'

}, {

name: '2'

}]

}]

}

})

// this.arr[0].elements[1].name = '4' 可以改变数组的值

// this.arr[0].elements[1] = { 无法改变数组的值

// name: '4'

// }

}

}

}

</script>

问题： 用v-for循环渲染数组数据时，数据更新了，视图却没有更新