The role of nextTick in Vue and several simple usage scenarios

Purpose

Understand the role of nextTick and several simple usage scenarios

text

What is its function?

The deferred callback is executed after the next DOM update cycle is complete. Use this method immediately after modifying data to get the updated DOM.

I think everyone knows or understands the rendering process of Vue. Vue will re-render after monitoring data changes, and cooperate with VDOM to update the real DOM. The triggering time of nextTick is after the first re-rendering after the method is called.

How to use?

There are two ways to use it, one is to pass in a callback, and the other is Promise. The official usage examples are as follows:

// Modify data vm.msg = 'Hello'
// DOM has not been updated yet Vue.nextTick(function () {
 // DOM updated})

// Use as a Promise (new since 2.1.0, see the following tips for details)
Vue.nextTick()
 .then(function () {
 // DOM updated})

If it is in SPA (single file component), it may look like this

<template>
 <div id="test">{{msg}}</div>
</template>

<script>
export default {
 name: 'app',
 data() {
 return {
  "msg": "Hello World!"
 }
 },
 method() {
 this.msg = "Hi World!";
 this.$nextTick(() => {
  console.log('DOM updated:', document.getElementById('test').innerHTML)
 });
 }
}
</script>

What are the usage scenarios?

Some methods need to wait for rendering to complete before executing

Initialize binding or manipulate DOM

For example, in the created and mounted callbacks, if you need to operate the rendered DOM, you need to execute the relevant logic in nextTick. This is very useful when you have to use some old libraries that need to bind to the DOM.

For example, when loading UEditor, you might play like this

<template>
<script id="container" name="content" type="text/plain"> Write your initialization content here</script>
</template>
<script>
export default {
 mounted() {
  this.nextTick(() => {
   var ue = UE.getEditor('container');
  });
 }
}

Get element width

There are two ways to get element width in Vue. The first is through $refs[ref名稱].style.width , and the second is to use the traditional DOM operation method to get it. However, to get the accurate element width, both of them need to be executed after DOM rendering is completed.

<template>
<p ref="myWidth" v-if="showMe">{{ message }}</p> <button @click="getMyWidth">Get the width of the p element</button>
</template>
<script>
export default {
 data() {
 return {
  message: "Hello world!",
  showMe: false,
 },
 methods: {
  getMyWidth() {
  this.showMe = true;
  //this.message = this.refs.myWidth.offsetWidth; //TypeError: this.refs.myWidth is undefined 
  this.nextTick(()=>{
  //Execute after the DOM element is updated, and the attributes of the p element can be obtained this.message = this.refs.myWidth.offsetWidth; })
  }
 }
 }
}
</script>

Summarize

Although Vue's design philosophy does not recommend that we manipulate the DOM directly, some particularly confusing problems arise in some scenarios. After understanding Vue's rendering logic, using nextTick() can solve them.

The above is the details of how to use nextTick in Vue. For more information about using nextTick in vue, please pay attention to other related articles on 123WORDPRESS.COM!