定义[nextTick、事件循环]

  nextTick的由来:
    由于VUE的数据驱动视图更新,是异步的,即修改数据的当下,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图更新。
  nextTick的触发时机:
    在同一事件循环中的数据变化后,DOM完成更新,立即执行nextTick(callback)内的回调。
  应用场景:
    需要在视图更新之后,基于新的视图进行操作。
  以上出现了事件循环的概念,其涉及到JS的运行机制,包括主线程的执行栈、异步队列、异步API、事件循环的协作,此处不展开之后再总结。大致理解:主线程完成同步环境执行,查询任务队列,提取队首的任务,放入主线程中执行;执行完毕,再重复该操作,该过程称为事件循环。而主线程的每次读取任务队列操作,是一个事件循环的开始。异步callback不可能处在同一事件循环中。
  简单总结事件循环:
    同步代码执行 -> 查找异步队列,推入执行栈,执行callback1[事件循环1] ->查找异步队列,推入执行栈,执行callback2[事件循环2]...
  即每个异步callback,最终都会形成自己独立的一个事件循环。
  结合nextTick的由来,可以推出每个事件循环中,nextTick触发的时机:
    同一事件循环中的代码执行完毕 -> DOM 更新 -> nextTick callback触发
   tips:本文的任务队列、消息队列、异步队列指同一个东西,均指macrotask queue。
       事件循环详解:http://www.cnblogs.com/hity-tt/p/6733062.html
watch:{
type: function (val, oldVal) {
if(val==2){
Vue.nextTick(function () { //或者用 this.$nextTick
$('#select').selectpicker();
})
      }
}
}

关于vue中的nextTick深入理解的更多相关文章

  1. 【转】简单理解Vue中的nextTick

    前言: Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick ...

  2. 简单理解Vue中的nextTick

    Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick. 一. ...

  3. Vue中之nextTick函数源码分析

    Vue中之nextTick函数源码分析 1. 什么是Vue.nextTick()?官方文档解释如下:在下次DOM更新循环结束之后执行的延迟回调.在修改数据之后立即使用这个方法,获取更新后的DOM. 2 ...

  4. 详解Vue中的nextTick

    Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick. 一. ...

  5. Vue中diff算法的理解

    Vue中diff算法的理解 diff算法用来计算出Virtual DOM中改变的部分,然后针对该部分进行DOM操作,而不用重新渲染整个页面,渲染整个DOM结构的过程中开销是很大的,需要浏览器对DOM结 ...

  6. vue中的插槽slot理解

    本篇文章参考赛冷思的个人博客 1.函数默认传参 在我们写js函数我们的可能会给他们一个默认的参数,写法是 function show(age,name){ var age = age || 20; v ...

  7. vue中webpack的配置理解

    当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面  (环境变量及其基本变量的配置) var path = require('path') ...

  8. 前端学习笔记系列一:3 Vue中的nextTick

    一.示例 先来一个示例了解下关于Vue中的DOM更新以及nextTick的作用. 模板 <div class="app"> <div ref="msgD ...

  9. Vue中keep-alive组件的理解

    对keep-alive组件的理解 当在组件之间切换的时候,有时会想保持这些组件的状态,以避免反复重渲染导致的性能等问题,使用<keep-alive>包裹动态组件时,会缓存不活动的组件实例, ...

随机推荐

  1. SourceTree 关于 .gitignore使用/下载

    # =============== # # Unity generated # # =============== # Temp/ Obj/ UnityGenerated/ Library/ Asse ...

  2. [转]jQuery AJAX pagination plugin with ASP.NET Server Side

    本文转自:http://do-web.com/jpaging/usage How does it work? 1. In order to implement the plugin, you need ...

  3. mysql主从数据库错误处理

    方法一:忽略错误后,继续同步 该方法适用于主从库数据相差不大,或者要求数据可以不完全统一的情况,数据要求不严格的情况 解决: stop slave; #表示跳过一步错误,后面的数字可变set glob ...

  4. Linux下的NFS快速配置教程与安全策略

    [51CTO专稿]在Linux下实现文件共享有多种方式,NFS就是其中之一.网络文件系统(NFS)协议是由Sun MicroSystem在20世纪80年代为了提供对共享文件的远程访问而设计和实现的.该 ...

  5. Nginx主主负载均衡架构

    在和一些朋友交流Nginx+Keepalived技术时,我虽然已成功多次实Nginx+Keepaived项目方案,但这些都是用的单主Nginx在工作,从Nginx长期只是处于备份状态,所以我们想将二台 ...

  6. php表单提交时的身份证号码验证

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  7. java web api接口调用

    Web Services 被W3C进行了标准化定义. Web Services 发布到网上,可以公布到某个全局注册表,自动提供服务URL,服务描述.接口调用要求.参数说明以及返回值说明.比如中国气象局 ...

  8. Vue.js 插件开发

    Vue.js 的插件应当有一个公开方法 install .这个方法的第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象: MyPlugin.install = function (Vue ...

  9. <Android开源库 ~ 1> GitHub Android Libraries Top 100 简介

    转载自GitHub Android Libraries Top 100 简介 本项目主要对目前 GitHub 上排名前 100 的 Android 开源库进行简单的介绍, 至于排名完全是根据 GitH ...

  10. 【Microsoft Azure学习之旅】测试消息队列(Service Bus Queue)是否会丢消息

    组里最近遇到一个问题,微软的Azure Service Bus Queue是否可靠?是否会出现丢失消息的情况? 具体缘由如下, 由于开发的产品是SaaS产品,为防止消息丢失,跨Module消息传递使用 ...