nexttick

　　在javascript中我们了解到了setTimeout和setInterVal函数事件队列（任务队列）的相关知识，除了setTimeout和setInterval这两个方法外，Node.js还提供了另外两个与"任务队列"有关的方法：process.nextTick和setImmediate。它们可以帮助我们加深对"任务队列"的理解。 　　 setTimeout() 　　首先我们看看setTimeout（setInterVal和setTimeout函数区别只是执行次数）函数，需要注意的是，setTimeout()只是将事件插入了"任务队列"，必须等到当前代码（执行栈）执行完，主线程才会去执行它指定的回调函数。要是当前代码耗时很长，有可能要等很久，所以并没有办法保证，回调函数一定会在setTimeout()指定的时间执行。 1 setTimeout(function(){console.log('0')},0);//意思是回调函数加入事件队列的队尾，主线程和事件队列的函数执行完成之后立即执行定时器的回调函数，如果定时器的定时是相同的，就按定时器回调函数的先后顺序来执行。 2 console.log(1); 3 setTimeout(function(){console.log(2);},1000); 4 setTimeout(function(){console.log(4);}

原文地址 http://www.cnblogs.com/fly_dragon/p/6220273.html 05-Vue入门系列之Vue实例详解与生命周期 Vue的实例是Vue框架的入口，其实也就是前端的ViewModel，它包含了页面中的业务逻辑处理、数据模型等，当然它也有自己的一系列的生命周期的事件钩子，辅助我们进行对整个Vue实例生成、编译、挂着、销毁等过程进行js控制。 5.1. Vue实例初始化的选项配置对象详解 前面我们已经用了很多次 new Vue({...}) 的代码，而且Vue初始化的选项都已经用了 data 、 methods 、 el 、 computedd 等,估计您看到这里时，应该已经都明白了他们的作用，我们就详细讲解一下他们的使用情况。更详细的请参考 官网内容 5.1.1. Vue实例的的data对象 介绍 Vue的实例的数据对象data 我们已经用了很多了，数据绑定离不开data里面的数据。也是Vue的核心属性。 它是Vue绑定数据到HTML标签的数据源泉，另外Vue框架会自动监视data里面的数据变化，自动更新数据到HTML标签上去。本质原理是：Vue会自动将data里面的数据进行递归抓换成getter和setter，然后就可以自动更新HTML标签了，当然用getter和setter所以老的浏览器Vue支持的不够好。 data对象的类型：

什么时候需要用的Vue.nextTick() 你在Vue生命周期的 created() 钩子函数进行的DOM操作一定要放在 Vue.nextTick() 的回调函数中。原因是什么呢，原因是在 created() 钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进 Vue.nextTick() 的回调函数中。与之对应的就是 mounted 钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题 。 在数据变化后要执行的 某个操作 ，而这个 操作 需要使用随数据改变而改变的DOM结构的时候，这个 操作 都应该放进 Vue.nextTick() 的回调函数中。 原因是，Vue是异步执行dom更新的，一旦观察到数据变化，Vue就会开启一个队列，然后把在同一个事件循环 (event loop) 当中观察到数据变化的 watcher 推送进这个队列。如果这个watcher被触发多次，只会被推送到队列一次。这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和DOm操作。而在下一个事件循环时，Vue会清空队列，并进行必要的DOM更新。 当你设置 vm.someData = 'new value'，DOM 并不会马上更新，而是在异步队列被清除

　　Vue.nectTick() 是在下次DOM更新循环结束之后执行延迟回调，在修改数据之后使用$nextTick，则可以在回调中获取更新后的DOM（dom的改变是发生在nextTick()之后），这个方法作用是当数据被修改后使用这个方法，会回调获取更新后的dom再render出来 　　Vue.nextTick()作用：在下次dom更新循环结束之后，执行延迟回调。在修改数据之后立即使用这个方法，获得更新后的dom 在以下两个情况下需要用到Vue.nextTick() 1、Vue声明周期的created() 钩子函数进行的DOM操作一定要放在Vue.nextTick() 的回调函数中，因为created() 执行的时候DOM实际上并未进行任何渲染，此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。 　　与之对应的就是mounted 钩子函数，因为该函数执行时所有的DOM挂载和渲染都已完成，此时再钩子函数中进行任何DOM操作都不会有问题。 2、在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作应该放进Vue.nextTick() 的回调函数中 简而言之，如果你在数据改变之后的操作跟改变之后的DOM有关，那么就应该使用Vue.nextTick() 来源： CSDN 作者：

文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧 研究基于 Vue版本 【2.5.17】 【Vue原理】NextTick - 白话版 nextTick 是 Vue 中比较重要的一部分，源码独立而简短，稍作修改就可以拿出来为你的项目服务， 我已经有在项目中使用了 想必大家写 Vue 项目的时候，应该也有使用过 nextTick 一般我是用在数据渲染完毕之后执行某些操作 this.list = xx,xx,xx this. $nextTick (( ) = > { this.isLoading = false } ) nextTick 按我的理解，就是设置一个回调，用于异步执行 异步执行，比如，就是把你设置的回调放在 setTimeout 中执行，这样就算异步了，等待当时同步代码执行完毕再执行 但是，每设置一个 nextTick 就新建一个 setTimeout 又不实际， 毕竟一个 setTimeout 是异步，两个setTimeout 也是异步，两个都要等在 同步代码执行完毕之后才执行 那我直接只设置一个 setTimeout 不就好了 那一个 setTimeout 怎么执行多个回调呢？ 1 存在 回调数组 里。每次调用 nextTick，便往数组里面 push 设置的回调 2 只注册一个 setTimeout，时间为0，用于遍历 回调数组

众所周知，js是一种单线程语言。为什么是单线程呢？我引用一句烂大街的话：假设js同时有两个线程，一个线程想要在某个dom节点上增加内容，另一个线程想要删除这个节点，这时要以哪个为准呢？当然，多线程有多线程的解决办法，加锁啊，但是这样的话，又会引入锁、状态同步等问题。 js是浏览器脚本语言，主要用途是与用户互动，操作dom，多线程会带来很复杂的同步问题。 好吧，那就单线程吧。但是单线程又带来了单线程的问题，只有一个线程啊，任务要排队执行，如果前一个任务执行时间很长（ajax请求后台数据），后面的任务就都得等着。 Event Loop就出现了，来背单线程的锅。 Event Loop 往下看之前你应该知道栈、队列、同步任务、异步任务、执行栈这些基本概念。 关于执行栈有一篇很详细的文章推荐：JavaScript深入之执行上下文栈 请看下图： js在执行代码时，代码首先进入执行栈，代码中可能包含一些同步任务和异步任务。 同步任务立即执行，执行完出栈，over。 异步任务也就是常见的ajax请求、setTimeout等，代码调用到这些api的时候，WebAPIs来处理这些问题，执行栈继续执行。 异步任务有了运行结果时，（当ajax请求结果返回时），WebAPIs把对应的回调函数放到任务队列。 执行栈为空时来读取任务队列中的第一个函数，压入执行栈。 步骤5不断重复，执行栈为空时

this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。 假设我们更改了某个dom元素内部的文本，而这时候我们想直接打印出这个被改变后的文本是需要dom更新之后才会实现的，也就好比我们将打印输出的代码放在setTimeout(fn, 0)中； 先来第一个例子看一看 <template> <section> <div ref="hello"> <h1>Hello World ~</h1> </div> <el-button type="danger" @click="get">点击</el-button> </section> </template> <script> export default { methods: { get() { } }, mounted() { console.log(333); console.log(this.$refs['hello']); this.$nextTick(() => { console.log(444); console.log(this.$refs['hello']); }); }, created() { console.log(111); console.log

{{ message }} // element 元素 // 插值表达式 {{ }} 里边只能写表达式、基本的js、数据 // console.log(‘a’); // console.log(a); // ' ′ / / v m . ' // vm. ′ / / v m . nextTick $nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 n e x t T i c k ， 则 可 以 在 回 调 中 获 取 更 新 后 的 D O M / / v m . nextTick，则可以在回调中获取更新后的 DOM // vm. n e x t T i c k ， 则 可 以 在 回 调 中 获 取 更 新 后 的 D O M / / v m . mount 用来挂载 // el: ‘#app’, 来源： CSDN 作者： 城南没有城北 链接： https://blog.csdn.net/weixin_42380289/article/details/104193968

响应式数据的说明 响应式数据: 把data中的数据挂到vm身上，vm身上的这个数据其实就是响应式的 一旦数据发生了改变，页面中的内容也会跟着改变 动态添加的数据是无效的以及$set的使用 data中的数据一定要先声明，再使用，动态给对象添加的属性不是响应式的 < div id = "app" > < p > { { person . name } } -- - { { person . age } } -- - { { person . gender } } < / p > < / div > < script src = "vue.js" > < / script > < script > var vm = new Vue ( { el : '#app' , data : { person : { name : 'zs' , age : 18 } } } ) < / script > // 动态给data中添加的数据是无效的 // 在vue实例创建的时候，会把data中的数据绑定到vm上，所以data中的数据是响应的 // 但是动态绑定的数据不是响应是的。 vm . person . gender = '男' 如果想要动态绑定数据，并且是响应式的,需要使用 vm.$set方法 this . $ set ( this . person , 'gender' , '男' ) 结论：

<!DOCTYPE html> <html> <head> <title></title> </head> <body> <script type="text/javascript"> let callbacks = []; let pending = false; for (var i = 0; i <4; i++) { if(i == 1){ nextTick(function(){ console.log("更新1"); }); }else{ nextTick(function(){ console.log("更新2"); }) } } // 存储nextTick function nextTick (cb) { callbacks.push(cb); if (!pending) { // 代表等待状态的标志位 pending = true; setTimeout(flushCallbacks, 0); } } function flushCallbacks () { console.log("---1---"); pending = false; const copies = callbacks.slice(0); callbacks.length = 0; for (let i = 0; i < copies.length; i++) { copies[i](); } }