1. 组件初始化
- 合并
options
:将构造函数上的options
与Vue
构造函数的options
进行合并 或 取出构造函数上的options
详情见参数合并章节
- 初始化数据:如
props
、data
、methods
等 - 初始化完毕:调用
created
钩子
2. 组件挂载
- 定义更新函数:即
updateComponent
方法
updateComponent方法分为两部分:
- render部分:依据render函数生成vnode,对于子组件则生成挂载vnode即组件占位符。
- update部分:依据render生成的vnode生成dom节点,并为dom节点添加属性绑定事件。
- 新建渲染
watcher
:每次触发watcher
时会调用updateComponent
方法,对当前组件重新计算vnode
并更新页面 - 在更新页面时(
update
阶段),如果遇到挂载vnode
,即该vnode
为组件,会对组件进行初始化,重复上述步骤
3. 组件更新(diff)
- 先触发父组件的页面更新,父组件执行
diff
算法时遇到组件挂载vnode
会修改子组件的props
值 - 修改
props
值触发子组件页面更新,由于watcher
的异步性,更新会在下一事件循环中执行 - 比对根节点是否相等,不等则新建
dom
,相等则执行子组件的diff
算法
4. 参数合并(mixin)
mixin
阶段,Vue
构造函数会将mixin
的配置项挂载在自身的options
属性下。- 对于根组件,在初始化阶段将
Vue
构造函数的options
与自身的配置项进行合并,每种属性有不同的合并策略。 - 对于子组件,会在创建挂载
vnode
时构建当前组件的构造函数,构造函数构建完毕后执行合并过程,将自身配置与Vue
构造函数的options
属性进行合并。
5. 异步组件
- 异步组件的加载配合了
webpack
的语法 - 在子组件构建挂载
vnode
过程中,调用了createComponent
方法 createComponent
方法会根据返回的构造器,对构造器中的内容进行渲染- 高级异步组件利用这个方法,返回不同的构造器,实现
loading
,error
,组件本身的渲染
6. 父子组件生命周期顺序
挂载过程
父组件beforeCreate
父组件create
父组件beforeMount
子组件beforeCreate
子组件create
子组件beforeMount
子组件mounted
父组件mounted
更新过程
父组件beforeUpdate
子组件beforeUpdate
子组件updated
父组件updated
销毁过程
父组件beforeDestroy
子组件beforeDestroy
子组件destroyed
父组件destroyed
对于mounted
,updated
,destroyed
过程,皆为父组件先调用before
钩子,再传递至子组件,子组件调用完整的钩子之后,再由父组件调用ed
钩子