定义[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. VS 开发中觉得不错的几款插件

    1.C# Outline 2013  {}折叠 2.Indent Guides:为缩进添加竖直线 3.ResXManager:多语言资源文件编辑 4.C# Formatter:代码清理 5.Highl ...

  2. 【计算机网络】一步一步学习IP路由流程

    TCP/IP协议簇是目前互联网应用最广的协议栈,谈到TCP/IP协议栈就不能不讲一讲IP路由的问题,因为在我们使用的网络通信中几乎每时每刻都在发生着IP路由的事件…….当你在网络世界中还是一位新手的时 ...

  3. mysql中操作符LIKE与通配符%的使用

    mysql中通配符%用来通配其他字符,操作符LIKE用来查询字段中存在相同的字符 SELECT t.userId,t.cellphone,t.idNo,t.* FROM t_person t WHER ...

  4. CefSharp High DPI问题的解决

    使用CefSharp控件,在部分高分辨率的电脑中(显示缩放比例非100%,而是120%或者125%等)会出现以下一些情况: 显示的页面中出现了黑边,且按钮定位也偏了,比如点击[图层]按钮,需要点击上面 ...

  5. Java中的阻塞队列-SynchronousQueue

    SynchronousQueue是一个不存储元素的阻塞队列.每一个put操作必须等待一个take操作,否则不能继续添加元素.SynchronousQueue可以看成是一个传球手,负责把生产者线程处理的 ...

  6. 浅谈 ECMAScript 和 JavaScript

    ES5与ES3基本保持兼容,较大的语法修正和新功能加入,将由JavaScript.next完成. 什么是ECMAScript?http://baike.baidu.com/link?url=G1T8n ...

  7. Dynamics CRM 4.0升级Dynamics CRM 2013后全局Ribbon的修改

    最近在为一个客户在Dynamics CRM 4.0到Dynamics CRM 2013的升级,升级之后发现原来在Dynamics CRM 4.0中定义的全局Ribbon按钮像牛皮癣一样,在每个实体页面 ...

  8. Sharepoint 2013企业内容管理学习笔记(二) 全自动化内容管理

    全自动化内容管理 所谓全自动化内容管理啊,其实对于用户来说,就更简单便捷有爱了,用户只需要把文件上传到部门网站的放置库中,文件就会快速自动躺到企业记录中心的某个归档记录库了,怎么样,很方便,有没有,很 ...

  9. u-boot分析(五)----I/D cache失效|关闭MMU和cache|关闭看门狗

    u-boot分析(五) 上篇博文我们按照210的启动流程,对u-boot启动中的设置异常向量表,设置SVC模式进行了分析,今天我们继续按照u-boot的启动流程对以下内容进行分析. 今天我们会用到的文 ...

  10. JavaScript 事件兼容性写法

    1.以下是JavaScript事件兼容性写法,使用者可以随意使用,兼容所有浏览器.包括IE6(亲测) <!DOCTYPE html> <html> <head> & ...