今天遇到个令人发指的问题
使用vue修改一个数据之后，它不会立刻修改，而是在当前函数执行完毕之后才会进行渲染。
有个很简单的例子
<body>
<div id="app">
<div>{{a}}</div>
<div>{{b}}</div>
<div @click=ch()>点击改变值</div>
</div>
<script>
var vm=new Vue({
el: '#app',
data: {
a: 1,
b: 2
},
methods:{
ch:function(){
this.a = 10;
//setTimeout(function(){
// vm.b = 20;
//},1500)
this.sleep(1500);
},
sleep:function(n){
var start = new Date().getTime();
while (true) {
if (new Date().getTime() - start > n) {
break;
}
}
vm.b=20;
}
}
})
</script>
</body>
并没有预期的效果。
因为自己写的sleep默认是一个同步函数罢了。
应该使用setTimeout
setTimeout属于异步执行函数，当程序执行完console.log(1,time1)后;遇到setTimeout会将该函数放入等待队列，等待当前主程序执行完毕后开始执行setTimeout,由于后面的几个都是setTimeout,因此都会放到等待队列
vue修改list数据。
var data = this.lists[this.index];
data.options[i].checked='right';
Vue.set(this.lists,this.index,data);