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 。

页面分块组件化能力的优势

• 视图模块之间绝对分离，互不影响。
• 支持对已有系统的逐步重构。