Detailed explanation of using refs to locate dom in vue and undefined appears

I have always felt that it is very convenient to use ref to locate dom nodes. But I encountered a problem during the period, that is, when this.$refs.xxx is used in the mounted(){} hook, what is printed is undefined?

So I compared the .vue files that were previously positioned using ref and found the difference between them. This article mainly introduces the solution to the problem of using refs to locate undefined in DOM in Vue. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

If we want to know why a certain DOM node cannot be located, we must first understand what the mounted(){} hook function is used for.

The following is the vue life cycle (part) given by vue official. As the official said, you don’t need to understand it at the beginning, but as you learn and use it, its reference value will become more and more high.

It turns out that in the mounted stage, the DOM structure is ready, but the readiness here needs special explanation:

The DOM structure has come out, but if If a certain DOM node in the DOM structure uses v-if, v-show or v-for (that is, dynamically operating the DOM based on the obtained background data, that is, responsive), then these DOMs will not be found in the mounted stage.

The mounted stage at this time is generally used to initiate back-end requests, get back data, and do something with the routing hook. To put it simply, it is just loading data in the mounted hook. The loaded data is not

will be updated in the DOM at this stage, so if $refs is used in the mounted hook, if the ref is located in a DOM node with v-if, v-for, v-show, it will be returned They can only be undefined, because they do not exist at all in the mounted stage! !

After inspection, the text above is wrong. The main reason why $refs cannot be located is because if statements such as v-if, v-for, and v-show rely on parameters passed by the parent component, the This parameter has not been obtained during the mounted() stage~~~~! ! ! !

If you want to really get the data after the DOM is loaded, you need to call VUE's global api: this.$nextTick(() => {})

If you say mounted The stage is the loading stage, then the updated stage is the stage where the data is updated to the DOM (the loaded data is processed). At this time, ref, data, etc. are all mounted on the DOM structure. Use this in the update stage. .$refs.xxx, the DOM node can be found 100% of the time.

The difference between updated and mounted is that vue will call the updated(){} hook function every time the DOM structure is updated! Mounted is only executed once. To put it simply, as long as you can see the existence of the element during debugging, you can use this.$refs.xxx to find the corresponding DOM node in the updated stage!

Regarding the use of $refs, the official documentation specifically gives the following tips:

Be careful when using it.

Related recommendations:

The above is the detailed content of Detailed explanation of using refs to locate dom in vue and undefined appears. For more information, please follow other related articles on the PHP Chinese website!