当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Vue 动态组件渲染问题分析

Vue 动态组件渲染问题分析

2019年02月27日  | 移动技术网IT编程  | 我要评论

fire

读在最前面：

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

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


问题描述：

child继承自app，主程序通过true 和false来控制显示 child 还是 app，在动态<component /> 中渲染出来的始终是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: `<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（<component :is="node" /> 编译为render： _c(node)，这个时候会在app的node中生成.ctor）

3、切换issuper:false，渲染出child（这里渲染的时候，生成的实例是app，这里是不符合预期的，按理应该是child）

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

　　3.2、在_createelement的时候 node 当为component options / constructor 时，会验证是否 node 是否为object，如果是会转换为构造器 使用vue.extend

　　3.2、在child中动态调用 new ctor() （这个ctor是app的），生成实例

 

 

最后附上大致流程图：

 

 

 

备注：　　

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

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

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

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

 by：海豚湾-丰

　　 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网