Vue组件实例化(普通+进阶版)

import Vue from 'vue'

// 实例化组件 普通版
Vue.prototype.$component2Instance = (Component, options = {}) => {
  let el = options.el || document.createElement('div')
  const Ctor = Vue.extend(Component)
  const ctor = new Ctor({
    el,
    parent: options.parent || window.vm,
    propsData: options.propsData || options.props || {},
  })
  return ctor
}
// 实例化组件 进阶版(实现传参同步响应式)
// getVNodeData: Function  返回参数对象 props,style,class,on等 (通创建组件参数)。
Vue.prototype.$component2InstanceV2 = (Component, options = {}, getVNodeData = () => ({})) => {
  let parent = options.parent || window.vm
  let vnode

  // render函数内get数据，vue内部会将相应数据进行依赖收集————响应式
  const Comp = {
    abstract: true, // 抽象化，实际无DOM渲染 Component组件的$parent仍为引用父组件。
    destroyed () {
      this.$el && this.$el.parentNode && this.$el.parentNode.removeChild(this.$el)
    },
    render () {
      vnode = <Component {...getVNodeData()}/>
      return vnode
    },
  }
  // 实例化Comp 以便销毁
  let el = options.el || document.createElement('div')
  const Ctor = Vue.extend(Comp)
  let ctor = new Ctor({
    el,
    parent: parent,
  })
  vnode.componentInstance.$on('hook:destroyed', () => {
    ctor.$destroy()
    ctor = null
  })
  return vnode.componentInstance
}

普通版实例化只能通过propsData属性传参，且传入的响应式变量失去了响应性。
原因：new出一个实例时，propsData传参时先进行了getter取值（依赖收集），再将值传入实例中，此值不会进行依赖收集，失去响应性。

进阶版通过render函数转化实现响应式。

调用：

const chooseFieldPanel = proxy.$component2InstanceV2(ChooseFieldPanel, { parent: proxy }, () => ({
        props: {
          value: checkedField.value ? [checkedField.value] : [],
          allColumns: props.allColumns,
          columnsData: props.columnsData,
          ...props.fieldTreeProps,
        },
        style: chooseFieldPanelStyle,//可为响应式变量，依旧保持响应式
        on: {
          change: handleFieldChange,
        },
      }))