首页 > 编程知识 正文

组件化开发,组件化编程

时间:2023-05-04 02:18:28 阅读:270291 作者:3988

createElement

....

patch

......

合并配置 

 

组件场景 

 

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

⽣命周期

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

beforeCreate    &    created

 

总结

这⼀节主要介绍了    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        强制重 新渲染,这样就能正确渲染出我们异步加载的组件了。
 

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。