Shulou(Shulou.com)05/31 Report--

This article mainly introduces what vue.nextTick () is and how to use the relevant knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that everyone after reading this vue.nextTick () is what and how to use the article will have a harvest, let's take a look.

Concept

Perform a deferred callback after the end of the next DOM update cycle, and use this method immediately after modifying the data to get the updated DOM

Simple understanding:

In order to solve the problem that the data is updated but the view is not updated, when the data is updated, the function is automatically executed after DOM rendering.

Principle

Vue performs dom updates asynchronously, and once a data change is observed, Vue opens a queue and pushes the watcher that observed the data change in the same event loop (event loop) into this queue. If the watcher is triggered multiple times, it will only be pushed to the queue once. This buffering behavior can effectively remove unnecessary calculations and DOm operations caused by duplicate data. On the next event loop, Vue empties the queue and makes the necessary DOM updates.

When you set vm.someData = 'new value',DOM, the necessary DOM updates are not made immediately, but when the asynchronous queue is cleared, that is, when the next event loop begins. If you want to do something based on the updated DOM status at this time, there will be a problem. To wait for Vue to finish updating the DOM after the data changes, you can use Vue.nextTick (callback) immediately after the data changes. In this way, the callback function is called after the DOM update is complete.

For example, {{message}} export default {data () {return {message:' this is the original value'}}, methods: {handleBtn:function () {let that=this that.message=' modified value 'console.log (that.$refs.btn.innerText); / / the output here is the original value}

Through the example, you can see that the final output value is still the original value, so let's see what happens with this.$nextTick ().

{{message}} export default {data () {return {message:' this is the original value'}}, methods: {handleBtn:function () {let that=this that.message=' modified value 'this.$nextTick (function () {console.log (that.$refs.btn.innerText); / / output here is the modified value})}

Through this example, you can clearly see the role of this.$nextTick ().

Note:

The response of the vue implementation is not that the DOM changes immediately after the data changes. Instead, update the DOM according to a certain strategy. After using this.$nextTick (), you can get the updated DOM in his callback.

When should I use vue.$nextTick ()?

The DOM operation performed by the created () hook function of the Vue lifecycle must be placed in the callback function of Vue.nextTick (), because DOM does not render anything when the created () hook function is executed, and the DOM operation is futile at this time, so you must put the js code of the DOM operation into the callback function of Vue.nextTick (). The counterpart is the mounted hook function, because all DOM mounts are completed when the hook function is executed.

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: after changing the data, you need to use it when you want to use js to manipulate the new view immediately.

{{message}} Test export default {data () {return {message: "this is the original value",};}, methods: {changeText () {let that = this; this.message = "this is the modified value"; that.$nextTick (function () {let txt=document.getElementById ('btn'). InnerText console.log (txt); txt===' this is the original value'? Console.log ('the value of DOM is not updated immediately when the value of data changes'): console.log ('the value of DOM is updated immediately when the value of data changes')},}},},}; this is the end of the article on "what is vue.nextTick () and how to use it?" Thank you for reading! I believe you all have a certain understanding of the knowledge of "what is vue.nextTick () and how to use it". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.