vue3 组件渲染/响应式架构图

否

set

N

renderComponentRoot(instance)

template编译后的渲染函数render渲染 $setup.hello 或 $setup.hello.aaa 时， 通过proxy，调用proxy的get

组件已挂载instance.isMounted

调用trackEffects

Y

调用setup，对对象执行代理

是

// reactive 会代理对象、数组    const hello = reactive({      aaa: 'okokokok'    });

template编译而来

function isReactive(value) {  if (isReadonly(value)) {    return isReactive(value[\"__v_raw\"    /* RAW */    ]);  }  return !!(value && value[\"__v_isReactive\"  /* IS_REACTIVE */  ]);}function isReadonly(value) {  return !!(value && value[\"__v_isReadonly\"  /* IS_READONLY */  ]);}function isShallow(value) {  return !!(value && value[\"__v_isShallow\"  /* IS_SHALLOW */  ]);}function isProxy(value) {  return isReactive(value) || isReadonly(value);}

target (  { aaa: 'okokokok'}  )

return target

回调更新 { aaa: 'aaaaaa' }

1. 一个target[key]下都有 dep2. 一个dep 下包含一个effect3. 一个effect下都有 ReactiveEffect deps 和一个 fn 更新渲染的函数

mountComponent

mutableHandlers，代理object/array，包含get/set/deleteProperty/has/ownKeys

componentUpdateFn

deletePropertyhasownKeys

target  ( xxx )

const subTree = instance.subTree = renderComponentRoot(instance);

                   

isReadonly(target)

get

dep...

调用template模板render函数

dep

const update = instance.update = () => effect.run();update()

setupComponent(instance)

此处为<script setup>...</script>编译后的代码

reactive

key xxx

renderComponentRoot

调用componentUpdateFn

setupStatefulComponent

你的组件

key  aaa