Vue源码之组件化/生命周期(个人向)

2024-09-04 01:27:44

大致流程

具体流程

组件化

（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.接下来应该会更新我觉得最关键的响应式的部分了，也是贼耗费经历的部分。

最新文章

热门文章