nexttick

浏览器环境和nodejs环境的事件循环机制是不一样的，首先看一个demo: 在浏览器环境中运行结果如下： 在nodejs环境中运行结果如下： 上面例子说明浏览器和nodejs的时间循环是有区别的。 nodejs的事件处理 nodejs采用V8作为js的解析引擎，而I/O处理方面使用自己设计的libuv，libuv是一个基于事件驱动的跨平台抽象层，封装了不同操作系统的一些底层特性，对外提供统一API，事件循环机制也是在它里面实现的， 核心代码参考 ： 根据Nodejs官方介绍，每次事件循环都包含了6个阶段，对应libuv源码中的实现，如下图： timers阶段：这个阶段执行timer（setTimeout、setInterval）的回调 I/O callbacks阶段：执行一些系统调用错误，比如网络通信的错误回调 idle，prepare阶段：仅供node内部使用 poll阶段：获取新的I/O事件，适当的条件下node将阻塞在这里 check阶段：执行setImmediate()的回调 close callbacks阶段：执行socket的close事件回调 重点看timers、poll、check这3个阶段，因为日常开发中的绝大部分异步都是在这3个阶段处理。 timers阶段 timers是事件循环的第一个阶段，node会去检查有无过期的timer

https://segmentfault.com/q/1010000007359564 根据vue的响应式原理，多次的数据操作之后进行一次的dom更新，所以可以使用$nextTick在dom更新后做些什么。 但是今天我使用了vuex来管理应用状态，我在组件中发了一个dispatch来触发某个action,action又触发mutations来改变状态，但是在vuex中没有nextTick这个东西，我无法在dom更新后做些什么 在组件写的nextTick也不是在vuex更新状态后触发的，而是在组件自身的dom更新后触发，现在也想不出个办法，求各位大神帮帮忙 this.$store.dispatch("action",{ name: "test", type: "add" }); this.$nextTick(() => { //vuex改变状态后的dom还没有更新就执行到这里了 $(".slimscroll-render").eq(index).slimScroll(); $.fn.fullpage.setAllowScrolling(false); }); 2016年11月02日提问 评论 邀请回答 编辑 默认排序 时间排序 1个回答 答案对人有帮助，有参考价值 1 答案没帮助，是错误的答案，答非所问 我也遇到这个问题了，由于后台请求是异步的，所以$.nextTick

前面的话 　　process对象是一个全局对象，在任何地方都能访问到它，通过这个对象提供的属性和方法，使我们可以对当前运行的程序的进程进行访问和控制。本文将详细介绍process对象 概述 　　process是一个全局对象，即global对象的属性，可以在任何地方直接访问到它而无需引入额外模块 console.log(process === global.process);//true console.log(process); 属性 【process.argv】 　　包含命令行参数的数组。第一个元素会是'node'，第二个元素将是.js文件的名称，接下来的参数依次是命令行参数 console.log(process.argv);//[ 'D:\\nodejs\\node.exe', 'D:\\project\\main.js' ] 【process.execArgv】 　　启动进程所需的 node 命令行参数。这些参数不会在 process.argv 里出现，并且不包含 node 执行文件的名字，或者任何在名字之后的参数。这些用来生成子进程，使之拥有和父进程有相同的参数 console.log(process.execArgv); 【process.execPath】 　　开启当前进程的执行文件的绝对路径 console.log(process.execPath);//D:

本篇中继续来给大家介绍外卖App制作中的商品组件的部分。 好，第一步，我们把商品的大致框架在goods.vue中搭建出来： 　　 　　menu-wrapper是左边菜单栏，foods-wrapper是右边商品栏。 第二步，我们需要取到我们需要的数据。 　　 　　可能有人这时候会有一点疑问，因为他们记得header里面的seller是这么取得： 　　 　　那我们现在来看一下data.json: 　　 　 一个是json 一个是数组，所以，如上述代码可取出我们所需要的goods。 第三步，写侧边栏menu-wrapper,并填入数据 　　 　　代码： <div class="menu-wrapper" ref="menuWrapper"> <!-------point3-3 <ul> <li v-for='(item,index) in goods' class="menu-item" :class="{'current':currentIndex === index}" @click="selectMenu(index,$event)"> <!-------point3-2 <span class="text border-1px"> <span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span

什么是Vue.nextTick() 官方文档解释如下： 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。 获取更新后的DOM，言外之意就是DOM更新后再执行的操作；比如Swiper的调用 new Swiper ('.swiper-container', { direction: 'horizontal', pagination : '.swiper-pagination', loop: true, observer: true, // 修改swiper自己或子元素时，自动初始化swiper observeParents: true,// 修改swiper的父元素时，自动初始化swiper autoplay: 1000, autoplayDisableOnInteraction: false }); 什么时候需要用到Vue.nextTick() 在Vue生命周期的 created() 钩子函数进行的DOM操作一定要放在 Vue.nextTick() 的回调函数中。原因是在 created() 钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进 Vue.nextTick() 的回调函数中。 与之对应的就是 mounted 钩子函数

前段异步流程工具 1.promise 2.Generator函数 3.Async函数 4.Node.js提供的 nextTick 5.第三方的async.js async.js 1.async函数式是由es6提供的 2.async函数的底层其实就是generator函数 3.async函数需要和关键字 await搭配使用 4.async也是promise，也可以调用.then 格式： const asyncFn = async () => { await 任务 } var obj = { async aa () { await 任务 } } 例 const asyncFn = async () => { // const request = await '任务一' // console.log(' 任务2 ') // console.log( request ) // } // asyncFn() // console.log( '主线程任务' ) 注意：只有await后面的任务顺利执行完成，那么下面的人物才会去执行，如果await后面的任务执行不顺利，那么下面的任务就会执行不顺利 使用场景：先进行数据请求，得到数据后，然后再去操作这个数据，我们的async就是首选 4.async也是promise，也可以调用.then Node.js提供的两个方法 nextTick

Vue源码阅读 - 批量异步更新与nextTick原理 额外：window.MessageChannel那些事 今天要看的这个 window.MessageChannel 也是浏览器提供的一个异步操作的API。 从 MessageChannel 名称上我们就能对其含义知晓个大概。 消息通道 -的确，这个接口允许我们创建一个新的消息通道，并通过它的两个 messagePort 属性发送数据。 直白的说，这个api会创建一个管道，管道的两端分别代表一个 messagePort ，都能够通过 portMessage 向对方发送数据，通过 onmessage 来接受对方发送过来的数据。 下面用一个简单的例子来加深一下印象： const ch = new MessageChannel() const port1 = ch.port1 const port2 = ch.port2 port1.onmessage = function(d) { console.log(`port1接收的消息是：${d.data}`) } port2.onmessage = function(d) { console.log(`port2接收的消息是：${d.data}`) } // 发送消息 port1.portMessage('port1发送的消息') port2.portMessage(

1.浏览器的主要构成部分 1.用户界面 2.浏览器引擎(负责窗口管理、Tab进程管理等) 3.渲染引擎(有叫内核，负责HTML解析、页面渲染) 4.JS引擎(JS解释器，如Chrome和Nodejs采用的V8) 这里面最核心的就是渲染引擎和JS引擎，后面会详细介绍这两个引擎的相关内容。 常见浏览器的渲染引擎和JS引擎如下： 注：新版本的Chrome采用的渲染引擎是Blink，Blink是由谷歌团队从Webkit衍生开发出来的引擎，主要有应用到Chrome和Opera浏览器。 2.从进程和线程的角度来理解浏览器工作 1）进程和线程 进程是cpu资源分配的最小单位（是能拥有资源和独立运行的最小单位） 线程是cpu调度的最小单位（线程是建立在进程的基础上的一个程序运行单位，一个进程中可以有多个线程） 进程可以类比为工厂，线程就是工厂里面的工人，一个工厂可以包含一个或者多个工人，工人之间可以相互协作，并且共享工作空间 2）浏览器的多进程架构 现代的浏览器采用的都是多进程架构，主要包含以下三种进程： 1.Browser进程 浏览器的主线程，主要负责浏览器的页面管理、书签、前进后退、资源下载管理等，整个浏览器应用程序只有一个，对应上述浏览器组成中的浏览器引擎。 2.渲染进程 内核进程、负责页面渲染、JS执行，对应的是上述的渲染引擎和JS引擎，一个浏览器可以包含多个渲染进程

Vue 在 更新 DOM 时 是异步执行的。 只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。 如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。 然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部对异步队列尝试使用原生的 Promise.then 、 MutationObserver 和 setImmediate ，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替。 例如，当你设置 vm.someData = 'new value' ，该组件不会立即重新渲染。当刷新队列时，组件会在下一个事件循环“tick”中更新。多数情况我们不需要关心这个过程，但是如果你想基于更新后的 DOM 状态来做点什么，这就可能会有些棘手。 虽然 Vue.js 通常 鼓励开发人员使用“数据驱动”的方式思考 ，避免直接接触 DOM，但是有时我们必须要这么做。 为了在数据变化之后等待 Vue 完成更新 DOM，可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数将在 DOM 更新完成后被调用。例如： 在组件内使用 vm.$nextTick() 实例方法特别方便，因为它不需要全局

Event Loop的理解 JavaScript 是单线程的，当主线程遇到耗时的I/O操作，就会把把这些操作尽量转移给操作系统来执行，而操作系统是多线程（同理，浏览器中的js也是单线程的，只不过浏览器是多线程的）。nodejs的底层libuv使用线程池来处理这些异步的任务，当任务处理完成后，操作系统会通知nodejs，nodejs就会把对应的回调函数添加到poll轮训队列中，nodejs处理完主线程的任务后，就会从轮训队列中执行对应的回调函数。 event loop 执行完毕的情况： 队列的操作全被执行完了 执行的回调数目到达指定的最大值 nodejs轮询阶段示意图： timers 执行: setTimeout 和 setInterval 的回调函数 I/O callbacks: 不在 timers 阶段、close callbacks 阶段和 check 阶段这三个阶段执行的回调，都由此阶段负责，这几乎包含了所有回调函数 idle, prepare： event loop内部阶段，我们暂不需要了解 poll: 获取新的 I/O 事件 check: 执行 setImmediate close callback: 执行关闭事件的回调函数，如 mongoose.on('close', fn) 里的 fn 异步相关的理解 promise promise的作用：避免了回调地狱