最近在尝试用Vuejs重构公司的现有业务代码，组件化的设计思路和MVVM的思想让我深深沉迷于其中。But还是踩到了不少坑，就比如今天遇到的数组绑定后的更新检测。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="one in arr">
{{one}}
</li>
</ul>
<button @click="foo">foo</button>
<button @click="bar">bar</button>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:‘#app‘,
data:function() {
return {
arr:[1,2,3,4,5]
}
},
methods:{
foo:function(){
this.arr[1] = 10;
},
bar:function(){
this.arr.splice(1,1,10);
}
}
})
</script>
</html>在点击第一个按钮时，数组第二个元素会变成10，但是视图中并不会显示出来变化，还是2.点击第二个按钮后视图上才显示出来，说明vuejs对于数组的检测并没有深入到每一个元素中去，数组长度变化后才会在视图中更新。