美文网首页
Vue组件化机制

Vue组件化机制

作者: key君 | 来源:发表于2019-10-14 16:05 被阅读0次
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:创建过程是自上而下(先创建父节点,然后是子节点)
挂载过程是自下而上(先挂载子节点,然后挂载父节点,再批量操作显示在界面上)

相关文章

  • Vue组件化机制

    Vue.component 组件的声明定义src/core/index.jsinitGlobalAPI(Vue)定...

  • Vue.js框架的理解

    面试官:聊聊对Vue.js框架的理解 分享目标: 了解 Vue.js 的组件化机制 了解 Vue.js 的响应式系...

  • 【Vue3.0】- 响应式

    响应式原理 响应式是 Vue.js 组件化更新渲染的一个核心机制 Vue2.x响应式实现 Object.defin...

  • Vue组件和父子组件

    【一】Vue组件化 创建组件构造器对象Vue.extend() 创建组件构造器const cpnc = Vue.e...

  • 从2张运行流程图看vue和react区别

    vue和react都是做组件化的,针对view层,支持参数和state,有虚拟dom机制,数据驱动视图。各自配套的...

  • Vue.js的组件化思想 —上

    一、Vue中的组件 Vue视图层的灵魂 — 组件化 组件(Component)是 Vue.js 最强大的功能之一...

  • (15)打鸡儿教你Vue.js

    组件化vue.js 组件单向绑定组件双向绑定组件单次绑定 创建组件构造器注册组件使用组件 Vue.extend()...

  • 大话大前端时代(一) —— Vue 与 iOS 的组件化

    大话大前端时代(一) —— Vue 与 iOS 的组件化 大话大前端时代(一) —— Vue 与 iOS 的组件化

  • vue

    1、什么是组件化、有什么好处、vue如何创建组件、vue组件之间如何通信 什么是组件化。任何一个页面我们都可以抽象...

  • Vue组件化

    定义Vue组件化 什么是组件化:组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的...

网友评论

      本文标题:Vue组件化机制

      本文链接:https://www.haomeiwen.com/subject/kiolmctx.html