博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
关于vue中的nextTick深入理解
阅读量:5369 次
发布时间:2019-06-15

本文共 940 字,大约阅读时间需要 3 分钟。

定义[nextTick、事件循环]

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

 

转载于:https://www.cnblogs.com/kennyliu/p/8718559.html

你可能感兴趣的文章
实现one hot encode独热编码的两种方法
查看>>
ubuntu中文英文环境切换
查看>>
[sql]mysql启停脚本
查看>>
[elk]Mutate filter plugin增删改查字段
查看>>
Java内功心法,行为型设计模式
查看>>
向github项目push代码后,Jenkins实现其自动构建
查看>>
jquery中的ajax方法参数的用法和他的含义
查看>>
BZOJ 1226: [SDOI2009]学校食堂Dining
查看>>
数组去重的几种方法
查看>>
包装类的自动装箱与拆箱
查看>>
ShareSDk的使用
查看>>
android使用web加载网页的js问题
查看>>
libvirt log系统分析
查看>>
poj 1068 Parencodings
查看>>
docker 数据卷管理
查看>>
adb
查看>>
如何让一个div的大小,从某一个特定值开始,随内容的增加而自动变化?
查看>>
P1977 出租车拼车(DP)
查看>>
iOS开发--完整项目
查看>>
我的博客园皮肤模板
查看>>