定义[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. C# 序列化(Binary、Xml、Soap)

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.I ...

  2. hadoop和spark比较

    http://blog.51cto.com/13943588/2165946 3.hadoop和spark的都是并行计算,那么他们有什么相同和区别?  两者都是用mr模型来进行并行计算,hadoop的 ...

  3. Bootloader 跳转到 RT-Thread 或 FreeRTOS(基于 STM32)

    Bootloader 跳转到 RT-Thread 或 FreeRTOS(基于 STM32) 作者:猾蚁 QQ:7376220一.Bootloader 程序1. 准备好升级程序项目,可以使用 STM32 ...

  4. HDU 4342——History repeat itself——————【数学规律】

    History repeat itself Time Limit: 1000ms Memory Limit: 32768KB This problem will be judged on HDU. O ...

  5. SpringBoot如何集成Jedis

    添加jedis依赖 在项目pom.xml文件中添加依赖 <!-- 添加jedis依赖 --> <dependency> <groupId>redis.clients ...

  6. Ubuntu18.10安装及优化

    最近机器学习很火,想来学习下,先来搭建一个学习平台. https://www.ubuntu.com 下载最新版本的系统,我这里是 18.10 桌面版. 然后进行分区,我这里在vm只创建了 80G的硬盘 ...

  7. C#继承 多态

    1.继承 允许我们根据一个类来定义另一个类.已有的类被称为的基类(父类),新的类被称为派生类(子类). 单一继承:只能有一个基类,一个基类可以派生出多个派生类,一个类别只可以继承自一个父类. 多重继承 ...

  8. 树莓派ssh报错:WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED解决

    初次使用树莓派,在使用树莓派本机网卡时被DHCP服务器分配到192.168.0.103,连接正常.于是乎很开心的将无线网卡插入树莓派,急于摆脱网线的束缚. ifconfig一下获取无线网卡的MAC地址 ...

  9. [LeetCode]17. Letter Combinations of a Phone Number电话号码的字母组合

    Given a string containing digits from 2-9 inclusive, return all possible letter combinations that th ...

  10. Hibernate课程 初探一对多映射3-1 单向多对一简介

    多对一的关系和关系数据库中的外键参照关系最匹配,即在己方的表中的一个外键参照另一个表中的主键! 通过在多方持有一方的引用来实现,需要在多的一方使用<many-to-one>来配置