Talk about nextTick in Vue

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

<<:  Analysis and solution of abnormal problem of loading jar in tomcat

>>:  Install MySQL database 5.6 source code under Linux and change the login user password

Recommend

HTML (css style specification) must read

CSS style specifications 1. Class Selector 2. Tag...

MySQL 5.7.23 installation and configuration graphic tutorial

This article records the detailed installation pr...

Vue ElementUI implements asynchronous loading tree

This article example shares the specific code of ...

MySQL 5.6.22 installation and configuration method graphic tutorial

This tutorial shares the specific code of MySQL5....

Tomcat8 uses cronolog to split Catalina.Out logs

background If the catalina.out log file generated...

6 solutions to IDEA's inability to connect to the MySQL database

This article mainly introduces 6 solutions to the...

Detailed explanation of MySQL 30 military rules

1. Basic Specifications (1) InnoDB storage engine...

Dynamically edit data in Layui table row

Table of contents Preface Style Function Descript...

Manually implement the two-way data binding principle of Vue2.0

In one sentence: Data hijacking (Object.definePro...

How to make CSS child elements highly consistent with parent elements

Absolute positioning method: (1) Set the parent e...

How to block IP and IP range in Nginx

Written in front Nginx is not just a reverse prox...