vue源码分析(七)—— createComponent

文章目录

  • 前言
  • 一、createComponent 参数说明
  • 二、createComponent 源码详解
    • 1.baseCtor的实际指向
    • 2.extend 方法
    • 3.判断Ctor是否是函数的判断
    • 4.installComponentHooks方法
    • 5.返回一个带标识的组件 vnode


前言

createComponent文件的路径: src\core\vdom\create-component.ts


一、createComponent 参数说明

vue源码分析(七)—— createComponent_第1张图片

二、createComponent 源码详解

1.baseCtor的实际指向

路径 src\core\instance\init.ts
根据init,ts的初始化中,会把Vue的options合并到vm的options上,所以baseCtor的实际指向 其实是Vue上的options。

vue源码分析(七)—— createComponent_第2张图片
vue源码分析(七)—— createComponent_第3张图片

2.extend 方法

路径: src\core\global-api\extend.ts
判断是否是对象,如果是对象执行extend方法返回一个构造函数

vue源码分析(七)—— createComponent_第4张图片

3.判断Ctor是否是函数的判断

vue源码分析(七)—— createComponent_第5张图片

4.installComponentHooks方法

作用: 安装组件的钩子

vue源码分析(七)—— createComponent_第6张图片

installComponentHooks方法详解
vue源码分析(七)—— createComponent_第7张图片

5.返回一个带标识的组件 vnode

vue源码分析(七)—— createComponent_第8张图片

你可能感兴趣的:(vue2源码分析,vue.js,javascript,前端)