数组更新

数组变异方法 mutation method

Vue 包含一组观察数组的变异方法(mutation method)，所以它们也将会触发视图更新。主要包括：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

数组变异语法使用

来看这样一个例子

 <div id="app">
    <ol>
      <li v-for="item in arr">{{item}}</li>
      </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    let app = new Vue({
      el: '#app',
      data: {
        arr: ['first','second','third','fourth']
      }
    })
  </script>

看到的是这样的：

image.png

下面每种方法的使用都是基于这个例子，点击 这里 开始实践~~

1. push() 在末尾添加元素

在控制台输入以下代码，观察页面变化：

app.arr.push('我是在末尾添加的元素')

结果如下：

push.png

2. pop() 将数组的最后一个元素移除

刷新页面后，在控制台输入以下代码，观察页面变化：

app.arr.pop('我要将数组的最后一个元素移除啦~~')

结果如下：

pop.png

3. shift() 删除数组的第一个元素

刷新页面后，在控制台输入以下代码，观察页面变化：

app.arr.shift('我要删除数组的第一个元素啦~~')

结果如下：

shift.png

4. unshift() 在数组的第一个元素位置添加一个元素

刷新页面后，在控制台输入以下代码，观察页面变化：

app.arr.unshift('我是在数组的第一个元素位置添加的元素')

结果如下：

unshift.png

5. splice() 添加或者删除函数

有三个参数：

• 第一个参数 ： 添加/删除项目的位置，使用负数（从-1计数）可从数组结尾处规定位置
• 第二个参数： 要删除的项目数量。如果设置为 0，则不会删除项目
• 第三个参数： 可选。 向数组添加的新项目

返回值：删除的元素

刷新页面后，在控制台输入以下代码，观察页面变化：

app.arr.splice(2,1,'我是增加的元素')

结果如下：

splice.png

6. sort()

刷新页面后，在控制台输入以下代码，观察页面变化：

app.arr.sort()

sort.png

也可以指定规则排序，比如按长度排序：
在 HTML 中增加以下代码：

<button @click="sortByLen"> 点我按长度排序</button>

在 JS 中增加以下代码：

 methods: {
        sortByLen: function(){
          this.arr.sort(function(a,b){
            return a.length - b.length
          })
        }
      }

然后点击按钮：

image.png

7. reverse()

刷新页面后，在控制台输入以下代码，观察页面变化：

app.arr.reverse()

reverse.png

非变异方法 non-mutating method

相比之下，非变异方法不会改变原始数组（所以不会触发视图更新），但总是返回一个新数组，例如：filter(), concat() 和 slice() 。
当使用非变异方法时，可以用新数组替换旧数组：

let newArr = app.arr.slice(1,3)

两种Vue 检测不到数组变动的情况及解决办法

CASE1 : 利用索引改变指定项

  <div id="app">
    <ol>
      <li v-for="item in arr">{{item}}</li>
    </ol>
    <button @click = "changeFirst">点我尝试改变数组第一项（index）</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    let app = new Vue({
      el: '#app',
      data: {
        arr: ['first','second','third','fourth']
      },
      methods: {
        changeFirst: function (){
          this.arr[0] = 'newValue' //利用索引直接设置指定项
        }
      }
    })
  </script>

点击按钮，发现页面没有任何变化，但是控制台中看到 arr 的值其实已经改变了：

利用索引改变指定项.png

解决办法

app.$set(app.arr, indexOfItem, newValue)
或者 Vue.set(app.arr, indexOfItem, newValue)

vm.$set 实例方法是全局方法 Vue.set 的一个别名。

比如上例中我们想把数组的第一项改成 'newValue'，可以这样：

app.$set(app.arr,0,'newValue')

image.png

CASE2: 修改数组的长度

接着上一个例子增加以下代码：
HTML：

    <button @click = "uopdateLen">点我修改数组长度</button>

JS :

 uopdateLen (){
          this.arr.length = 2;
        }

点击按钮，发现页面没有任何变化，但是控制台中可以看到 arr 改变了：

修改数组的长度.png

解决办法

app.arr.splice(newLength)

比如上例中，让数组长度变成2 :

app.arr.splice(2)

image.png

过滤与排序

当我们想显示一个数组的过滤或排序副本，而不实际改变或重置原始数据时，可以创建返回过滤或排序数组的计算属性。
demo