Vue列表数组的替换方法

变更方法,顾名思义,会变更调用了这些方法的原始数组。相比之下,也有非变更方法,例如 filter()concat()slice()。它们不会变更原始数组,而总是返回一个新数组。当使用非变更方法时,可以用新数组替换旧数组:

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})

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

分类Vue列表渲染相关推荐:

Vue 列表用 v-for 把一个数组对应为一组元素 Vue列表维护状态v-bind:key Vue列表数组的方法 Vue列表数组的替换方法 Vue列表显示过滤/排序后的结果 Vue 在 v-for 里使用值范围 Vue 在 <template> 上使用 v-for Vue中v-for 与 v-if 一同使用 Vue 在组件上使用 v-for