Detailed Usage of $ NEXTTICK and $ ForceUpdate in Vue


VM. $ NEXTTICK ([Callback])
   This is executed after the callback is delayed to the next DOM update loop, and use it immediately after modifying the data, then wait for the DOM update. It is the same as global approach Vue.nexTick, and the difference is that the callback THIS automatically binds to the instance called it. 
Application Scene:


1, the DOM operation in the Created () hook function in the Vue life cycle must be placed in the callback function of the Vue.NextTick () .

2, because the DOM does not perform any rendering when the Created () hook function is executed, and the DOM operation is not spread, so it must be


DOM operation JS The code is placed in the callback function of the Vue.NextTick (). The correspondence is the moused () hook function, because all DOM mount and rendering are completed when the hook function is executed, and there will be no problem with any DOM operation in the hook function.


Action to be executed after the data changes, and this operation requires the DOM structure that changes with data changes, this operation should be put into the callback function of Vue.nexTick (). middle.



  Hello World ~    Click   
New Vue ({EL: '#App', methods: {get () {console.log (0);}}, mounted () {Console.log (333) Console.log (this. $ REFS ['Hello']); this. $ nextTICK (() => {console.log (444); console.log (this. $ REFS ['Hello']);}) }, created () {Console.log (111); console.log (this. $ REFS ['Hello']); this. $ nexttick (() => {console.log (222); console.log THIS. $ REFS ['Hello']);});}})

can be seen in the order of printing When the created () hook function is executed, the DOM does not perform any rendering, and the DOM operation is not performed at this time, and in created () uses this. $ Nexttick () can wait for the DOM to get DOM Object.
{{Value}}
Click

详解vue中$nextTick和$forceUpdate的用法

New Vue ({EL: ‘#App’, Data () {Return {Value: ‘Hello World ~’};}, methods: {get () {this.value = ‘Hello’; console.log (this. $ REFS [‘Hello’]. InnerText); this. $ nexttick (() => {console.log (this. $ REFS [‘Hello’]. InnerText);});}}, mounted () {}, created () {}})
   THIS. $ nextTICK () interacts on the page, especially from There is a great advantage after resending data after data acquisition data.   2, this. $ Forcept ()   Forced the Vue instance to render the virtual DOM, pay attention is not to reload the components. Combined with the Vue lifecycle, only two hook functions of BeforeUpdate and Updated will only trigger other hook functions. It only affects the subcomponents of the instance itself and inserts the slot content, not all subcomponents;  
Apply Scenario: When there is no display in Data, the property of an object is not displayed, but it gives it Object Add attribute, this case, VUE is not detected, you can use $ forceUpdate ()

HTML: {{EgData.Value }} Change ------------------------------- JS: Data () {Return {EGDATA: {}}} -------------- ----------------- Methods: {this.egdata.value = 'OldValue' this. $ forceUpdate () // DOM will update}}
But this approach is not recommended, and the official says if your current scene needs to use ForceUpdate method, then 99% is your operation, such as the properties of the declaration object, as Data , Use the VM. $ Set () method when it is added when adding attributes, so ForceUpdate please use it.

详解vue中$nextTick和$forceUpdate的用法

The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Clouds.

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment