美文网首页
Vue.nextTick()的介绍和使用场景

Vue.nextTick()的介绍和使用场景

作者: JiAyInNnNn | 来源:发表于2020-03-04 20:53 被阅读0次

每次都很好奇这个干嘛的,然后百度之后还是不明白。今天就彻彻底底好好的弄明白这是干嘛的!!

首先看一下vue文档

image

nextTick(),是将回调函数延迟在下一次DOM更新数据后调用,简单的理解是:当数据更新了,在DOM中渲染后,自动执行该函数

使用场景
1.Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中,原因是在created()钩子函数执行的时候并没有加载DOM,所以此阶段对DOM进操作也是无效的。所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数,因为该钩子函数执行时所有的DOM挂载已完成。
2.当项目中你想在改变DOM元素的数据后基于新的DOM做点什么,对新DOM一系列的js操作都需要放进Vue.nextTick()的回调函数中;通俗的理解是:更改数据后当你想立即使用js操作新的视图的时候需要使用它。

Vue.nextTick(callback) 使用原理:
原因是,Vue是异步执行dom更新的,一旦观察到数据变化,Vue就会开启一个队列,然后把在同一个事件循环 (event loop) 当中观察到数据变化的 watcher 推送进这个队列。如果这个watcher被触发多次,只会被推送到队列一次。这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和DOm操作。而在下一个事件循环时,Vue会清空队列,并进行必要的DOM更新。
当你设置 vm.someData = ‘new value’,DOM 并不会马上更新,而是在异步队列被清除,也就是下一个事件循环开始时执行更新时才会进行必要的DOM更新。如果此时你想要根据更新的 DOM 状态去做某些事情,就会出现问题。。为了在数据变化之后等待 Vue 完成更新 DOM ,可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。

相关文章

  • Vue.nextTick()的介绍和使用场景

    每次都很好奇这个干嘛的,然后百度之后还是不明白。今天就彻彻底底好好的弄明白这是干嘛的!! 首先看一下vue文档 n...

  • Vue中nextTick的简单理解

    nextTick使用场景:在数据变化之后使用 Vue.nextTick(callback),回调函数将在 DOM ...

  • vue.nextTick()和this.$nextTick()获

    一.对vue.nextTick()和this.$nextTick()细致介绍 虽然vue是不建议操作dom的,...

  • MongoDB的介绍和使用场景

    MongoDB 是一个高性能,开源,无模式的文档型数据库,是当前 NoSQL 数据库产品中最热门的一种。它在许多场...

  • Vue.nextTick的原理和应用场景

    前言 nextTick官方文档说明: 在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获...

  • vue.nextTick()的使用

    什么是Vue.nextTick() 官方文档解释如下: 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之...

  • 谈谈 在 Vue 中你对 $nextTick 的理解

    17.$nextTick 的使用答案: 1、什么是 Vue.nextTick()? 定义:在下次 DOM 更新循环...

  • actor模型

    概述 本文主要介绍actor模型的定义和使用场景,最后介绍一个使用akka的例子。 actor模型定义 在许多并发...

  • crudapi零代码开发平台应用场景和成功案例

    应用场景 在前面文章中,已经介绍了crudapi主要功能和使用方式,本文主要介绍crudapi应用场景以及具体的使...

  • Hadoop使用场景介绍

    大数据依然是火的不要不要的,作为大数据基础的Hadoop自然也会备受重视,那么Hadoop的使用场景有哪些?小编给...

网友评论

      本文标题:Vue.nextTick()的介绍和使用场景

      本文链接:https://www.haomeiwen.com/subject/exiilhtx.html