首先看下面这段代码：
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset="utf-8" />
<title>Hello world</title>
<script src="vue.js"></script>
</head>
<body>
<div id="root">
<div v-for="(item,index) of list" :key="item.id">
{{item.text}}---{{index}}
</div>
</div>
<script>
var vm = new Vue({
el: "#root",
data: {
list: [{
id: "ffasf-fsdnsaf7er5",
text: "hello"
}, {
id: "778esf-f7er5",
text: "world"
}]
}
})
</script>
</body>
</html>当我们通过下表改变一个对象值的时候，页面渲染跟着变了，可是当我们给数组再增加一个元素时，页面结果并没有改变。
我们不能通过下表的方式来直接操作数据，可以有以下几种方式解决。
1.应用数组变异方法，push,pop,shift,unshift,splice,sort,reverse来操作数组。
2.重新修改对象的引用
3.用Vue中的方法Vue.set
4.用vue实例中的方法$set