nexttick

NodeJS必知基础知识(非巨详细)

只愿长相守 提交于 2019-12-05 14:04:12
Node.js是啥? node.js是构建在Chrome v8 引擎上的一个javascript 运行环境 node和Chrome一样都是基于事件驱动的异步架构!Chrome是基于事件的交互,而node是基于事件的I/O; node没有HTML、Webkit和显卡驱动等UI技术支持; 文件引入 如果当前文件夹下有index.js和2.js 2.js 里包含变量a(let a=1) //2.js let a = 1 global . b = ouyang ; //挂载在global全局下,node的全局是global不是window //index.js const obj = require ( "./2.js" ) ; //require请求的就是module.exports的内容 console . log ( obj . a ) ; //输出2.js里的a不会成功 console . log ( global . b ) ; //ouyang 这样才会成功 node在执行时会把代码重新编译,编译时会把代码打包成字符串放入一个函数里进行编译,所以直接在全局var 或者let声明的变量并不能通过全局直接调用! 模块 //02.js module . exports = function ( ) { console . log ( "666" ) } ; //被覆盖 module

vue中nextTick的使用

流过昼夜 提交于 2019-12-04 23:41:47
最近使用vue的vm.$nextTick的用法比较多,现在整理一下它的用法。 推荐阅读: http://www.ruanyifeng.com/blog/2014/10/event-loop.html   官方文档上这么说的: 将回调延迟到下次DOM渲染之后执行。在修改数据后立即使用它,然后等待DOM更新。 它和全局方法Vue.nextTick一样,不同的是回调的this自动绑定在它应用的实例上   上述的话也可以这么理解,我们可以把需要在渲染DOM元素出来后的一些方法放在created生命周期中,不过需要借助vm.$nextTick() 这个回调函数中执行   或者第二个用法就是在我们更新数据后,vm.$nextTick这个函数中,等待DOM更新时使用。   其实项目中最常用的就是在组件中使用vm.$nextTick的方法,并且回调函数中的this,会自动绑定在当前的vue实例上   举例:  //官网案例Vue.component('example', { template: '<span>{{ message }}</span>', data: function () { return { message: '未更新' } }, methods: { updateMessage() { this.message = '已更新' console.log(this.$el

Vue源码阅读一:说说vue.nextTick实现

大城市里の小女人 提交于 2019-12-03 15:09:13
用法: 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。 疑惑: 怎么实现的延迟回调 原理: JavaScript语言的一大特点就是单线程,同一个时间只能做一件事 JavaScript任务可以分为两种,一种是同步任务,一种是异步任务 异步任务大致分为,宏任务,和微任务 所有同步任务都在主线程上执行,形成一个执行栈 主线程之外,还存在一个"任务队列"(task queue)。只要异步任务有了运行结果,就在"任务队列"之中放置一个事件。 一旦"执行栈"中的所有同步任务执行完毕,系统就会读取"任务队列"中的微任务,其次是宏任务,看看里面有哪些事件。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。 主线程不断重复上面的第6步。 vue实现: vue 大多数情况下优先使用微任务, 很少的地方使用宏任务 vue nextTick 宏任务实现 优先检测 setImmediate if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) { macroTimerFunc = () => { setImmediate(flushCallbacks) } } setImmediate 浏览器支持情况 其次检测 MessageChannel 支持情况 else if

Vue.nextTick 的原理和用途

匿名 (未验证) 提交于 2019-12-02 23:57:01
转载自 https://segmentfault.com/a/1190000012861862 概览 官方文档说明: 用法: 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。 疑问: DOM 更新循环是指什么? 下次更新循环是什么时候? 修改数据之后使用,是加快了数据更新进度吗? 在什么情况下要用到? 原理 异步说明 Vue 实现响应式并 不是数据发生变化之后 DOM 立即变化 ,而是按一定的策略进行 DOM 的更新。 在 Vue 的 文档 中,说明 Vue 是 异步 执行 DOM 更新的。关于异步的解析,可以查看阮一峰老师的 这篇文章 。截取关键部分如下: 具体来说,异步执行的运行机制如下。 (1)所有同步任务都在主线程上执行,形成一个执行栈(execution context stack)。 (2)主线程之外,还存在一个"任务队列"(task queue)。只要异步任务有了运行结果,就在"任务队列"之中放置一个事件。 (3)一旦"执行栈"中的所有同步任务执行完毕,系统就会读取"任务队列",看看里面有哪些事件。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。 (4)主线程不断重复上面的第三步。 下图就是主线程和任务队列的示意图。 事件循环说明 简单来说,Vue 在修改数据后,视图不会立刻更新,而是等 同一事件循环

Vue 中 $nextTick() 的应用

匿名 (未验证) 提交于 2019-12-02 23:56:01
Vue 在更新 DOM 时是异步执行的。 只要侦听到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 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 (

vue踩坑路――VUE中this.$nextTick()怎么使用?

匿名 (未验证) 提交于 2019-12-02 23:42:01
VUE中Vue.nextTick()和this.$nextTick()怎么使用? 官方文档是这样解释的: 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。 虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考,避免直接接触 DOM,但是有时我们确实要这么做。比如你在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。原因是什么呢,原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。 Vue.component('example', { template: '<span>{{ message }}</span>', data: function () { return { message: 'not updated' } }, methods: { updateMessage: function () { this.message = 'updated' console.log(this.$el.textContent) // => 'not updated' this.$nextTick(function () { console

this.$nextTick()

匿名 (未验证) 提交于 2019-12-02 23:32:01
$nextTick    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()

NodeJS学习记录

匿名 (未验证) 提交于 2019-12-02 23:03:14
记录一下nodejs的学习之路 阻塞I/O:I/O时进程休眠等待I/O完成后进行下一步 非阻塞I/O:I/O时函数立即返回,进程不等待I/O完成 I/O等异步操作结束后的通知 观察者模式 Node.js is a JavaScript runtime built on Chrome's V8 Node.js uses an event-driven,non-blocking I/O model CPU密集:压缩、解压、加密、解密 I/O密集:文件操作、网络操作、数据库操作 前端职责范围变大,统一开发体验 在处理高并发,I/O密集场景( web场景 )性能优势明显 web常见场景 静态资源的获取 数据库操作 渲染页面 增加机器数、负载均衡 增加每台机器的CPU数-多核 进程:是计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源分配和调度的基本单位。 线程:进程内一个相对独立的、可调度的执行单元,与同属一个进程的线程共享进程的资源 多进程:启动多个进程,多个进程可以一块执行多个任务 单线程只是针对主进程,I/O操作系统底层多线程调度 Node单线程并不是单进程(node有一个集群(cluster)模块用来处理多进程,cpu有几个核就启动几个进程) Web Server 本地代码构建(现在前端各种框架、ES6、模块化等的出现,前端代码变得异常的复杂,无法直接在浏览器上运行

Vue.$nextTick详解

懵懂的女人 提交于 2019-12-02 21:26:22
$nextTick(操作DOM的时候会用到) Vue在观察数据变化时并不是直接更新DOM,而是开启一个队列,并缓冲在同一事件循环中发生的所有数据改变 在缓冲时会去除重复数据,从而避免不必要的计算和DOM操作 然后,在下一个事件循环tick中,Vue刷新队列并执行实际(已去重的)工作。所以,如果你用一个for循环来动态改变数据100次,其实它只会应用最后一次改变,如果没有这种机制,DOM就要重绘100次,这固然是个很大的开销。 <div> <button @click="show">$nextTick</button> <div id="next" v-if="isShow">{{next}}</div> </div> show(){ this.isShow = true // let dv = document.getElementById("next") // console.log(dv) // null this.$nextTick(() => { let dv = document.getElementById("next") console.log(dv) // <div>1</div> }) } 事实上,在执行this.isShow = true的同时,div还没有被创建出来,直到写一个Vue事件循环,才开始创建。 $nextTick就是用来知道什么时候DOM更新完成的

Vue系列---理解Vue.nextTick使用及源码分析(五)

断了今生、忘了曾经 提交于 2019-12-02 17:50:21
/*--> */ /*--> */ 阅读目录 一. 什么是Vue.nextTick()? 二. Vue.nextTick()方法的应用场景有哪些? 2.1 更改数据后,进行节点DOM操作。 2.2 在created生命周期中进行DOM操作。 三. Vue.nextTick的调用方式如下: 四:vm.$nextTick 与 setTimeout 的区别是什么? 五:理解 MutationObserver 六:nextTick源码分析 回到顶部 一. 什么是Vue.nextTick()? 官方文档解释为:在下次DOM更新循环结束之后执行的延迟回调。在修改数据之后立即使用该方法,获取更新后的DOM。 我们也可以简单的理解为:当页面中的数据发生改变了,就会把该任务放到一个异步队列中,只有在当前任务空闲时才会进行DOM渲染,当DOM渲染完成以后,该函数就会自动执行。 回到顶部 2.1 更改数据后,进行节点DOM操作。 比如修改数据、修改节点样式、等操作。比如说我修改data中的一个属性数据后,如果我这个时候直接获取该html内容的话,它还是老数据的,那么此时此刻,我们可以使用 Vue.nextTick(), 在该函数内部获取该数据即可: 如下代码: <!DOCTYPE html> <html> <head> <title>vue.nextTick()方法的使用</title> <meta