目标：
1、数组中常用的方法；
2、知道数组的"两个变动"检测不到；
3、"两个变动" 的解决方法。
一、push / pop / unshift / shift 方法
现在 Vue 实例中有这么一个数组：
<div id="app">
<ul>
<li v-for="person in personArr"> // 2、将数组中的人渲染到页面
{{ person }}
</li>
</ul>
</div>
var app = new Vue({
el: '#app',
data: {
personArr: ['张三', '李四', '王二麻子'] // 1、一个装满了人的数组
}
})
现在，在控制台中，分别使用 push / pop / unshift / shift 方法对数组进行操作（请注意页面渲染变化）：
二、sort / reverse 方法
还是上面那个数组，现在加两个按钮，分别对应 sort 方法和 reverse 方法：
<div id="app">
<ul>
<li v-for="person in personArr">
{{ person }}
</li>
</ul>
<button @click="sortArr">sort</button> // 1、sort 按钮，并定义了 click 事件
<button @click="reverseArr">reverse</button> // reverse 按钮，也定义了 click 事件
</div>
var app = new Vue({
el: '#app',
data: {
personArr: ['张三', '李四', '王二麻子']
},
methods: { // 2、事件要在 methods 中定义
sortArr() {
this.personArr.sort(function (a, b) {
return b.length - a.length // 3、为了效果，我写的 b.length - a.length，你也可以调换顺序试试
})
},
reverseArr() {
this.personArr.reverse()
}
}
})
页面渲染 及 点击效果：
三、splice 方法
splice 方法可以传入三个参数：
- 第一个参数：表示开始操作的位置；
- 第二个参数：表示要操作的个数（长度）；
- 第三个参数：（可选参数），可作为元素，传入数组。
splice ：可以对数组添加元素，也可以删除数组元素。
如果只传入前两个参数，就是 删除操作。
如果传入了第三个参数，就是 添加操作。
还是上面那个数组：
<div id="app">
<ul>
<li v-for="person in personArr">
{{ person }}
</li>
</ul>
</div>
var app = new Vue({
el: '#app',
data: {
personArr: ['张三', '李四', '王二麻子']
},
})
页面渲染：
现在在控制台中，使用 splice 方法对其进行操作：
（我只演示传一个参数，传两个参数，传三个参数的效果，你可以自己尝试传入不同参数）
上图中，splice 方法中只传入了一个参数。
这表示，从索引为 1 的位置开始，删除后面所有的元素，并返回被删除的元素。
所以图中只剩 "张三" 一个人。
上图中，splice 方法传入了两个参数。
这表示，从索引为 0 的元素开始，删除后面的 2 个元素，并返回被删除的元素。
所以图中只剩 "王二麻子" 一个人。
上图中，splice 方法传入了三个参数。
这表示，从索引为 1 的元素开始，删除 1 个元素，并在这个元素的位置，添加 'dongdong' 这个元素，最后会返回被删除的元素。
所以，图中还是三个人，只不过 "李四" 被替换成了 "dongdong"。
四、filter 方法
filter：过滤数组中的元素。
现在 Vue 实例中有这么一个数组：
<div id="app">
{{ matchOO }} // 4、在页面中渲染
</div>
var app = new Vue({
el: '#app',
data: {
studyArr: ['book', 'pen', 'pencil'] // 1、一个装满了文具的数组
},
computed: {
matchOO() { // 2、计算属性中有一个 matchOO 方法，返回数组中含有 'oo' 字符串的元素
return this.studyArr.filter(function (value) { // 3、value 代表数组中的每一项
return value.match(/oo/)
})
}
}
})
页面渲染：
因为数组中的元素，只有 "book" 才含有 "oo" ，所以返回 "book"。
五、两个“数组变动”Vue 检测不到
数组的两个变动 Vue 检测不到：
还是上面那个数组，现在加两个按钮，分别对应 改变指定项 和 改变长度：
<div id="app">
<ul>
<li v-for="person in personArr">
{{ person }}
</li>
</ul>
<button @click="changeItem">changeItem</button> // 1、改变指定项 按钮
<button @click="changeLength">changeLength</button> // 改变长度 按钮
</div>
var app = new Vue({
el: '#app',
data: {
personArr: ['张三', '李四', '王二麻子']
},
methods: {
changeItem() {
this.personArr[1] = 'dongdong' // 2、将数组索引为 1 的元素改成 'dongdong'
},
changeLength() {
this.personArr.length = 100 // 3、将数组长度改成 100
}
}
})
页面渲染：
当点击两个按钮时，发现页面没有任何变化。
可是某些时候，如果要改变 数组的指定项，或者 改变数组长度的话，我们可以使用如下解决方法：
Vue.set(数组, 索引, 新元素) // 注意 Vue 的首字母大写
如：
上图中，使用 Vue.set 方法，传入三个参数。
这表示，我要改变 personArr 这个数组，我要改变这个数组索引为 1 的元素，我要把这个元素改成 "dongdong"。
要改变数组长度，可以使用变通方法，即上面提到的数组的一些方法。
如：
上图中，数组长度原本是 3，使用了 splice 方法，删除了索引为 1 及以后的元素，并返回被删除的元素。此时，数组长度变成了 1。
上图中，使用了 push 方法， 向数组中添加了一个新元素。
此时数组长度由原来的 3 变成了 4。
你也可以使用其他方法改变数组长度，如：pop、unshift、shift 等。
完~~
转播
