实验了两种方式。vue模板组件异步渲染组件和函数式组件异步渲染组件。模板组件借用了slot插槽。
第一种方式，vue模板组件
建立一个vue文件 ，假如名字叫mountElement.vue
<template> <div id="mountedDiv"></div> </template> <script> import { isVNode } from "./VnodeUtil"; import TempSlot from "./TempSlot"; import Vue from "vue"; export default { methods: { //渲染 render(componentArr) { let self = this; let TempSoltConstructor = Vue.extend(TempSlot); let instance = new TempSoltConstructor(); let vnodes = self.createVnode(componentArr); if (isVNode(vnodes)) { instance.$slots.default = [vnodes]; } instance.$mount("#mountedDiv"); }, //生成虚拟dom createVnode(elementArr) { let self = this; const h = self.$createElement; return h( "div", { style: { height: "100vh", overflowY: "auto", width: "100vw", overflowX: "hidden" } }, elementArr.map((element, index) => { return h(element.name, element, element.slot); }) ); } } }; </script>其中VnodeUtil为
const hasOwnProperty = Object.prototype.hasOwnProperty; export function noop() {}; export function hasOwn(obj, key) { return hasOwnProperty.call(obj, key); }; export function isVNode(node) { return node !== null && typeof node === 'object' && hasOwn(node, 'componentOptions'); };TempSlot为
<template> <div> <slot> </slot> </div> </template>父组件引入mountElement.vue 并使用ref，渲染的时候，http请求(或其他异步方法)返回的dom结构(必须包含name，其他的内容参考createElement中参数)，使用this.$ref.mountElement.render(需要渲染的dom结构)。
第二种方式，采用函数式组件
这里，全局注册了一个函数式组件
Vue.component('element-list', { functional: true, props: { componentArr: { type: Function, required: true } }, render: function (createElement, context) { console.log("context=", context); //这里让传入的componentArr是函数，执行结果返回数组，避开不能直接传Observer观察对象问题 var componentArr = context.props.componentArr(); /** * 如果存在data.__ob__，说明data是被Observer观察的数据 * 不能用作虚拟节点的data * 需要抛出警告，并返回一个空节点 * * 被监控的data不能被用作vnode渲染的数据的原因是： * data在vnode渲染过程中可能会被改变，这样会触发监控，导致不符合预期的操作 * Avoid using observed data object as vnode data: * Always create fresh vnode data objects in each render! */ return createElement('div', { style: { height: "100vh", overflowY: "auto", width: "100vw", overflowX: "hidden" } }, getElements(createElement, componentArr) /** componentArr && componentArr.length > 0 ? componentArr.map((element, index) => { return createElement( element.name, element, element.slot ) }) : "" */ ) } }) function getElements(createElement, root) { return root ? (root instanceof Array && root.length > 0 ? root.map((element, index) => { return createElement( element.name, element, getElements(createElement, element.children) ) }) : root.slot) : root }在父组件中调用
<element-list :componentArr="componentArr"></element-list>其中
data() { return { componentArr: () => [] //这个参数一定要是个函数 }; },异步渲染的时候，只要改变componentArr的值，这里 componentArr要赋值给一个函数。比如
componentArr =()=>{ return [{ name:"div", slot:"测试div" },{ name:"a", slot:"测试a"} ] }
