今天遇到个令人发指的问题
使用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);