Vue源码之组件化/生命周期(我的向)

大体流程

具体流程

组件化

（createComponent）

构造⼦类构造函数

const baseCtor = context.$options._base

// plain options object: turn it into a constructor if (isObject(Ctor)) { Ctor = baseCtor.extend(Ctor) }

创立BaseCtor

• Vue.options._base =Vue

  • Vue.extend的做⽤就是构造⼀个Vue的⼦类，它使⽤⼀种⾮常经典的原型继承的⽅式把⼀个纯对 象转换⼀个继承于Vue 的构造器Sub 并返回，而后对Sub 这个对象本⾝扩展了⼀些属性，
    最后返回Sub

实例化Sub，走_init方法

安装组件钩⼦函数

//install component management hooks ontothe placeholder node installComponentHooks(data)

• 把componentVNodeHooks的钩⼦函数合并到 data.hook中。
• 使用mergeHook函数作钩子合并

实例化 vnode

new VNode

• 组件的Patch(同步数据驱动部分)=》_init

  if (vm.$options.el) { vm.$mount(vm.$options.el) }
  因为组件初始化的时候是不传 el 的，所以组件是⾃⼰接管了 $mount 的过程

  • 1.过程当中对于isCompont的判断,进行$options的合并

  • 2.在生成实例过程当中对Vm._vnode和Vm,_$Vnode（父）的父子关系判断处理，进行深度遍历处理。

  • 、最后执⾏、insert(parentElm, vnode.elm, refElm)、完成组件 的 DOM、插⼊，若是组件 patch、过程当中⼜建立了⼦组件，那么DOM 的插⼊顺序是先⼦后⽗。

总结

编写⼀个组件其实是编写 ⼀个 JavaScript对象，而后从新走相关的渲染流程，须要注意的是Vue中对配置合并的处理和是否为组件的判断处理。此处过于细致，不作深究

生命周期

CallHook

• Where:src/core/instance/lifecycle
• Do:调⽤某个⽣命周期钩⼦注册 的全部回调函数。

beforeCreate & created

_init 中

• Where:src/core/instance/init.js

• Do：beforeCreate和created的钩⼦调⽤是在initState的前

• initState 的做⽤ 是初始化 props 、 data 、 methods 、 watch 、 computed 等属性，

beforeMount & mounted

• 1.beforeMount发生在mount，
  2.通过_render和_upate到mounted
• insertedVnodeQueue 的添加顺序是先⼦后⽗，因此对于同步渲染的⼦组件⽽⾔， mounted钩 ⼦函数的执⾏顺序也是先⼦后⽗

beforeUpdate & updated

• beforeUpadte是Warcher前进行
• update的执⾏时机是在flushSchedulerQueue 函数调⽤（响应式重要内容）

beforeDestroy & destroyed

• 核心就是$destroy，它会执⾏vm.__patch__(vm._vnode, null)触发它⼦组件的销毁 钩⼦函数，这样⼀层层的递归调⽤，因此destroy钩⼦函数执⾏顺序是先⼦后⽗，和mounted过 程⼀样。

activated & deactivated

合并配置

this._init(options)

外部调用

• vm.$options = mergeOptions
  将parent和child合并成新对象返回

  • 1.递归调用extend和mixins合并到parent
  • 2.遍历parent调用mergeField
  • 3.，而后再遍历child，若是key不在perent的⾃⾝属性上，则调mergeField 。

内部调用（实例化）

• 走vue.extend
  最后通过initInternalComponent只是作了简单⼀层对象赋值，并不涉及到递归、合并策略等复 杂逻辑。
  ---

  总结

• 1.这一篇将组件化大体流程，生命周期和合并配置搞在了一块儿。有点乱。
• 2.可是说实话。整个组件化，不去细究就能大体感觉到仍是走的基础的VUE实例化的过程，只是对是否为组件进行判断处理。
• 3.生命周期如上，其实就是挂一个个钩子。

• 4.合并配置，在我看了仍是核心的进行遍历合并处理，能够多关注merge的过程 后记 1.这算是第二篇，发现了一个问题。XMind转MD确实方便，但貌似做为一个博客，是否是须要添加具体的VUE源码里的代码片断，更有利于阅读。也确实让人便于理解。可是这暂时不在计划内， 首先没那么多精力,其次，这个本就偏我的向，不是讲解类的，若是那天，有精力了，再说吧， 2.接下来应该会更新 我以为最关键的响应式的部分了，也是贼耗费经历的部分。