Vue源码分析(2)——组件化

1. 组件初始化

  1. 合并options:将构造函数上的optionsVue构造函数的options进行合并 或 取出构造函数上的options

详情见参数合并章节

  1. 初始化数据:如propsdatamethods
  2. 初始化完毕:调用created钩子

2. 组件挂载

  1. 定义更新函数:即updateComponent方法

updateComponent方法分为两部分:

  1. render部分:依据render函数生成vnode,对于子组件则生成挂载vnode即组件占位符。
  2. update部分:依据render生成的vnode生成dom节点,并为dom节点添加属性绑定事件。
  1. 新建渲染watcher:每次触发watcher时会调用updateComponent方法,对当前组件重新计算vnode并更新页面
  2. 在更新页面时(update阶段),如果遇到挂载vnode,即该vnode为组件,会对组件进行初始化,重复上述步骤

在这里插入图片描述

3. 组件更新(diff)

  1. 先触发父组件的页面更新,父组件执行diff算法时遇到组件挂载vnode会修改子组件的props
  2. 修改props值触发子组件页面更新,由于watcher的异步性,更新会在下一事件循环中执行
  3. 比对根节点是否相等,不等则新建dom,相等则执行子组件的diff算法

在这里插入图片描述

4. 参数合并(mixin)

  1. mixin阶段,Vue构造函数会将mixin的配置项挂载在自身的options属性下。
  2. 对于根组件,在初始化阶段将Vue构造函数的options与自身的配置项进行合并,每种属性有不同的合并策略。
  3. 对于子组件,会在创建挂载vnode时构建当前组件的构造函数,构造函数构建完毕后执行合并过程,将自身配置与Vue构造函数的options属性进行合并。

在这里插入图片描述

5. 异步组件

  1. 异步组件的加载配合了webpack的语法
  2. 在子组件构建挂载vnode过程中,调用了createComponent方法
  3. createComponent方法会根据返回的构造器,对构造器中的内容进行渲染
  4. 高级异步组件利用这个方法,返回不同的构造器,实现loading,error,组件本身的渲染
    在这里插入图片描述

6. 父子组件生命周期顺序

挂载过程
父组件beforeCreate
父组件create
父组件beforeMount

子组件beforeCreate
子组件create
子组件beforeMount
子组件mounted

父组件mounted
更新过程
父组件beforeUpdate
子组件beforeUpdate
子组件updated
父组件updated
销毁过程
父组件beforeDestroy
子组件beforeDestroy
子组件destroyed
父组件destroyed

对于mountedupdateddestroyed过程,皆为父组件先调用before钩子,再传递至子组件,子组件调用完整的钩子之后,再由父组件调用ed钩子

猜你喜欢

转载自blog.csdn.net/weixin_44844528/article/details/106267864
今日推荐