vue use in nextTick

Recent vue of vm. $ NextTick usage more, and now sort out its use.

　 The official document like this: callback delayed until after the next execution DOM rendering. Use it immediately after modifying the data, and then wait for DOM updates. It and global methods Vue.nextTick the same, except that the callback this instance it is automatically bound to the application

　　The above words also can be understood, we need to be put in some way after rendering DOM elements created out on the life cycle, but it needs vm. $ NextTick () callback function is executed

　　Or the second usage that is, we update the data, vm. $ NextTick this function, use the DOM while waiting for updates.

　　In fact, the project is to use the most commonly used in the assembly vm. $ NextTick method, and the callback function of this, it will be automatically bound to the current instance vue

　　For example:　

// official website Case 
Vue.component ( 'Example' , {
  template: '<span>{{ message }}</span>',
  data: function () {
    return {
      Message: 'non-updated'
    }
  },
  methods: {
    updateMessage() {
      the this .message = 'updated' 
      the console.log ( the this . $ el.textContent) // => 'non-updated' 
      the this . $ nextTick (() => {
        the console.log ( the this . $ el.textContent) // => 'updated' 
      })
    }
  }
})

Official to the case above, we can also be written as follows: By using the syntax completion ES7 in async / await, so the back of the output value is updated

methods: {
  updateMessage: async function () {
    this.message = '已更新'
    console.log(this.$el.textContent) // => '未更新'
    await this.$nextTick()
    the console.log ( the this . $ el.textContent) // => 'updated' 
  }
}

For example I project in my writing habit

<script>
    export default{
        name:'demo',
        data(){
           return {
    
           }
        },
        created(){
             this.getAjaxData()
             this.$nextTick(()=>{
                  this.getDomEl()
             })
        },
       methods:{
           getAjaxData () {
                 // get background data 
           },
           getDomEl(){
            // need to obtain the function performed DOM elements; 
            // or mounted on the function performed
           }
       }
    }

</script>

Official website Documentation: Note mounted not promise all of the sub-components also are mounted together. If you want to wait until the entire view rendering is complete, you can use vm. $ NextTick replaced mounted

In depth look at the content of this principle responsive

Guess you like