关于vue.js:vue源码分析动态组件

后面花了两节的内容介绍了组件，从组件的原理讲到组件的利用，包含异步组件和函数式组件的实现和应用场景。家喻户晓，组件是贯通整个Vue设计理念的货色，并且也是领导咱们开发的核心思想，所以接下来的几篇文章，将从新回到组件的内容去做源码剖析，首先会从罕用的动静组件开始，包含内联模板的原理，最初会简略的提到内置组件的概念，为之后的文章埋下伏笔。

12.1 动静组件

动静组件我置信大部分在开发的过程中都会用到，当咱们须要在不同的组件之间进行状态切换时，动静组件能够很好的满足咱们的需要，其中的外围是component标签和is属性的应用。

12.1.1 根本用法

例子是一个动静组件的根本应用场景，当点击按钮时，视图依据this.chooseTabs值在组件child1,child2,child3间切换。

// vue
<div id="app">
  <button @click="changeTabs('child1')">child1</button>
  <button @click="changeTabs('child2')">child2</button>
  <button @click="changeTabs('child3')">child3</button>
  <component :is="chooseTabs">
  </component>
</div>
// js
var child1 = {
  template: '<div>content1</div>',
}
var child2 = {
  template: '<div>content2</div>'
}
var child3 = {
  template: '<div>content3</div>'
}
var vm = new Vue({
  el: '#app',
  components: {
    child1,
    child2,
    child3
  },
  methods: {
    changeTabs(tab) {
      this.chooseTabs = tab;
    }
  }
})

12.1.2 AST解析

<component>的解读和后面几篇内容统一，会从AST解析阶段说起，过程也不会专一每一个细节，而是把和以往解决形式不同的中央特地阐明。针对动静组件解析的差别，集中在processComponent上，因为标签上is属性的存在，它会在最终的ast树上打上component属性的标记。

//  针对动静组件的解析
function processComponent (el) {
  var binding;
  // 拿到is属性所对应的值
  if ((binding = getBindingAttr(el, 'is'))) {
    // ast树上多了component的属性
    el.component = binding;
  }
  if (getAndRemoveAttr(el, 'inline-template') != null) {
    el.inlineTemplate = true;
  }
}

最终的ast树如下：

12.1.3 render函数

有了ast树，接下来是依据ast树生成可执行的render函数，因为有component属性，render函数的产生过程会走genComponent分支。

// render函数生成函数
var code = generate(ast, options);

// generate函数的实现
function generate (ast,options) {
  var state = new CodegenState(options);
  var code = ast ? genElement(ast, state) : '_c("div")';
  return {
    render: ("with(this){return " + code + "}"),
    staticRenderFns: state.staticRenderFns
  }
}

function genElement(el, state) {
  ···
  var code;
  // 动静组件分支
  if (el.component) {
    code = genComponent(el.component, el, state);
  }
}

针对动静组件的解决逻辑其实很简略，当没有内联模板标记时(前面会讲),拿到后续的子节点进行拼接，和一般组件惟一的区别在于，_c的第一个参数不再是一个指定的字符串，而是一个代表组件的变量。

// 针对动静组件的解决
  function genComponent (
    componentName,    el,    state  ) {
    // 领有inlineTemplate属性时，children为null
    var children = el.inlineTemplate ? null : genChildren(el, state, true);
    return ("_c(" + componentName + "," + (genData$2(el, state)) + (children ? ("," + children) : '') + ")")
  }

12.1.4 一般组件和动静组件的比照

其实咱们能够比照一般组件和动静组件在render函数上的区别，后果高深莫测。

一般组件的render函数

"with(this){return _c('div',{attrs:{"id":"app"}},[_c('child1',[_v(_s(test))])],1)}"

动静组件的render函数

"with(this){return _c('div',{attrs:{"id":"app"}},[_c(chooseTabs,{tag:"component"})],1)}"

简略的总结，动静组件和一般组件的区别在于：

1. ast阶段新增了component属性，这是动静组件的标记
1. 产生render函数阶段因为component属性的存在，会执行genComponent分支，genComponent会针对动静组件的执行函数进行非凡的解决，和一般组件不同的是，_c的第一个参数不再是不变的字符串，而是指定的组件名变量。
1. render到vnode阶段和一般组件的流程雷同，只是字符串换成了变量，并有{ tag: 'component' }的data属性。例子中chooseTabs此时取的是child1。

有了render函数，接下来从vnode到实在节点的过程和一般组件在流程和思路上基本一致，这一阶段能够回顾之前介绍组件流程的剖析

12.1.5 纳闷

因为本人对源码的了解还不够透彻,读了动静组件的创立流程之后，心中产生了一个疑难，从原理的过程剖析，动静组件的外围其实是is这个关键字，它在编译阶段就以component属性将该组件定义为动静组件，而component作为标签如同并没有特地大的用处，只有有is关键字的存在，组件标签名设置为任意自定义标签都能够达到动静组件的成果？(componenta, componentb)。这个字符串仅以{ tag: 'component' }的模式存在于vnode的data属性存在。那是不是阐明，所谓动静组件只是因为is的单方面限度？那component标签的意义又在哪里？(求教大佬！！)

12.2 内联模板

因为动静组件除了有is作为传值外，还能够有inline-template作为配置,借此前提，刚好能够理分明Vue中内联模板的原理和设计思维。Vue在官网有一句醒目的话，提醒咱们inline-template 会让模板的作用域变得更加难以了解。因而倡议尽量应用template选项来定义模板，而不是用内联模板的模式。接下来，咱们通过源码去定位一下所谓作用域难以了解的起因。

咱们先简略调整下面的例子，从应用角度上动手：

// html
<div id="app">
  <button @click="changeTabs('child1')">child1</button>
  <button @click="changeTabs('child2')">child2</button>
  <button @click="changeTabs('child3')">child3</button>
  <component :is="chooseTabs" inline-template>
    <span>{{test}}</span>
  </component>
</div>
// js
var child1 = {
  data() {
    return {
      test: 'content1'
    }
  }
}
var child2 = {
  data() {
    return {
      test: 'content2'
    }
  }
}
var child3 = {
  data() {
    return {
      test: 'content3'
    }
  }
}
var vm = new Vue({
  el: '#app',
  components: {
    child1,
    child2,
    child3
  },
  data() {
    return {
      chooseTabs: 'child1',
    }
  },
  methods: {
    changeTabs(tab) {
      this.chooseTabs = tab;
    }
  }
})

例子中达到的成果和文章第一个例子统一，很显著和以往认知最大的差别在于，父组件里的环境能够拜访到子组件外部的环境变量。初看感觉挺不堪设想的。咱们回顾一下之前父组件能拜访到子组件的情景，从大的方向上有两个:

– 1. 采纳事件机制，子组件通过$emit事件，将子组件的状态告知父组件，达到父拜访子的目标。 – 2. 利用作用域插槽的形式，将子的变量通过props的模式传递给父，而父通过v-slot的语法糖去接管，而咱们之前剖析的后果是，这种形式实质上还是通过事件派发的模式去告诉父组件。

之前剖析过程也有提过父组件无法访问到子环境的变量，其外围的起因在于： 父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。 那么咱们有理由猜测，内联模板是不是违反了这一准则，让父的内容放到了子组件创立过程去编译呢？咱们接着往下看：

回到ast解析阶段，后面剖析到，针对动静组件的解析，关键在于processComponent函数对is属性的解决，其中还有一个要害是对inline-template的解决，它会在ast树上减少inlineTemplate属性。参考vue源码视频解说：进入学习

//  针对动静组件的解析
  function processComponent (el) {
    var binding;
    // 拿到is属性所对应的值
    if ((binding = getBindingAttr(el, 'is'))) {
      // ast树上多了component的属性
      el.component = binding;
    }
    // 增加inlineTemplate属性
    if (getAndRemoveAttr(el, 'inline-template') != null) {
      el.inlineTemplate = true;
    }
  }

render函数生成阶段因为inlineTemplate的存在，父的render函数的子节点为null,这一步也决定了inline-template下的模板并不是在父组件阶段编译的,那模板是如何传递到子组件的编译过程呢？答案是模板以属性的模式存在，待到子实例时拿到属性值

function genComponent (componentName,el,state) {
  // 领有inlineTemplate属性时，children为null
  var children = el.inlineTemplate ? null : genChildren(el, state, true);
  return ("_c(" + componentName + "," + (genData$2(el, state)) + (children ? ("," + children) : '') + ")")
}

咱们看看最终render函数的后果，其中模板以{render: function(){···}}的模式存在于父组件的inlineTemplate属性中。

"_c('div',{attrs:{"id":"app"}},[_c(chooseTabs,{tag:"component",inlineTemplate:{render:function(){with(this){return _c('span',[_v(_s(test))])}},staticRenderFns:[]}})],1)"

最终vnode后果也显示，inlineTemplate对象会保留在父组件的data属性中。

// vnode后果
{
  data: {
    inlineTemplate: {
      render: function() {}
    },
    tag: 'component'
  },
  tag: "vue-component-1-child1"
}

有了vnode后，来到了要害的最初一步，依据vnode生成实在节点的过程。从根节点开始，遇到vue-component-1-child1，会经验实例化创立子组件的过程，实例化子组件前会先对inlineTemplate属性进行解决。

function createComponentInstanceForVnode (vnode,parent) {
    // 子组件的默认选项
    var options = {
      _isComponent: true,
      _parentVnode: vnode,
      parent: parent
    };
    var inlineTemplate = vnode.data.inlineTemplate;
    // 内联模板的解决，别离拿到render函数和staticRenderFns
    if (isDef(inlineTemplate)) {
      options.render = inlineTemplate.render;
      options.staticRenderFns = inlineTemplate.staticRenderFns;
    }
    // 执行vue子组件实例化
    return new vnode.componentOptions.Ctor(options)
  }

子组件的默认选项配置会依据vnode上的inlineTemplate属性拿到模板的render函数。剖析到这一步论断曾经很分明了。内联模板的内容最终会在子组件中解析，所以模板中能够拿到子组件的作用域这个景象也难能可贵了。

12.3 内置组件

最初说说Vue思维中的另一个概念，内置组件，其实vue的官网文档有对内置组件进行了列举，别离是component, transition, transition-group, keep-alive, slot，其中<slot>咱们在插槽这一节曾经具体介绍过，而component的应用这一节也花了大量的篇幅从应用到原理进行了剖析。然而学习了slot,component之后，我开始意识到slot和component并不是真正的内置组件。内置组件是曾经在源码初始化阶段就全局注册好的组件。而<slot>和<component>并没有被当成一个组件去解决，因而也没有组件的生命周期。slot只会在render函数阶段转换成renderSlot函数进行解决，而component也只是借助is属性将createElement的第一个参数从字符串转换为变量，仅此而已。因而从新回到概念的了解，内置组件是源码本身提供的组件，所以这一部分内容的重点，会放在内置组件是什么时候注册的，编译时有哪些不同这两个问题上来。这一部分只是一个抛砖引玉，接下来会有两篇文章专门具体介绍keep-alive，transition, transition-group的实现原理。

12.3.1 结构器定义组件

Vue初始化阶段会在结构器的components属性增加三个组件对象,每个组件对象的写法和咱们在自定义组件过程的写法统一，有render函数，有生命周期，也会定义各种数据。

// keep-alive组件选项
var KeepAlive = {
  render: function() {}
}

// transition 组件选项
var Transition = {
  render: function() {}
}

// transition-group 组件选项
var TransitionGroup = {
  render: function() {},
  methods: {},
  ···
}

var builtInComponents = {
  KeepAlive: KeepAlive
};

var platformComponents = {
  Transition: Transition,
  TransitionGroup: TransitionGroup
};

// Vue结构器的选项配置，compoents选项合并
extend(Vue.options.components, builtInComponents);
extend(Vue.options.components, platformComponents);

extend办法咱们在系列的结尾，剖析选项合并的时候有说过，将对象上的属性合并到源对象中，属性雷同则笼罩。

// 将_from对象合并到to对象，属性雷同时，则笼罩to对象的属性
function extend (to, _from) {
  for (var key in _from) {
    to[key] = _from[key];
  }
  return to
}

最终Vue结构器领有了三个组件的配置选项。

Vue.components = {
  keepAlive: {},
  transition: {},
  transition-group: {},
}

12.3.2 注册内置组件

仅仅有定义是不够的。组件须要被全局应用还得进行全局的注册。Vue实例在初始化过程中，最重要的第一步是进行选项的合并，而像内置组件这些资源类选项会有专门的选项合并策略，最终结构器上的组件选项会以原型链的模式注册到实例的compoonents选项中(指令和过滤器同理)。

// 资源选项
var ASSET_TYPES = [
  'component',
  'directive',
  'filter'
];

// 定义资源合并的策略
ASSET_TYPES.forEach(function (type) {
  strats[type + 's'] = mergeAssets; // 定义默认策略
});

function mergeAssets (parentVal,childVal,vm,key) {
    var res = Object.create(parentVal || null); // 以parentVal为原型创立一个空对象
    if (childVal) {
      assertObjectType(key, childVal, vm); // components,filters,directives选项必须为对象
      return extend(res, childVal) // 子类选项赋值给空对象
    } else {
      return res
    }
  }

要害的两步一个是var res = Object.create(parentVal || null);，它会以parentVal为原型创立一个空对象，最初是通过extend将用户自定义的component选项复制到空对象中。选项合并之后，内置组件也因而在全局实现了注册。

{
  components: {
    child1,
    __proto__: {
      keepAlive: {},
      transition: {},
      transitionGroup: {}
    }
  }
}

最初咱们看看内置组件对象中并没有template模板，而是render函数，除了缩小了耗性能的模板解析过程，我认为重要的起因是内置组件并没有渲染的实体。最初的最初，让咱们一起期待后续对keep-alive和transition的原理剖析，敬请期待。

关于vue.js:vue源码分析动态组件

12.1 动静组件

12.1.1 根本用法

12.1.2 AST解析

12.1.3 render函数

12.1.4 一般组件和动静组件的比照

一般组件的render函数

动静组件的render函数

12.1.5 纳闷

12.2 内联模板

12.3 内置组件

12.3.1 结构器定义组件

12.3.2 注册内置组件

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于vue.js:vue源码分析动态组件

12.1 动静组件

12.1.1 根本用法

12.1.2 AST解析

12.1.3 render函数

12.1.4 一般组件和动静组件的比照

一般组件的render函数

动静组件的render函数

12.1.5 纳闷

12.2 内联模板

12.3 内置组件

12.3.1 结构器定义组件

12.3.2 注册内置组件

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

发表回复取消回复