Vue 根组件实例
Vue 是一个基于组件的视图库。在一个页面上，可以形成多颗组件树，每棵树的根组件都会绑定到一个 DOM 元素。
比如页面上有两个 div ：
<div id="app1"></div>
<div id="app2"></div>
就可以针对这两个 DOM 元素实例化两个 Vue 根组件实例：
import Vue, { ComponentOptions } from 'vue';
const App1: ComponentOptions<Vue> = {
el: '#app1',
template: '<div>app1</div>'
};
const App2: ComponentOptions<Vue> = {
el: '#app2',
template: '<div>app2</div>'
};
new Vue(App1);
new Vue(App2);
执行完之后的 DOM 结构为：
<div>app1</div>
<div>app2</div>
有关 ComponentOptions 等详细内容，在后续文章中会逐步讲到，此处只需要知道 App1 和 App2 是两个组件（配置）。
注意：对应 Vue 根组件实例的 DOM 元素之间不能存在父子/祖孙关系。比如上例中的 #app2 节点不能是 #app1 的子孙节点。
Vue 组件树
有了 Vue 根组件之后，就可以在根组件上挂载无限层级的 Vue 组件了：
<div id="app"></div>
import Vue, { ComponentOptions } from 'vue';
const Child2: ComponentOptions<Vue> = {
template: '<div id="child2">child2</div>'
};
Vue.component('Child2', Child2);
const Child1: ComponentOptions<Vue> = {
template: '<div id="child1">child1 <Child2></Child2></div>'
};
Vue.component('Child1', Child1);
const App2: ComponentOptions<Vue> = {
el: '#app2',
template: '<Child1></Child1>'
};
new Vue(App);
执行完之后的 DOM 结构为：
<div id="child1">child1 <div id="child2">child2</div></div>
其中， Vue.component 用于在 Vue 内部注册组件。
注意：非根组件都不要指定 el 。
页面分块组件化能力的优势
- 视图模块之间绝对分离，互不影响。
- 支持对已有系统的逐步重构。
