Vue nextTick原理和作用(nextTick怎么使用)

 分类:vue教程时间:2022-05-09点击: 2022前端视频教程(自学必看)

要知道Vue nextTick的原理和作用,首先就要清楚Vue nextTick是什么?通俗易懂的讲:Vue nextTick是一个获取更新后DOM的Vue方法;nextTick方法是将回调函数延迟在下一次dom更新数据后调用,也就是当数据更新了,然后在dom中渲染后,就会自动执行nextTick函数。

Vue nextTick原理和作用

一、Vue nextTick是什么

1、Vue文档中对nextTick关于nextTick的介绍官网的解释如下:

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM

2、通俗易懂的讲:Vue nextTick是一个获取更新后DOM的Vue方法;nextTick方法是将回调函数延迟在下一次dom更新数据后调用,也就是当数据更新了,然后在dom中渲染后,就会自动执行nextTick函数。

二、Vue nextTick原理

通俗易懂的讲Vue nextTick的实现原理,简单说说面试的时候可以拿去吹牛逼。

1、先定义了一个callbacks 存放所有的nextTick里的回调函数

2、然后判断一下当前的浏览器内核是否支持 Promise,如果支持,就用Promise来触发回调函数

3、如果不支持Promise再看看是否支持MutationObserver,是一个可以监听DOM结构变化的接口,观察文本节点发生变化时,触发执行所有回调函数。

4、如果以上都不支持就只能用setTimeout来完成异步执行了。

三、Vue nextTick的作用

要理解nextTick,就要理解dom,nextTick是解决dom没有渲染的时候,无法做一些操作,我们想在dom完成后执行的。

比如你有一个标签用了<MyComp ref="mycomp" v-if="showComp"></MyComp>

然后你有一个函数设置了this.showComp=true

这个时候假如你使用this.$refs.mycomp去获取组件,获取的是空值,因为刚才showComp还是false,刚刚才设置成true,dom还没来得及加载。这个时候我们就需要使用nextTick函数。

四、Vue nextTick怎么使用

比如下面这个Vue nextTick实例代码:

this.showComp=true;
this.$nextTick(()=>{
this.$refs.mycomp.refresh();
});

五、Vue nextTick使用情景

在Vue生命周期的created()钩子函数进行的DOM操作的时候需要要放在Vue.nextTick()的回调函数中。

为啥呢?如果不熟悉created()钩子的话可以再翻看一下Vue的生命周期,created函数执行的时候DOM元素还没有进行过渲染,这个时候操作DOM毛用也没有,所以需要将DOM操作放在Vue.nextTick()的回调方法中去搞定。

当然你可以选择在mounted()钩子里去操作DOM,这个时候所有的DOM都挂载到跟元素上并渲染完毕了。这个时候操作DOM元素是没有任何问题的。

数据变化后要执行的某个操作,而这个操作需要使用随数据改变而改变的DOM结构的时候,这个操作都应该放进Vue.nextTick()的回调函数中。

除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址: