项目过程中,经常会需要对数组进行更新,并希望相应的视图页面也及时的更新,那么问题来了,如何在数组更新后,及时地触发视图更新呢?
#变异方法
Vue 包含一组观察数组的变异方法,它们将会触发视图更新。这些方法如下:push(),pop(),shift(),unshift(),splice(),sort(),reverse();
#替换数组
变异方法会改变被这些方法调用的原始数组,如果我们不希望改变原数组,就可以使用此方法,例如:filter()
, concat()
和 slice()
。这些不会改变原始数组,但总是返回一个新数组。
你可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是,事实并非如此。Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的、启发式的方法,所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。