vue of nextTick

todo 简介:

vue frame is very popular, he combines the advantages of the angular and react to form a two-way data binding mvvm frame has a lightweight characteristic approachable. I prefer to use it. When we vue, we often use a method is this. $ NextTick, I believe you have used. My favorite scene is when after performing data acquisition, the need for the next operation or other operations on the new view, found not obtain dom. Because the assignment completed only change the data model is not complete view updates. At this time we need to use the functions described in this chapter.

For example:

new new Vue ({ 
  EL: '#app' , 
  Data: { 
    List: [] 
  }, 
  Mounted: function () {
     the this .get () 
  }, 
  Methods: { 
    GET: function () {
       the this . http.get $ ( ' / API / Article This article was'). the then ( function (RES) {
         the this .list = res.data.data.list
         @ REF List references ul element, I want a first color to red li 
　　　　　
　　　　　　invalid // following method 
        the this . refs.list.getElementsByTagName $ ( 'Li') [0] .style.color = 'Red' }) // $ refs: ① Note
　　　　　
　　　　　　 // following method is effective 
　　　　　this $ nextTick (() => {.

　　　　　　this.$refs.list.getElementsByTagName('li')[0].style.color = 'red'})

　　　　　})

　　},
　}
})

After I get the data to be assigned to the data model attribute list, then I would like to quote ul li to find the first elements of its color turns red, but in fact, this should be an error, and we know that in the execution of this sentence when, ul below did not li, That assignment had just taken place, and did not cause the current update the view layer . Therefore, in this case, vue provides us with a $ nextTick method, if we want to view the next update operation, we just need to execute the function passed to this. $ NextTick method, vue will give us to do this work.

The code above shows both nextTick correct usage

When do I need with Vue.nextTick ()

1. You c Vue lifecycle reated () DOM function of operating the hook must be placed Vue.nextTick () callback function . What is it, the reason is created () function to execute when the DOM hooks in fact did not make any rendering , DOM operations and at this time is no different in vain, so be sure to js code here DOM operations into Vue. nextTick () callback function. Corresponding is mounted hook function , because the hook function is executed to mount all the DOM and rendering are complete , any DOM operation at this time will not matter in the hook function.

2. In an action to be performed after the data changes, and this operation requires the use of data changes with changing the DOM structure of the time, this operation should be put Vue.nextTick () callback function.

principle:

vue update dom is executed asynchronously, when listening to the data changes (use objeect.defineProperty) is open a queue (asynchronous update queue) , and in the same buffer all data changes that occur in the event loop .

For example, if you set vm.someData = 'new value', the component does not immediately re-rendered. When the refresh queue, the component will be an event loop "tick" in the next update. In most cases we do not need to care about this process, but if you want a state based on the updated DOM to do something, which might be a bit tricky. Although Vue.js usually encourages developers to use the "data-driven" way of thinking, to avoid direct contact with the DOM, but sometimes we have to do. In order to complete the update DOM Vue wait data after change, can be used immediately after the data change Vue.nextTick (callback). So the callback function will be called after the update is complete DOM

Source analysis:

 

 

 

 

 

 

Note ①:

1, Description: vm $ refs an object has been registered holders of all sub-components (or HTML elements) ref of;.

　　Use: HTML element, adding the ref attribute, and is acquired by vm $ refs properties in JS;.

　　Get: If the acquisition is a sub-assembly, the subassembly can be obtained and the methods by data REF;

2, add a ref attribute:

<div id="app">
    <h1 ref="h1Ele">这是H1</h1>
    <hello ref="ho"></hello>

    <button @click="getref">获取H1元素</button>
</div>

3, get all the components or attributes of registered ref

Methods: { 
    getRef () { 
      // represents from $ refs object, attribute value acquired ref: h1ele DOM element assembly or 
       the console.log ( the this . $ refs.h1Ele.innerText);
        the this . $ refs.h1ele.style. = Color 'Red'; // modified html form 

       the console.log ( the this $ refs.ho.msg.); // Get data component 
       the console.log ( the this $ refs.ho.test.); // get the component approach 
    } 
}