數組更新
數組變異方法 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>
看到的是這樣的:
下面每種方法的使用都是基于這個例子,點擊 這里 開始實踐~~
1. push() 在末尾添加元素
在控制臺輸入以下代碼,觀察頁面變化:
app.arr.push('我是在末尾添加的元素')
結果如下:
2. pop() 將數組的最后一個元素移除
刷新頁面后,在控制臺輸入以下代碼,觀察頁面變化:
app.arr.pop('我要將數組的最后一個元素移除啦~~')
結果如下:
3. shift() 刪除數組的第一個元素
刷新頁面后,在控制臺輸入以下代碼,觀察頁面變化:
app.arr.shift('我要刪除數組的第一個元素啦~~')
結果如下:
4. unshift() 在數組的第一個元素位置添加一個元素
刷新頁面后,在控制臺輸入以下代碼,觀察頁面變化:
app.arr.unshift('我是在數組的第一個元素位置添加的元素')
結果如下:
5. splice() 添加或者刪除函數
有三個參數:
- 第一個參數 : 添加/刪除項目的位置,使用負數(從-1計數)可從數組結尾處規定位置
- 第二個參數: 要刪除的項目數量。如果設置為 0,則不會刪除項目
- 第三個參數: 可選。 向數組添加的新項目
返回值:刪除的元素
刷新頁面后,在控制臺輸入以下代碼,觀察頁面變化:
app.arr.splice(2,1,'我是增加的元素')
結果如下:
6. sort()
刷新頁面后,在控制臺輸入以下代碼,觀察頁面變化:
app.arr.sort()
也可以指定規則排序,比如按長度排序:
在 HTML 中增加以下代碼:
<button @click="sortByLen"> 點我按長度排序</button>
在 JS 中增加以下代碼:
methods: {
sortByLen: function(){
this.arr.sort(function(a,b){
return a.length - b.length
})
}
}
然后點擊按鈕:
7. reverse()
刷新頁面后,在控制臺輸入以下代碼,觀察頁面變化:
app.arr.reverse()
非變異方法 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 的值其實已經改變了:
解決辦法
app.$set(app.arr, indexOfItem, newValue)
或者 Vue.set(app.arr, indexOfItem, newValue)
vm.$set
實例方法是全局方法 Vue.set
的一個別名。
比如上例中我們想把數組的第一項改成 'newValue',可以這樣:
app.$set(app.arr,0,'newValue')
CASE2: 修改數組的長度
接著上一個例子增加以下代碼:
HTML:
<button @click = "uopdateLen">點我修改數組長度</button>
JS :
uopdateLen (){
this.arr.length = 2;
}
點擊按鈕,發現頁面沒有任何變化,但是控制臺中可以看到 arr 改變了:
解決辦法
app.arr.splice(newLength)
比如上例中,讓數組長度變成2 :
app.arr.splice(2)
過濾與排序
當我們想顯示一個數組的過濾或排序副本,而不實際改變或重置原始數據時,可以創建返回過濾或排序數組的計算屬性。
demo