Vue组件化机制

Vue.component

组件的声明定义
src/core/index.js
initGlobalAPI(Vue)定义了全局api里面的ASSET_TYPES = ['component','directive','filter']
initAssetRegisters(Vue)
遍历数组,Vue['component'] = 构造函数(使用exend方法,将传入的组件配置转换为构造函数VueComponent)
给Vue的options选项赋值
Vue.options.components.comp = VueComponent

组件的创建
首先创建的是根组件,首次_render()时,会得到整棵树的VNode结构
src/core/vdom/create-element.js
_render里面的h函数调用_createElement()
1普通标签直接创建vnode
2获取tag对应的组件构造函数,createComponent创建vnode
3installComponentHooks->组件实例化及挂载init钩子->里面定义了componentInstance创建组件实例方法->子组件挂载
以上是_render做的事
_update->patch()->createElm()->尝试创建组件createComponent,如果存在init钩子则执行它(执行实例创建和挂载),然后插入到父元素,元素属性创建

PS:创建过程是自上而下(先创建父节点,然后是子节点)
挂载过程是自下而上(先挂载子节点,然后挂载父节点,再批量操作显示在界面上)

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 回忆 首先,render函数中手写h=>h(app),new Vue()实例初始化init()和原来一样。$mou...
    LoveBugs_King阅读 2,331评论 1 2
  • 前言 使用Vue在日常开发中会频繁接触和使用生命周期,在官方文档中是这么解释生命周期的: 每个 Vue 实例在被创...
    心_c2a2阅读 2,309评论 1 8
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 2,268评论 0 6
  • 前言 记录平时学到的知识,标题写的大气一点,也算是给自己一点鼓励,希望在技术这条路可以远走越远,路越走越宽~ 文中...
    徐国军_plus阅读 1,699评论 3 28
  • 长得不算好看,四级没过,期末成绩不好,学生会退出,驾照没考,国二没考,普通话没考,不做兼职,全依赖父母生活费,和...
    P花生阅读 386评论 0 0