What is Vue.nextTick()? ?
Definition: Execute a delayed callback after the next DOM update cycle. Use this method immediately after modifying the data to get the updated DOM.
So this Vue method to get the updated DOM was derived. Therefore, the execution placed in the Vue.nextTick() callback function should be the js code that operates on the DOM;
Understanding: nextTick() is to delay the call of the callback function after the next dom updates the data. The simple understanding is: when the data is updated and rendered in the dom, the function is automatically executed.
<template>
<div class="hello">
<div>
<button id="firstBtn" @click="testClick()" ref="aa">{
{testMsg}}</button>
</div>
</div>
</template>
<script>
export default { name: 'HelloWorld', data () { return { testMsg:"原始值", } }, methods:{ testClick:function(){ let that=this; that.testMsg="修改后的值"; console.log(that.$refs.aa.innerText); //that.$refs.aa Gets the specified DOM, output: original value Use this.$nextTick()</script>} } }
methods:{ testClick:function(){ let that=this; that.testMsg="Modified value"; that.$nextTick(function(){ console.log(that.$refs.aa.innerText); // Output: modified value }); } } Note: Vue's implementation of responsiveness is not to change the DOM immediately after the data changes, but to update the DOM according to a certain strategy. $nextTick is to execute a delayed callback after the next DOM update cycle ends, use $nextTick after modifying data, you can get the updated DOM in the callback,
When do you need to use Vue.nextTick()? ?
1. The DOM operation performed by the created() hook function of the Vue life cycle must be placed in the callback function of Vue.nextTick(), because the DOM does not actually perform any rendering when the created() hook function is executed, and this Performing DOM operations at this time is tantamount to futile, so here you must put the js code for DOM operations into the callback function of Vue.nextTick(). Corresponding to this is the mounted hook function, because all DOM mounting has been completed when this hook function is executed.
created(){ let that=this; that.$nextTick(function(){ //If you don't use this.$nextTick() method, you will report an error that.$refs.aa.innerHTML="The button content has been changed in created"; / /Write to DOM element }); },
2. When you want to do something based on the new dom after changing the data of the DOM element in the project, a series of js operations on the new DOM need to be put into the callback function of Vue.nextTick(); the popular understanding is: change You need to use it when you want to use js to operate a new view immediately after the data
<template>
<div class="hello">
<h3 id="h">{
{testMsg}}</h3>
</div>
</template>
<script>
export default { name: 'HelloWorld', data ( ) { return { testMsg:"Original value", } }, methods:{ changeTxt:function(){ let that=this; that.testMsg="modified text value"; //vue data changes, change dom structure let domTxt=document.getElementById('h').innerText; //Subsequent js operations on dom console.log(domTxt); //The output shows that the DOM is not updated immediately after the vue data is modified, and the subsequent dom is not up to date if (domTxt==="original value"){ console.log("The DOM content was not updated immediately after the text data was modified"); }else {
console.log("The dom content was updated immediately after the text data was modified");
}
},
}
}
</script>
The correct usage is: after vue changes the dom element structure, use the vue.$nextTick() method to delay the execution of subsequent code after the dom data is updated.
changeTxt:function(){ let that=this; that.testMsg="Modified text value"; //Modify the dom structure that.$nextTick(function(){ //Use the vue.$nextTick() method to change the dom data Delayed execution after update let domTxt=document.getElementById('h').innerText; console.log(domTxt); //The output can see that the DOM is not updated immediately after the vue data is modified, if(domTxt==="Original Value"){ console.log("Dom content is not updated immediately after text data is modified"); }else { console.log("Dom content is updated immediately after text data is modified"); } }); },
3. When using a third-party plug-in, you want to reapply the plug-in when some dom dynamics generated by vue change, and this method will also be used. At this time, you need to execute the re-apply plug-in in the callback function of $nextTick Methods.
To be improved? ? ?
Vue.nextTick(callback) usage principle:
The reason is that Vue performs dom update asynchronously. Once data changes are observed, Vue will open a queue, and then put the data changes observed in the same event loop (event loop) watcher pushes into this queue. If this watcher is triggered multiple times, it will only be pushed to the queue once. This buffering behavior can effectively eliminate unnecessary calculations and DOm operations caused by duplicate data. In the next event loop, Vue will clear the queue and perform the necessary DOM updates.
When you set vm.someData = 'new value', the DOM will not be updated immediately, but the necessary DOM update will be performed when the asynchronous queue is cleared, that is, when the update is performed at the beginning of the next event loop. Problems arise if you want to do something based on the updated DOM state at this point. . In order to wait for Vue to finish updating the DOM after the data changes, you can use Vue.nextTick(callback) immediately after the data changes. This callback function will be called after the DOM update is completed.