原理
1.异步执行
  Vue实现响应式并不是数据发生变化之后 DOM 就立即变化,而是按照一定策略进行 DOM 的更新。其实在Vue的文档中,不难发现Vue是异步执行 DOM 更新。

  异步执行的机制简单来说就是:

  1、首先所有的同步任何肯定是在主线程上执行的,即执行栈;
  2、除了主线程,还一个任务队列task queue,只要异步任务有了运行结果,那任务队列中就会放置与之对应的一个事件。
  3、等执行栈中,所有的同步任务执行完毕,系统就会读取任务队列中的事件,那么,事件对应的异步任务结束等待,进行执行栈,开始执行。
  4、主线程不断重复上面的第三步。
  Vue 在修改数据之后,视图不会立即更新,而是等待同一事件循环中的所有数据变化完成之后,再统一进行视图更新。

2.事件循环说明
  Vue 在修改数据后,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图更新。

  上面说异步执行的机制中,主线程的执行过程就是一个tick,而所有的异步结果都是通过任务队列来调度。Event Loop (事件循环)分为宏任务和微任务,无论是执行宏任务还是微任务,完成后都会进入到一下tick,并在两个tick之间进行UI渲染。

  由于Vue DOM更新是异步执行的,即修改数据时,视图不会立即更新,而是会监听数据变化,并缓存在同一事件循环中,等同一数据循环中的所有数据变化完成之后,再统一进行视图更新。为了确保得到更新后的DOM,所以设置了 Vue.nextTick()方法。

  此时通过 Vue.nextTick 获取到改变后的 DOM 。同样,通过 setTimeout(fn, 0) 也可以获取到。

应用场景
  1、主要场景:
    需要在视图更新之后,基于新的视图进行操作。

  注意:在 created 和 mounted 阶段,如果需要操作渲染后的视图,也要使用 nextTick 方法。

原文地址:http://www.cnblogs.com/suntongxue/p/16854636.html

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长! 2. 分享目的仅供大家学习和交流,请务用于商业用途! 3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入! 4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解! 5. 如有链接无法下载、失效或广告,请联系管理员处理! 6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需! 7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员! 8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载 声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性