Skip to content
大纲

vue2初始化到更新完过程

  1. 执行_init方法
  2. 初始化生命周期
  3. 初始化事件监听
  4. 初始化$slot,render等方法
  5. 执行beforeCreated方法
  6. 初始化inject数据,添加响应式
  7. 初始化state数据,props-methods-data-computed-watch,并添加响应式
  8. 初始化provide数据,添加响应式
  9. 执行created方法
  10. 判断参数中是否含有挂载节点,有执行$mount方法。
  11. 执行beforeMounted方法
  12. 生成updateComponent方法,里面包含vm_update(vm_update)方法
  13. 实例化watcher方法,并会执行一次updateComponent,将当前Deps对象的target设置为当前watcher
  14. 执行vm._render,将模板生成为Vnode,并将其传入update方法。如果用到了做了数据劫持的get,会将watcher加入到这个属性的deps依赖里。
  15. 触发update方法里的patch方法,因为是首次渲染,不用比较,直接执行createElement方法。
  16. 遍历节点树,如果是子组件,则进一补执行其init方法,做之前的流程
  17. 如果是dom节点,直接根据节点类型生成dom,insert到父元素上。
  18. 深度遍历完,将根节点插入到传入的挂载节点上。
  19. 执行mounted方法。
  20. 响应式数据修改,触发set里deps的notice方法,通知watcher,执行updateComponent方法
  21. 内部判断已经执行了mounted,则去执行beforeUpdate方法
  22. 继续执行render方法,生成Vnode,传入update方法,执行patch方法
  23. 使用sameNode方法判断是否为同一节点
  24. 是继续执行patchNode方法比较
  25. 执行内部的prepatch钩子
  26. 判断是否为文本节点,是做文本比较,增删改等
  27. 不是,则判断新旧节点是否都有子节点,有,触发updatechidlren做双端比较执行diff算法
  28. 不一的化就做子节点的增删
  29. 都没子节点,则旧节点是文本节点,设置为空文本。
  30. 执行postPatch钩子
  31. 根据生成更新JSON信息,根据类型做不同的dom操作,最后插入到父节点中
  32. 触发update方法

Released under the MIT License.