數(shù)組更新
數(shù)組變異方法 mutation method
Vue 包含一組觀察數(shù)組的變異方法(mutation method)，所以它們也將會(huì)觸發(fā)視圖更新。主要包括：
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
數(shù)組變異語法使用
來看這樣一個(gè)例子
<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>
看到的是這樣的：
下面每種方法的使用都是基于這個(gè)例子，點(diǎn)擊 這里 開始實(shí)踐~~
1. push() 在末尾添加元素
在控制臺(tái)輸入以下代碼，觀察頁面變化：
app.arr.push('我是在末尾添加的元素')
結(jié)果如下：
2. pop() 將數(shù)組的最后一個(gè)元素移除
刷新頁面后，在控制臺(tái)輸入以下代碼，觀察頁面變化：
app.arr.pop('我要將數(shù)組的最后一個(gè)元素移除啦~~')
結(jié)果如下：
3. shift() 刪除數(shù)組的第一個(gè)元素
刷新頁面后，在控制臺(tái)輸入以下代碼，觀察頁面變化：
app.arr.shift('我要?jiǎng)h除數(shù)組的第一個(gè)元素啦~~')
結(jié)果如下：
4. unshift() 在數(shù)組的第一個(gè)元素位置添加一個(gè)元素
刷新頁面后，在控制臺(tái)輸入以下代碼，觀察頁面變化：
app.arr.unshift('我是在數(shù)組的第一個(gè)元素位置添加的元素')
結(jié)果如下：
5. splice() 添加或者刪除函數(shù)
有三個(gè)參數(shù)：
- 第一個(gè)參數(shù) ： 添加/刪除項(xiàng)目的位置，使用負(fù)數(shù)（從-1計(jì)數(shù)）可從數(shù)組結(jié)尾處規(guī)定位置
- 第二個(gè)參數(shù)： 要?jiǎng)h除的項(xiàng)目數(shù)量。如果設(shè)置為 0，則不會(huì)刪除項(xiàng)目
- 第三個(gè)參數(shù)： 可選。 向數(shù)組添加的新項(xiàng)目
返回值：刪除的元素
刷新頁面后，在控制臺(tái)輸入以下代碼，觀察頁面變化：
app.arr.splice(2,1,'我是增加的元素')
結(jié)果如下：
6. sort()
刷新頁面后，在控制臺(tái)輸入以下代碼，觀察頁面變化：
app.arr.sort()
也可以指定規(guī)則排序，比如按長(zhǎng)度排序：
在 HTML 中增加以下代碼：
<button @click="sortByLen"> 點(diǎn)我按長(zhǎng)度排序</button>
在 JS 中增加以下代碼：
methods: {
sortByLen: function(){
this.arr.sort(function(a,b){
return a.length - b.length
})
}
}
然后點(diǎn)擊按鈕：
7. reverse()
刷新頁面后，在控制臺(tái)輸入以下代碼，觀察頁面變化：
app.arr.reverse()
非變異方法 non-mutating method
相比之下，非變異方法不會(huì)改變?cè)紨?shù)組（所以不會(huì)觸發(fā)視圖更新），但總是返回一個(gè)新數(shù)組，例如：filter(), concat() 和 slice() 。
當(dāng)使用非變異方法時(shí)，可以用新數(shù)組替換舊數(shù)組：
let newArr = app.arr.slice(1,3)
兩種Vue 檢測(cè)不到數(shù)組變動(dòng)的情況及解決辦法
CASE1 : 利用索引改變指定項(xiàng)
<div id="app">
<ol>
<li v-for="item in arr">{{item}}</li>
</ol>
<button @click = "changeFirst">點(diǎn)我嘗試改變數(shù)組第一項(xiàng)（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' //利用索引直接設(shè)置指定項(xiàng)
}
}
})
</script>
點(diǎn)擊按鈕，發(fā)現(xiàn)頁面沒有任何變化，但是控制臺(tái)中看到 arr 的值其實(shí)已經(jīng)改變了：
解決辦法
app.$set(app.arr, indexOfItem, newValue)
或者 Vue.set(app.arr, indexOfItem, newValue)
vm.$set 實(shí)例方法是全局方法 Vue.set 的一個(gè)別名。
比如上例中我們想把數(shù)組的第一項(xiàng)改成 'newValue'，可以這樣：
app.$set(app.arr,0,'newValue')
CASE2: 修改數(shù)組的長(zhǎng)度
接著上一個(gè)例子增加以下代碼：
HTML：
<button @click = "uopdateLen">點(diǎn)我修改數(shù)組長(zhǎng)度</button>
JS :
uopdateLen (){
this.arr.length = 2;
}
點(diǎn)擊按鈕，發(fā)現(xiàn)頁面沒有任何變化，但是控制臺(tái)中可以看到 arr 改變了：
解決辦法
app.arr.splice(newLength)
比如上例中，讓數(shù)組長(zhǎng)度變成2 :
app.arr.splice(2)
過濾與排序
當(dāng)我們想顯示一個(gè)數(shù)組的過濾或排序副本，而不實(shí)際改變或重置原始數(shù)據(jù)時(shí)，可以創(chuàng)建返回過濾或排序數(shù)組的計(jì)算屬性。
demo
