vue延迟渲染组件_Vue 动态组件渲染问题分析

fire

读在最前面：

1、本文适用于有一定基础的vue开发者，需要了解基本的vue渲染流程

2、本文知识点涉及vue构造器以及选项策略合并、 渲染逻辑

问题描述：

Child继承自App，主程序通过true 和false来控制显示 Child 还是 App，在动态 中渲染出来的始终是App，代码如下

Vue.config.productionTip = false;

Vue.config.devtools = false;

// ----------------options---------------------

const optionsA = {

render: (h) => h('span', '我是options - 父'),

};

const optionsB = {

render: (h) => h('span', '我是options - 子'),

};

const App = Vue.extend({

template: `

当前组件： { {name}}

`,

data() {

return {

name: 'App',

node: optionsA,

}

}

});

const Child = App.extend({