Talk about nextTick in Vue

When the data changes, the DOM view is not updated immediately. If we try to get a node or its value immediately after the change, the result is likely to be undefined. This is because Vue implements responsiveness not because the DOM changes immediately after the data changes, but because it updates the DOM according to a certain strategy.

Let’s take a look at a small demo:

App.vue

<template>
  <div id="app">
        <div ref="message">{{msg}}</div>
        <div v-if="msg1">{{msg1}}</div>
        <button @click="changeMsg">Change the Message</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      msg:"Hello Vue",
      msg1: '',
    }
  },
  methods:{
    changeMsg(){
      this.msg = 'hello world';
      this.msg1=this.$refs.message.innerHTML;
       console.log("Before updating DOM: "+this.msg1)
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

By running the code, we can see that when we do not perform DOM operations in the this.$nextTick method, the value of this.$refs.message.innerHTML still stores the previous initial value;

Modify the code:

App.vue

<template>
  <div id="app">
        <div ref="message">{{msg}}</div>
        <div v-if="msg1">{{msg1}}</div>
        <button @click="changeMsg">Change the Message</button>
  </div>
</template>

<script>
export default {
  name: 'App',  
  data(){
    return {
      msg:"Hello Vue",
      msg1: '',
    }
  },
  methods:{
    changeMsg(){
      this.msg = 'hello world';
      // this.msg1=this.$refs.message.innerHTML;
      // console.log("Before updating DOM: "+this.msg1)
        this.$nextTick(()=>{
          this.msg1=this.$refs.message.innerHTML;
          console.log("After updating DOM: "+this.msg1)
        })
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

After modifying the code, we can find that it is easy to receive the updated value using this.$nextTick, just as the official website explains: the delayed callback is executed after the next DOM update cycle ends. Use this method immediately after modifying the data to get the updated DOM;

Let's modify the code and compare it:

App.vue

<template>
  <div id="app">
        <div ref="message">{{msg}}</div>
        <div v-if="msg1">{{msg1}}</div>
        <button @click="changeMsg">Change the Message</button>
  </div>
</template>

<script>
export default {
  name: 'App',  
  data(){
    return {
      msg:"Hello Vue",
      msg1: '',
    }
  },
  methods:{
    changeMsg(){
      this.msg = 'hello world';
      this.msg1=this.$refs.message.innerHTML;
       console.log("Before updating DOM: "+this.msg1)
        this.$nextTick(()=>{
          this.msg1=this.$refs.message.innerHTML;
          console.log("After updating DOM: "+this.msg1)
        })
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

After modifying the code, we can now easily see the role of this.$nextTick(callback). callback is the callback function, which is what we want to do to operate the DOM;

Application scenarios:

When performing DOM operations in the created() lifecycle hook function of Vue, be sure to put the DOM operations into this.$nextTick();
Because when the create hook function is triggered, the DOM is not rendered; if the DOM is not rendered, then DOM operations are undoubtedly futile;
Therefore, when we perform DOM operations in create, we must put the DOM operations into this.$nextTick();
The opposite is mounted, because when mounted is triggered, the DOM mounting and rendering have been completed, so there will be no problem in performing DOM operations in mounted;

Because DOM updates are asynchronous, like the v-if directive determines the addition and deletion of DOM elements, when we assign values to variables in the method, if we do not use this.$nextTick(), we are likely to get the initial value. If we want to get the updated value, we need to use the this.$nextTick() method.

The above is the detailed content of nextTick in Vue. For more information about Vue, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:

Analysis of the principle of Vue nextTick
The role of nextTick in Vue and several simple usage scenarios
A brief analysis of nextTick in vue
A comprehensive analysis of $nextTick in Vue
VUE updates DOM asynchronously - using $nextTick to solve DOM view problems
Vue.js principle analysis: detailed explanation of nextTick implementation
Function and usage of this.$nextTick in Vue
Detailed explanation of the usage of $nextTick and $forceUpdate in Vue
In-depth study of the usage and principles of Vue nextTick
NextTick usage example in Vue
Vue source code nextTick usage and principle analysis
Learn about nextTick in Vue in one article
Implementation of browser event loop and vue nextTicket
Explanation of the usage of $nextTick in Vue
Understand the use of nextTick in vue from the source code
Vue2.0$nextTick listens for the callback function method after data rendering is completed
Detailed explanation of the differences between vue directives and $nextTick in manipulating DOM
In-depth understanding of Vue nextTick mechanism