vue 数组元素替换_Vue全家桶之Vue数组变更方法和替换数组

在 Vue 中，直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值，你会发现，只有数据改了，但是页面内容并没有改变

直接修改页面内容并没有改变

页面内容并没有改变

那么Vue如何处理动态处理响应式数据

Vue.set(a,b,c) 让触发视图重新更新一遍，数据动态起来

Vue.set

页面内容动态改变

除了Vue.set我们也可以 直接使用vm实例的$set动态处理响应式数据

例如 ：vm.$set(vm.list, 1, '西红柿');

数组变更方法和替换数组

我们知道由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。当你直接修改了对象属性的值，会发现只有数据改了，页面内容没有更新 ，变更数组方法即保持数组方法原有功能不变的前提下对其进行功能拓展

变更方法

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

push() 往数组最后面添加一个元素，成功返回当前数组的长度

pop() 删除数组的最后一个元素，成功返回删除元素的值

shift() 删除数组的第一个元素，成功返回删除元素的值

unshift() 往数组最前面添加一个元素，成功返回当前数组的长度

splice() 有三个参数，第一个是想要删除的元素的下标(必选)，第二个是想要删除的个数(必选)，第三个是删除 后想要在原位置替换的值

sort() sort() 使数组按照字符编码默认从小到大排序，成功返回排序后的数组

reverse() reverse() 将数组倒序，成功返回倒序后的数组

替换数组

例如 ：

filter() filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

concat() concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组

slice() slice() 方法可从已有的数组中返回选定的元素。该方法并不会修改数组，而是返回一个子数组

它们不会变更原始数组，而总是返回一个新数组。当使用替换数组方法时，可以用新数组替换旧数组

Vue数组操作区别：

1、变异方法：会影响数组的原始数据的变化。

2、替换数组：不会影响原始的数组数据，而是形成一个新的数组。

动态更新页面

动态