nexttick | 易学教程

js事件循环

阅读更多关于 js事件循环

javascript是一门单线程语言事件循环(Event Loop)是js实现异步的一种方法，也是js的执行机制同步任务和异步任务同步和异步任务分别进入不同的执行"场所"，同步的进入主线程，异步的进入Event Table并注册函数。当指定的事情完成时，Event Table会将这个函数移入Event Queue。主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，进入主线程执行。上述过程会不断重复，也就是常说的Event Loop(事件循环)。 macro-task(宏任务)：包括整体代码script，setTimeout，setInterval micro-task(微任务)：Promise，process.nextTick 事件循环的顺序，决定js代码的执行顺序。进入整体代码(宏任务)后，开始第一次循环。接着执行所有的微任务。然后再次从宏任务开始，找到其中一个任务队列执行完毕，再执行所有的微任务。 1 console.log('1'); 2 3 setTimeout(function() { 4 console.log('2'); 5 process.nextTick(function() { 6 console.log('3'); 7 }) 8 new Promise(function(resolve) { 9 console.log('4')

关于nextTick的理解

阅读更多关于关于nextTick的理解

首先先看一下官方的解释： this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。我的理解：在this.$nextTick外面，获取的数据有可能已经改变了但是获取的时候还是之前的值，但是在this.$nextTick里面只要获取的数据发生改变，获取的时候就是改变了之后的数据具体看代码吧 <template> <section> <div ref="hello">  <h1 v-model="msg">{{msg}}</h1> </div> </section> </template> <script> export default { data(){ return { msg:'123123' } }, mounted() { this.msg='456456' console.log(333); console.log(this.$refs.hello.innerText); this.$nextTick(() => { console.log(444); console.log(this.$refs.hello.innerText); }); },

vue的$nextTick

阅读更多关于 vue的$nextTick

https://segmentfault.com/a/1190000012861862 简单来说：如果你修改了某个dom中的数据，视图并不会立即更新。Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。，此时获取关于此dom的一切操作都是无效的，怎么办？在nextTick的回调中执行即可。$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM。来源： https://www.cnblogs.com/bbllw/p/11731289.html

深入了解nodejs的事件循环机制

阅读更多关于深入了解nodejs的事件循环机制

一直以来，我写的的大部分JS代码都是在浏览器环境下运行，因此也了解过浏览器的事件循环机制，知道有macrotask和microtask的区别。但最近写node时，发现node的事件循环机制和浏览器端有很大的不同，特此深入地学习了下。单线程在传统web服务中，大多都是使用多线程机制来解决并发的问题，原因是I/O事件会阻塞线程，而阻塞就意味着要等待。而node的设计是采用了单线程的机制，但它为什么还能承载高并发的请求呢？因为node的单线程仅针对主线程来说，即每个node进程只有一个主线程来执行程序代码，但node采用了事件驱动的机制，将耗时阻塞的I/O操作交给线程池中的某个线程去完成，主线程本身只负责不断地调度，并没有执行真正的I/O操作。也就是说node实现的是异步非阻塞式。事件循环机制 node能实现高并发的诀窍就在于事件循环机制，这个事件循环机制和浏览器端的相似但也有很多不同。根据node的官方介绍，node每次事件循环机制都包含了6个阶段： timers阶段：这个阶段执行已经到期的timer(setTimeout、setInterval)回调 I/O callbacks阶段：执行I/O（例如文件、网络）的回调 idle, prepare 阶段：node内部使用 poll阶段：获取新的I/O事件, 适当的条件下node将阻塞在这里 check阶段

Javascript的event loop

阅读更多关于 Javascript的event loop

学习js，事件队列一定是一个高频出现的词汇，主线程+事件队列是它的一大特色。最近在回顾旧的知识点，碰到微任务这个概念，这里记录下，先根据这类面试题写个demo： setTimeout(function() { console.log('5'); }); new Promise(function(resolve) { console.log('1'); // setTimeout(resolve); resolve() }) .then(function() { setTimeout(() => { console.log('6'); }); return '4'; }) .then(console.log); process.nextTick(() => { console.log('3'); }); console.log('2'); 　　之前自己写了一个类似Promise的类，then接收的函数直接用setTimeout来push进一个函数队列，虽说功能是实现了，其在浏览器端的表现却不符合实际，一些网站还有干脆用process.nextTick来实现的，这样对浏览器就不再适用。　　根据文档可以发现浏览器里有一个微任务队列是在任务队列之前触发的，可以理解成node环境下的setImmediate这样一个东西，关于Promise具体用什么异步方法实现在mdn的文档说得也很明白：

Vue 中 $nextTick() 的应用

阅读更多关于 Vue 中 $nextTick() 的应用

Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。异步更新DOM实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue nextTick</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <example></example> </div> <script> // 注册 example 组件 Vue.component('example', { template: '<span ref="box" @click="updateMessage">{{ message }}</span>', data () { return { message: '未更新' } }, methods: { updateMessage () { this.message = '已更新' console.log('nextTick方法前--->',

await Vue.nextTick() 的含义分析

阅读更多关于 await Vue.nextTick() 的含义分析

概述今天看别人的单元测试代码的时候碰到了一段代码 await Vue.nextTick() ，初看起来不是很懂，后来通过查资料弄懂了，记录下来，供以后开发时参考，相信对其他人也有用。 await Vue.nextTick() 我们都用过 Vue.nextTick，但是在用的时候会在里面加一个回调函数的，但是有人直接这么使用： await Vue.nextTick(); 这是为什么呢？使用场景又是什么呢？ Vue.nextTick 要了解这段代码的含义，我们首先来看 Vue.nextTick() 如果不加回调函数会怎样？通过查阅官方文档，可以知道，Vue.nextTick() 里面如果加了回调，则会在下次 DOM 更新循环结束之后执行延迟回调。如果在修改数据之后立即使用这个方法，则可以获取更新后的 DOM。如果没有提供回调且在支持 Promise 的环境中则会返回一个 Promise！！！所以 await Vue.nextTick() 相当于在 await 后面加了一个 Promise。 await await 后面加一个 Promise 又会怎样呢？通过查阅资料，我们可以知道，await 后面必须跟 Promise，否则会报错；如果跟了 Promise，那么当执行到这里的时候，会先返回，等 Promise 返回后，再继续执行下面的代码。比如下面这段代码：

vue之nextTick

阅读更多关于 vue之nextTick

todo简介： vue是非常流行的框架，他结合了angular和react的优点，从而形成了一个轻量级的易上手的具有双向数据绑定特性的mvvm框架。本人比较喜欢用之。在我们用vue时，我们经常用到一个方法是this.$nextTick，相信你也用过。我常用的场景是在进行获取数据后，需要对新视图进行下一步操作或者其他操作时，发现获取不到dom。因为赋值操作只完成了数据模型的改变并没有完成视图更新。在这个时候我们需要用到本章介绍的函数。举例： new Vue({ el: '#app', data: { list: [] }, mounted: function () { this.get() }, methods: { get: function () { this.$http.get('/api/article').then(function (res) { this.list = res.data.data.list // ref list 引用了ul元素，我想把第一个li颜色变为红色　　　　　　　　　　　//下面方法无效 this.$refs.list.getElementsByTagName('li')[0].style.color = 'red'}) //$refs：注①　　　　　　　　　　　//下面方法有效　　　　　this.$nextTick(() => { 　　　　　

Vue中的nextTick用法和原理详解 2

阅读更多关于 Vue中的nextTick用法和原理详解 2

vue是非常流行的框架，他结合了angular和react的优点，从而形成了一个轻量级的易上手的具有双向数据绑定特性的mvvm框架。本人比较喜欢用之。在我们用vue时，我们经常用到一个方法是this.$nextTick，相信你也用过。我常用的场景是在进行获取数据后，需要对新视图进行下一步操作或者其他操作时，发现获取不到dom。因为赋值操作只完成了数据模型的改变并没有完成视图更新。在这个时候我们需要用到本章介绍的函数。为什么要用nextTick 请看如下一段代码 new Vue({ el: '#app', data: { list: [] }, mounted: function () { this.get() }, methods: { get: function () { this.$http.get('/api/article').then(function (res) { this.list = res.data.data.list // ref list 引用了ul元素，我想把第一个li颜色变为红色 this.$refs.list.getElementsByTagName('li')[0].style.color = 'red' }) }, } }) 我在获取到数据后赋值给数据模型中list属性，然后我想引用ul元素找到第一个li把它的颜色变为红色，但是事实上

一、调用栈堆（不知道为什么开始写博客，大概是CV太累了吧~缓缓）

阅读更多关于一、调用栈堆（不知道为什么开始写博客，大概是CV太累了吧~缓缓）

放在最前面掘金上一个大佬关于调用栈堆的文章 .他的文章比较详细风趣，图文并茂，以下只是我的学习历程一、调用栈堆 1.js是单线程！单线程！单线程语言 2.js事件循环(直接上图) 同步和异步任务分别进入不同的执行"场所"，同步的进入主线程，异步的进入Event Table并注册函数。当指定的事情完成时，Event Table会将这个函数移入Event Queue。主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，进入主线程执行。上述过程会不断重复，也就是常说的Event Loop(事件循换)。总结：先完成同步的操作，然后读取异步的回调函数，执行函数中代码，之后继续这一过程，直至没有请求为止。 3.定时器(setTimeout)和延时器(setInterval) setTimeout(() => { console.log('延时3秒'); },3000) 定时器和延时器是典型的异步执行操作，上面的定时器设置了三秒延迟，但不是3秒之后就一定触发了，在第二点中说过，异步操作需要等待同步操作的完成，设置时间为零毫秒同理。延时器有点特殊，延时器是每隔多少毫秒就把对应的回调函数丢进对应的异步栈中，所以当异步回调函数的执行时间高于延时器设置的毫秒数，看起来就跟没有延迟一样。(作者原话：一旦setInterval的回调函数fn执行时间超过了延迟时间ms

订阅 nexttick