Solution to undefined in vue using refs to locate dom

In the project I did in the company before, I always felt that using ref to locate DOM nodes was very convenient. But during the period, I encountered a problem, that is, when using this.$refs.xxx in the mounted(){} hook, the output is undefined?

So I compared the .vue file that used ref before, and found the differences between them.

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

Below is the vue official life cycle (part), as the official said, it is not necessary to understand it first, but with your learning and use, its reference value will become higher and higher.

　

原来，mounted阶段，DOM结构准备就绪，但是这里的准备就绪需要特别说明一下：

The DOM structure has already appeared, but if a DOM node in the DOM structure uses v-if, v-show or v-for (which means dynamically operate DOM based on the obtained backend data, i.e., reactive), then these DOMs will not be found at the mounted stage.

At this mounted stage, it is generally used to initiate backend requests, retrieve data, and perform some tasks with route hooks, simply put, it is just to load data in the mounted hook, and the loaded data will not be updated in the DOM at this stage

So if $refs are used in the mounted hook, if the ref is located at v-if, v-for, v-The DOM nodes in show can only return undefined because they do not exist at all in the mounted stage!!

After verification, the above text is incorrect. The main reason why $refs cannot be located is because v-if, v-for, v-If these statements depend on the parameters passed from the parent component, the parameter is not yet obtained by the child in the mounted() stage ~ ~ ~ ~ ~ !!

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

If the mounted stage is the loading stage, then the updated stage is the stage where the data is updated to the DOM (processing the loaded data). At this time, ref, data, etc., are all mounted to the DOM structure, and this.$refs.xxx is used in the update stage.100% can find the DOM node.

The difference between updated and mounted is that Vue will call the updated(){} hook function once every time the DOM structure is updated, while mounted only executes once.

In simple terms, 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 has specially given the following hints:

　

Pay attention when using it- -

That's all for this article. I hope it will be helpful to everyone's learning and that everyone will support the Yell Tutorial more.

Declaration: The content of this article is from the Internet, the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email for reporting, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.)