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

使用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. Python学习笔记（四十一）— 内置模块（10）urllib

    摘抄自:https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/001432688314 ...

  2. [洛谷P3293] [SCOI2016]美味

    洛谷题目链接:[SCOI2016]美味 题目描述 一家餐厅有 n 道菜,编号 1...n ,大家对第 i 道菜的评价值为 ai(1<=i<=n).有 m 位顾客,第 i 位顾客的期望值为 ...

  3. sql server常用函数、常用语句

    一.常用函数 1.字符串函数 : charindex(':','abc:123')    --寻找一个字符在一段字符串中起始的位置 len('zhangsan')   --获取一段字符串的长度 lef ...

  4. DOM操作二三事

    我突然想起了append(),但是我记不太清它是原生JS的还是jQuery封装的,貌似是JS的,咦?那它在jQuery里叫什么来着?哎呀!记不清了!确定append()是JS里的?不是jQuery里的 ...

  5. 引用类型 ( 对象定义 )——Function 类型

    本文地址:http://www.cnblogs.com/veinyin/p/7607798.html  函数实际上是对象,也具有属性和方法,函数名实际上是指向函数对象的指针 function sum( ...

  6. python并发编程之asyncio协程(三)

    协程实现了在单线程下的并发,每个协程共享线程的几乎所有的资源,除了协程自己私有的上下文栈:协程的切换属于程序级别的切换,对于操作系统来说是无感知的,因此切换速度更快.开销更小.效率更高,在有多IO操作 ...

  7. mac下 mysql / nginx 问题总汇

    "ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2)&q ...

  8. css预处理scss环境配置

    css 预处理器 CSS 预处理器用一种专门的编程语言,进行 Web css编码,然后再编译成正常的 CSS 文件,以供项目使用:说简单点就是在某个环境下写css 可以写变量.表达式.嵌套等,在通过该 ...

  9. ../include/squid_md5.h:27:2: error: #error Cannot find OpenSSL MD5 headers【squid安装中】

    ../include/squid_md5.h:27:2: error: #error Cannot find OpenSSL MD5 headers yum install -y openssl* w ...

  10. Dev Express 安装

    Dev Express 安装 点击DevExpressUniversalTrialComplete-20151209.exe开始安装 选择需要安装的产品   选择需要安装的产品目录,这里设置为D盘 开 ...