组件化

小灰灰 2022-05-14 04:08 254阅读 0赞

# createElement #

....

# patch #

......

# 合并配置  #

![70][]

![70 1][]

![70 2][]

![70 3][]

![70 4][]

# 组件场景  #

![70 5][]

![70 6][]

![70 7][]

总结 那么⾄此，Vue    初始化阶段对于        options        的合并过程就介绍完了，我们需要知道对于        options        的 合并有    2    种⽅式，⼦组件初始化过程通过        initInternalComponent        ⽅式要⽐外部初始化    Vue    通过    mergeOptions        的过程要快，合并完的结果保留在        vm.$options        中。 纵观⼀些库、框架的设计⼏乎都是类似的，⾃⾝定义了⼀些默认配置，同时⼜可以在初始化阶段传⼊ ⼀些定义配置，然后去    merge    默认配置，来达到定制化不同需求的⽬的。只不过在    Vue    的场景下，会 对    merge    的过程做⼀些精细化控制，虽然我们在开发⾃⼰的    JSSDK    的时候并没有    Vue    这么复杂，但这 个设计思想是值得我们借鉴的。

# ⽣命周期 #

每个    Vue    实例在被创建之前都要经过⼀系列的初始化过程。例如需要设置数据监听、编译模板、挂载 实例到    DOM、在数据变化时更新    DOM    等。同时在这个过程中也会运⾏⼀些叫做⽣命周期钩⼦的函 数，给予⽤户机会在⼀些特定的场景下添加他们⾃⼰的代码。  
![70 8][]

![70 9][]

## beforeCreate    &    created ##

![70 10][]

![70 11][]

![70 12][]

![70 13][]

![70 14][]

![70 15][]

![70 16][]

总结

这⼀节主要介绍了    Vue    ⽣命周期中各个钩⼦函数的执⾏时机以及顺序，通过分析，我们知道了如在    created        钩⼦函数中可以访问到数据，在        mounted        钩⼦函数中可以访问到    DOM，在        destroy        钩 ⼦函数中可以做⼀些定时器销毁⼯作，了解它们有利于我们在合适的⽣命周期去做不同的事情。

##    组件注册 ##

在    Vue.js    中，除了它内置的组件如        keep-alive    、    component    、    transition    、    transitiongroup        等，其它⽤户⾃定义组件在使⽤前必须注册。很多同学在开发过程中可能会遇到如下报错信 息：  
'Unknown    custom    element:    <xxx>    -    did    you    register    the    component    correctly?

For    recursive    components,    make    sure    to    provide    the    "name"    option.'

⼀般报这个错的原因都是我们使⽤了未注册的组件。Vue.js    提供了    2    种组件的注册⽅式，全局注册和局 部注册。接下来我们从源码分析的⾓度来分析这两种注册⽅式。

## 全局注册   ##

![70 17][]

![70 18][]

![70 19][]

![70 20][]

## 局部注册 ##

![70 21][]

总结

通过这⼀⼩节的分析，我们对组件的注册过程有了认识，并理解了全局注册和局部注册的差异。其实 在平时的⼯作中，当我们使⽤到组件库的时候，往往更通⽤基础组件都是全局注册的，⽽编写的特例 场景的业务组件都是局部注册的。了解了它们的原理，对我们在⼯作中到底使⽤全局注册组件还是局 部注册组件是有这⾮常好的指导意义的。

## 异步组件 ##

![70 22][]

![70 23][]

![70 24][]

![70 25][]

那么解下来，我们就根据这    3    种异步组件的情况，来分别去分析        resolveAsyncComponent        的逻辑。

## 普通函数异步组件  ##

![70 26][]

![70 27][]

![70 28][]

![70 29][]

![70 30][]

![70 31][]

总结

通过以上代码分析，我们对    Vue    的异步组件的实现有了深⼊的了解，知道了    3    种异步组件的实现⽅ 式，并且看到⾼级异步组件的实现是⾮常巧妙的，它实现了    loading、resolve、reject、timeout    4    种状 态。异步组件实现的本质是    2    次渲染，除了    0    delay    的⾼级异步组件第⼀次直接渲染成    loading    组件 外，其它都是第⼀次渲染⽣成⼀个注释节点，当异步获取组件成功后，再通过        forceRender        强制重 新渲染，这样就能正确渲染出我们异步加载的组件了。

[70]: /images/20220514/3d76c598a7a34104a4ac92ccb68c7319.png
[70 1]: /images/20220514/1a850c2f14c241e8b3c36d9eaf0fda25.png
[70 2]: /images/20220514/4ff8d2220ad44c1c82db0060b722a388.png
[70 3]: /images/20220514/e3bed6204dd3420180f53dafecc75d90.png
[70 4]: /images/20220514/792aebad513f4ef6ae45d19cf22ee449.png
[70 5]: /images/20220514/a91379ec87cd45c6829a8e20e093597b.png
[70 6]: /images/20220514/fb401016c360469b91d14568f072930b.png
[70 7]: /images/20220514/de1e43ad5de44d68bcc4f6aceb2d172f.png
[70 8]: /images/20220514/5a5a604bbc904e76b47509b41ca291cb.png
[70 9]: /images/20220514/11729aee5ab448c2aabf9fded70e62bf.png
[70 10]: /images/20220514/32f686e6c3cd496ab1531b0edf32ac98.png
[70 11]: /images/20220514/63390fca33f74f7ca14a69b2e94efd85.png
[70 12]: /images/20220514/6491645cf6034f48a2c7e073110b8a76.png
[70 13]: /images/20220514/646cd2f82b6641edb521ab76ce5ee9ce.png
[70 14]: /images/20220514/e9ba9cef1ef34de5bf3c12c5860dd046.png
[70 15]: /images/20220514/f4162e01e49f458380104f154bf90ee9.png
[70 16]: /images/20220514/ca4fdb0ff3a24f8b9a097e8b285f42ab.png
[70 17]: /images/20220514/540d893a7a81419a8b049c474769e4b8.png
[70 18]: /images/20220514/f17217f31023486f82561a9d58fcd2b7.png
[70 19]: /images/20220514/5cab89c32f4f45d3819712484ca52624.png
[70 20]: /images/20220514/a5a0433e8bd240ee9175ea2d571fed30.png
[70 21]: /images/20220514/db62acd76a35480ba5a12b48e755d3bb.png
[70 22]: /images/20220514/5abc93de18d94414acc9c21e2886733d.png
[70 23]: /images/20220514/d0848a99d883453aaa14ef3b47a7331e.png
[70 24]: /images/20220514/98892a5a01e7457fbde564fdfd1c641d.png
[70 25]: /images/20220514/067d09942556430386199a8135bb1118.png
[70 26]: /images/20220514/181bc884e72749729c8afd8cdd2c13db.png
[70 27]: /images/20220514/76c4d65945fe4817beec3d7784ab2800.png
[70 28]: /images/20220514/7cd6a032a07a481897fffc60844fdb53.png
[70 29]: /images/20220514/7a7977fa708e47ccb5d0243f68582efb.png
[70 30]: /images/20220514/0ba8de2177cd414580fb523d4ec7dfa6.png
[70 31]: /images/20220514/8e785b797889404594a4b218131b4ac7.png