Preface
A data annotation platform with native Javascript + is required to join the Vue framework.
It was very smooth, I'll be theremountedThe cycle is initialized, and the remaining operations are still handed over to the JavaScript file for execution. Finally, I found that there is an obvious event triggering problem.
1. Reasons for the event not bound
After searching for the whole day, I couldn't find out why this event couldn't be triggered. In the middle, the code was simplified and the event trigger logic was executed several times.
The next day I realized what was in the native codetemplateThere may be a problem, in the native environmenttemplateThings inside the tag will not be rendered, although the parser will indeed process this part of the code snippet when loading the page.
Retrieved from MDN:
Think of a template as a piece of content that can be stored in a document for subsequent use.
Although the parser does handle the content of the <template> element when loading the page,
But this is done just to ensure that the content is valid and the element content is not rendered.
But put it in vue (here refers specifically to Vue2), iftemplateThe tag exists inside the element bound to the Vue instance (that is, it is not the one outside the root element.template), then in the DOMtemplateThe child elements of the system exist and display normally, I used to taketemplateDov-forcontainer.
Then Lenovo simplified the demo of the structure in the previous few times, probably not that it was not bound but that it was bound the wrong target.
This native project has a lot of HTML code, so the author did some optimizations and only used a module when it was neededappendChildAdd DOM, and the rest of the time these modules are placedtemplateIn the tag, vue renders all these things out, so the event is likely to be tied to it when initialized.templateIn the code inside, wait until these modules areappendChildAt that time, the event binding has ended, soappendChildIt is to add the DOM without event binding to the correct position.
After I deleted all the DOMs in the viewport on the console, I found that there was a layer of DOMs squeezed out below, which was the DOM with event binding.
That's true.
2. How to deal with native template tags
I want to make himappendChildI think it's good to have this kind of encapsulation idea in the native environment, but it seems difficult to deal with...
I plan to extract the original modules into the component, write the component to the position where it will be inserted later, and then use this structure to control the display and hide it:
<template v-if="isShow"> <aaa></aaa> </template>
This is pretty good, in fact, if the structure of this project is a little simpler, I will definitely use the component scheme. As a result, I found that I want to pass a callback function, and pass 4 layers to interfere with 3 very important classes, just to call back and change the state of the component at the right time. I think it's awful.
Moreover, if there will be... or now there is a need that I don't notice is to increase the number of such modules. If I register the components directly here and use them, it will probably be difficult to modify them.
There are three components that require this kind of operation. I remember that when I learn back-end rendering, I sent the html template to the front-end. So... Can I convert these html into strings and save them to a separate js file, and then import them where needed.appendChildWhat? This way, the source code changes are minimal, no need to change itappendChild, and also make the html document more concise.
export const batchEditorToolsTemplate = ` <div class="non-selectable"> <div > <div class="menu-button" >quit</div> <div class="menu-button" >Previous page</div> <div class="menu-button" >Next page</div> <div class="menu-button" >Track</div> <div class="menu-button" >automatic</div> <div class="menu-button" >automatic（No rotation）</div> <div class="menu-button" >Interpolation</div> <div class="menu-button" >Reload</div> <div class="menu-button" >Finalized</div> </div> </div> `
Then use this tool function toappendChildReplace:
function analyseDomStr(str, target) { // dom string, target element const template = ('template');
= str;
();
}
This performance is not as good as before, but - event binding seems to be fine.
I wanted to use()The API, so the first version was written like this:
function analyseDomStr(str, target) { // dom string, target element const fragment = ();
const template = ('template');
= str;
(); // This is still the one that needs to be followed by the native template. This template will not be specially parsed by vue (fragment);
}
Unfortunately, it cannot be used directlyinnerHTMLTowardsDocumentFragmentWrite to the DOM, still requiredappendChildTo complete it, so there is no need to create itDocumentFragment, I think this API is more suitable for optimizing frequent DOM operations, for example, if the user clicks a button, he has to insert 100 pieces.tips, it is more suitable to use this API to generate a document content segment first, and then add the finished segment to the DOM.
This first and old versions have also been re-released...
Because the document fragment exists in memory and is not in the DOM tree, inserting child elements into the document fragment will not cause page reflow (calculation of element position and geometry).
Therefore, using document snippets often leads to better performance.
It's totally possible to:
const ul = ('ul');
const li = ('li');
for (let i = 0; i < 100; i++) {
('li');
}
This is a writing method that causes frequent reflux of the page
Change to
const ul = ('ul');
const li = ('li');
const fragment = ();
for (let i = 0; i < 100; i++) {
('li');
}
(fragment);
This way the page will only befragmentquiltappendChildThen return once.
This is the end of this article about how to solve the failure of native template tags in Vue. For more related content on Vue template tags, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!