Vue 数组操作

Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：

[](()push() 添加元素

---

• {{ item.message }}

• [](()pop() 删除最后一个元素

  ---

  example1.$data.items.pop();

  [](()shift() 删除第一个元素

  ---

  example1.$data.items.shift();

  [](()unshift() 添加一个元素到数组最前面

  ---

  example1.$data.items.unshift({message :‘hi…’});

  [](()splice() 方法用于插入、删除或替换数组的元素

  ---

  | 参数 | 描述 |

  | — | — |

  | index | 必需。规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。 |

  | howmany | 必需。规定应该删除多少元素。必须是数字，但可以是 “0”。如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。 |

  | item1, …, ite 《一线大厂Java面试题解析+后端开发学习笔记+最新架构讲解视频+实战项目源码讲义》无偿开源 威信搜索公众号【编程进阶路】 mX | 可选。要添加到数组的新元素example1.$data.items.splice(0,1,{message:'splice'}); |

  [](()sort() 排序（升序）

  ---
• {{ item }}

• [](()注意事项

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

  当你利用索引直接设置一个项时，例如： vm.items[indexOfItem] = newValue

  当你修改数组的长度时，例如： vm.items.length = newLength

  为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果， 同时也将触发状态更新：

  // Vue.set

  Vue.set(example1.items, indexOfItem, newValue)

  例子:
• {{ item.message }}