最近在项目中遇到了一个问题，不知道为什么，所以最后通过动手做demo实践、查文档的方式解决了，这里做一个总结。
例1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script>
<style>
li:hover {
cursor: pointer;
}
</style>
</head>
<body>
<div class="wrap">
<ul>
<li v-for="item,index in items" v-on:click="handle(index)">
<span>{{item.name}}</span>
<span>{{numbers[index]}}</span>
</li>
</ul>
</div>
<script>
var vm = new Vue({
el: ".wrap",
data: {
numbers: [],
items: [
{name: 'jjj'},
{name: 'kkk'},
{name: 'lll'},
]
},
methods: {
handle: function (index) {
// WHY: 更新数据，view层未渲染，但通过console这个数组可以发现数据确实更新了
if (typeof(this.numbers[index]) === "undefined" ) {
this.numbers[index] = 1;
} else {
this.numbers[index]++;
}
}
}
});
</script>
</body>
</html>
这里的实现目的很明确 --- 我希望在点击li时先检测是否存在，当然是不存在的，所以就将值设置为1， 如果再次点击，就让数字累加。
但是出现的问题是： 点击之后数字并没有在view层更新，而通过console打印发现数据确实更新了，只是view层没有及时的检测到， 而我一直以来的想法就是： 既然vue实现的时数据双向绑定，那么在model层发生了变化之后为什么就没有在view层更新呢?
首先，我就考虑了这是不是数组的问题，于是，我测试了下面的例子：
例2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script>
<style>
li:hover {
cursor: pointer;
}
</style>
</head>
<body>
<div class="wrap">
<ul>
<li v-for="item,index in items" v-on:click="handle(index)">
<span>{{item.name}}</span>
<span>{{numbers[index]}}</span>
</li>
</ul>
</div>
<script>
var vm = new Vue({
el: ".wrap",
data: {
numbers: [],
items: [
{name: 'jjj'},
{name: 'kkk'},
{name: 'lll'},
]
},
methods: {
handle: function (index) {
// 不是数组，这里更新数据就可以直接在view层渲染
this.items[index].name += " success";
}
}
});
</script>
</body>
</html>
这时，我再测试时就发现，这里的model层发生了变化时，view层就能及时、有效的得到更新。
而数组为什么不可以呢？