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

This article mainly introduces how to solve the vue component tag rendering problem, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to know about it.

Component label rendering issu

Recently, we have encountered a problem, that is, how to achieve hot loading through component for components loaded through the LoadJs method.

The component tag of vue is a virtual dom that requires vue to render and display on a real dom tree. As for the problem I encountered recently, I read the objects of project B from project A through the LoadJS method, and the page has been rendered to the page of project An in the form of components, which cannot be rendered.

My first reaction was this.$forceUpdate (), which was rendered, but it didn't work.

Then I came up with a question: how does VUE recognize loading virtual DOM and how does it identify pages bound in routing? What's the difference between an import object and a require object, and when to use

After thinking about a lot of such questions, in fact, the difference between import and require has been explained in many articles and explained very well. Personally, the biggest difference is that one is static compilation and one is dynamic compilation. That is, a script is compiled after it has been run.

So I should be compiling dynamically here, because the external Js file is a blob object, and the path cannot be specified according to import, and the corresponding Js file is accessed at run time. That is, when the path is virtual and cannot be found, do not use import.

How vue recognizes import objects and require objects

Require is the syntax of CommonJs (how the AMD specification is introduced), and the module of CommonJs is the object.

Import is a syntax standard of es6 (browsers do not support it. The essence is to use babel in node to transcode es6 to es5 and then execute, and import will be transcoded to require). Es6 module is not an object.

Require is a method that loads the entire module (that is, all the methods in the module) at run time, generates an object, and then reads it from the object (this object can only be obtained at run time, not static at compile time), and can theoretically be used anywhere in the code

Import is called at compile time to determine the dependency of the module, input variables (the es6 module is not an object, but the output code is specified through the export command, and then input through import, only the methods derived in import are loaded, other methods are not loaded), import has an enhanced effect and will be promoted to the head of the module (executed at compile time)

Export and import can be located anywhere in the module, but they must be at the top of the module, and an error will be reported if they are in other scopes

This solves a problem, but the Is property of component can recognize require and import objects. I just throw it in, but it still doesn't work.

Then notice a point, the life cycle of VUE!

And then I found out that I really imported objects from mounted.

Remind yourself and the people you see, please don't use require and import in mounteds, I'll just run the function in created instead. Theoretically, beforeCreated and beforeMounted can also be used. I haven't tried.

And a reminder, think about a problem, do not drill into the corner, change your way of thinking, it may suddenly become clear, just like my question. In fact, the main problem is when to import objects and the choice of import methods, rather than rendering.

Component components are nested, causing the page to be rendered repeatedly, repeating the requested bug

Because of the details page, there are multiple tab tabs to consider multiple reuse of the page, and it is made up of multiple pages, so it is decided to use the component approach to reference the page.

Because the UI component used in the project is element-ui, I happen to see that there is a style very similar to the tab tab, so I use the tabs component of element, but I didn't expect that the problem is here.

Error code

Because the tabs tab is used above, and the v-for loop is also used (no way, mainly because the tabs is dynamic), each page not only has no way to cache, but keeps sending requests repeatedly. Baidu for a long time, and finally no way to ask for help, in the bosses remote help finally found that the v-for under tabs caused.

Because component is written in a v-for loop, each loop creates an object, resulting in the creation of a lot of components. All component after a click on the tabs loop sends a request, and each click reduces the request (because of the keep-alive cache problem).

The final solution, not in the tabs component of element-ui, their own handwritten pages, anyway, the style is not complex.

Correct code {{item.label}}

In this way, you can avoid creating multiple components, so that there is no bug that sends repeated requests.

Thank you for reading this article carefully. I hope the article "how to solve the component tag rendering problem of vue" shared by the editor will be helpful to you. At the same time, I also hope you can support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.