数据响应式：数据发生改变，页面也随即发生改变。
代码原型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="letter in alpahbet">{{letter}}</li>
<button @click="handleClick">点击</button>
</ul>
</div>
<script>
const app = new Vue({
el: '#app',
data() {
return {
alpahbet: ['A', 'B', 'C', 'D', 'E']
}
},
methods: {
handleClick () {
}
},
})
</script>
</body>
</html>
下面来一一验证
1.push()方法，在数组最后面（末尾）添加元素。
点击按钮，元素已经增加，所以push()方法是响应式的。
2.unshift()方法，在数组最前面添加元素，因为是和push()方法对应的关系，同理也是响应式的。
突然灵机一动，既然可以添加一个元素，那能添加多个元素吗？
添加多个元素是支持的。
3.通过索引值修改数组中的元素。
点击按钮没有任何反应，说明索引值修改没有响应，此方法不可用。
但控制台里面查看数据是更换了的，但页面并没有响应。为什么会这样？这和vue的底层有关。为了实现这种需求，我们的解决方法一是采取splice()的替换方法。
二是vue内部提供的一个Vue.set()函数方法，里面可以传入三个参数。
4.pop()方法，删除数组中排列最后的一个元素。
能删除末尾的元素，所以pop()方法是响应式的。
5.shift()方法，删除数组中的首个元素。
因为是对应pop()方法的，同理也是响应式。
6.splic()方法有三个值，功能比较强大，可以删除元素，插入元素，替换元素。
(1)删除数组中的所有元素
(2)删除数组中的所有元素，第一个元素保留。值是2的话保留数组中第一个和第二个元素。
(3)保留第一个元素，从末尾依此删除2个元素。
(4)插入元素操作，第一个值，从哪个元素位置后面开始，第二个值为0，即不删除元素，第三个值，你想要添加的元素。
(5)替换元素操作
6.sort()方法，正向排列和reverse()方法，反向排列。两者也是响应式的。
总结:除了【索引值修改数据】的数组方法vue是不支持的外，其他的方法都支持。
网友评论