运行带有副作用的render函数

  1. const setupRenderEffect = (
  2.   instance,
  3.   initialVNode,
  4.   container,
  5.   anchor,
  6.   parentSuspense,
  7.   isSVG,
  8.   optimized
  9. ) => {
  11.   instance.update = effect(function componentEffect() {
  13.     if (!instance.isMounted) {
  14.       let vnodeHook
  15.       const { el, props } = initialVNode
  16.       const { bm, m, parent } = instance
  17.       // beforeMount hook  执行beforeMount（挂载之前）钩子函数，是个数组。
  18.       if (bm) {
  19.         invokeArrayFns(bm)
  20.       }
  22.       // 生成子树结构，创建组件的vnode
  23.       // 执行组件内部的render函数 (手写或template编译生成) 生成渲染vnode，渲染vnode就是组件实际要渲染出来的
  24.       // 内容对应的vnode，并将渲染vnode存储到组件实例上
  25.       // 注意：执行render函数会访问组件实例上的响应式数据，从而触发依赖收集，当前定义的renderEffect会被收集到依赖仓库
  26.       // 当后续发生数据变化时，renderEffect则会被派发，触发re-render
  27.       const subTree = (instance.subTree = renderComponentRoot(instance))
  28.       if (el && hydrateNode) {
  30.       } else {
  32.         // 将子树渲染到container中
  33.         patch(
  34.           null,
  35.           subTree,
  36.           container,
  37.           anchor,
  38.           instance,
  39.           parentSuspense,
  40.           isSVG
  41.         )
  43.         initialVNode.el = subTree.el
  44.       }
  46.       // mounted hook
  47.       // 执行mount（挂载之后）钩子函数
  48.       if (m) {
  49.         queuePostRenderEffect(m, parentSuspense)
  50.       }
  52.       instance.isMounted = true
  53.       initialVNode = container = anchor = null
  54.     } else {
  55.       // updateComponent 更新组件，非首次
  56.       let { next, bu, u, parent, vnode } = instance
  57.       let originNext = next
  58.       let vnodeHook
  60.       if (next) {
  61.         next.el = vnode.el
  62.         updateComponentPreRender(instance, next, optimized)
  63.       } else {
  64.         next = vnode
  65.       }
  67.       const nextTree = renderComponentRoot(instance)
  68.       const prevTree = instance.subTree
  69.       instance.subTree = nextTree
  71.       // 把对应的subTree渲染到container中，子树可能是element、text、component等
  72.       patch(
  73.         prevTree,
  74.         nextTree,
  75.         // parent may have changed if it's in a teleport
  76.         hostParentNode(prevTree.el),
  77.         // anchor may have changed if it's in a fragment
  78.         getNextHostNode(prevTree),
  79.         instance,
  80.         parentSuspense,
  81.         isSVG
  82.       )
  84.       next.el = nextTree.el
  85.     }
  86.   }, createDevEffectOptions(instance))
  87. }

总结

该方法只要是实现 instance.update 方法，这个方法其实就是一个 effect 。

  • 在没有传入options.lazy时，会默认执行一次；
  • 触发effect的get，然后收集当前的componentEffect，当数据有变化时，会执行trigger
  • 当配置 scheduler为queueJob时，会放入全局队列queue中等待nextTick运行，因此多个状态会合并在一起并更新视图

主要做了3件事：

  1. 更新组件VNode节点
  2. 渲染子树VNode
  3. 根据新旧子VNode，执行 patch