....
patch......
合并配置组件场景
总结 那么⾄此,Vue 初始化阶段对于 options 的合并过程就介绍完了,我们需要知道对于 options 的 合并有 2 种⽅式,⼦组件初始化过程通过 initInternalComponent ⽅式要⽐外部初始化 Vue 通过 mergeOptions 的过程要快,合并完的结果保留在 vm.$options 中。 纵观⼀些库、框架的设计⼏乎都是类似的,⾃⾝定义了⼀些默认配置,同时⼜可以在初始化阶段传⼊ ⼀些定义配置,然后去 merge 默认配置,来达到定制化不同需求的⽬的。只不过在 Vue 的场景下,会 对 merge 的过程做⼀些精细化控制,虽然我们在开发⾃⼰的 JSSDK 的时候并没有 Vue 这么复杂,但这 个设计思想是值得我们借鉴的。
⽣命周期每个 Vue 实例在被创建之前都要经过⼀系列的初始化过程。例如需要设置数据监听、编译模板、挂载 实例到 DOM、在数据变化时更新 DOM 等。同时在这个过程中也会运⾏⼀些叫做⽣命周期钩⼦的函 数,给予⽤户机会在⼀些特定的场景下添加他们⾃⼰的代码。
总结
这⼀节主要介绍了 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 种组件的注册⽅式,全局注册和局 部注册。接下来我们从源码分析的⾓度来分析这两种注册⽅式。
全局注册 局部注册
总结
通过这⼀⼩节的分析,我们对组件的注册过程有了认识,并理解了全局注册和局部注册的差异。其实 在平时的⼯作中,当我们使⽤到组件库的时候,往往更通⽤基础组件都是全局注册的,⽽编写的特例 场景的业务组件都是局部注册的。了解了它们的原理,对我们在⼯作中到底使⽤全局注册组件还是局 部注册组件是有这⾮常好的指导意义的。
那么解下来,我们就根据这 3 种异步组件的情况,来分别去分析 resolveAsyncComponent 的逻辑。
普通函数异步组件总结
通过以上代码分析,我们对 Vue 的异步组件的实现有了深⼊的了解,知道了 3 种异步组件的实现⽅ 式,并且看到⾼级异步组件的实现是⾮常巧妙的,它实现了 loading、resolve、reject、timeout 4 种状 态。异步组件实现的本质是 2 次渲染,除了 0 delay 的⾼级异步组件第⼀次直接渲染成 loading 组件 外,其它都是第⼀次渲染⽣成⼀个注释节点,当异步获取组件成功后,再通过 forceRender 强制重 新渲染,这样就能正确渲染出我们异步加载的组件了。