否
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
