Vue组件实例建立的方法

Vue组件实例的建立能够经过Vue.extend()或render函数来实现，下面简单介绍下：

1. Vue.extend()

大体步骤以下：

• 经过配置项获取组件的构造函数
• 实例化构造函数，生成虚拟dom
• 组件挂载，虚拟dom转成真实dom，并追加到dom节点中

代码以下：

// 参数Component为组件配置项，返回组件实例
function create(Component, props){
    // 经过Component配置项获取组件的构造函数
    // 使用 Vue.extend(Component) 实现
    const Constructor = Vue.extend(Component);
    // 建立组件实例，生成的是虚拟dom
    // 为避免props属性重名，使用propsData属性
    const comp = new Constructor({
        propsData: props
    })
    // 组件挂载到id为app的节点中，虚拟dom挂载后才能生成真实dom
    comp.$mount('#app');
    
    return comp;
}
复制代码

2. render()

大体实现步骤以下：

• 经过Component配置项获取组件的构造函数
• 实例化组件构造函数
• 组件挂载，虚拟dom转成真实dom，追加到页面节点中

代码以下：

function create(Component, props){
    // 经过Component配置项获取组件的构造函数
    // 经过render函数实现
    // vm就是组件实例
    const vm = new Vue({
        // h是createElement，返回VNode, VNode是虚拟dom
        // 须要挂载才能变成真实Dom
        render: h => h(Component, {props})
    })
    // $mount(elem)指定宿主元素，则会建立真实dom，并追加到指定节点
    vm.$mount('#app');
    
    const comp = vm.$children[0]
    return comp;
}
复制代码