如何解决vue数组和对象渲染的问题

这篇文章给大家分享的是有关如何解决vue数组和对象渲染的问题的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

成都创新互联是一家专注于成都网站设计、做网站与策划设计,兴宁网站建设哪家好?成都创新互联做网站,专注于网站建设10年,网设计领域的专业建站公司;建站业务涵盖:兴宁等地区。兴宁做网站价格咨询:18980820575

数组更新检测

1. 在 vue 中使用数组的push()、pop()、shift()、unshift()、splice()、sort()、reverse() 、filter()、concat() 方法时，改变数组的同时可以触发视图的变化。

2. 注意： 有两种情况 vue 无法检测到变动的数组，分别是：

（1）直接操作数组的长度；

// Vue.set
this.$set(arr, indexOfItem, newValue)
// Array.prototype.splice
this.arr.splice(indexOfItem, 1, newValue)

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

this.arr.splice(newLength)

demo如下：

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

由于 JavaScript 的限制， Vue 不能检测以下变动的数组：

1. 当你利用索引直接设置一个项时，例如： vm.items[indexOfItem] = newValue
2. 当你修改数组的长度时，例如： vm.items.length = newLength

解决方法：

为了避免第一种情况，以下两种方式将达到像 vm.items[indexOfItem] = newValue 的效果， 同时也将触发状态更新：

// Vue.set
Vue.set(example1.items, indexOfItem, newValue) （数组， 所引， 值） 
// Array.prototype.splice`
example1.items.splice(indexOfItem, 1, newValue) （所引， 长度， 值）

避免第二种情况，使用 splice：

example1.items.splice(newLength)

对象更新检测

方法一：this.$set()

方法二：Object.assign()

demo.vue

补充：

this.$forceUpdate()迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。
使用 v-if 在切换时，元素及它的绑定数据和组件都会被销毁并重建

感谢各位的阅读！关于“如何解决vue数组和对象渲染的问题”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！