1. Three aspects:

  1. The root instance
  2. In a single file component
  3. The Diff algorithm requires that

2. The analysis

2.1. The root instance

When instantiating Vue:

<body> 
 <div id='app'>
 </div>
 </body> 
<script> 
    var vm = new Vue({ 
        el:'#app' 
    }) 
</script>// If I go under body like this:<body> 
    <div id='app1'></div>    
    <div id='app2'></div>
 </body> 
Copy the code

Vue doesn’t really know which one is our entrance. If multiple entries are set up at the same time, vue does not know which one is the ‘class’.

2.2 Single-file Components

In the VUE development environment built by WebPack, when using single-file components:

<template>     
<div>    
</div> 
</template> 
Copy the code

Template tag, which has three properties:

  1. Hidden: This TAB is never displayed anywhere on the page, even if there is much content in it, it is always hidden.
  2. Arbitrary: The tag can be written anywhere, even inside the head, body, and SCIPRT tags;
  3. Invalidity: Any HTML content in this tag is invalid and has no effect; You can only get the content in the innerHTML.
  • A vue single file component is a vue instance. How to specify the root entry of a Vue instance if there are multiple divs under the template?
  • In order for the component to generate a vue instance, the div is naturally treated as an entry point for the program, traversed recursively through all nodes in the vUE tree through the root node, treated as a VDOM, rendered as real HTML, and inserted in the correct place.

2.3 the diff algorithm

The patchvnode method in diff is used to compare old and new nodes. All nodes form a tree, which requires a root node for same-level comparison. Only if we specify a unique el root element can we give the Vue instance internal use of createElement to generate a corresponding virtual DOM structure that maps the real DOM element to render real HTML

3. Summary

  1. new Vue({el:’#app’})
  2. In a single-file component, the element div under template. It’s the root of a tree.
  3. Diff algorithm requirements, source, patch.js patchVnode().