定义[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
  1. watch:{
  2. type: function (val, oldVal) {
  3. if(val==2){
  4. Vue.nextTick(function () { //或者用 this.$nextTick
  5. $('#select').selectpicker();
  6. })
  7.       }
  8. }
  9. }

关于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. 在ubuntu中安装mysql及简单操作方式

    老规矩,ctrl+alt+t呼出终端, 输入 sudo apt-get update 更新源,否则在运行下面代码时会报出有几个包无法下载,你还是得回来执行这句代码, 输入 sudo apt-get i ...

  2. Silverlight 用户代码未处理 TypeLoadException

    在Silverlight中动态创建Enum时,多次调用改方法出现上图所示错误,后来发现定义名称都是一样的, 在程序中声明全局变量去区别就可以了. int num = 1; private Type C ...

  3. Rails UVA - 514(栈)

    题目链接:https://vjudge.net/problem/UVA-514 题目大意:右边的火车经过中间的收费站到左边,右边火车进站的秩序是1~n   判断是否能以题中是所给的次序通过 思路:很明 ...

  4. git如何使用

    Git是分布式的,但多数时候仍然要使用中央仓库作为所有开发者的交互中心,和svn一样,开发人员仍要在本地写代码并提交到中央服务器.Git相较于svn最大的优势就在于其强大的分支系统,而git的工作流程 ...

  5. 项目中使用的spring 注解说明

    以前在项目中spring 的依赖注入使用 xml 配置,现在使用 注解(Annotation) 来实现配置. 1声明bean 1.1实例 有类: public class MyBean{ //do s ...

  6. C#使用MediaInfo查看媒体信息

    1.将MediaInfo.dll放入可执行目录. 2.将官网Demo里的MediaInfoDLL.cs放入项目中.(http://mediainfo.sourceforge.net/en/Downlo ...

  7. 浅析sorted函数中的key

    在python编程中,常对数据进行各种处理,排序尤为重要.但是在使用sorted内置函数时,我们发现它有三个参数. 第一个参数为可迭代数据,可以为一个字符串,数组,列表等等. 第三个为是否倒置输出. ...

  8. IsBackground对线程的重要作用

    要点: 1.当在主线程中创建了一个线程,那么该线程的IsBackground默认是设置为FALSE的. 2.当主线程退出的时候,IsBackground=FALSE的线程还会继续执行下去,直到线程执行 ...

  9. git合并分支上的commit为一条commit到master

    标签: git 缘由? 有一次被人问到怎么把一个分支的所有commit按一个commit合并到主分支上,当时一脸蒙B,平时开发都是直接merge,很少考虑到这种问题,于是特意搜索了相关资料. 场景 其 ...

  10. (五)JavaScript之[类型转换]

    /** * 类型转换 * * JavaScript 数据类型 * 1.不同的数据类型 * string * number * object * boolean * function * * 2.对象类 ...