vue $nextTick

Myth丶恋晨 2022-12-21 04:42 187阅读 0赞

> **概述：** `this.$nextTick()` 将回调延迟到下次 DOM 更新循环之后执行。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。  
> **使用场景：** 修改模型data中的数据后，需要在视图中获取该依赖，为了正确获取到更新后的内容，需要使用 `this.$nextTick()` 等待下次DOM更新后才能获取正确的值。

1.  初始化vue实例时，在mounted阶段后，也就是挂载DOM后才会执行第一个`nextTick`的回调
    
        { 
          ...
          created(){ 
            console.log('created', this.$refs.test);
            this.$nextTick(()=>{ 
              console.log('created nextTick', this.$refs.test);
            })
          },
          mounted(){ 
            console.log('mounted', this.$refs.test);
            this.$nextTick(()=>{ 
              console.log('mounted nextTick', this.$refs.test);
            })
          },
        }
        /* created undefined mounted <div data-v-469af010 id="test">init</div> created nextTick <div data-v-469af010 id="test">init</div> mounted nextTick <div data-v-469af010 id="test">init</div> */
2.  更新模型数据后，正确获取视图更新后的值
    
        <template>
          <div class="hello">
            <button @click="test">测试</button>
            <div ref="test" id='test'>{ { value}}</div>
          </div>
        </template>
        data(){ 
          return { 
            value: 'init'
          }
        }
        test(){ 
          this.value = 'new';
          console.log('test', this.$refs.test.innerText);
          this.$nextTick(()=>{ 
            console.log('test nextTick', this.$refs.test.innerText);
          })
        }
        /* test init (可以看到直接输出时视图其实还未变化，需使用this.$nextTick等待DOM更新) test nextTict new */

发表评论取消回复

表情：

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

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

相关阅读

相关 vue中$nextTick()

在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中，原因是在created()钩子函数执行的时候DOM 其实并未进行

野性酷女/ 2023年01月06日 11:58/ 0 赞/ 186 阅读

相关 vue $nextTick

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

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

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

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

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

相关 Vue.nextTick()

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

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

相关 vue之nextTick

nextTick的用法：在修改数据之后立即使用这个方法，获取更新后的 DOM。应用场景：需要在视图更新之后，基于新的视图进行操作。参考链接：[https://se

偏执的太偏执、/ 2022年11月15日 11:35/ 0 赞/ 152 阅读

相关 vue的$nextTick

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

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

相关 vue nextTick

当前界面渲染完后再执行 this.$nextTick(() => \{\}); (eg：打印打印界面不显示打印按钮当打印按钮为buttion = fals

ゞ浴缸里的玫瑰/ 2022年03月19日 14:49/ 0 赞/ 245 阅读

相关 Vue.nextTick() 和Vue.nextTick() 使用案例

在下次DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。虽然 vue.js 通常鼓励开发人员用数据驱动的方式思考，避免直接接

àì夳堔傛蜴生んèń/ 2022年01月19日 21:13/ 0 赞/ 570 阅读

相关 vue - vue.$nextTick()

前言下面了解下nextTick的主要应用的场景及原因。在Vue生命周期的`created()`钩子函数进行的DOM操作，一定要放在`Vue.nex

心已赠人/ 2021年09月20日 13:36/ 0 赞/ 393 阅读

相关 Vue.js--$nextTick

$nextTick 假设如下场景：有一个div，默认用v-if将它隐藏，点击一个按钮后，改变v-if的值，让它显示出来，同时拿到这个div的文本内容。如果v-if的值是f

￡神魔★判官ぃ/ 2021年08月13日 11:51/ 0 赞/ 368 阅读