What is the $nextTick

Here’s what the official document says about the old rules:

  • parameter:
    • {Function} [callback]
    • {Object} [context]
  • Usage:

A deferred callback is performed after the next DOM update loop ends. Use this method immediately after modifying the data to get the updated DOM.

use

Let’s start with some common scenarios:

  1. Suppose we modify data in the Dom and want to retrieve the data immediately. The following code
<div id="demo" @click="getText($event)">{{text}}</div>
<script>
 new Vue({
  el:'#demo'.data: {text:'Data before modification'
  },
  methods: {getText(event){
      this.text='Modified data'
      console.log(event.target.innerText)
    }
  }
})
</script>
Copy the code

In the code provided above, when we clickdiv, the method is called to changedivInternal value, and now we want to print thisdivWhat’s going to be the value inside?

$nextTick = $nextTick = $nextTick = $nextTick

<div id="demo" @click="getText($event)">{{text}}</div>
<script>
  new Vue({
    el:'#demo'.data: {text:'Data before modification'
    },
    methods: {getText(event){
        this.text='Modified data'
        this.$nextTick(function(){
          console.log(event.target.innerText)
        })

      }
    }
  })
 </script>
Copy the code

Here we put the output in$nextTickThis guarantees that the output will be called after the DOM is updated. What should the output be?

That’s when our needs are met.

  1. When we want the Vue life cyclecreated()DOM operations performed by hook functions must be placed in$nextTick()In the callback function, because increated()The DOM hasn’t even started rendering yet, so any manipulation of it is futile$nextTick()The DOM structure is guaranteed to exist when the operation is executed

A problem encountered in actual combat

The requirement I want to implement is something like this: select a value in the parent component’s drop-down box and pass it to the child component via props. It also fires the child component’s function to get this value as an argument to some interface, as follows:

<div id="blog-post-demo" class="demo">
  <select  v-model="fatherTitle" @change="change">
    <option :value="post" v-for="post in posts" :key="post">{{post}}</option>
  </select>
  <blog-post :title="fatherTitle" ref="child"></blog-post>
</div>
<script>
  Vue.component("blog-post", {
    props: ["title"].template: "<h3>{{ title }}</h3>".methods: {getResult(){
        console.log(this.title)
      }
    }
  });
  new Vue({
    el: "#blog-post-demo".data: {
      posts: [1.2.3].fatherTitle:' '
    },
    methods: {change(){
        this.$refs.child.getResult()
      }
    }
  });
</script>
Copy the code

I printed this value first, but there is a strange situation, each time the value is the last selected option, for example, the first time is undefined, the second time is the first selected value. After a long change, we finally used the $nextTick mentioned above to solve the problem, and modified the change method as follows:

change(){
  this.$nextTick(function(){
    this.$refs.child.getResult()
  })   
}
Copy the code

In this way, we can accurately obtain the results of each selection, but I still feel that it is not solved to the point, if there is a big guy to see, can help me to solve the puzzle, thank you!