數組更新

數組變異方法 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