Vue.$nextTick的原理是什么
这篇文章主要介绍了Vue.$nextTick的原理是什么的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue.$nextTick的原理是什么文章都会有所收获,下面我们一起来看看吧。
创新互联公司专注为客户提供全方位的互联网综合服务,包含不限于网站设计制作、网站设计、江城网络推广、小程序定制开发、江城网络营销、江城企业策划、江城品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;创新互联公司为所有大学生创业者提供江城建站搭建服务,24小时服务热线:028-86922220,官方网址:www.cdcxhl.com
Vue中DOM更新机制
当你气势汹汹地使用Vue大展宏图的时候,突然发现,咦,我明明对这个数据进行更改了,但是当我获取它的时候怎么是上一次的值(本人比较懒,就不具体举例了?)
此时,Vue就会说:“小样,这你就不懂了吧,我的DOM是异步更新的呀!!!”
简单的说,Vue的响应式并不是只数据发生变化之后,DOM就立刻发生变化,而是按照一定的策略进行DOM的更新。这样的好处是可以避免一些对DOM不必要的操作,提高渲染性能。
在Vue官方文档中是这样说明的:
可能你还没有注意到,Vue异步执行DOM更新。只要观察到数据变化,Vue将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变。如果同一个watcher被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和DOM操作上非常重要。然后,在下一个的事件循环“tick”中,Vue刷新队列并执行实际 (已去重的) 工作。
白话一点就是说,其实这是和JS当中的事件循环是息息相关的,就是Vue不可能对每一个数据变化都做一次渲染,它会把这些变化先放在一个异步的队列当中,同时它还会对这个队列里面的操作进行去重,比如你修改了这个数据三次,它只会保留最后一次。这些变化是都可以通过队列的形式保存起来,那现在的问题就来到了,那vue是在事件循环的哪个时机来对DOM进行修改呢?
Vue有两种选择,一个是在本次事件循环的最后进行一次DOM更新,另一种是把DOM更新放在下一轮的事件循环当中。z这时,尤雨溪拍了拍胸脯说:“这两种方法,我都有!” 但是因为本轮事件循环最后执行会比放在下一轮事件循环要快很多,所以Vue优先选择第一种,只有当环境不支持的时候才触发第二种机制。(??开头的链接让你懂事件循环)
虽然性能上提高了很多,但这个时候问题就出现了,我们都知道在一轮事件循环中,同步执行栈中代码执行完成之后,才会执行异步队列当中的内容,那我们获取DOM的操作是一个同步的呀!!那岂不是虽然我已经把数据改掉了,但是它的更新异步的,而我在获取的时候,它还没有来得及改,所以会出现文章开头的那个问题。
这。。。我确实需要进行这样操作,那这么办呢??
没关系啦,尤大很贴心的为我们提供了Vue.$nextTick()
Vue.$nextTick()
其实一句话就可以把$nextTick
这个东西讲明白:就是你放在$nextTick
当中的操作不会立即执行,而是等数据更新、DOM更新完成之后再执行,这样我们拿到的肯定就是最新的了。
再准确一点来讲就是$nextTick
方法将回调延迟到下次DOM更新循环之后执行。(看不懂这句人话的,可以看上面[狗头])
意思我们都懂了,那$nextTick
是怎样完成这个神奇的功能的呢? 核心如下:
Vue
在内部对异步队列尝试使用原生的Promise.then
、MutationObserver
和setImmediate
,如果执行环境不支持,则会采用setTimeout(fn, 0)
代替。
仔细地看这句话,你就可以发现这不就是利用 JavaScript 的这些异步回调任务队列,来实现 Vue 框架中自己的异步回调队列。这其实就是一个典型的将底层 JavaScript 执行原理应用到具体案例中的示例。
我在这里稍微总结一下:就是$nextTick
将回调函数放到微任务或者宏任务当中以延迟它地执行顺序;(总结的也比较懒?)
重要的是理解源码中它的三个参数的意思:
callback:我们要执行的操作,可以放在这个函数当中,我们没执行一次
$nextTick
就会把回调函数放到一个异步队列当中;pending:标识,用以判断在某个事件循环中是否为第一次加入,第一次加入的时候才触发异步执行的队列挂载
timerFunc:用来触发执行回调函数,也就是
Promise.then
或MutationObserver
或setImmediate
或setTimeout
的过程
理解之后,在看整个$nextTick
里面的执行过程,其实就是把一个个$nextTick
中的回调函数压入到callback队列当中,然后根据事件的性质等待执行,轮到它执行的时候,就执行一下,然后去掉callback队列中相应的事件。
使用
说了这么多,怎么用它呢? 很简单很简单
mounted: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
})
}
使用场景
created中获取DOM的操作需要使用它
就是我们上面的例子,你如果想要获取最新值,就用它
还有一些第三方插件使用过程中,使用到的情况,具体问题具体分析
补充
之前我一直搞不懂一个的问题,$nextTick
既然把它传入的方法变成微任务了,那它和其它微任务的执行顺序是怎样的呢?
这简单来说就是谁先挂载Promise
对象的问题,在调用$nextTick
方法时就会将其闭包内部维护的执行队列挂载到Promise
对象,在数据更新时Vue
内部首先就会执行$nextTick
方法,之后便将执行队列挂载到了Promise
对象上,其实在明白Js
的Event Loop
模型后,将数据更新也看做一个$nextTick
方法的调用,并且明白$nextTick
方法会一次性执行所有推入的回调,就可以明白执行顺序的问题了
还有$nextTick
和nextTick
区别就是nextTick
多了一个context参数,用来指定上下文。但两个的本质是一样的,$nextTick
是实例方法,nextTick
是类的静态方法而已;实例方法的一个好处就是,自动给你绑定为调用实例的this
罢了。
关于“Vue.$nextTick的原理是什么”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“Vue.$nextTick的原理是什么”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注创新互联行业资讯频道。
分享标题:Vue.$nextTick的原理是什么
文章来源:http://scyanting.com/article/ieccei.html