Vue.nextTick的理解

末蓝、 2022-05-23 01:06 170阅读 0赞

## 官方解释： ##

Vue.nextTick( \[callback, context\] )

**参数**：

*  \{Function\} \[callback\]
 *  \{Object\} \[context\]

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

// 修改数据
    vm.msg = 'Hello'
    // DOM 还没有更新
    Vue.nextTick(function () { 
      // DOM 更新了
    })
    
    // 作为一个 Promise 使用 (2.1.0 起新增，详见接下来的提示)
    Vue.nextTick().then(function () { 
        // DOM 更新了
      })

> 2.1.0 起新增：如果没有提供回调且在支持 Promise 的环境中，则返回一个 Promise。请注意 Vue 不自带 Promise 的 polyfill，所以如果你的目标浏览器不原生支持 Promise (IE：你们都看我干嘛)，你得自己提供 polyfill。

## 个人理解： ##

从官方解释来看：Vue.nextTick(callback)是用于数据更新后操作更新后的dom，dom操作在callback回调函数中进行。

某些情况下我们确实需要操作dom，譬如页面中需要实现一个幻灯片效果，获取幻灯片数据(slideData)后，需要操作dom来实现交互。那么获取slideData后，何时完成dom更新呢，我们需要等待dom更新后再加交互。这里就有了Vue.nextTick(callback)的用武之地。

使用Vue.nextTick(callback)，我们无需关心dom何时更新，Vue.nextTick(callback)中回调函数执行时，dom已经更新完，我们可以直接在callback回调中操作dom。

> 参考网址：[https://cn.vuejs.org/v2/api/\#Vue-nextTick][https_cn.vuejs.org_v2_api_Vue-nextTick]

[https_cn.vuejs.org_v2_api_Vue-nextTick]: https://cn.vuejs.org/v2/api/#Vue-nextTick

发表评论取消回复

表情：

评论列表（有 0 条评论，170人围观）

还没有评论，来说两句吧...

相关阅读

相关 arguments的理解?

arguments是一个内置对象，伪数组，看似数组但是不能用数组的方法 function fun(){ console.log(arguments)

╰半橙微兮°/ 2022年12月28日 11:12/ 0 赞/ 156 阅读

相关深度理解笔记_对深度理解的理解

是什么？当前深度理解的东西是什么？可不可以不依赖任何资料将其用自己的话进行转述？并且可以让没有学习过这个概念的人一下子就弄明白为什么？为什么要发明创造这

╰半橙微兮°/ 2022年11月10日 01:24/ 0 赞/ 162 阅读

相关 domain的理解

domain一般包括entity、dto、enums 实体entity：和数据库字段一一对应的类数据传输对象dto：比如登录时的确认密码字段，实际数据库没有这个字段

忘是亡心i/ 2022年10月09日 03:29/ 0 赞/ 130 阅读

相关宏的理解

转载地址： http://zhidao.baidu.com/link?url=Sjofy5T61LPtTGsVpvl5kjfYEja5J8UIpZMMKnBJqz74N

痛定思痛。/ 2022年08月05日 05:09/ 0 赞/ 138 阅读

相关 AJAX的理解

1.AJAX的含义：用Javascript异步形式操作XML 2.AJAX的作用：在无需重新加载整个网页的情况下，能够更新部分网页，传统的网页（不使用 AJAX

深碍√TFBOYSˉ_/ 2022年05月23日 10:11/ 0 赞/ 147 阅读

相关 volatile的理解

一、如何理解呢？ volatile可理解为防止编译器优化，保持内存可见性；即确保本条指令不会因编译器的优化而省略，且要求每次直接读值。相当于假设我程序中有一个变量被reg

落日映苍穹つ/ 2022年04月12日 03:19/ 0 赞/ 208 阅读

相关 VisualVm的理解

VisualVM有四个区域１.内存堆,堆就是放对象的，我们可以点堆Dump，通过分析ump结果，看有哪些对象是非常占内存的。遇到内存问题，最好是希望能够直观的看到Jav

骑猪看日落/ 2022年04月11日 12:06/ 0 赞/ 197 阅读

相关 servlet的理解

servlet是什么。 Servlet是Java编写的服务器端程序。而这些Servlet都要实现Servlet这个接口。其主要的功能在于交互式地浏览和修改数据生成动态

分手后的思念是犯贱/ 2022年02月15日 00:25/ 0 赞/ 416 阅读

相关 vuex的理解

vuex核心概念： 1.state :类似类中的变量，但其改变时，会触发更新相关dom。 2.Getter :类似类中的方法，值改变时自动改变。

不念不忘少年蓝@/ 2021年12月11日 02:27/ 0 赞/ 268 阅读

相关对../的理解

1、之前看layui快速上手的引入css及js不是很理解 <link rel="stylesheet" href="../layui/css/layui.css">

末蓝、/ 2021年09月28日 20:52/ 0 赞/ 396 阅读