Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of how to use nexttic in vue, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this article on how to use nexttic in vue. Let's take a look at it.

In vue, nexttick () is used to defer the callback function to be called after the next DOM update; you can perform a deferred callback after the end of the next DOM update cycle, and use the updated DOM after modifying the data, with the syntax "Vue.nextTick ([callback,context])".

This article operating environment: windows10 system, Vue2.9.6 version, DELL G3 computer.

What is the use of nexttick in vue

Definition: performs a deferred callback after the end of the next DOM update cycle. Use this method immediately after modifying the data to get the updated DOM.

So the Vue method to get the updated DOM is derived. So what is put in the Vue.nextTick () callback function should be the js code that will operate on the DOM.

Understanding: nextTick () defers the callback function to be called after the next dom update. The simple understanding is: when the data is updated and rendered in dom, the function is executed automatically.

{{testMsg}} export default {name: 'HelloWorld', data () {return {testMsg: "original value",}}, methods: {testClick:function () {let that=this; that.testMsg= "modified value"; console.log (that.$refs.aa.innerText); / / that.$refs.aa get the specified DOM, output: original value}

Use this.$nextTick ()

Methods: {testClick:function () {let that=this; that.testMsg= "modified value"; that.$nextTick (function () {console.log (that.$refs.aa.innerText); / / output: modified value});}}

Note: Vue implementation responsiveness does not mean that the DOM changes immediately after the data changes, but updates the DOM according to a certain strategy. $nextTick performs a deferred callback after the end of the next DOM update cycle. If you use $nextTick after modifying the data, you can get the updated DOM in the callback.

When do I need Vue.nextTick ()?

1. 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.

Created () {let that=this; that.$nextTick (function () {/ / error that.$ refs.aa [XSS _ clean] = "button content 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: after changing the data, you need to use it immediately when you want to use js to manipulate the new view.

{{testMsg}} export default {name: 'HelloWorld', data () {return {testMsg: "original value",}}, methods: {changeTxt:function () {let that=this; that.testMsg= "modified text value"; / / vue data change, change dom structure let domTxt=document.getElementById (' h'). InnerText; / / subsequent js operation on dom console.log (domTxt) / / output shows that DOM is not updated immediately after vue data modification, and subsequent dom is not the latest 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");},}}

The correct usage is: vue changes the structure of dom elements and uses the vue.$nextTick () method to delay the execution of subsequent code after dom data updates.

ChangeTxt:function () {let that=this; that.testMsg= "modified text value"; / / modify dom structure that.$nextTick (function () {/ / use the vue.$nextTick () method to delay the execution of let domTxt=document.getElementById ('h') .innerText; console.log (domTxt) after dom data update / / output can see that vue data is not updated immediately after DOM 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 generated by vue changes dynamically, and you will also use this method. In this case, you need to execute the method of reapplying the plug-in in the callback function of $nextTick.

The principle of using Vue.nextTick (callback):

The reason is that Vue performs dom updates asynchronously, and once a data change is observed, Vue opens a queue and then 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.

This is the end of the article on "how to use nexttic in vue". Thank you for reading! I believe you all have a certain understanding of the knowledge of "how to use nexttic in vue". 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.