Ps: New xiao Bai yimei, if there is a mistake, welcome to point out ~

questions

The author is now a junior students will practice, recently saw an article in the nuggets’ vue 248 points () the interview question is the escort you “, the author wrote in his interview within a 5 years work experience in front of some of the young man’s question, one of the problems caught my attention, the problem is: Good, let me ask you “why does Vue require a component template to have only one root element?”

I have been learning Vue for some time. I have read some documents and some big names’ projects and articles, but I seem to think little about this problem. Every time I write a project or a demo, I will directly fight against the code, and I only understand the source code implementation of routing and template compilation. Nor does it delve into why there can only be one root element. I think this question is a very good question for those who just started learning Vue. In the beginning, we should know why to better master a language.

A simple search in Google and nuggets, the relevant problem information seems to be very few, and few people write this topic, that will not blow, today by me to take you to analyze this problem. The following are my personal thoughts after reviewing some materials. If you have any questions, please point them out in the comments section and discuss them together

Vue instance

First, I think we should start with an example of Vue. Vue instances generally look like this, except for the id name.

<div id="app"></div>
Copy the code

var vm = new Vue({
    el: '#app'.data: {},
    methods: {}... })Copy the code

This is the basic structure of a Vue instance and is not unfamiliar. As you can see here, the el is specified as a div element with the id app, and the Vue instance takes over control of it, reducing our DOM manipulation, and all elements that need to be controlled by the VM are added inside it. If you need to control different parts, this requires multiple instances of Vue. The question arises, why do you need a different Vue instance to take over?

Entrance to the problem

Specifying the EL option in Vue specifies a SPA entry for the Vue instance. It is possible that your page will look like this:

<div id="app"></div>
<div id="app1"></div>
<div id="app2"></div>
Copy the code

The Vue instance doesn’t really know which one is the entry or which part it should take over, so you assign it a unique element as the entry. Each entry can be thought of as a class for Vue, and Vue takes everything that enters it and renders it round and remounts it back into the DOM of the page. For example, a Vue instance has only one key, and each key can only open one lock, but there are many locks on the page, and if you don’t say which lock is the key, the Vue instance doesn’t know what to do next.

Of course, this is only a superficial understanding. You might say, I’ll just specify a few entries for Vue instances to try one by one, let’s move on.

Virtual DOM

“Virtual DOM” is the name we use for the entire VNode tree built from the Vue component tree

Learning Vue has to say is the introduction of Virtual DOM 2.0, the introduction of Virtual DOM, in the framework of the Virtual DOM tree structure and the real DOM mapping, so that we do not have to operate DOM imperative.

Before we talk about this topic, if you are not familiar with the virtual DOM, we recommend reading this article 👉 “Virtual DOM in Vue”.

To quote an image from it:

This image shows a rendering process for the virtual DOM, which brings us back to the topic of this article: why only one root element? Let’s look at an example. Suppose your Vue instance takes over a DOM structure that looks like this:

<div id="app">
    <h1 id="h3">My title</h1>
    <span>Content</span>
    Other text
    <! -- annotation text -->
</div>
Copy the code

It is represented internally by a DOM tree like this:

Forgive my poor drawing skills, but I got what I wanted. It can be seen from this that it is a tree structure, each element, text, comment is a node, the virtual DOM follows such a tree data structure.

Back to the point, our specified EL is the root of the DOM structure. Now it’s easy to say that only if we specify a unique el root element can we give it to the Vue instance to internally generate a corresponding virtual DOM structure with the createElement method that maps the real DOM element to render real HTML

In other words, the element corresponding to el can be thought of as a top-level tag in the Vue takeover section, just as in the basic HTML structure, the top-level tag is < HTML >
, and only one such tag can exist. The same is true for Vue. If you give it two top-level tags, the corresponding DOM structure can’t be generated, which explains why you can’t specify multiple entries for Vue instances to try one by one.

I don’t know if my explanation makes sense, but if not, let’s look at it again.

vue-cli

Now in the actual project development, the use of scaffolding VUE-CLI development is the majority, let’s take a look.

Vue-cli takes the form of a single file component, and the basic structure of a.vue page looks like this:

<template>
  <div></div>
</template>

<script>
export default {

}
</script>

<style>

</style>
Copy the code

In this case, there can only be one root div under the

Before we get into this topic, we need to know a few features of H5’s new

This means that each.vue file is an instance of vue, and the content in the

abstract

In the end, this question can also be abstracted as a question: why can only one root be abstracted from a DOM tree?

1. From the point of view of lookup and traversal, if we have multiple roots, our lookup and traversal will be inefficient.
2. If a tree has multiple roots, it can be optimized. There must be one node that can access all nodes, and that node will become the new root node.
3. In terms of Vue itself, if a component has multiple entries and multiple roots, doesn’t that mean that your component can be further divided into multiple components, further componentization, reducing the coupling between code.

conclusion

In fact, in our learning process, there are a lot of problems are we half-understand, that is, we do not know why. To put it bluntly, we know how a wheel works, but we don’t know how it works. We don’t want to repeat the wheel, but we should at least know how it works. The above are my personal understanding of this issue. I hope this article can help you have a deeper understanding of this issue. If you feel that there is something wrong, welcome to direct correction, common progress!

Reference content “Detailed explanation of virtual DOM in Vue” “Analysis of virtual DOM rendering ideas of Vue2.0” “Talk about VNode node (vue.js implementation)” official document official API document official issue related discussion

I have recorded my learning record in my Github and will continue to update, interested partners can see ~ github.com/tearill/Rea…