1、之前一直不知道初始化渲染的更新函数和响应式数据代理之间的联系
以下是初始化渲染的时候执行顺序:
a、在上面createApp的阶段后,咱们就能获取到rootCompontent,rootComponent是整个APP.js 导出的一个对象,rootContainer 则是需要挂载的真实dom节点;
————————————————
b、调用createVNode创建虚拟节点
const vnode = createVNode(rootComponent, rootProps)
————————————————
c、拿到虚拟节点后,调用 render(vnode);
————————————————
d、在render中直接调用patch(null, vnode, container)方法,并传入对应的参数;
————————————————
e、传入的 APP.js 是一个组件,走组件处理逻辑并传入对应的参数
————————————————
f、processComponent(n1, n2, container, parentComponent);
由于传入的参数n1为null,那么进入组件的mount逻辑并传入对应的参数mountComponent(n2, container, parentComponent);;
————————————————
g、在 mountComponent 中需要经过三层处理,把组件渲染为 render函数和对render函数进行依赖收集
(1)、createComponentInstance
(2)、setupCompoent
(3)、setupRenderEffect
在执行 setupRenderEffect 的时候会做两件事:
1、创建组件更新函数’componentUpdateFn(此函数是数据改变后set 里触发 trigger ---triggerEffects 后执行的更新函数)
2、声明了一个 effect 函数,该函数的作用是为数据变化和组件渲染之间建立响应式的联系,使得数据发生变化时调用对应的更新函数更新视图( const effect = (instance.effect = new ReactiveEffect(
componentUpdateFn,
NOOP,
() => queueJob(update),
instance.scope, // track it in component's effect scope
)))创建effect 之后 会执行run, 在执行effect.run()的时候 给activeEffect = this 做了赋值, 在get 进行track 的时候 使用到了这个 更新函数trackEffect(
activeEffect,
dep,
DEV
? { target,type, key, } : void 0,
) 进行依赖收集,将更新函数也就是(activeEffect)componentUpdateFn 放到dep中对应key 上;这样在后面进行set 触发trigger的时候 执行里面的(activeEffect)componentUpdateFn函数
以上是自己在进行源码解读的时候理解的问题,目前还是比较混乱,希望有大神能指点一二,谢谢