vue学习笔记-数组更新

数组变异方法

在 Vue 中，直接修改对象属性的值无法触发响应式。当直接修改了对象属性的值，会发现数据改了，但是页面内容并没有改变
变异数组方法在保持数组方法原有功能不变的前提下对其进行功能拓展

• push()：往数组最后面添加一个元素，成功返回当前数组的长度
• pop()：删除数组的最后一个元素，成功返回删除元素的值
• shift()：删除数组的第一个元素，成功返回删除元素的值
• unshift()：往数组最前面添加一个元素，成功返回当前数组的长度
• splice()：有三个参数，第一个是想要删除的元素的下标（必选），第二个是想要删除的个数（必选），第三个是删除 后想要在原位置替换的值
• sort()：使数组按照字符编码默认从小到大排序,成功返回排序后的数组
• reverse()：将数组倒序，成功返回倒序后的数组

这些方法都会改变数组

替换数组

• filter()：创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素
• concat()：方法用于连接两个或多个数组。该方法不会改变现有的数组
• slice()：从已有的数组中返回选定的元素。该方法并不会修改数组，而是返回一个子数组

这些方法不会改变原始数组，但总是返回一个新数组

动态响应式数据

Vue.set(a, b, c）

• a:要修改的数组名称
• b:要修改的数组中的索引
• c:更改后的数据

该方法还可以用于修改对象

• 此时a:要修改的对象名称
• b:要修改的对象属性
• c:要修改的对象属性值