$nextTick的用法

以你之姓@ 2023-02-08 15:56 17阅读 0赞

## vm.$nextTick ##

*  参数： `{Function} [callback]`
 *  用法：将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新。它跟全局方法 `Vue.nextTick` 一样，不同的是回调的 `this` 自动绑定到调用它的实例上。  
    实例：

<template>
      <div>
        <p ref="msgp">{
       {msg}}</p>
        <button @click="change">$nextTick</button>
      </div>
    </template>
    
    <script> export default { name: 'nextTick', data() { return { msg: '未更新' } }, methods: { change() { // 修改数据 this.msg = '被更新了' // DOM还没有更新 console.log(this.$refs.msgp.innerHTML) this.$nextTick(() => { // DOM更新了 console.log('$nextTick:' + this.$refs.msgp.innerHTML) }) } }, created() { } } </script>

![在这里插入图片描述][20200724170158792.gif]

DOM 的更新是异步的，也就是在数据变化之后，DOM不会立即更新，而是进入队列，等同一时间循环中的所有数据变化完成之后，再统一进行视图更新。  
**结论：**  
vue 中的 DOM 更新是异步的  
`$nextTick()` 的应用场景

*  在vue的生命周期 `created()` 钩子函数中进行 dom 操作，一定要放在 `$nextTick()` 函数中执行。在 `created()` 钩子函数执行的时候 DOM 其实并未进行任何渲染，而此时进行 DOM 操作无异于徒劳，所以此处一定要将 DOM 操作的代码放进 `nextTick()` 的回调函数中。
 *  `mounted()` 钩子函数，因为该钩子函数执行时，所有的 DOM 挂载和 渲染都已完成，此时在该钩子函数中进行任何 DOM 操作都不会有问题
 *  在数据变化后要执行某个操作，而这个操作需要随数据改变而改变DOM结构时，这个操作都是需要放置 `$nextTick()` 的回调函数中。

[20200724170158792.gif]: /images/20230208/1852799ed12149b7b1b7edbc330f744a.png

发表评论取消回复

表情：

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

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

相关阅读

相关 $nextTick的用法

vm.$nextTick 参数： `{Function} [callback]` 用法：将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后

以你之姓@/ 2023年02月08日 15:56/ 0 赞/ 18 阅读

相关 vue $nextTick

> 概述： `this.$nextTick()` 将回调延迟到下次 DOM 更新循环之后执行。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到

Myth丶恋晨/ 2022年12月21日 04:42/ 0 赞/ 226 阅读

相关 Vue---$nextTick(() =＞ {})

$nextTick API： Dom更新完成后的钩子函数。使用场景举例：有一个div，默认用v-if将它隐藏，点击一个按钮后，改变v-if的值，让它

àì夳堔傛蜴生んèń/ 2022年12月14日 03:50/ 0 赞/ 216 阅读

相关 vue this.$nextTick()用法

1、Vue声明周期的created() 钩子函数进行的DOM操作一定要放在this.$nextTick() 的回调函数中，因为created() 执行的时候DOM实际上并未进行

柔情只为你懂/ 2022年12月01日 09:57/ 0 赞/ 36 阅读

相关 Vue.nextTick()

一、定义：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vu

秒速五厘米/ 2022年11月20日 09:35/ 0 赞/ 217 阅读

相关 vue中this.$nextTick()的用法

this.$nextTick 将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新。 this.$nextTick 跟全局方法 vue.nex

矫情吗；*/ 2022年11月04日 11:13/ 0 赞/ 243 阅读

相关 this.$nextTick()

在created()里使用this.$nextTick()可以等待dom生成以后再来获取dom对象 this.$nextTick(() => {

╰半夏微凉°/ 2022年09月05日 06:00/ 0 赞/ 120 阅读

相关 vue的$nextTick

使用了屏幕滚动插件better-scroll，发现没有生效，反复百度和调试，原来要在created加入$nextTick，在里面去监听执行如代码 ![Image 1]

た入场券/ 2022年06月16日 13:06/ 0 赞/ 242 阅读

相关 nextTick的用法

1.解释 [文档][Link 1]给的说明是：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。看着不是很懂

痛定思痛。/ 2022年04月04日 04:48/ 0 赞/ 93 阅读

相关理解 $nextTick 的作用,API 文档中的 Vue.nextTick 和 vm.$nextTick 的作用理解

有同学在看 Vue 官方文档时，对 API 文档中的 Vue.nextTick 和 vm.$nextTick 的作用不太理解。其实如果看一下[深入响应式原理 - vue.j

╰半橙微兮°/ 2022年01月22日 08:21/ 0 赞/ 367 阅读