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

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

vue数据立刻绑定到dom元素的更多相关文章

  1. vue数据双向绑定的原理、虚拟dom的原理

    vue数据双向绑定的原理https://www.cnblogs.com/libin-1/p/6893712.html 虚拟dom的原理https://blog.csdn.net/u010692018/ ...

  2. Vue数据双向绑定原理及简单实现

    嘿,Goodgirl and GoodBoy,点进来了就看完点个赞再go. Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. ...

  3. 【学习笔记】剖析MVVM框架，简单实现Vue数据双向绑定

    前言: 学习前端也有半年多了,个人的学习欲望还比较强烈,很喜欢那种新知识在自己的演练下一点点实现的过程.最近一直在学vue框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...

  4. 西安电话面试：谈谈Vue数据双向绑定原理，看看你的回答能打几分

    最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...

  5. vue数据双向绑定原理

    vue的数据双向绑定的小例子: .html <!DOCTYPE html> <html> <head> <meta charset=utf-> < ...

  6. vue数据双向绑定

    Vue的双向绑定是通过数据劫持结合发布-订阅者模式实现的,即通过Object.defineProperty监听各个属性的setter,然后通知订阅者属性发生变化,触发相应的回调. 整个过程分为以下几步 ...

  7. 深入理解Proxy 及 使用Proxy实现vue数据双向绑定

    阅读目录 1.什么是Proxy?它的作用是? 2.get(target, propKey, receiver) 3.set(target, propKey, value, receiver) 4.ha ...

  8. Vue系列之 => ref获取DOM元素和组件

    可以获取DOM元素,和组件中的数据,方法 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  9. Vue数据双向绑定探究

    前面的啰嗦话,写一点吧,或许就有点用呢 使用过vue的小伙伴都会感觉,哇,这个框架对开发者这么友好,简直都要笑出声了. 确实,使用过vue的框架做开发的人都会感觉到,以前写一大堆操作dom,bom的东 ...

随机推荐

  1. 哪些window你不知道的却实用的小技巧----window小技巧

    前言 一直想要整理一篇有关于window比较全的使用小技巧,却又不知道从哪里开始写起.而让我准备动手写这边随笔的动力,还是在加入虫部落<一个绿色环保,充满朝气的好地方>,从大家的分享中,我 ...

  2. VS调试程序快捷键和系统快捷键

    调试程序快捷键 编译程序:F7 运行程序:ctrl + F5 打断点:F9 运行到断点位置:F5 单步执行:F10 单步进入函数:F11 结束调试:shift+F5 注释代码:ctrl+k,ctrl+ ...

  3. R2—《R in Nutshell》 读书笔记(连载)

    R in Nutshell 前言 例子(nutshell包) 本书中的例子包括在nutshell的R包中,使用数据,需加载nutshell包 install.packages("nutshe ...

  4. Calendar 日期类介绍

    Calendar c = Calendar.getInstance();//创建实例 默认是当前时刻 c.get(Calendar.YEAR); c.get(Calendar.MONTH); c.ge ...

  5. 关于Re模块的一些基础知识（另附一段批量抓代理ip的代码）

    1.常用匹配规则 . 表示任意字符[0-9] 用来匹配一个指定的字符类别[^5]表示除了5之外的其他字符,^不在字符串的开头,则表示它本身.* 对于前一个字符重复0到无穷次+ 对于前一个字符重复1到无 ...

  6. 向量与矩阵的范数及其在matlab中的用法(norm)

    一.常数向量范数 \(L_0\) 范数 \(\Vert x \Vert _0\overset{def}=\)向量中非零元素的个数 其在matlab中的用法: sum( x(:) ~= 0 ) \(L_ ...

  7. 有关mysql的innodb_flush_log_at_trx_commit参数【转】

    一.参数解释 0:log buffer将每秒一次地写入log file中,并且log file的flush(刷到磁盘)操作同时进行.该模式下在事务提交的时候,不会主动触发写入磁盘的操作. 1:每次事务 ...

  8. 选中一行并且选中该行的radio

    $("tr").bind("click",function(){ $("input:radio").attr("checked&q ...

  9. 002利用zabbix监控某个目录大小

    近期,因为JMS的消息堆积导致ApacheMQ频率故障(消息没有被消费掉,导致其数据库达到1.2G,JMS此时直接挂掉),很是郁闷!刚好自 己在研究zabbix.既然zabbix如此强大,那么它可以监 ...

  10. Django 1.10文档中文版Part1

    目录 第一章.Django1.10文档组成结构1.1 获取帮助1.2 文档的组织形式1.3 第一步1.4 模型层1.5 视图层1.6 模板层1.7 表单1.8 开发流程1.9 admin站点1.10 ...