vue理解$nextTick

Posted ArcheWong

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue理解$nextTick相关的知识,希望对你有一定的参考价值。

首先要明确:

  1. Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新。

  2. $nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM

实例

<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>

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
    }
  }
})


//结果
Message got outside $nextTick:Hello Vue.
Message got inside $nextTick:Hello world.
Message got outside $nextTick: Hello Vue.

参考

理解 $nextTick 的作用

以上是关于vue理解$nextTick的主要内容,如果未能解决你的问题,请参考以下文章

Vue.nextTick(callback)

Vue.nextTick(callback)

Vue系列---理解Vue.nextTick使用及源码分析

vue.nextTick()方法的使用详解

vue生命周期(lifecycle)以及对nextTick的理解

Vue nextTick 理解