Vue 动态组件渲染问题分析

发布时间：2020-12-16 23:15:38 所属栏目：百科来源：网络整理

导读：p class="jhl-title" fire 读在最前面： 1、本文适用于有一定基础的vue开发者，需要了解基本的vue渲染流程 2、本文知识点涉及vue构造器以及选项策略合并、渲染逻辑问题描述： Child继承自App，主程序通过true 和false来控制显示?Child 还是?App，在动态中

<p class="jhl-title">fire

读在最前面：

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

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

问题描述：

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

// ----------------options---------------------
const optionsA = {
  render: (h) => h('span','我是options - 父'),};

const optionsB = {
  render: (h) => h('span','我是options - 子'),};

const App = Vue.extend({
  template: `<div>
                当前组件： {{name}}
                <br/>
                <component :is="node" />
              </div>`,data() {
    return {
      name: 'App',node: optionsA,}
  }
});

const Child = App.extend({
  name: 'Child',data() {
    return {
      name: 'Child',node: optionsB,}
  }
});

const vm = new Vue({
  el: '#app',data() {
    return {
      isSuper: true,};
  },components: { App,Child },render(h) {
    const that = this;
    return h('div',{},[
      h('button',{
        on: {
          click: () => {
            this.isSuper = true;
          }
        },},'父类'),h('button',{
        on: {
          click: () => {
            this.isSuper = false;
          }
        },'子类'),h(this.isSuper ? 'App' : 'Child')
    ]);
  },});

如下图（点击父/子类切换，始终显示的是父文本）：

关键执行顺序分析：

1、App通过继承Vue生成构造，Child通过继承App生成构造

2、默认isSuper:true，渲染出App（编译为render： _C(node)，这个时候会在App的node中生成.Ctor）

3、切换isSuper:false，渲染出Child（这里渲染的时候，生成的实例是App，）

　　3.1、生成Child实例的时候进行了data合并，这个时候data中node变量合并了App的node中的.Ctor（$options合并策略），参照下图

　　3.2、

　　3.2、在Child中动态调用 new Ctor() （这个Ctor是App的），生成实例

最后附上大致流程图：

备注：　　

　? 1、Vue.extend会生成VueComponent构造器，内部包含一个Ctor，组件生成的时候就是调用这个new Ctor()?进行实例生成

??　2、选项中data的生成是延迟到实例生成的时候

　? 3、createComponent在分支渲染时，传入Ctor为对象的时候，会转换为构造器，这也是我们这个使用?const optionsA = {render: (h) => h('span',}; 这种方式的问题根源所在

?　 4、知道了问题所在，解决方式就比较多了，比如直接传入构造器，比如绕开data值合并策略，使用method方式。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!