vue中$nextTick()

野性酷女 2023-01-06 11:58 140阅读 0赞

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

mounted钩子函数，因为该钩子函数执行时所有的DOM挂载已完成。使用时机：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子函数，此时页面并未全部渲染。

实例：

html：

<div class="app">
      <div ref="msgDiv">{ { msg}}</div>
      <div v-if="msg1">Message got outside $nextTick: { { msg1}}</div>
      <div v-if="msg2">Message got inside $nextTick: { { msg2}}</div>
      <div v-if="msg3">Message got outside $nextTick: { { msg3}}</div>
      <button @click="changeMsg">
        Change the Message
      </button>
    </div>

js：

new Vue({ 
      el: '.app',
      data: { 
        msg: 'Hello Vue.',
        msg1: '',
        msg2: '',
        msg3: ''
      },
      methods: { 
        changeMsg() { 
          this.msg = "Hello world."
          this.msg1 = this.$refs.msgDiv.innerHTML
          this.$nextTick(() => { 
            this.msg2 = this.$refs.msgDiv.innerHTML
          })
          this.msg3 = this.$refs.msgDiv.innerHTML
        }
      }
    })

改变前：  
![在这里插入图片描述][2021011417041337.png_pic_center]  
改变后：  
![在这里插入图片描述][20210114170505129.png_pic_center]

[2021011417041337.png_pic_center]: /images/20221119/8797153e887149b5a0efa3cdb248cee2.png
[20210114170505129.png_pic_center]: /images/20221119/c4ab6c2eaa79490ca32da347dddbbe12.png

发表评论取消回复

表情：

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

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

相关阅读

相关 vue中的$nextTick

在下次DO更新循环结束之后执行延迟回调，在修改数据之后立即使用这个方法，获取更新后的DOM，vue在更新DOM时是异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行

女爷i/ 2023年01月19日 09:46/ 0 赞/ 147 阅读

相关 vue中$nextTick()

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

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

相关 vue $nextTick

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

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

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

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

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

相关 Vue中的$nextTick()

一、NextTick是什么官方对其的定义 > 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM 什么意思呢？ >

深藏阁楼爱情的钟/ 2022年12月02日 13:39/ 0 赞/ 165 阅读

相关 Vue.nextTick()

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

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

相关 Vue中的$nextTick

this.$nextTick 将回调延迟到下次DOM更新循环之后执行。 <template> <div ref="ref_test" @click="t

￡神魔★判官ぃ/ 2022年09月07日 15:59/ 0 赞/ 167 阅读

相关 vue nextTick

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

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

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

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

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

相关 vue - vue.$nextTick()

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

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