Vue 數組更新、過濾與排序

數組更新

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

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容