最近在尝试用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对于数组的检测并没有深入到每一个元素中去,数组长度变化后才会在视图中更新。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。