vue-数组更新检测

Posted hyk-qdxx

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue-数组更新检测相关的知识,希望对你有一定的参考价值。

项目过程中,经常会需要对数组进行更新,并希望相应的视图页面也及时的更新,那么问题来了,如何在数组更新后,及时地触发视图更新呢?

#变异方法

Vue 包含一组观察数组的变异方法,它们将会触发视图更新。这些方法如下:push(),pop(),shift(),unshift(),splice(),sort(),reverse();

#替换数组

变异方法会改变被这些方法调用的原始数组,如果我们不希望改变原数组,就可以使用此方法,例如:filter()concat() 和 slice() 。这些不会改变原始数组,但总是返回一个新数组。

你可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是,事实并非如此。Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的、启发式的方法,所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。

以上是关于vue-数组更新检测的主要内容,如果未能解决你的问题,请参考以下文章

VUE中v-for更新检测

回归 | js实用代码片段的封装与总结(持续更新中...)

vue对象或者数组中数据变化但是视图没有更新

Vue如何检测数组变化

vue中detele删除对象属性时视图不能响应更新 - 解决办法

Vue 不能检测变动的数组情况