今天遇到個令人發指的問題
使用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);