vue数据立刻绑定到dom元素

今天遇到个令人发指的问题

使用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);

 

posted @ 2018-09-10 16:11  陈灬大灬海  阅读(3355)  评论(2)  编辑  收藏  举报