[{"data":1,"prerenderedAt":4577},["ShallowReactive",2],{"page-\u002Fvue\u002Fvue的组件和实例化模式设计思想":3},{"id":4,"title":5,"body":6,"description":12,"extension":4567,"meta":4568,"navigation":1709,"path":4573,"seo":4574,"stem":4575,"__hash__":4576},"content\u002FVue\u002Fvue的组件和实例化模式设计思想.md","Vue的组件和实例化模式设计思想",{"type":7,"value":8,"toc":4561},"minimark",[9,13,18,21,218,221,224,227,230,537,541,544,895,898,916,923,1847,1850,1929,1932,1935,2104,2107,2114,2117,2136,2139,2142,2815,2818,2859,2878,3008,3011,3018,3095,3102,3109,3493,3496,3499,3502,3509,4152,4155,4468,4471,4547,4554,4557],[10,11,12],"p",{},"我在学习vue的源码的时候有时候会被Component和Instance的关系绕进去，因此编写次笔记用于学习相关的架构设计和思想，本笔记锚定的是runtime-core模块内容，总结的是组件抽象、实例化和递归渲染的内容。",[14,15,17],"h2",{"id":16},"component","Component",[10,19,20],{},"官方术语里这个叫做组件定义或者组件选项对象，我一般叫他组件原型，里面保存的是静态配置，它是先从Component -> VNode -> instance的顺序在工作",[22,23,28],"pre",{"className":24,"code":25,"language":26,"meta":27,"style":27},"language-ts shiki shiki-themes github-light github-dark","export interface Component {\n  setup?: (setupProps: SetupProps, setupContext: SetupContext) => any;\n  render?: () => VNode;\n  expose: Expose;\n  data?: () => Record\u003Cstring, any>;\n  props?: string[] | Record\u003Cstring, any>;\n  mounted?: (proxy: any) => void;\n}\n","ts","",[29,30,31,51,97,115,128,157,186,212],"code",{"__ignoreMap":27},[32,33,36,40,43,47],"span",{"class":34,"line":35},"line",1,[32,37,39],{"class":38},"szBVR","export",[32,41,42],{"class":38}," interface",[32,44,46],{"class":45},"sScJk"," Component",[32,48,50],{"class":49},"sVt8B"," {\n",[32,52,54,57,60,63,67,70,73,76,79,81,84,87,90,94],{"class":34,"line":53},2,[32,55,56],{"class":45},"  setup",[32,58,59],{"class":38},"?:",[32,61,62],{"class":49}," (",[32,64,66],{"class":65},"s4XuR","setupProps",[32,68,69],{"class":38},":",[32,71,72],{"class":45}," SetupProps",[32,74,75],{"class":49},", ",[32,77,78],{"class":65},"setupContext",[32,80,69],{"class":38},[32,82,83],{"class":45}," SetupContext",[32,85,86],{"class":49},") ",[32,88,89],{"class":38},"=>",[32,91,93],{"class":92},"sj4cs"," any",[32,95,96],{"class":49},";\n",[32,98,100,103,105,108,110,113],{"class":34,"line":99},3,[32,101,102],{"class":45},"  render",[32,104,59],{"class":38},[32,106,107],{"class":49}," () ",[32,109,89],{"class":38},[32,111,112],{"class":45}," VNode",[32,114,96],{"class":49},[32,116,118,121,123,126],{"class":34,"line":117},4,[32,119,120],{"class":65},"  expose",[32,122,69],{"class":38},[32,124,125],{"class":45}," Expose",[32,127,96],{"class":49},[32,129,131,134,136,138,140,143,146,149,151,154],{"class":34,"line":130},5,[32,132,133],{"class":45},"  data",[32,135,59],{"class":38},[32,137,107],{"class":49},[32,139,89],{"class":38},[32,141,142],{"class":45}," Record",[32,144,145],{"class":49},"\u003C",[32,147,148],{"class":92},"string",[32,150,75],{"class":49},[32,152,153],{"class":92},"any",[32,155,156],{"class":49},">;\n",[32,158,160,163,165,168,171,174,176,178,180,182,184],{"class":34,"line":159},6,[32,161,162],{"class":65},"  props",[32,164,59],{"class":38},[32,166,167],{"class":92}," string",[32,169,170],{"class":49},"[] ",[32,172,173],{"class":38},"|",[32,175,142],{"class":45},[32,177,145],{"class":49},[32,179,148],{"class":92},[32,181,75],{"class":49},[32,183,153],{"class":92},[32,185,156],{"class":49},[32,187,189,192,194,196,199,201,203,205,207,210],{"class":34,"line":188},7,[32,190,191],{"class":45},"  mounted",[32,193,59],{"class":38},[32,195,62],{"class":49},[32,197,198],{"class":65},"proxy",[32,200,69],{"class":38},[32,202,93],{"class":92},[32,204,86],{"class":49},[32,206,89],{"class":38},[32,208,209],{"class":92}," void",[32,211,96],{"class":49},[32,213,215],{"class":34,"line":214},8,[32,216,217],{"class":49},"}\n",[10,219,220],{},"vnode.type指向静态的Component，vnode.component指向的是运行时的Instance组件，instance.type又指回Component，instance.vnode指回外壳Vnode。",[10,222,223],{},"在 initProps 和 updateProps 中，通过 instance.type.props读取声明的字段名单，用来区分外部传入的属性属于 instance.props 还是instance.attrs",[10,225,226],{},"defineProps",[10,228,229],{},"data在setupComponent中调用Component.data获取初始化状态对象，并用reactive包装后赋给instance.data。mounted在setupComponent中个会被包装并推入instance.m生命周期队列，执行Component.setup(instance.props, setupContext)，产出响应式状态setupState或者渲染反函数render，setupComponent中赋给instance.render。",[22,231,233],{"className":24,"code":232,"language":26,"meta":27,"style":27},"  if (Component.data) {\n    instance.data = reactive(Component.data());\n  }\n    if (Component.mounted) {\n    instance.m.push(() => {\n      Component.mounted?.call(instance.proxy, instance.proxy);\n    });\n  }\n  if (Component.setup) {\n    const setupContext = {\n      attrs: instance.attrs,\n      slots: instance.slots,\n      emit: instance.emit,\n      expose(exposed = {}) {\n        instance.exposed = exposed;\n      },\n    };\n    setCurrentInstance(instance); \u002F\u002F setup-entry\n    let setupResult;\n    try {\n      setupResult = Component.setup(instance.props, setupContext);\n    } finally {\n      setCurrentInstance(null); \u002F\u002F setup-out\n    }\n    if (isFunction(setupResult)) {\n      instance.render = setupResult;\n    } else if (isObject(setupResult)) {\n      instance.setupState = proxyRefs(setupResult);\n    }\n  }\n",[29,234,235,243,263,268,276,291,302,307,311,319,333,339,345,351,368,379,385,391,404,413,421,438,449,466,472,485,495,513,527,532],{"__ignoreMap":27},[32,236,237,240],{"class":34,"line":35},[32,238,239],{"class":38},"  if",[32,241,242],{"class":49}," (Component.data) {\n",[32,244,245,248,251,254,257,260],{"class":34,"line":53},[32,246,247],{"class":49},"    instance.data ",[32,249,250],{"class":38},"=",[32,252,253],{"class":45}," reactive",[32,255,256],{"class":49},"(Component.",[32,258,259],{"class":45},"data",[32,261,262],{"class":49},"());\n",[32,264,265],{"class":34,"line":99},[32,266,267],{"class":49},"  }\n",[32,269,270,273],{"class":34,"line":117},[32,271,272],{"class":38},"    if",[32,274,275],{"class":49}," (Component.mounted) {\n",[32,277,278,281,284,287,289],{"class":34,"line":130},[32,279,280],{"class":49},"    instance.m.",[32,282,283],{"class":45},"push",[32,285,286],{"class":49},"(() ",[32,288,89],{"class":38},[32,290,50],{"class":49},[32,292,293,296,299],{"class":34,"line":159},[32,294,295],{"class":49},"      Component.mounted?.",[32,297,298],{"class":45},"call",[32,300,301],{"class":49},"(instance.proxy, instance.proxy);\n",[32,303,304],{"class":34,"line":188},[32,305,306],{"class":49},"    });\n",[32,308,309],{"class":34,"line":214},[32,310,267],{"class":49},[32,312,314,316],{"class":34,"line":313},9,[32,315,239],{"class":38},[32,317,318],{"class":49}," (Component.setup) {\n",[32,320,322,325,328,331],{"class":34,"line":321},10,[32,323,324],{"class":38},"    const",[32,326,327],{"class":92}," setupContext",[32,329,330],{"class":38}," =",[32,332,50],{"class":49},[32,334,336],{"class":34,"line":335},11,[32,337,338],{"class":49},"      attrs: instance.attrs,\n",[32,340,342],{"class":34,"line":341},12,[32,343,344],{"class":49},"      slots: instance.slots,\n",[32,346,348],{"class":34,"line":347},13,[32,349,350],{"class":49},"      emit: instance.emit,\n",[32,352,354,357,360,363,365],{"class":34,"line":353},14,[32,355,356],{"class":45},"      expose",[32,358,359],{"class":49},"(",[32,361,362],{"class":65},"exposed",[32,364,330],{"class":38},[32,366,367],{"class":49}," {}) {\n",[32,369,371,374,376],{"class":34,"line":370},15,[32,372,373],{"class":49},"        instance.exposed ",[32,375,250],{"class":38},[32,377,378],{"class":49}," exposed;\n",[32,380,382],{"class":34,"line":381},16,[32,383,384],{"class":49},"      },\n",[32,386,388],{"class":34,"line":387},17,[32,389,390],{"class":49},"    };\n",[32,392,394,397,400],{"class":34,"line":393},18,[32,395,396],{"class":45},"    setCurrentInstance",[32,398,399],{"class":49},"(instance); ",[32,401,403],{"class":402},"sJ8bj","\u002F\u002F setup-entry\n",[32,405,407,410],{"class":34,"line":406},19,[32,408,409],{"class":38},"    let",[32,411,412],{"class":49}," setupResult;\n",[32,414,416,419],{"class":34,"line":415},20,[32,417,418],{"class":38},"    try",[32,420,50],{"class":49},[32,422,424,427,429,432,435],{"class":34,"line":423},21,[32,425,426],{"class":49},"      setupResult ",[32,428,250],{"class":38},[32,430,431],{"class":49}," Component.",[32,433,434],{"class":45},"setup",[32,436,437],{"class":49},"(instance.props, setupContext);\n",[32,439,441,444,447],{"class":34,"line":440},22,[32,442,443],{"class":49},"    } ",[32,445,446],{"class":38},"finally",[32,448,50],{"class":49},[32,450,452,455,457,460,463],{"class":34,"line":451},23,[32,453,454],{"class":45},"      setCurrentInstance",[32,456,359],{"class":49},[32,458,459],{"class":92},"null",[32,461,462],{"class":49},"); ",[32,464,465],{"class":402},"\u002F\u002F setup-out\n",[32,467,469],{"class":34,"line":468},24,[32,470,471],{"class":49},"    }\n",[32,473,475,477,479,482],{"class":34,"line":474},25,[32,476,272],{"class":38},[32,478,62],{"class":49},[32,480,481],{"class":45},"isFunction",[32,483,484],{"class":49},"(setupResult)) {\n",[32,486,488,491,493],{"class":34,"line":487},26,[32,489,490],{"class":49},"      instance.render ",[32,492,250],{"class":38},[32,494,412],{"class":49},[32,496,498,500,503,506,508,511],{"class":34,"line":497},27,[32,499,443],{"class":49},[32,501,502],{"class":38},"else",[32,504,505],{"class":38}," if",[32,507,62],{"class":49},[32,509,510],{"class":45},"isObject",[32,512,484],{"class":49},[32,514,516,519,521,524],{"class":34,"line":515},28,[32,517,518],{"class":49},"      instance.setupState ",[32,520,250],{"class":38},[32,522,523],{"class":45}," proxyRefs",[32,525,526],{"class":49},"(setupResult);\n",[32,528,530],{"class":34,"line":529},29,[32,531,471],{"class":49},[32,533,535],{"class":34,"line":534},30,[32,536,267],{"class":49},[14,538,540],{"id":539},"componentinstance","ComponentInstance",[10,542,543],{},"是框架内部维护的组件的运行时的状态，一个组件从生到死的所有动态数据都挂在它身上，贯穿整个生命周期。",[22,545,547],{"className":24,"code":546,"language":26,"meta":27,"style":27},"export interface ComponentInstance {\n  vnode: VNode;\n  data: any;\n  slots: Slots;\n  props: Record\u003Cstring, any>;\n  attrs: Record\u003Cstring, any>;\n  emit: Emit;\n  exposed: Record\u003Cstring, unknown>;\n  proxy: any;\n  update: Function | null;\n  type: Component;\n  setupState: Record\u003Cstring, any>;\n  render: Function | null;\n  subTree: VNode | null;\n  isMounted: boolean;\n  parent: ComponentInstance | null;\n  provides: Record\u003CPropertyKey, unknown>;\n  bm: LifecycleHooksArray;\n  m: LifecycleHooksArray;\n  bu: LifecycleHooksArray;\n  u: LifecycleHooksArray;\n  bum: LifecycleHooksArray;\n  um: LifecycleHooksArray;\n  isUnmounted: boolean;\n  effect: ReactiveEffect | null;\n}\n",[29,548,549,560,571,581,593,611,630,642,662,673,691,702,721,735,750,762,777,797,809,820,831,842,853,864,875,891],{"__ignoreMap":27},[32,550,551,553,555,558],{"class":34,"line":35},[32,552,39],{"class":38},[32,554,42],{"class":38},[32,556,557],{"class":45}," ComponentInstance",[32,559,50],{"class":49},[32,561,562,565,567,569],{"class":34,"line":53},[32,563,564],{"class":65},"  vnode",[32,566,69],{"class":38},[32,568,112],{"class":45},[32,570,96],{"class":49},[32,572,573,575,577,579],{"class":34,"line":99},[32,574,133],{"class":65},[32,576,69],{"class":38},[32,578,93],{"class":92},[32,580,96],{"class":49},[32,582,583,586,588,591],{"class":34,"line":117},[32,584,585],{"class":65},"  slots",[32,587,69],{"class":38},[32,589,590],{"class":45}," Slots",[32,592,96],{"class":49},[32,594,595,597,599,601,603,605,607,609],{"class":34,"line":130},[32,596,162],{"class":65},[32,598,69],{"class":38},[32,600,142],{"class":45},[32,602,145],{"class":49},[32,604,148],{"class":92},[32,606,75],{"class":49},[32,608,153],{"class":92},[32,610,156],{"class":49},[32,612,613,616,618,620,622,624,626,628],{"class":34,"line":159},[32,614,615],{"class":65},"  attrs",[32,617,69],{"class":38},[32,619,142],{"class":45},[32,621,145],{"class":49},[32,623,148],{"class":92},[32,625,75],{"class":49},[32,627,153],{"class":92},[32,629,156],{"class":49},[32,631,632,635,637,640],{"class":34,"line":188},[32,633,634],{"class":65},"  emit",[32,636,69],{"class":38},[32,638,639],{"class":45}," Emit",[32,641,96],{"class":49},[32,643,644,647,649,651,653,655,657,660],{"class":34,"line":214},[32,645,646],{"class":65},"  exposed",[32,648,69],{"class":38},[32,650,142],{"class":45},[32,652,145],{"class":49},[32,654,148],{"class":92},[32,656,75],{"class":49},[32,658,659],{"class":92},"unknown",[32,661,156],{"class":49},[32,663,664,667,669,671],{"class":34,"line":313},[32,665,666],{"class":65},"  proxy",[32,668,69],{"class":38},[32,670,93],{"class":92},[32,672,96],{"class":49},[32,674,675,678,680,683,686,689],{"class":34,"line":321},[32,676,677],{"class":45},"  update",[32,679,69],{"class":38},[32,681,682],{"class":45}," Function",[32,684,685],{"class":38}," |",[32,687,688],{"class":92}," null",[32,690,96],{"class":49},[32,692,693,696,698,700],{"class":34,"line":335},[32,694,695],{"class":65},"  type",[32,697,69],{"class":38},[32,699,46],{"class":45},[32,701,96],{"class":49},[32,703,704,707,709,711,713,715,717,719],{"class":34,"line":341},[32,705,706],{"class":65},"  setupState",[32,708,69],{"class":38},[32,710,142],{"class":45},[32,712,145],{"class":49},[32,714,148],{"class":92},[32,716,75],{"class":49},[32,718,153],{"class":92},[32,720,156],{"class":49},[32,722,723,725,727,729,731,733],{"class":34,"line":347},[32,724,102],{"class":45},[32,726,69],{"class":38},[32,728,682],{"class":45},[32,730,685],{"class":38},[32,732,688],{"class":92},[32,734,96],{"class":49},[32,736,737,740,742,744,746,748],{"class":34,"line":353},[32,738,739],{"class":65},"  subTree",[32,741,69],{"class":38},[32,743,112],{"class":45},[32,745,685],{"class":38},[32,747,688],{"class":92},[32,749,96],{"class":49},[32,751,752,755,757,760],{"class":34,"line":370},[32,753,754],{"class":65},"  isMounted",[32,756,69],{"class":38},[32,758,759],{"class":92}," boolean",[32,761,96],{"class":49},[32,763,764,767,769,771,773,775],{"class":34,"line":381},[32,765,766],{"class":65},"  parent",[32,768,69],{"class":38},[32,770,557],{"class":45},[32,772,685],{"class":38},[32,774,688],{"class":92},[32,776,96],{"class":49},[32,778,779,782,784,786,788,791,793,795],{"class":34,"line":387},[32,780,781],{"class":65},"  provides",[32,783,69],{"class":38},[32,785,142],{"class":45},[32,787,145],{"class":49},[32,789,790],{"class":45},"PropertyKey",[32,792,75],{"class":49},[32,794,659],{"class":92},[32,796,156],{"class":49},[32,798,799,802,804,807],{"class":34,"line":393},[32,800,801],{"class":65},"  bm",[32,803,69],{"class":38},[32,805,806],{"class":45}," LifecycleHooksArray",[32,808,96],{"class":49},[32,810,811,814,816,818],{"class":34,"line":406},[32,812,813],{"class":65},"  m",[32,815,69],{"class":38},[32,817,806],{"class":45},[32,819,96],{"class":49},[32,821,822,825,827,829],{"class":34,"line":415},[32,823,824],{"class":65},"  bu",[32,826,69],{"class":38},[32,828,806],{"class":45},[32,830,96],{"class":49},[32,832,833,836,838,840],{"class":34,"line":423},[32,834,835],{"class":65},"  u",[32,837,69],{"class":38},[32,839,806],{"class":45},[32,841,96],{"class":49},[32,843,844,847,849,851],{"class":34,"line":440},[32,845,846],{"class":65},"  bum",[32,848,69],{"class":38},[32,850,806],{"class":45},[32,852,96],{"class":49},[32,854,855,858,860,862],{"class":34,"line":451},[32,856,857],{"class":65},"  um",[32,859,69],{"class":38},[32,861,806],{"class":45},[32,863,96],{"class":49},[32,865,866,869,871,873],{"class":34,"line":468},[32,867,868],{"class":65},"  isUnmounted",[32,870,69],{"class":38},[32,872,759],{"class":92},[32,874,96],{"class":49},[32,876,877,880,882,885,887,889],{"class":34,"line":474},[32,878,879],{"class":65},"  effect",[32,881,69],{"class":38},[32,883,884],{"class":45}," ReactiveEffect",[32,886,685],{"class":38},[32,888,688],{"class":92},[32,890,96],{"class":49},[32,892,893],{"class":34,"line":487},[32,894,217],{"class":49},[10,896,897],{},"在初始化阶段setupComponent，他参与了状态存储，保存了自身的响应式数据data、setupState，以及从父组件接受到的拆分好的props、attrs、slots。",[22,899,901],{"className":24,"code":900,"language":26,"meta":27,"style":27},"setupResult = Component.setup(instance.props, setupContext);\n",[29,902,903],{"__ignoreMap":27},[32,904,905,908,910,912,914],{"class":34,"line":35},[32,906,907],{"class":49},"setupResult ",[32,909,250],{"class":38},[32,911,431],{"class":49},[32,913,434],{"class":45},[32,915,437],{"class":49},[10,917,918,919,922],{},"参与渲染代理instance.proxy，通过Proxy，把setupState、data、props、以及",[29,920,921],{},"$emit、$attrs、$slots","统一代理到一个对象上，作为render函数的this和第一个参数。",[22,924,926],{"className":24,"code":925,"language":26,"meta":27,"style":27},"instance.proxy = new Proxy(instance, {\n    get(target, key) {\n      const { setupState, data, props, attrs, slots, emit } = target;\n      if (typeof key === 'symbol') {\n        return;\n      }\n      if (hasOwn(setupState, key)) {\n        return setupState[key];\n      }\n      if (hasOwn(data, key)) {\n        return data[key];\n      }\n      if (hasOwn(props, key)) {\n        return props[key];\n      }\n      if (key === '$emit') {\n        return emit;\n      }\n      if (key === '$attrs') {\n        return attrs;\n      }\n      if (key === '$slots') {\n        return slots;\n      }\n    },\n    set(target, key, value) {\n      const { setupState, data, props } = target;\n      if (typeof key === 'symbol') {\n        return true;\n      }\n      if (hasOwn(setupState, key)) {\n        setupState[key] = value;\n        return true;\n      }\n      if (hasOwn(data, key)) {\n        data[key] = value;\n        return true;\n      }\n      if (hasOwn(props, key)) {\n        console.warn('props is readonly');\n        return true;\n      }\n      return true;\n    },\n  });\n};\n...\nconst setupRenderEffect = (\n  instance: ComponentInstance,\n  vnode: VNode,\n  container: Container,\n  anchor: Node | null,\n  internals: ComponentRendererInternals\n) => {\n  const componentUpdateFn = () => {\n    if (!instance.isMounted) {\n      invokeLifecycleHooks(instance.bm);\n      const subTree = instance.render?.call(instance.proxy, instance.proxy); \u002F\u002F 就是这里\n      instance.subTree = subTree;\n      internals.patch(null, subTree, container, anchor, instance); \u002F\u002F render\n      vnode.el = subTree.el;\n      instance.isMounted = true;\n      invokeLifecycleHooks(instance.m);\n      \u002F\u002F instance.type.mounted?.call(instance.proxy, instance.proxy);\n    } else {\n      invokeLifecycleHooks(instance.bu)\n      const prevTree = instance.subTree;\n      const nextTree = instance.render?.call(instance.proxy, instance.proxy);\n      instance.subTree = nextTree;\n      internals.patch(prevTree, nextTree, container, anchor, instance); \u002F\u002F update\n      invokeLifecycleHooks(instance.u);\n    }\n  };\n\n  let update: () => void;\n  const reactiveEffect = new ReactiveEffect(componentUpdateFn, () => {\n    queueJob(update);\n  });\n  instance.effect = reactiveEffect;\n  update = instance.update = () => {\n    if (instance.isUnmounted) {\n      return;\n    }\n    reactiveEffect.run();\n  };\n  update();\n};\n",[29,927,928,944,962,1005,1027,1034,1039,1051,1058,1062,1073,1080,1084,1095,1102,1106,1120,1127,1131,1144,1151,1155,1168,1175,1179,1184,1204,1226,1242,1251,1255,1266,1277,1286,1291,1302,1312,1321,1326,1337,1354,1363,1368,1378,1383,1389,1395,1401,1415,1428,1439,1452,1469,1480,1489,1506,1519,1528,1549,1560,1579,1590,1602,1610,1616,1625,1633,1646,1662,1672,1685,1693,1698,1704,1711,1730,1751,1760,1765,1776,1798,1806,1813,1818,1830,1835,1842],{"__ignoreMap":27},[32,929,930,933,935,938,941],{"class":34,"line":35},[32,931,932],{"class":49},"instance.proxy ",[32,934,250],{"class":38},[32,936,937],{"class":38}," new",[32,939,940],{"class":45}," Proxy",[32,942,943],{"class":49},"(instance, {\n",[32,945,946,949,951,954,956,959],{"class":34,"line":53},[32,947,948],{"class":45},"    get",[32,950,359],{"class":49},[32,952,953],{"class":65},"target",[32,955,75],{"class":49},[32,957,958],{"class":65},"key",[32,960,961],{"class":49},") {\n",[32,963,964,967,970,973,975,977,979,982,984,987,989,992,994,997,1000,1002],{"class":34,"line":99},[32,965,966],{"class":38},"      const",[32,968,969],{"class":49}," { ",[32,971,972],{"class":92},"setupState",[32,974,75],{"class":49},[32,976,259],{"class":92},[32,978,75],{"class":49},[32,980,981],{"class":92},"props",[32,983,75],{"class":49},[32,985,986],{"class":92},"attrs",[32,988,75],{"class":49},[32,990,991],{"class":92},"slots",[32,993,75],{"class":49},[32,995,996],{"class":92},"emit",[32,998,999],{"class":49}," } ",[32,1001,250],{"class":38},[32,1003,1004],{"class":49}," target;\n",[32,1006,1007,1010,1012,1015,1018,1021,1025],{"class":34,"line":117},[32,1008,1009],{"class":38},"      if",[32,1011,62],{"class":49},[32,1013,1014],{"class":38},"typeof",[32,1016,1017],{"class":49}," key ",[32,1019,1020],{"class":38},"===",[32,1022,1024],{"class":1023},"sZZnC"," 'symbol'",[32,1026,961],{"class":49},[32,1028,1029,1032],{"class":34,"line":130},[32,1030,1031],{"class":38},"        return",[32,1033,96],{"class":49},[32,1035,1036],{"class":34,"line":159},[32,1037,1038],{"class":49},"      }\n",[32,1040,1041,1043,1045,1048],{"class":34,"line":188},[32,1042,1009],{"class":38},[32,1044,62],{"class":49},[32,1046,1047],{"class":45},"hasOwn",[32,1049,1050],{"class":49},"(setupState, key)) {\n",[32,1052,1053,1055],{"class":34,"line":214},[32,1054,1031],{"class":38},[32,1056,1057],{"class":49}," setupState[key];\n",[32,1059,1060],{"class":34,"line":313},[32,1061,1038],{"class":49},[32,1063,1064,1066,1068,1070],{"class":34,"line":321},[32,1065,1009],{"class":38},[32,1067,62],{"class":49},[32,1069,1047],{"class":45},[32,1071,1072],{"class":49},"(data, key)) {\n",[32,1074,1075,1077],{"class":34,"line":335},[32,1076,1031],{"class":38},[32,1078,1079],{"class":49}," data[key];\n",[32,1081,1082],{"class":34,"line":341},[32,1083,1038],{"class":49},[32,1085,1086,1088,1090,1092],{"class":34,"line":347},[32,1087,1009],{"class":38},[32,1089,62],{"class":49},[32,1091,1047],{"class":45},[32,1093,1094],{"class":49},"(props, key)) {\n",[32,1096,1097,1099],{"class":34,"line":353},[32,1098,1031],{"class":38},[32,1100,1101],{"class":49}," props[key];\n",[32,1103,1104],{"class":34,"line":370},[32,1105,1038],{"class":49},[32,1107,1108,1110,1113,1115,1118],{"class":34,"line":381},[32,1109,1009],{"class":38},[32,1111,1112],{"class":49}," (key ",[32,1114,1020],{"class":38},[32,1116,1117],{"class":1023}," '$emit'",[32,1119,961],{"class":49},[32,1121,1122,1124],{"class":34,"line":387},[32,1123,1031],{"class":38},[32,1125,1126],{"class":49}," emit;\n",[32,1128,1129],{"class":34,"line":393},[32,1130,1038],{"class":49},[32,1132,1133,1135,1137,1139,1142],{"class":34,"line":406},[32,1134,1009],{"class":38},[32,1136,1112],{"class":49},[32,1138,1020],{"class":38},[32,1140,1141],{"class":1023}," '$attrs'",[32,1143,961],{"class":49},[32,1145,1146,1148],{"class":34,"line":415},[32,1147,1031],{"class":38},[32,1149,1150],{"class":49}," attrs;\n",[32,1152,1153],{"class":34,"line":423},[32,1154,1038],{"class":49},[32,1156,1157,1159,1161,1163,1166],{"class":34,"line":440},[32,1158,1009],{"class":38},[32,1160,1112],{"class":49},[32,1162,1020],{"class":38},[32,1164,1165],{"class":1023}," '$slots'",[32,1167,961],{"class":49},[32,1169,1170,1172],{"class":34,"line":451},[32,1171,1031],{"class":38},[32,1173,1174],{"class":49}," slots;\n",[32,1176,1177],{"class":34,"line":468},[32,1178,1038],{"class":49},[32,1180,1181],{"class":34,"line":474},[32,1182,1183],{"class":49},"    },\n",[32,1185,1186,1189,1191,1193,1195,1197,1199,1202],{"class":34,"line":487},[32,1187,1188],{"class":45},"    set",[32,1190,359],{"class":49},[32,1192,953],{"class":65},[32,1194,75],{"class":49},[32,1196,958],{"class":65},[32,1198,75],{"class":49},[32,1200,1201],{"class":65},"value",[32,1203,961],{"class":49},[32,1205,1206,1208,1210,1212,1214,1216,1218,1220,1222,1224],{"class":34,"line":497},[32,1207,966],{"class":38},[32,1209,969],{"class":49},[32,1211,972],{"class":92},[32,1213,75],{"class":49},[32,1215,259],{"class":92},[32,1217,75],{"class":49},[32,1219,981],{"class":92},[32,1221,999],{"class":49},[32,1223,250],{"class":38},[32,1225,1004],{"class":49},[32,1227,1228,1230,1232,1234,1236,1238,1240],{"class":34,"line":515},[32,1229,1009],{"class":38},[32,1231,62],{"class":49},[32,1233,1014],{"class":38},[32,1235,1017],{"class":49},[32,1237,1020],{"class":38},[32,1239,1024],{"class":1023},[32,1241,961],{"class":49},[32,1243,1244,1246,1249],{"class":34,"line":529},[32,1245,1031],{"class":38},[32,1247,1248],{"class":92}," true",[32,1250,96],{"class":49},[32,1252,1253],{"class":34,"line":534},[32,1254,1038],{"class":49},[32,1256,1258,1260,1262,1264],{"class":34,"line":1257},31,[32,1259,1009],{"class":38},[32,1261,62],{"class":49},[32,1263,1047],{"class":45},[32,1265,1050],{"class":49},[32,1267,1269,1272,1274],{"class":34,"line":1268},32,[32,1270,1271],{"class":49},"        setupState[key] ",[32,1273,250],{"class":38},[32,1275,1276],{"class":49}," value;\n",[32,1278,1280,1282,1284],{"class":34,"line":1279},33,[32,1281,1031],{"class":38},[32,1283,1248],{"class":92},[32,1285,96],{"class":49},[32,1287,1289],{"class":34,"line":1288},34,[32,1290,1038],{"class":49},[32,1292,1294,1296,1298,1300],{"class":34,"line":1293},35,[32,1295,1009],{"class":38},[32,1297,62],{"class":49},[32,1299,1047],{"class":45},[32,1301,1072],{"class":49},[32,1303,1305,1308,1310],{"class":34,"line":1304},36,[32,1306,1307],{"class":49},"        data[key] ",[32,1309,250],{"class":38},[32,1311,1276],{"class":49},[32,1313,1315,1317,1319],{"class":34,"line":1314},37,[32,1316,1031],{"class":38},[32,1318,1248],{"class":92},[32,1320,96],{"class":49},[32,1322,1324],{"class":34,"line":1323},38,[32,1325,1038],{"class":49},[32,1327,1329,1331,1333,1335],{"class":34,"line":1328},39,[32,1330,1009],{"class":38},[32,1332,62],{"class":49},[32,1334,1047],{"class":45},[32,1336,1094],{"class":49},[32,1338,1340,1343,1346,1348,1351],{"class":34,"line":1339},40,[32,1341,1342],{"class":49},"        console.",[32,1344,1345],{"class":45},"warn",[32,1347,359],{"class":49},[32,1349,1350],{"class":1023},"'props is readonly'",[32,1352,1353],{"class":49},");\n",[32,1355,1357,1359,1361],{"class":34,"line":1356},41,[32,1358,1031],{"class":38},[32,1360,1248],{"class":92},[32,1362,96],{"class":49},[32,1364,1366],{"class":34,"line":1365},42,[32,1367,1038],{"class":49},[32,1369,1371,1374,1376],{"class":34,"line":1370},43,[32,1372,1373],{"class":38},"      return",[32,1375,1248],{"class":92},[32,1377,96],{"class":49},[32,1379,1381],{"class":34,"line":1380},44,[32,1382,1183],{"class":49},[32,1384,1386],{"class":34,"line":1385},45,[32,1387,1388],{"class":49},"  });\n",[32,1390,1392],{"class":34,"line":1391},46,[32,1393,1394],{"class":49},"};\n",[32,1396,1398],{"class":34,"line":1397},47,[32,1399,1400],{"class":38},"...\n",[32,1402,1404,1407,1410,1412],{"class":34,"line":1403},48,[32,1405,1406],{"class":38},"const",[32,1408,1409],{"class":45}," setupRenderEffect",[32,1411,330],{"class":38},[32,1413,1414],{"class":49}," (\n",[32,1416,1418,1421,1423,1425],{"class":34,"line":1417},49,[32,1419,1420],{"class":65},"  instance",[32,1422,69],{"class":38},[32,1424,557],{"class":45},[32,1426,1427],{"class":49},",\n",[32,1429,1431,1433,1435,1437],{"class":34,"line":1430},50,[32,1432,564],{"class":65},[32,1434,69],{"class":38},[32,1436,112],{"class":45},[32,1438,1427],{"class":49},[32,1440,1442,1445,1447,1450],{"class":34,"line":1441},51,[32,1443,1444],{"class":65},"  container",[32,1446,69],{"class":38},[32,1448,1449],{"class":45}," Container",[32,1451,1427],{"class":49},[32,1453,1455,1458,1460,1463,1465,1467],{"class":34,"line":1454},52,[32,1456,1457],{"class":65},"  anchor",[32,1459,69],{"class":38},[32,1461,1462],{"class":45}," Node",[32,1464,685],{"class":38},[32,1466,688],{"class":92},[32,1468,1427],{"class":49},[32,1470,1472,1475,1477],{"class":34,"line":1471},53,[32,1473,1474],{"class":65},"  internals",[32,1476,69],{"class":38},[32,1478,1479],{"class":45}," ComponentRendererInternals\n",[32,1481,1483,1485,1487],{"class":34,"line":1482},54,[32,1484,86],{"class":49},[32,1486,89],{"class":38},[32,1488,50],{"class":49},[32,1490,1492,1495,1498,1500,1502,1504],{"class":34,"line":1491},55,[32,1493,1494],{"class":38},"  const",[32,1496,1497],{"class":45}," componentUpdateFn",[32,1499,330],{"class":38},[32,1501,107],{"class":49},[32,1503,89],{"class":38},[32,1505,50],{"class":49},[32,1507,1509,1511,1513,1516],{"class":34,"line":1508},56,[32,1510,272],{"class":38},[32,1512,62],{"class":49},[32,1514,1515],{"class":38},"!",[32,1517,1518],{"class":49},"instance.isMounted) {\n",[32,1520,1522,1525],{"class":34,"line":1521},57,[32,1523,1524],{"class":45},"      invokeLifecycleHooks",[32,1526,1527],{"class":49},"(instance.bm);\n",[32,1529,1531,1533,1536,1538,1541,1543,1546],{"class":34,"line":1530},58,[32,1532,966],{"class":38},[32,1534,1535],{"class":92}," subTree",[32,1537,330],{"class":38},[32,1539,1540],{"class":49}," instance.render?.",[32,1542,298],{"class":45},[32,1544,1545],{"class":49},"(instance.proxy, instance.proxy); ",[32,1547,1548],{"class":402},"\u002F\u002F 就是这里\n",[32,1550,1552,1555,1557],{"class":34,"line":1551},59,[32,1553,1554],{"class":49},"      instance.subTree ",[32,1556,250],{"class":38},[32,1558,1559],{"class":49}," subTree;\n",[32,1561,1563,1566,1569,1571,1573,1576],{"class":34,"line":1562},60,[32,1564,1565],{"class":49},"      internals.",[32,1567,1568],{"class":45},"patch",[32,1570,359],{"class":49},[32,1572,459],{"class":92},[32,1574,1575],{"class":49},", subTree, container, anchor, instance); ",[32,1577,1578],{"class":402},"\u002F\u002F render\n",[32,1580,1582,1585,1587],{"class":34,"line":1581},61,[32,1583,1584],{"class":49},"      vnode.el ",[32,1586,250],{"class":38},[32,1588,1589],{"class":49}," subTree.el;\n",[32,1591,1593,1596,1598,1600],{"class":34,"line":1592},62,[32,1594,1595],{"class":49},"      instance.isMounted ",[32,1597,250],{"class":38},[32,1599,1248],{"class":92},[32,1601,96],{"class":49},[32,1603,1605,1607],{"class":34,"line":1604},63,[32,1606,1524],{"class":45},[32,1608,1609],{"class":49},"(instance.m);\n",[32,1611,1613],{"class":34,"line":1612},64,[32,1614,1615],{"class":402},"      \u002F\u002F instance.type.mounted?.call(instance.proxy, instance.proxy);\n",[32,1617,1619,1621,1623],{"class":34,"line":1618},65,[32,1620,443],{"class":49},[32,1622,502],{"class":38},[32,1624,50],{"class":49},[32,1626,1628,1630],{"class":34,"line":1627},66,[32,1629,1524],{"class":45},[32,1631,1632],{"class":49},"(instance.bu)\n",[32,1634,1636,1638,1641,1643],{"class":34,"line":1635},67,[32,1637,966],{"class":38},[32,1639,1640],{"class":92}," prevTree",[32,1642,330],{"class":38},[32,1644,1645],{"class":49}," instance.subTree;\n",[32,1647,1649,1651,1654,1656,1658,1660],{"class":34,"line":1648},68,[32,1650,966],{"class":38},[32,1652,1653],{"class":92}," nextTree",[32,1655,330],{"class":38},[32,1657,1540],{"class":49},[32,1659,298],{"class":45},[32,1661,301],{"class":49},[32,1663,1665,1667,1669],{"class":34,"line":1664},69,[32,1666,1554],{"class":49},[32,1668,250],{"class":38},[32,1670,1671],{"class":49}," nextTree;\n",[32,1673,1675,1677,1679,1682],{"class":34,"line":1674},70,[32,1676,1565],{"class":49},[32,1678,1568],{"class":45},[32,1680,1681],{"class":49},"(prevTree, nextTree, container, anchor, instance); ",[32,1683,1684],{"class":402},"\u002F\u002F update\n",[32,1686,1688,1690],{"class":34,"line":1687},71,[32,1689,1524],{"class":45},[32,1691,1692],{"class":49},"(instance.u);\n",[32,1694,1696],{"class":34,"line":1695},72,[32,1697,471],{"class":49},[32,1699,1701],{"class":34,"line":1700},73,[32,1702,1703],{"class":49},"  };\n",[32,1705,1707],{"class":34,"line":1706},74,[32,1708,1710],{"emptyLinePlaceholder":1709},true,"\n",[32,1712,1714,1717,1720,1722,1724,1726,1728],{"class":34,"line":1713},75,[32,1715,1716],{"class":38},"  let",[32,1718,1719],{"class":45}," update",[32,1721,69],{"class":38},[32,1723,107],{"class":49},[32,1725,89],{"class":38},[32,1727,209],{"class":92},[32,1729,96],{"class":49},[32,1731,1733,1735,1738,1740,1742,1744,1747,1749],{"class":34,"line":1732},76,[32,1734,1494],{"class":38},[32,1736,1737],{"class":92}," reactiveEffect",[32,1739,330],{"class":38},[32,1741,937],{"class":38},[32,1743,884],{"class":45},[32,1745,1746],{"class":49},"(componentUpdateFn, () ",[32,1748,89],{"class":38},[32,1750,50],{"class":49},[32,1752,1754,1757],{"class":34,"line":1753},77,[32,1755,1756],{"class":45},"    queueJob",[32,1758,1759],{"class":49},"(update);\n",[32,1761,1763],{"class":34,"line":1762},78,[32,1764,1388],{"class":49},[32,1766,1768,1771,1773],{"class":34,"line":1767},79,[32,1769,1770],{"class":49},"  instance.effect ",[32,1772,250],{"class":38},[32,1774,1775],{"class":49}," reactiveEffect;\n",[32,1777,1779,1782,1784,1787,1790,1792,1794,1796],{"class":34,"line":1778},80,[32,1780,1781],{"class":49},"  update ",[32,1783,250],{"class":38},[32,1785,1786],{"class":49}," instance.",[32,1788,1789],{"class":45},"update",[32,1791,330],{"class":38},[32,1793,107],{"class":49},[32,1795,89],{"class":38},[32,1797,50],{"class":49},[32,1799,1801,1803],{"class":34,"line":1800},81,[32,1802,272],{"class":38},[32,1804,1805],{"class":49}," (instance.isUnmounted) {\n",[32,1807,1809,1811],{"class":34,"line":1808},82,[32,1810,1373],{"class":38},[32,1812,96],{"class":49},[32,1814,1816],{"class":34,"line":1815},83,[32,1817,471],{"class":49},[32,1819,1821,1824,1827],{"class":34,"line":1820},84,[32,1822,1823],{"class":49},"    reactiveEffect.",[32,1825,1826],{"class":45},"run",[32,1828,1829],{"class":49},"();\n",[32,1831,1833],{"class":34,"line":1832},85,[32,1834,1703],{"class":49},[32,1836,1838,1840],{"class":34,"line":1837},86,[32,1839,677],{"class":45},[32,1841,1829],{"class":49},[32,1843,1845],{"class":34,"line":1844},87,[32,1846,1394],{"class":49},[10,1848,1849],{},"这里就可以参与通信，instance.emit预先用emit.bind(null, instance)的方式，绑定好当前的实例，触发事件去instance.vnode.props里找好对应的onXXX回调。",[22,1851,1853],{"className":24,"code":1852,"language":26,"meta":27,"style":27},"export type Emit = (event: string, ...args: unknown[]) => void;\n...\n\nif (key === '$emit') {\nreturn emit;\n}\n",[29,1854,1855,1897,1901,1905,1918,1925],{"__ignoreMap":27},[32,1856,1857,1859,1862,1864,1866,1868,1871,1873,1875,1877,1880,1883,1885,1888,1891,1893,1895],{"class":34,"line":35},[32,1858,39],{"class":38},[32,1860,1861],{"class":38}," type",[32,1863,639],{"class":45},[32,1865,330],{"class":38},[32,1867,62],{"class":49},[32,1869,1870],{"class":65},"event",[32,1872,69],{"class":38},[32,1874,167],{"class":92},[32,1876,75],{"class":49},[32,1878,1879],{"class":38},"...",[32,1881,1882],{"class":65},"args",[32,1884,69],{"class":38},[32,1886,1887],{"class":92}," unknown",[32,1889,1890],{"class":49},"[]) ",[32,1892,89],{"class":38},[32,1894,209],{"class":92},[32,1896,96],{"class":49},[32,1898,1899],{"class":34,"line":53},[32,1900,1400],{"class":38},[32,1902,1903],{"class":34,"line":99},[32,1904,1710],{"emptyLinePlaceholder":1709},[32,1906,1907,1910,1912,1914,1916],{"class":34,"line":117},[32,1908,1909],{"class":38},"if",[32,1911,1112],{"class":49},[32,1913,1020],{"class":38},[32,1915,1117],{"class":1023},[32,1917,961],{"class":49},[32,1919,1920,1923],{"class":34,"line":130},[32,1921,1922],{"class":38},"return",[32,1924,1126],{"class":49},[32,1926,1927],{"class":34,"line":159},[32,1928,217],{"class":49},[10,1930,1931],{},"还参与了记录父组件实例，并通过Object.create(parent.provides)的形式跨层级provide\u002Finject的原型链查找。",[10,1933,1934],{},"instance.subTree保存了当前组件render执行后生成的内部虚拟DOM树，instance.effect和instance.update保存了组件的ReactiveEffect实例和触发重绘的update函数，当自身响应式状态改变的时候，或者父组件的updateComponent中更新了Props的时候，都会调用instance.update()，拿旧的instance.subTree和新的nextTree进行patch对比。",[22,1936,1938],{"className":24,"code":1937,"language":26,"meta":27,"style":27},"  const componentUpdateFn = () => {\n    if (!instance.isMounted) {\n      invokeLifecycleHooks(instance.bm);\n      const subTree = instance.render?.call(instance.proxy, instance.proxy);\n      instance.subTree = subTree;\n      internals.patch(null, subTree, container, anchor, instance); \u002F\u002F render\n      vnode.el = subTree.el;\n      instance.isMounted = true;\n      invokeLifecycleHooks(instance.m);\n      \u002F\u002F instance.type.mounted?.call(instance.proxy, instance.proxy);\n    } else {\n      invokeLifecycleHooks(instance.bu)\n      const prevTree = instance.subTree;\n      const nextTree = instance.render?.call(instance.proxy, instance.proxy);\n      instance.subTree = nextTree;\n      internals.patch(prevTree, nextTree, container, anchor, instance); \u002F\u002F update\n      invokeLifecycleHooks(instance.u);\n    }\n  };\n",[29,1939,1940,1954,1964,1970,1984,1992,2006,2014,2024,2030,2034,2042,2048,2058,2072,2080,2090,2096,2100],{"__ignoreMap":27},[32,1941,1942,1944,1946,1948,1950,1952],{"class":34,"line":35},[32,1943,1494],{"class":38},[32,1945,1497],{"class":45},[32,1947,330],{"class":38},[32,1949,107],{"class":49},[32,1951,89],{"class":38},[32,1953,50],{"class":49},[32,1955,1956,1958,1960,1962],{"class":34,"line":53},[32,1957,272],{"class":38},[32,1959,62],{"class":49},[32,1961,1515],{"class":38},[32,1963,1518],{"class":49},[32,1965,1966,1968],{"class":34,"line":99},[32,1967,1524],{"class":45},[32,1969,1527],{"class":49},[32,1971,1972,1974,1976,1978,1980,1982],{"class":34,"line":117},[32,1973,966],{"class":38},[32,1975,1535],{"class":92},[32,1977,330],{"class":38},[32,1979,1540],{"class":49},[32,1981,298],{"class":45},[32,1983,301],{"class":49},[32,1985,1986,1988,1990],{"class":34,"line":130},[32,1987,1554],{"class":49},[32,1989,250],{"class":38},[32,1991,1559],{"class":49},[32,1993,1994,1996,1998,2000,2002,2004],{"class":34,"line":159},[32,1995,1565],{"class":49},[32,1997,1568],{"class":45},[32,1999,359],{"class":49},[32,2001,459],{"class":92},[32,2003,1575],{"class":49},[32,2005,1578],{"class":402},[32,2007,2008,2010,2012],{"class":34,"line":188},[32,2009,1584],{"class":49},[32,2011,250],{"class":38},[32,2013,1589],{"class":49},[32,2015,2016,2018,2020,2022],{"class":34,"line":214},[32,2017,1595],{"class":49},[32,2019,250],{"class":38},[32,2021,1248],{"class":92},[32,2023,96],{"class":49},[32,2025,2026,2028],{"class":34,"line":313},[32,2027,1524],{"class":45},[32,2029,1609],{"class":49},[32,2031,2032],{"class":34,"line":321},[32,2033,1615],{"class":402},[32,2035,2036,2038,2040],{"class":34,"line":335},[32,2037,443],{"class":49},[32,2039,502],{"class":38},[32,2041,50],{"class":49},[32,2043,2044,2046],{"class":34,"line":341},[32,2045,1524],{"class":45},[32,2047,1632],{"class":49},[32,2049,2050,2052,2054,2056],{"class":34,"line":347},[32,2051,966],{"class":38},[32,2053,1640],{"class":92},[32,2055,330],{"class":38},[32,2057,1645],{"class":49},[32,2059,2060,2062,2064,2066,2068,2070],{"class":34,"line":353},[32,2061,966],{"class":38},[32,2063,1653],{"class":92},[32,2065,330],{"class":38},[32,2067,1540],{"class":49},[32,2069,298],{"class":45},[32,2071,301],{"class":49},[32,2073,2074,2076,2078],{"class":34,"line":370},[32,2075,1554],{"class":49},[32,2077,250],{"class":38},[32,2079,1671],{"class":49},[32,2081,2082,2084,2086,2088],{"class":34,"line":381},[32,2083,1565],{"class":49},[32,2085,1568],{"class":45},[32,2087,1681],{"class":49},[32,2089,1684],{"class":402},[32,2091,2092,2094],{"class":34,"line":387},[32,2093,1524],{"class":45},[32,2095,1692],{"class":49},[32,2097,2098],{"class":34,"line":393},[32,2099,471],{"class":49},[32,2101,2102],{"class":34,"line":406},[32,2103,1703],{"class":49},[14,2105,2106],{"id":2106},"render的时期",[10,2108,2109,2110,2113],{},"通过 instance.render?.call(instance.proxy, instance.proxy) 调用，render方法内的this会指向instance.proxy，这样在render函数内部我们访问诸如count此类的值可以用proxy.count，或者this.count，都会经过Proxy的get拦截器，按照setupState->data->props-> ",[29,2111,2112],{},"$emit $attrs $slots","的顺序查找数据并完成依赖收集。",[10,2115,2116],{},"因为 instance.render 是在 reactiveEffect.run()内部运行的，所以每次运行前都会先执行 cleanupEffect(this)。清空上一次渲染收集的依赖，再在本次 render()，执行过程中重新收集（这样如果某次渲染因为 v-if \u002F三元表达式不再读取某个变量，该变量变化时就不会再触发重绘）。",[22,2118,2120],{"className":24,"code":2119,"language":26,"meta":27,"style":27},"const subTree = instance.render?.call(instance.proxy, instance.proxy);\n",[29,2121,2122],{"__ignoreMap":27},[32,2123,2124,2126,2128,2130,2132,2134],{"class":34,"line":35},[32,2125,1406],{"class":38},[32,2127,1535],{"class":92},[32,2129,330],{"class":38},[32,2131,1540],{"class":49},[32,2133,298],{"class":45},[32,2135,301],{"class":49},[10,2137,2138],{},"通过render会产出subTree，render内部通过调用h方法返回一颗代表组件内部的结构的VNode树，称作subTree。交由internals.patch处理为真实DOM，首次挂载的时候，调用 internals.patch(null, subTree, container, anchor,instance)。因为第一个参数 n1 是 null，patch 会把 subTree 递归创建为真实 DOM节点插入 container，最后把生成出来的根 DOM 元素赋给组件外壳 vnode.el =subTree.el（方便后续移动或卸载组件时拿到真实 DOM）。",[10,2140,2141],{},"依旧看这里，这里调用了注入的方法里的patch方法。",[22,2143,2145],{"className":24,"code":2144,"language":26,"meta":27,"style":27},"  const componentUpdateFn = () => {\n    if (!instance.isMounted) {\n      invokeLifecycleHooks(instance.bm);\n      const subTree = instance.render?.call(instance.proxy, instance.proxy);\n      instance.subTree = subTree;\n      internals.patch(null, subTree, container, anchor, instance); \u002F\u002F render\n      vnode.el = subTree.el;\n      instance.isMounted = true;\n      invokeLifecycleHooks(instance.m);\n      \u002F\u002F instance.type.mounted?.call(instance.proxy, instance.proxy);\n    } else {\n      invokeLifecycleHooks(instance.bu)\n      const prevTree = instance.subTree;\n      const nextTree = instance.render?.call(instance.proxy, instance.proxy);\n      instance.subTree = nextTree;\n      internals.patch(prevTree, nextTree, container, anchor, instance); \u002F\u002F update\n      invokeLifecycleHooks(instance.u);\n    }\n  };\n  \nexport type PatchFunction = (\n  n1: VNode | null,\n  n2: VNode,\n  container: Container,\n  anchor?: Node | null,\n  parentComponent?: ComponentInstance | null\n) => void;\n\n  const patch = (\n    n1: VNode | null,\n    n2: VNode,\n    container: Container,\n    anchor: Node | null = null,\n    parentComponent: ComponentInstance | null = null\n  ) => {\n    if (n1 === n2) {\n      return;\n    }\n    if (n1 !== null) {\n      if (!isSameVNode(n1, n2)) {\n        \u002F\u002F \u002F\u002F console.log('[patch\u003CVNode>]', n1, n2, 'unmount');\n        unmount(n1);\n        n1 = null; \u002F\u002F 原节点不复用\n      }\n    }\n    const { type, shapeFlag } = n2;\n    switch (type) {\n      case Text:\n        processText(n1, n2, container, anchor);\n        break;\n      case Fragment:\n        processFragment(n1, n2, container, anchor, parentComponent);\n        break;\n      default:\n        if (shapeFlag & ShapeFlags.ELEMENT) {\n          processElemet(n1, n2, container, anchor, parentComponent);\n        } else if (shapeFlag & ShapeFlags.COMPONENT) {\n          \u002F\u002F \u002F\u002F console.log('[patch]: component');\n          processComponent(n1, n2, container, anchor, parentComponent, internals);\n        } else if (shapeFlag & ShapeFlags.TELEPORT) {\n          type.process(n1, n2, container, anchor, {\n            mountChildren,\n            patchChildren,\n            unmountChildren,\n            createText: hostCreateText,\n            insert: hostInsert,\n            querySelector: hostQuerySelector,\n          });\n        }\n        break;\n    }\n  };\n",[29,2146,2147,2161,2171,2177,2191,2199,2213,2221,2231,2237,2241,2249,2255,2265,2279,2287,2297,2303,2307,2311,2316,2329,2344,2355,2365,2379,2393,2403,2407,2418,2433,2444,2455,2474,2491,2500,2512,2518,2522,2535,2549,2557,2565,2580,2584,2588,2609,2617,2625,2633,2640,2647,2655,2661,2669,2688,2695,2715,2723,2731,2750,2761,2766,2771,2776,2781,2786,2791,2796,2801,2807,2811],{"__ignoreMap":27},[32,2148,2149,2151,2153,2155,2157,2159],{"class":34,"line":35},[32,2150,1494],{"class":38},[32,2152,1497],{"class":45},[32,2154,330],{"class":38},[32,2156,107],{"class":49},[32,2158,89],{"class":38},[32,2160,50],{"class":49},[32,2162,2163,2165,2167,2169],{"class":34,"line":53},[32,2164,272],{"class":38},[32,2166,62],{"class":49},[32,2168,1515],{"class":38},[32,2170,1518],{"class":49},[32,2172,2173,2175],{"class":34,"line":99},[32,2174,1524],{"class":45},[32,2176,1527],{"class":49},[32,2178,2179,2181,2183,2185,2187,2189],{"class":34,"line":117},[32,2180,966],{"class":38},[32,2182,1535],{"class":92},[32,2184,330],{"class":38},[32,2186,1540],{"class":49},[32,2188,298],{"class":45},[32,2190,301],{"class":49},[32,2192,2193,2195,2197],{"class":34,"line":130},[32,2194,1554],{"class":49},[32,2196,250],{"class":38},[32,2198,1559],{"class":49},[32,2200,2201,2203,2205,2207,2209,2211],{"class":34,"line":159},[32,2202,1565],{"class":49},[32,2204,1568],{"class":45},[32,2206,359],{"class":49},[32,2208,459],{"class":92},[32,2210,1575],{"class":49},[32,2212,1578],{"class":402},[32,2214,2215,2217,2219],{"class":34,"line":188},[32,2216,1584],{"class":49},[32,2218,250],{"class":38},[32,2220,1589],{"class":49},[32,2222,2223,2225,2227,2229],{"class":34,"line":214},[32,2224,1595],{"class":49},[32,2226,250],{"class":38},[32,2228,1248],{"class":92},[32,2230,96],{"class":49},[32,2232,2233,2235],{"class":34,"line":313},[32,2234,1524],{"class":45},[32,2236,1609],{"class":49},[32,2238,2239],{"class":34,"line":321},[32,2240,1615],{"class":402},[32,2242,2243,2245,2247],{"class":34,"line":335},[32,2244,443],{"class":49},[32,2246,502],{"class":38},[32,2248,50],{"class":49},[32,2250,2251,2253],{"class":34,"line":341},[32,2252,1524],{"class":45},[32,2254,1632],{"class":49},[32,2256,2257,2259,2261,2263],{"class":34,"line":347},[32,2258,966],{"class":38},[32,2260,1640],{"class":92},[32,2262,330],{"class":38},[32,2264,1645],{"class":49},[32,2266,2267,2269,2271,2273,2275,2277],{"class":34,"line":353},[32,2268,966],{"class":38},[32,2270,1653],{"class":92},[32,2272,330],{"class":38},[32,2274,1540],{"class":49},[32,2276,298],{"class":45},[32,2278,301],{"class":49},[32,2280,2281,2283,2285],{"class":34,"line":370},[32,2282,1554],{"class":49},[32,2284,250],{"class":38},[32,2286,1671],{"class":49},[32,2288,2289,2291,2293,2295],{"class":34,"line":381},[32,2290,1565],{"class":49},[32,2292,1568],{"class":45},[32,2294,1681],{"class":49},[32,2296,1684],{"class":402},[32,2298,2299,2301],{"class":34,"line":387},[32,2300,1524],{"class":45},[32,2302,1692],{"class":49},[32,2304,2305],{"class":34,"line":393},[32,2306,471],{"class":49},[32,2308,2309],{"class":34,"line":406},[32,2310,1703],{"class":49},[32,2312,2313],{"class":34,"line":415},[32,2314,2315],{"class":49},"  \n",[32,2317,2318,2320,2322,2325,2327],{"class":34,"line":423},[32,2319,39],{"class":38},[32,2321,1861],{"class":38},[32,2323,2324],{"class":45}," PatchFunction",[32,2326,330],{"class":38},[32,2328,1414],{"class":49},[32,2330,2331,2334,2336,2338,2340,2342],{"class":34,"line":440},[32,2332,2333],{"class":65},"  n1",[32,2335,69],{"class":38},[32,2337,112],{"class":45},[32,2339,685],{"class":38},[32,2341,688],{"class":92},[32,2343,1427],{"class":49},[32,2345,2346,2349,2351,2353],{"class":34,"line":451},[32,2347,2348],{"class":65},"  n2",[32,2350,69],{"class":38},[32,2352,112],{"class":45},[32,2354,1427],{"class":49},[32,2356,2357,2359,2361,2363],{"class":34,"line":468},[32,2358,1444],{"class":65},[32,2360,69],{"class":38},[32,2362,1449],{"class":45},[32,2364,1427],{"class":49},[32,2366,2367,2369,2371,2373,2375,2377],{"class":34,"line":474},[32,2368,1457],{"class":65},[32,2370,59],{"class":38},[32,2372,1462],{"class":45},[32,2374,685],{"class":38},[32,2376,688],{"class":92},[32,2378,1427],{"class":49},[32,2380,2381,2384,2386,2388,2390],{"class":34,"line":487},[32,2382,2383],{"class":65},"  parentComponent",[32,2385,59],{"class":38},[32,2387,557],{"class":45},[32,2389,685],{"class":38},[32,2391,2392],{"class":92}," null\n",[32,2394,2395,2397,2399,2401],{"class":34,"line":497},[32,2396,86],{"class":49},[32,2398,89],{"class":38},[32,2400,209],{"class":92},[32,2402,96],{"class":49},[32,2404,2405],{"class":34,"line":515},[32,2406,1710],{"emptyLinePlaceholder":1709},[32,2408,2409,2411,2414,2416],{"class":34,"line":529},[32,2410,1494],{"class":38},[32,2412,2413],{"class":45}," patch",[32,2415,330],{"class":38},[32,2417,1414],{"class":49},[32,2419,2420,2423,2425,2427,2429,2431],{"class":34,"line":534},[32,2421,2422],{"class":65},"    n1",[32,2424,69],{"class":38},[32,2426,112],{"class":45},[32,2428,685],{"class":38},[32,2430,688],{"class":92},[32,2432,1427],{"class":49},[32,2434,2435,2438,2440,2442],{"class":34,"line":1257},[32,2436,2437],{"class":65},"    n2",[32,2439,69],{"class":38},[32,2441,112],{"class":45},[32,2443,1427],{"class":49},[32,2445,2446,2449,2451,2453],{"class":34,"line":1268},[32,2447,2448],{"class":65},"    container",[32,2450,69],{"class":38},[32,2452,1449],{"class":45},[32,2454,1427],{"class":49},[32,2456,2457,2460,2462,2464,2466,2468,2470,2472],{"class":34,"line":1279},[32,2458,2459],{"class":65},"    anchor",[32,2461,69],{"class":38},[32,2463,1462],{"class":45},[32,2465,685],{"class":38},[32,2467,688],{"class":92},[32,2469,330],{"class":38},[32,2471,688],{"class":92},[32,2473,1427],{"class":49},[32,2475,2476,2479,2481,2483,2485,2487,2489],{"class":34,"line":1288},[32,2477,2478],{"class":65},"    parentComponent",[32,2480,69],{"class":38},[32,2482,557],{"class":45},[32,2484,685],{"class":38},[32,2486,688],{"class":92},[32,2488,330],{"class":38},[32,2490,2392],{"class":92},[32,2492,2493,2496,2498],{"class":34,"line":1293},[32,2494,2495],{"class":49},"  ) ",[32,2497,89],{"class":38},[32,2499,50],{"class":49},[32,2501,2502,2504,2507,2509],{"class":34,"line":1304},[32,2503,272],{"class":38},[32,2505,2506],{"class":49}," (n1 ",[32,2508,1020],{"class":38},[32,2510,2511],{"class":49}," n2) {\n",[32,2513,2514,2516],{"class":34,"line":1314},[32,2515,1373],{"class":38},[32,2517,96],{"class":49},[32,2519,2520],{"class":34,"line":1323},[32,2521,471],{"class":49},[32,2523,2524,2526,2528,2531,2533],{"class":34,"line":1328},[32,2525,272],{"class":38},[32,2527,2506],{"class":49},[32,2529,2530],{"class":38},"!==",[32,2532,688],{"class":92},[32,2534,961],{"class":49},[32,2536,2537,2539,2541,2543,2546],{"class":34,"line":1339},[32,2538,1009],{"class":38},[32,2540,62],{"class":49},[32,2542,1515],{"class":38},[32,2544,2545],{"class":45},"isSameVNode",[32,2547,2548],{"class":49},"(n1, n2)) {\n",[32,2550,2551,2554],{"class":34,"line":1356},[32,2552,2553],{"class":402},"        \u002F\u002F",[32,2555,2556],{"class":402}," \u002F\u002F console.log('[patch\u003CVNode>]', n1, n2, 'unmount');\n",[32,2558,2559,2562],{"class":34,"line":1365},[32,2560,2561],{"class":45},"        unmount",[32,2563,2564],{"class":49},"(n1);\n",[32,2566,2567,2570,2572,2574,2577],{"class":34,"line":1370},[32,2568,2569],{"class":49},"        n1 ",[32,2571,250],{"class":38},[32,2573,688],{"class":92},[32,2575,2576],{"class":49},"; ",[32,2578,2579],{"class":402},"\u002F\u002F 原节点不复用\n",[32,2581,2582],{"class":34,"line":1380},[32,2583,1038],{"class":49},[32,2585,2586],{"class":34,"line":1385},[32,2587,471],{"class":49},[32,2589,2590,2592,2594,2597,2599,2602,2604,2606],{"class":34,"line":1391},[32,2591,324],{"class":38},[32,2593,969],{"class":49},[32,2595,2596],{"class":92},"type",[32,2598,75],{"class":49},[32,2600,2601],{"class":92},"shapeFlag",[32,2603,999],{"class":49},[32,2605,250],{"class":38},[32,2607,2608],{"class":49}," n2;\n",[32,2610,2611,2614],{"class":34,"line":1397},[32,2612,2613],{"class":38},"    switch",[32,2615,2616],{"class":49}," (type) {\n",[32,2618,2619,2622],{"class":34,"line":1403},[32,2620,2621],{"class":38},"      case",[32,2623,2624],{"class":49}," Text:\n",[32,2626,2627,2630],{"class":34,"line":1417},[32,2628,2629],{"class":45},"        processText",[32,2631,2632],{"class":49},"(n1, n2, container, anchor);\n",[32,2634,2635,2638],{"class":34,"line":1430},[32,2636,2637],{"class":38},"        break",[32,2639,96],{"class":49},[32,2641,2642,2644],{"class":34,"line":1441},[32,2643,2621],{"class":38},[32,2645,2646],{"class":49}," Fragment:\n",[32,2648,2649,2652],{"class":34,"line":1454},[32,2650,2651],{"class":45},"        processFragment",[32,2653,2654],{"class":49},"(n1, n2, container, anchor, parentComponent);\n",[32,2656,2657,2659],{"class":34,"line":1471},[32,2658,2637],{"class":38},[32,2660,96],{"class":49},[32,2662,2663,2666],{"class":34,"line":1482},[32,2664,2665],{"class":38},"      default",[32,2667,2668],{"class":49},":\n",[32,2670,2671,2674,2677,2680,2683,2686],{"class":34,"line":1491},[32,2672,2673],{"class":38},"        if",[32,2675,2676],{"class":49}," (shapeFlag ",[32,2678,2679],{"class":38},"&",[32,2681,2682],{"class":49}," ShapeFlags.",[32,2684,2685],{"class":92},"ELEMENT",[32,2687,961],{"class":49},[32,2689,2690,2693],{"class":34,"line":1508},[32,2691,2692],{"class":45},"          processElemet",[32,2694,2654],{"class":49},[32,2696,2697,2700,2702,2704,2706,2708,2710,2713],{"class":34,"line":1521},[32,2698,2699],{"class":49},"        } ",[32,2701,502],{"class":38},[32,2703,505],{"class":38},[32,2705,2676],{"class":49},[32,2707,2679],{"class":38},[32,2709,2682],{"class":49},[32,2711,2712],{"class":92},"COMPONENT",[32,2714,961],{"class":49},[32,2716,2717,2720],{"class":34,"line":1530},[32,2718,2719],{"class":402},"          \u002F\u002F",[32,2721,2722],{"class":402}," \u002F\u002F console.log('[patch]: component');\n",[32,2724,2725,2728],{"class":34,"line":1551},[32,2726,2727],{"class":45},"          processComponent",[32,2729,2730],{"class":49},"(n1, n2, container, anchor, parentComponent, internals);\n",[32,2732,2733,2735,2737,2739,2741,2743,2745,2748],{"class":34,"line":1562},[32,2734,2699],{"class":49},[32,2736,502],{"class":38},[32,2738,505],{"class":38},[32,2740,2676],{"class":49},[32,2742,2679],{"class":38},[32,2744,2682],{"class":49},[32,2746,2747],{"class":92},"TELEPORT",[32,2749,961],{"class":49},[32,2751,2752,2755,2758],{"class":34,"line":1581},[32,2753,2754],{"class":49},"          type.",[32,2756,2757],{"class":45},"process",[32,2759,2760],{"class":49},"(n1, n2, container, anchor, {\n",[32,2762,2763],{"class":34,"line":1592},[32,2764,2765],{"class":49},"            mountChildren,\n",[32,2767,2768],{"class":34,"line":1604},[32,2769,2770],{"class":49},"            patchChildren,\n",[32,2772,2773],{"class":34,"line":1612},[32,2774,2775],{"class":49},"            unmountChildren,\n",[32,2777,2778],{"class":34,"line":1618},[32,2779,2780],{"class":49},"            createText: hostCreateText,\n",[32,2782,2783],{"class":34,"line":1627},[32,2784,2785],{"class":49},"            insert: hostInsert,\n",[32,2787,2788],{"class":34,"line":1635},[32,2789,2790],{"class":49},"            querySelector: hostQuerySelector,\n",[32,2792,2793],{"class":34,"line":1648},[32,2794,2795],{"class":49},"          });\n",[32,2797,2798],{"class":34,"line":1664},[32,2799,2800],{"class":49},"        }\n",[32,2802,2803,2805],{"class":34,"line":1674},[32,2804,2637],{"class":38},[32,2806,96],{"class":49},[32,2808,2809],{"class":34,"line":1687},[32,2810,471],{"class":49},[32,2812,2813],{"class":34,"line":1695},[32,2814,1703],{"class":49},[10,2816,2817],{},"顶层暴露的render并不是这里的render，如果你看了example里的html，会发现最下面有渲染根组件的render调用：",[22,2819,2821],{"className":24,"code":2820,"language":26,"meta":27,"style":27},"render(\n    h({\n        type: Parent\n    }),\n    app\n)\n",[29,2822,2823,2831,2839,2844,2849,2854],{"__ignoreMap":27},[32,2824,2825,2828],{"class":34,"line":35},[32,2826,2827],{"class":45},"render",[32,2829,2830],{"class":49},"(\n",[32,2832,2833,2836],{"class":34,"line":53},[32,2834,2835],{"class":45},"    h",[32,2837,2838],{"class":49},"({\n",[32,2840,2841],{"class":34,"line":99},[32,2842,2843],{"class":49},"        type: Parent\n",[32,2845,2846],{"class":34,"line":117},[32,2847,2848],{"class":49},"    }),\n",[32,2850,2851],{"class":34,"line":130},[32,2852,2853],{"class":49},"    app\n",[32,2855,2856],{"class":34,"line":159},[32,2857,2858],{"class":49},")\n",[10,2860,2861,2862,2865,2866,2869,2870,2873,2874,2877],{},"这个render函数是真个应用的挂载\u002F卸载入口，当传入的render(vnode， container)时候，他会把上一次挂载在容器上的",[29,2863,2864],{},"container，_vnode","交给patch方法，并将本次vnode缓存到",[29,2867,2868],{},"container._vodce"," 上，当传入的render(null, container)时，如果 ",[29,2871,2872],{},"container._vnode"," 存在，则会调用 ",[29,2875,2876],{},"unmount(container._vnode)"," 卸载整棵应用树。",[22,2879,2881],{"className":24,"code":2880,"language":26,"meta":27,"style":27},"  const render = (vnode: VNode | null, container: Container): void => {\n    if (vnode === null) {\n      if (container._vnode) {\n        unmount(container._vnode);\n      }\n      container._vnode = null;\n      return;\n    }\n    patch(container._vnode || null, vnode, container);\n    container._vnode = vnode;\n  };\n",[29,2882,2883,2926,2939,2946,2953,2957,2968,2974,2978,2994,3004],{"__ignoreMap":27},[32,2884,2885,2887,2890,2892,2894,2897,2899,2901,2903,2905,2907,2910,2912,2914,2917,2919,2921,2924],{"class":34,"line":35},[32,2886,1494],{"class":38},[32,2888,2889],{"class":45}," render",[32,2891,330],{"class":38},[32,2893,62],{"class":49},[32,2895,2896],{"class":65},"vnode",[32,2898,69],{"class":38},[32,2900,112],{"class":45},[32,2902,685],{"class":38},[32,2904,688],{"class":92},[32,2906,75],{"class":49},[32,2908,2909],{"class":65},"container",[32,2911,69],{"class":38},[32,2913,1449],{"class":45},[32,2915,2916],{"class":49},")",[32,2918,69],{"class":38},[32,2920,209],{"class":92},[32,2922,2923],{"class":38}," =>",[32,2925,50],{"class":49},[32,2927,2928,2930,2933,2935,2937],{"class":34,"line":53},[32,2929,272],{"class":38},[32,2931,2932],{"class":49}," (vnode ",[32,2934,1020],{"class":38},[32,2936,688],{"class":92},[32,2938,961],{"class":49},[32,2940,2941,2943],{"class":34,"line":99},[32,2942,1009],{"class":38},[32,2944,2945],{"class":49}," (container._vnode) {\n",[32,2947,2948,2950],{"class":34,"line":117},[32,2949,2561],{"class":45},[32,2951,2952],{"class":49},"(container._vnode);\n",[32,2954,2955],{"class":34,"line":130},[32,2956,1038],{"class":49},[32,2958,2959,2962,2964,2966],{"class":34,"line":159},[32,2960,2961],{"class":49},"      container._vnode ",[32,2963,250],{"class":38},[32,2965,688],{"class":92},[32,2967,96],{"class":49},[32,2969,2970,2972],{"class":34,"line":188},[32,2971,1373],{"class":38},[32,2973,96],{"class":49},[32,2975,2976],{"class":34,"line":214},[32,2977,471],{"class":49},[32,2979,2980,2983,2986,2989,2991],{"class":34,"line":313},[32,2981,2982],{"class":45},"    patch",[32,2984,2985],{"class":49},"(container._vnode ",[32,2987,2988],{"class":38},"||",[32,2990,688],{"class":92},[32,2992,2993],{"class":49},", vnode, container);\n",[32,2995,2996,2999,3001],{"class":34,"line":321},[32,2997,2998],{"class":49},"    container._vnode ",[32,3000,250],{"class":38},[32,3002,3003],{"class":49}," vnode;\n",[32,3005,3006],{"class":34,"line":335},[32,3007,1703],{"class":49},[14,3009,3010],{"id":3010},"依赖追踪的周期",[10,3012,3013,3014,3017],{},"我们一般有两种存储依赖的集合，Dep ",[29,3015,3016],{},"dep: Set\u003CReactiveEffect>","。reactive对象使用的是全局的targetMap三层结构来存储的，WeakMap以key 和 Dep 为kv存放所有依赖该属性的ReactiveEffect。",[22,3019,3021],{"className":24,"code":3020,"language":26,"meta":27,"style":27},"const targetMap: WeakMap\u003Cobject, Map\u003Cstring | symbol, Set\u003CReactiveEffect>>> = new WeakMap();\nexport type Dep = Set\u003CReactiveEffect>;\n",[29,3022,3023,3075],{"__ignoreMap":27},[32,3024,3025,3027,3030,3032,3035,3037,3040,3042,3045,3047,3049,3051,3054,3056,3059,3061,3064,3067,3069,3071,3073],{"class":34,"line":35},[32,3026,1406],{"class":38},[32,3028,3029],{"class":92}," targetMap",[32,3031,69],{"class":38},[32,3033,3034],{"class":45}," WeakMap",[32,3036,145],{"class":49},[32,3038,3039],{"class":92},"object",[32,3041,75],{"class":49},[32,3043,3044],{"class":45},"Map",[32,3046,145],{"class":49},[32,3048,148],{"class":92},[32,3050,685],{"class":38},[32,3052,3053],{"class":92}," symbol",[32,3055,75],{"class":49},[32,3057,3058],{"class":45},"Set",[32,3060,145],{"class":49},[32,3062,3063],{"class":45},"ReactiveEffect",[32,3065,3066],{"class":49},">>> ",[32,3068,250],{"class":38},[32,3070,937],{"class":38},[32,3072,3034],{"class":45},[32,3074,1829],{"class":49},[32,3076,3077,3079,3081,3084,3086,3089,3091,3093],{"class":34,"line":53},[32,3078,39],{"class":38},[32,3080,1861],{"class":38},[32,3082,3083],{"class":45}," Dep",[32,3085,330],{"class":38},[32,3087,3088],{"class":45}," Set",[32,3090,145],{"class":49},[32,3092,3063],{"class":45},[32,3094,156],{"class":49},[10,3096,3097,3098,3101],{},"ref\u002Fcomputed实例因为自身挂一个 ",[29,3099,3100],{},"this.dep = new Set\u003CReactiveEffect>()"," ，所以不需要使用WeakMap。",[10,3103,3104,3105,3108],{},"同时，每个ReactiveEffect实例上也有一个数组叫做",[29,3106,3107],{},"public deps: Dep[] = []","。这个用来反方向记录自己被哪些属性的Set各地收集过，我们知道ReactiveEffect用来执行响应式副作用的，然后Dep是一系列的响应式副作用，不会重复执行。deps显而易见，是用来反向记录“我被哪些属性的 Set 收集过”。",[22,3110,3112],{"className":24,"code":3111,"language":26,"meta":27,"style":27},"export let activeEffect: ReactiveEffect | undefined = undefined;\nexport class ReactiveEffect\u003CT = any> {\n  public executeCount = 0;\n  public active = true;\n  public deps: Dep[] = []; \u002F\u002F deps from this ReactiveEffect used\n  public running = 0;\n  constructor(\n    public fn: () => T,\n    public scheduler?: () => void\n  ) {}\n  run(): T {\n    this.executeCount++;\n    if (!this.active) return this.fn() as T;\n    cleanupEffect(this);\n    let lastActiveEffect = activeEffect;\n    try {\n      this.running++;\n      activeEffect = this;\n      return this.fn() as T;\n    } finally {\n      this.running--;\n      activeEffect = lastActiveEffect;\n    }\n  }\n  stop() {\n    if (this.active) {\n      cleanupEffect(this);\n      this.active = false;\n    }\n  }\n}\n\n",[29,3113,3114,3139,3160,3175,3188,3209,3222,3229,3248,3264,3269,3283,3296,3331,3342,3354,3360,3372,3383,3401,3409,3420,3429,3433,3437,3445,3456,3467,3481,3485,3489],{"__ignoreMap":27},[32,3115,3116,3118,3121,3124,3126,3128,3130,3133,3135,3137],{"class":34,"line":35},[32,3117,39],{"class":38},[32,3119,3120],{"class":38}," let",[32,3122,3123],{"class":49}," activeEffect",[32,3125,69],{"class":38},[32,3127,884],{"class":45},[32,3129,685],{"class":38},[32,3131,3132],{"class":92}," undefined",[32,3134,330],{"class":38},[32,3136,3132],{"class":92},[32,3138,96],{"class":49},[32,3140,3141,3143,3146,3148,3150,3153,3155,3157],{"class":34,"line":53},[32,3142,39],{"class":38},[32,3144,3145],{"class":38}," class",[32,3147,884],{"class":45},[32,3149,145],{"class":49},[32,3151,3152],{"class":45},"T",[32,3154,330],{"class":38},[32,3156,93],{"class":92},[32,3158,3159],{"class":49},"> {\n",[32,3161,3162,3165,3168,3170,3173],{"class":34,"line":99},[32,3163,3164],{"class":38},"  public",[32,3166,3167],{"class":65}," executeCount",[32,3169,330],{"class":38},[32,3171,3172],{"class":92}," 0",[32,3174,96],{"class":49},[32,3176,3177,3179,3182,3184,3186],{"class":34,"line":117},[32,3178,3164],{"class":38},[32,3180,3181],{"class":65}," active",[32,3183,330],{"class":38},[32,3185,1248],{"class":92},[32,3187,96],{"class":49},[32,3189,3190,3192,3195,3197,3199,3201,3203,3206],{"class":34,"line":130},[32,3191,3164],{"class":38},[32,3193,3194],{"class":65}," deps",[32,3196,69],{"class":38},[32,3198,3083],{"class":45},[32,3200,170],{"class":49},[32,3202,250],{"class":38},[32,3204,3205],{"class":49}," []; ",[32,3207,3208],{"class":402},"\u002F\u002F deps from this ReactiveEffect used\n",[32,3210,3211,3213,3216,3218,3220],{"class":34,"line":159},[32,3212,3164],{"class":38},[32,3214,3215],{"class":65}," running",[32,3217,330],{"class":38},[32,3219,3172],{"class":92},[32,3221,96],{"class":49},[32,3223,3224,3227],{"class":34,"line":188},[32,3225,3226],{"class":38},"  constructor",[32,3228,2830],{"class":49},[32,3230,3231,3234,3237,3239,3241,3243,3246],{"class":34,"line":214},[32,3232,3233],{"class":38},"    public",[32,3235,3236],{"class":45}," fn",[32,3238,69],{"class":38},[32,3240,107],{"class":49},[32,3242,89],{"class":38},[32,3244,3245],{"class":45}," T",[32,3247,1427],{"class":49},[32,3249,3250,3252,3255,3257,3259,3261],{"class":34,"line":313},[32,3251,3233],{"class":38},[32,3253,3254],{"class":45}," scheduler",[32,3256,59],{"class":38},[32,3258,107],{"class":49},[32,3260,89],{"class":38},[32,3262,3263],{"class":92}," void\n",[32,3265,3266],{"class":34,"line":321},[32,3267,3268],{"class":49},"  ) {}\n",[32,3270,3271,3274,3277,3279,3281],{"class":34,"line":335},[32,3272,3273],{"class":45},"  run",[32,3275,3276],{"class":49},"()",[32,3278,69],{"class":38},[32,3280,3245],{"class":45},[32,3282,50],{"class":49},[32,3284,3285,3288,3291,3294],{"class":34,"line":341},[32,3286,3287],{"class":92},"    this",[32,3289,3290],{"class":49},".executeCount",[32,3292,3293],{"class":38},"++",[32,3295,96],{"class":49},[32,3297,3298,3300,3302,3304,3307,3310,3312,3315,3318,3321,3324,3327,3329],{"class":34,"line":347},[32,3299,272],{"class":38},[32,3301,62],{"class":49},[32,3303,1515],{"class":38},[32,3305,3306],{"class":92},"this",[32,3308,3309],{"class":49},".active) ",[32,3311,1922],{"class":38},[32,3313,3314],{"class":92}," this",[32,3316,3317],{"class":49},".",[32,3319,3320],{"class":45},"fn",[32,3322,3323],{"class":49},"() ",[32,3325,3326],{"class":38},"as",[32,3328,3245],{"class":45},[32,3330,96],{"class":49},[32,3332,3333,3336,3338,3340],{"class":34,"line":353},[32,3334,3335],{"class":45},"    cleanupEffect",[32,3337,359],{"class":49},[32,3339,3306],{"class":92},[32,3341,1353],{"class":49},[32,3343,3344,3346,3349,3351],{"class":34,"line":370},[32,3345,409],{"class":38},[32,3347,3348],{"class":49}," lastActiveEffect ",[32,3350,250],{"class":38},[32,3352,3353],{"class":49}," activeEffect;\n",[32,3355,3356,3358],{"class":34,"line":381},[32,3357,418],{"class":38},[32,3359,50],{"class":49},[32,3361,3362,3365,3368,3370],{"class":34,"line":387},[32,3363,3364],{"class":92},"      this",[32,3366,3367],{"class":49},".running",[32,3369,3293],{"class":38},[32,3371,96],{"class":49},[32,3373,3374,3377,3379,3381],{"class":34,"line":393},[32,3375,3376],{"class":49},"      activeEffect ",[32,3378,250],{"class":38},[32,3380,3314],{"class":92},[32,3382,96],{"class":49},[32,3384,3385,3387,3389,3391,3393,3395,3397,3399],{"class":34,"line":406},[32,3386,1373],{"class":38},[32,3388,3314],{"class":92},[32,3390,3317],{"class":49},[32,3392,3320],{"class":45},[32,3394,3323],{"class":49},[32,3396,3326],{"class":38},[32,3398,3245],{"class":45},[32,3400,96],{"class":49},[32,3402,3403,3405,3407],{"class":34,"line":415},[32,3404,443],{"class":49},[32,3406,446],{"class":38},[32,3408,50],{"class":49},[32,3410,3411,3413,3415,3418],{"class":34,"line":423},[32,3412,3364],{"class":92},[32,3414,3367],{"class":49},[32,3416,3417],{"class":38},"--",[32,3419,96],{"class":49},[32,3421,3422,3424,3426],{"class":34,"line":440},[32,3423,3376],{"class":49},[32,3425,250],{"class":38},[32,3427,3428],{"class":49}," lastActiveEffect;\n",[32,3430,3431],{"class":34,"line":451},[32,3432,471],{"class":49},[32,3434,3435],{"class":34,"line":468},[32,3436,267],{"class":49},[32,3438,3439,3442],{"class":34,"line":474},[32,3440,3441],{"class":45},"  stop",[32,3443,3444],{"class":49},"() {\n",[32,3446,3447,3449,3451,3453],{"class":34,"line":487},[32,3448,272],{"class":38},[32,3450,62],{"class":49},[32,3452,3306],{"class":92},[32,3454,3455],{"class":49},".active) {\n",[32,3457,3458,3461,3463,3465],{"class":34,"line":497},[32,3459,3460],{"class":45},"      cleanupEffect",[32,3462,359],{"class":49},[32,3464,3306],{"class":92},[32,3466,1353],{"class":49},[32,3468,3469,3471,3474,3476,3479],{"class":34,"line":515},[32,3470,3364],{"class":92},[32,3472,3473],{"class":49},".active ",[32,3475,250],{"class":38},[32,3477,3478],{"class":92}," false",[32,3480,96],{"class":49},[32,3482,3483],{"class":34,"line":529},[32,3484,471],{"class":49},[32,3486,3487],{"class":34,"line":534},[32,3488,267],{"class":49},[32,3490,3491],{"class":34,"line":1257},[32,3492,217],{"class":49},[10,3494,3495],{},"追踪的全流程以effect.run到trackEffects为例。当执行run的时候会用局部变量lastActiveEffect 保存外层的activeEffect，然后把全局 activeEffect 设为当前 this，再执行 this.fn()。执行完后在 finally 块里恢复 activeEffect = lastActiveEffect（index.ts:32-40）",[10,3497,3498],{},"为什么要用 lastActiveEffect？ 为了支持父子组件嵌套渲染或 computed 嵌套：父组件render 一半去挂载子组件时，activeEffect切为子组件；子组件挂载完恢复为父组件，不会弄丢父组件的上下文。",[10,3500,3501],{},"拦截读取用track，在this.fn执行期间，读取reactive对象的属性会触发Proxy的get 拦截器，调用track(target, key)，如果当前没有activeEffect，说明只是普通代码读取，不在effect\u002Frender\u002Fcomputed\u002Fwatch内部，直接return。",[10,3503,3504,3505,3508],{},"否则从 targetMap 中取出（或新建）该 ",[29,3506,3507],{},"target[key]"," 对应的 dep 集合，交给trackEffects(dep)。",[22,3510,3512],{"className":24,"code":3511,"language":26,"meta":27,"style":27},"const mutableHandlers: ProxyHandler\u003Cany> = {\n  get(target, key, receiver) {\n    if (key === ReactiveFlags.IS_REACTIVE) return true;\n    if (key === ReactiveFlags.IS_READONLY) return false;\n    if (key === ReactiveFlags.RAW) return target;\n\n    \u002F\u002F effect track\n    track(target, key);\n    let result = Reflect.get(target, key, receiver);\n    if (isObject(result)) {\n      result = createReactiveObject(result);\n    }\n    return result;\n  },\n  set(target, key, value, receiver) {\n    let oldValue = Reflect.get(target, key, receiver);\n    \u002F\u002F 相同值不需要触发更新，但赋值本身仍然是成功的。\n    if (oldValue === value) return true;\n    \u002F\u002F update\n    let result = Reflect.set(target, key, value, receiver);\n    if (result) {\n      trigger(target, key);\n    }\n    return result;\n  },\n};\n\nexport function track(target: object, key: string | symbol) {\n  if (!activeEffect) return;\n  let depsMap = targetMap.get(target);\n  if (!depsMap) {\n    targetMap.set(target, (depsMap = new Map()));\n  }\n  let dep = depsMap.get(key);\n  if (!dep) {\n    depsMap.set(key, (dep = new Set()));\n  }\n  trackEffects(dep);\n}\nexport function trackEffects(dep: Set\u003CReactiveEffect>) {\n  if (dep.has(activeEffect!)) {\n    return;\n  }\n  dep.add(activeEffect!);\n  activeEffect!.deps.push(dep);\n}\nfunction createReactiveObject(target: object) {\n  if (!isObject(target)) return target;\n  if (reactiveMap.has(target)) return reactiveMap.get(target);\n  let proxy = new Proxy(target, mutableHandlers);\n  reactiveMap.set(target, proxy);\n  return proxy;\n}\n",[29,3513,3514,3537,3557,3579,3600,3619,3623,3628,3636,3654,3665,3678,3682,3690,3695,3718,3733,3738,3756,3761,3777,3784,3791,3795,3801,3805,3809,3813,3846,3861,3878,3889,3909,3913,3930,3941,3959,3963,3971,3975,4000,4018,4024,4028,4042,4056,4060,4077,4094,4114,4130,4140,4148],{"__ignoreMap":27},[32,3515,3516,3518,3521,3523,3526,3528,3530,3533,3535],{"class":34,"line":35},[32,3517,1406],{"class":38},[32,3519,3520],{"class":92}," mutableHandlers",[32,3522,69],{"class":38},[32,3524,3525],{"class":45}," ProxyHandler",[32,3527,145],{"class":49},[32,3529,153],{"class":92},[32,3531,3532],{"class":49},"> ",[32,3534,250],{"class":38},[32,3536,50],{"class":49},[32,3538,3539,3542,3544,3546,3548,3550,3552,3555],{"class":34,"line":53},[32,3540,3541],{"class":45},"  get",[32,3543,359],{"class":49},[32,3545,953],{"class":65},[32,3547,75],{"class":49},[32,3549,958],{"class":65},[32,3551,75],{"class":49},[32,3553,3554],{"class":65},"receiver",[32,3556,961],{"class":49},[32,3558,3559,3561,3563,3565,3568,3571,3573,3575,3577],{"class":34,"line":99},[32,3560,272],{"class":38},[32,3562,1112],{"class":49},[32,3564,1020],{"class":38},[32,3566,3567],{"class":49}," ReactiveFlags.",[32,3569,3570],{"class":92},"IS_REACTIVE",[32,3572,86],{"class":49},[32,3574,1922],{"class":38},[32,3576,1248],{"class":92},[32,3578,96],{"class":49},[32,3580,3581,3583,3585,3587,3589,3592,3594,3596,3598],{"class":34,"line":117},[32,3582,272],{"class":38},[32,3584,1112],{"class":49},[32,3586,1020],{"class":38},[32,3588,3567],{"class":49},[32,3590,3591],{"class":92},"IS_READONLY",[32,3593,86],{"class":49},[32,3595,1922],{"class":38},[32,3597,3478],{"class":92},[32,3599,96],{"class":49},[32,3601,3602,3604,3606,3608,3610,3613,3615,3617],{"class":34,"line":130},[32,3603,272],{"class":38},[32,3605,1112],{"class":49},[32,3607,1020],{"class":38},[32,3609,3567],{"class":49},[32,3611,3612],{"class":92},"RAW",[32,3614,86],{"class":49},[32,3616,1922],{"class":38},[32,3618,1004],{"class":49},[32,3620,3621],{"class":34,"line":159},[32,3622,1710],{"emptyLinePlaceholder":1709},[32,3624,3625],{"class":34,"line":188},[32,3626,3627],{"class":402},"    \u002F\u002F effect track\n",[32,3629,3630,3633],{"class":34,"line":214},[32,3631,3632],{"class":45},"    track",[32,3634,3635],{"class":49},"(target, key);\n",[32,3637,3638,3640,3643,3645,3648,3651],{"class":34,"line":313},[32,3639,409],{"class":38},[32,3641,3642],{"class":49}," result ",[32,3644,250],{"class":38},[32,3646,3647],{"class":49}," Reflect.",[32,3649,3650],{"class":45},"get",[32,3652,3653],{"class":49},"(target, key, receiver);\n",[32,3655,3656,3658,3660,3662],{"class":34,"line":321},[32,3657,272],{"class":38},[32,3659,62],{"class":49},[32,3661,510],{"class":45},[32,3663,3664],{"class":49},"(result)) {\n",[32,3666,3667,3670,3672,3675],{"class":34,"line":335},[32,3668,3669],{"class":49},"      result ",[32,3671,250],{"class":38},[32,3673,3674],{"class":45}," createReactiveObject",[32,3676,3677],{"class":49},"(result);\n",[32,3679,3680],{"class":34,"line":341},[32,3681,471],{"class":49},[32,3683,3684,3687],{"class":34,"line":347},[32,3685,3686],{"class":38},"    return",[32,3688,3689],{"class":49}," result;\n",[32,3691,3692],{"class":34,"line":353},[32,3693,3694],{"class":49},"  },\n",[32,3696,3697,3700,3702,3704,3706,3708,3710,3712,3714,3716],{"class":34,"line":370},[32,3698,3699],{"class":45},"  set",[32,3701,359],{"class":49},[32,3703,953],{"class":65},[32,3705,75],{"class":49},[32,3707,958],{"class":65},[32,3709,75],{"class":49},[32,3711,1201],{"class":65},[32,3713,75],{"class":49},[32,3715,3554],{"class":65},[32,3717,961],{"class":49},[32,3719,3720,3722,3725,3727,3729,3731],{"class":34,"line":381},[32,3721,409],{"class":38},[32,3723,3724],{"class":49}," oldValue ",[32,3726,250],{"class":38},[32,3728,3647],{"class":49},[32,3730,3650],{"class":45},[32,3732,3653],{"class":49},[32,3734,3735],{"class":34,"line":387},[32,3736,3737],{"class":402},"    \u002F\u002F 相同值不需要触发更新，但赋值本身仍然是成功的。\n",[32,3739,3740,3742,3745,3747,3750,3752,3754],{"class":34,"line":393},[32,3741,272],{"class":38},[32,3743,3744],{"class":49}," (oldValue ",[32,3746,1020],{"class":38},[32,3748,3749],{"class":49}," value) ",[32,3751,1922],{"class":38},[32,3753,1248],{"class":92},[32,3755,96],{"class":49},[32,3757,3758],{"class":34,"line":406},[32,3759,3760],{"class":402},"    \u002F\u002F update\n",[32,3762,3763,3765,3767,3769,3771,3774],{"class":34,"line":415},[32,3764,409],{"class":38},[32,3766,3642],{"class":49},[32,3768,250],{"class":38},[32,3770,3647],{"class":49},[32,3772,3773],{"class":45},"set",[32,3775,3776],{"class":49},"(target, key, value, receiver);\n",[32,3778,3779,3781],{"class":34,"line":423},[32,3780,272],{"class":38},[32,3782,3783],{"class":49}," (result) {\n",[32,3785,3786,3789],{"class":34,"line":440},[32,3787,3788],{"class":45},"      trigger",[32,3790,3635],{"class":49},[32,3792,3793],{"class":34,"line":451},[32,3794,471],{"class":49},[32,3796,3797,3799],{"class":34,"line":468},[32,3798,3686],{"class":38},[32,3800,3689],{"class":49},[32,3802,3803],{"class":34,"line":474},[32,3804,3694],{"class":49},[32,3806,3807],{"class":34,"line":487},[32,3808,1394],{"class":49},[32,3810,3811],{"class":34,"line":497},[32,3812,1710],{"emptyLinePlaceholder":1709},[32,3814,3815,3817,3820,3823,3825,3827,3829,3832,3834,3836,3838,3840,3842,3844],{"class":34,"line":515},[32,3816,39],{"class":38},[32,3818,3819],{"class":38}," function",[32,3821,3822],{"class":45}," track",[32,3824,359],{"class":49},[32,3826,953],{"class":65},[32,3828,69],{"class":38},[32,3830,3831],{"class":92}," object",[32,3833,75],{"class":49},[32,3835,958],{"class":65},[32,3837,69],{"class":38},[32,3839,167],{"class":92},[32,3841,685],{"class":38},[32,3843,3053],{"class":92},[32,3845,961],{"class":49},[32,3847,3848,3850,3852,3854,3857,3859],{"class":34,"line":529},[32,3849,239],{"class":38},[32,3851,62],{"class":49},[32,3853,1515],{"class":38},[32,3855,3856],{"class":49},"activeEffect) ",[32,3858,1922],{"class":38},[32,3860,96],{"class":49},[32,3862,3863,3865,3868,3870,3873,3875],{"class":34,"line":534},[32,3864,1716],{"class":38},[32,3866,3867],{"class":49}," depsMap ",[32,3869,250],{"class":38},[32,3871,3872],{"class":49}," targetMap.",[32,3874,3650],{"class":45},[32,3876,3877],{"class":49},"(target);\n",[32,3879,3880,3882,3884,3886],{"class":34,"line":1257},[32,3881,239],{"class":38},[32,3883,62],{"class":49},[32,3885,1515],{"class":38},[32,3887,3888],{"class":49},"depsMap) {\n",[32,3890,3891,3894,3896,3899,3901,3903,3906],{"class":34,"line":1268},[32,3892,3893],{"class":49},"    targetMap.",[32,3895,3773],{"class":45},[32,3897,3898],{"class":49},"(target, (depsMap ",[32,3900,250],{"class":38},[32,3902,937],{"class":38},[32,3904,3905],{"class":45}," Map",[32,3907,3908],{"class":49},"()));\n",[32,3910,3911],{"class":34,"line":1279},[32,3912,267],{"class":49},[32,3914,3915,3917,3920,3922,3925,3927],{"class":34,"line":1288},[32,3916,1716],{"class":38},[32,3918,3919],{"class":49}," dep ",[32,3921,250],{"class":38},[32,3923,3924],{"class":49}," depsMap.",[32,3926,3650],{"class":45},[32,3928,3929],{"class":49},"(key);\n",[32,3931,3932,3934,3936,3938],{"class":34,"line":1293},[32,3933,239],{"class":38},[32,3935,62],{"class":49},[32,3937,1515],{"class":38},[32,3939,3940],{"class":49},"dep) {\n",[32,3942,3943,3946,3948,3951,3953,3955,3957],{"class":34,"line":1304},[32,3944,3945],{"class":49},"    depsMap.",[32,3947,3773],{"class":45},[32,3949,3950],{"class":49},"(key, (dep ",[32,3952,250],{"class":38},[32,3954,937],{"class":38},[32,3956,3088],{"class":45},[32,3958,3908],{"class":49},[32,3960,3961],{"class":34,"line":1314},[32,3962,267],{"class":49},[32,3964,3965,3968],{"class":34,"line":1323},[32,3966,3967],{"class":45},"  trackEffects",[32,3969,3970],{"class":49},"(dep);\n",[32,3972,3973],{"class":34,"line":1328},[32,3974,217],{"class":49},[32,3976,3977,3979,3981,3984,3986,3989,3991,3993,3995,3997],{"class":34,"line":1339},[32,3978,39],{"class":38},[32,3980,3819],{"class":38},[32,3982,3983],{"class":45}," trackEffects",[32,3985,359],{"class":49},[32,3987,3988],{"class":65},"dep",[32,3990,69],{"class":38},[32,3992,3088],{"class":45},[32,3994,145],{"class":49},[32,3996,3063],{"class":45},[32,3998,3999],{"class":49},">) {\n",[32,4001,4002,4004,4007,4010,4013,4015],{"class":34,"line":1356},[32,4003,239],{"class":38},[32,4005,4006],{"class":49}," (dep.",[32,4008,4009],{"class":45},"has",[32,4011,4012],{"class":49},"(activeEffect",[32,4014,1515],{"class":38},[32,4016,4017],{"class":49},")) {\n",[32,4019,4020,4022],{"class":34,"line":1365},[32,4021,3686],{"class":38},[32,4023,96],{"class":49},[32,4025,4026],{"class":34,"line":1370},[32,4027,267],{"class":49},[32,4029,4030,4033,4036,4038,4040],{"class":34,"line":1380},[32,4031,4032],{"class":49},"  dep.",[32,4034,4035],{"class":45},"add",[32,4037,4012],{"class":49},[32,4039,1515],{"class":38},[32,4041,1353],{"class":49},[32,4043,4044,4047,4049,4052,4054],{"class":34,"line":1385},[32,4045,4046],{"class":49},"  activeEffect",[32,4048,1515],{"class":38},[32,4050,4051],{"class":49},".deps.",[32,4053,283],{"class":45},[32,4055,3970],{"class":49},[32,4057,4058],{"class":34,"line":1391},[32,4059,217],{"class":49},[32,4061,4062,4065,4067,4069,4071,4073,4075],{"class":34,"line":1397},[32,4063,4064],{"class":38},"function",[32,4066,3674],{"class":45},[32,4068,359],{"class":49},[32,4070,953],{"class":65},[32,4072,69],{"class":38},[32,4074,3831],{"class":92},[32,4076,961],{"class":49},[32,4078,4079,4081,4083,4085,4087,4090,4092],{"class":34,"line":1403},[32,4080,239],{"class":38},[32,4082,62],{"class":49},[32,4084,1515],{"class":38},[32,4086,510],{"class":45},[32,4088,4089],{"class":49},"(target)) ",[32,4091,1922],{"class":38},[32,4093,1004],{"class":49},[32,4095,4096,4098,4101,4103,4105,4107,4110,4112],{"class":34,"line":1417},[32,4097,239],{"class":38},[32,4099,4100],{"class":49}," (reactiveMap.",[32,4102,4009],{"class":45},[32,4104,4089],{"class":49},[32,4106,1922],{"class":38},[32,4108,4109],{"class":49}," reactiveMap.",[32,4111,3650],{"class":45},[32,4113,3877],{"class":49},[32,4115,4116,4118,4121,4123,4125,4127],{"class":34,"line":1430},[32,4117,1716],{"class":38},[32,4119,4120],{"class":49}," proxy ",[32,4122,250],{"class":38},[32,4124,937],{"class":38},[32,4126,940],{"class":45},[32,4128,4129],{"class":49},"(target, mutableHandlers);\n",[32,4131,4132,4135,4137],{"class":34,"line":1441},[32,4133,4134],{"class":49},"  reactiveMap.",[32,4136,3773],{"class":45},[32,4138,4139],{"class":49},"(target, proxy);\n",[32,4141,4142,4145],{"class":34,"line":1454},[32,4143,4144],{"class":38},"  return",[32,4146,4147],{"class":49}," proxy;\n",[32,4149,4150],{"class":34,"line":1471},[32,4151,217],{"class":49},[10,4153,4154],{},"依赖收集的过程中标，如果现在执行的副作用存在于obj的某个属性的dep里，就不管，如果不存在就收集进去，执行依靠setter钩子里的trigger触发器，当obj的depsMap里有某个属性的deps时，就拷贝一份执行，逻辑清晰明了。",[22,4156,4158],{"className":24,"code":4157,"language":26,"meta":27,"style":27},"export function trigger(target: object, key: string | symbol) {\n  const depsMap = targetMap.get(target);\n  if (!depsMap) return;\n  const dep = depsMap.get(key);\n  console.log('[trigger]', key, dep);\n  if (!dep) return;\n  \u002F\u002F const effects = new Set(dep);\n  \u002F\u002F console.log('[execute]', effects);\n  triggerEffects(dep);\n}\n\u002F**\n * 触发依赖\n * @param dep 依赖集合\n *\u002F\nexport function triggerEffects(dep: Set\u003CReactiveEffect>) {\n  const effects = new Set(dep);\n  effects.forEach((effect) => {\n    if (effect !== activeEffect) {\n      if (effect.scheduler) {\n        {\n          if (!effect.running) {\n            \u002F\u002F prevent infinite loop\n            effect.scheduler();\n          }\n        }\n      } else {\n        effect.run();\n      }\n    }\n  });\n}\n",[29,4159,4160,4191,4206,4221,4236,4252,4267,4272,4277,4284,4288,4293,4298,4311,4316,4339,4354,4374,4386,4393,4398,4410,4415,4425,4430,4434,4443,4452,4456,4460,4464],{"__ignoreMap":27},[32,4161,4162,4164,4166,4169,4171,4173,4175,4177,4179,4181,4183,4185,4187,4189],{"class":34,"line":35},[32,4163,39],{"class":38},[32,4165,3819],{"class":38},[32,4167,4168],{"class":45}," trigger",[32,4170,359],{"class":49},[32,4172,953],{"class":65},[32,4174,69],{"class":38},[32,4176,3831],{"class":92},[32,4178,75],{"class":49},[32,4180,958],{"class":65},[32,4182,69],{"class":38},[32,4184,167],{"class":92},[32,4186,685],{"class":38},[32,4188,3053],{"class":92},[32,4190,961],{"class":49},[32,4192,4193,4195,4198,4200,4202,4204],{"class":34,"line":53},[32,4194,1494],{"class":38},[32,4196,4197],{"class":92}," depsMap",[32,4199,330],{"class":38},[32,4201,3872],{"class":49},[32,4203,3650],{"class":45},[32,4205,3877],{"class":49},[32,4207,4208,4210,4212,4214,4217,4219],{"class":34,"line":99},[32,4209,239],{"class":38},[32,4211,62],{"class":49},[32,4213,1515],{"class":38},[32,4215,4216],{"class":49},"depsMap) ",[32,4218,1922],{"class":38},[32,4220,96],{"class":49},[32,4222,4223,4225,4228,4230,4232,4234],{"class":34,"line":117},[32,4224,1494],{"class":38},[32,4226,4227],{"class":92}," dep",[32,4229,330],{"class":38},[32,4231,3924],{"class":49},[32,4233,3650],{"class":45},[32,4235,3929],{"class":49},[32,4237,4238,4241,4244,4246,4249],{"class":34,"line":130},[32,4239,4240],{"class":49},"  console.",[32,4242,4243],{"class":45},"log",[32,4245,359],{"class":49},[32,4247,4248],{"class":1023},"'[trigger]'",[32,4250,4251],{"class":49},", key, dep);\n",[32,4253,4254,4256,4258,4260,4263,4265],{"class":34,"line":159},[32,4255,239],{"class":38},[32,4257,62],{"class":49},[32,4259,1515],{"class":38},[32,4261,4262],{"class":49},"dep) ",[32,4264,1922],{"class":38},[32,4266,96],{"class":49},[32,4268,4269],{"class":34,"line":188},[32,4270,4271],{"class":402},"  \u002F\u002F const effects = new Set(dep);\n",[32,4273,4274],{"class":34,"line":214},[32,4275,4276],{"class":402},"  \u002F\u002F console.log('[execute]', effects);\n",[32,4278,4279,4282],{"class":34,"line":313},[32,4280,4281],{"class":45},"  triggerEffects",[32,4283,3970],{"class":49},[32,4285,4286],{"class":34,"line":321},[32,4287,217],{"class":49},[32,4289,4290],{"class":34,"line":335},[32,4291,4292],{"class":402},"\u002F**\n",[32,4294,4295],{"class":34,"line":341},[32,4296,4297],{"class":402}," * 触发依赖\n",[32,4299,4300,4303,4306,4308],{"class":34,"line":347},[32,4301,4302],{"class":402}," * ",[32,4304,4305],{"class":38},"@param",[32,4307,4227],{"class":49},[32,4309,4310],{"class":402}," 依赖集合\n",[32,4312,4313],{"class":34,"line":353},[32,4314,4315],{"class":402}," *\u002F\n",[32,4317,4318,4320,4322,4325,4327,4329,4331,4333,4335,4337],{"class":34,"line":370},[32,4319,39],{"class":38},[32,4321,3819],{"class":38},[32,4323,4324],{"class":45}," triggerEffects",[32,4326,359],{"class":49},[32,4328,3988],{"class":65},[32,4330,69],{"class":38},[32,4332,3088],{"class":45},[32,4334,145],{"class":49},[32,4336,3063],{"class":45},[32,4338,3999],{"class":49},[32,4340,4341,4343,4346,4348,4350,4352],{"class":34,"line":381},[32,4342,1494],{"class":38},[32,4344,4345],{"class":92}," effects",[32,4347,330],{"class":38},[32,4349,937],{"class":38},[32,4351,3088],{"class":45},[32,4353,3970],{"class":49},[32,4355,4356,4359,4362,4365,4368,4370,4372],{"class":34,"line":387},[32,4357,4358],{"class":49},"  effects.",[32,4360,4361],{"class":45},"forEach",[32,4363,4364],{"class":49},"((",[32,4366,4367],{"class":65},"effect",[32,4369,86],{"class":49},[32,4371,89],{"class":38},[32,4373,50],{"class":49},[32,4375,4376,4378,4381,4383],{"class":34,"line":393},[32,4377,272],{"class":38},[32,4379,4380],{"class":49}," (effect ",[32,4382,2530],{"class":38},[32,4384,4385],{"class":49}," activeEffect) {\n",[32,4387,4388,4390],{"class":34,"line":406},[32,4389,1009],{"class":38},[32,4391,4392],{"class":49}," (effect.scheduler) {\n",[32,4394,4395],{"class":34,"line":415},[32,4396,4397],{"class":49},"        {\n",[32,4399,4400,4403,4405,4407],{"class":34,"line":423},[32,4401,4402],{"class":38},"          if",[32,4404,62],{"class":49},[32,4406,1515],{"class":38},[32,4408,4409],{"class":49},"effect.running) {\n",[32,4411,4412],{"class":34,"line":440},[32,4413,4414],{"class":402},"            \u002F\u002F prevent infinite loop\n",[32,4416,4417,4420,4423],{"class":34,"line":451},[32,4418,4419],{"class":49},"            effect.",[32,4421,4422],{"class":45},"scheduler",[32,4424,1829],{"class":49},[32,4426,4427],{"class":34,"line":468},[32,4428,4429],{"class":49},"          }\n",[32,4431,4432],{"class":34,"line":474},[32,4433,2800],{"class":49},[32,4435,4436,4439,4441],{"class":34,"line":487},[32,4437,4438],{"class":49},"      } ",[32,4440,502],{"class":38},[32,4442,50],{"class":49},[32,4444,4445,4448,4450],{"class":34,"line":497},[32,4446,4447],{"class":49},"        effect.",[32,4449,1826],{"class":45},[32,4451,1829],{"class":49},[32,4453,4454],{"class":34,"line":515},[32,4455,1038],{"class":49},[32,4457,4458],{"class":34,"line":529},[32,4459,471],{"class":49},[32,4461,4462],{"class":34,"line":534},[32,4463,1388],{"class":49},[32,4465,4466],{"class":34,"line":1257},[32,4467,217],{"class":49},[10,4469,4470],{},"清理方法是：",[22,4472,4474],{"className":24,"code":4473,"language":26,"meta":27,"style":27},"export function cleanupEffect(effect: ReactiveEffect) {\n  const deps = effect.deps;\n  deps.forEach((dep) => dep.delete(effect));\n  deps.length = 0;\n}\n",[29,4475,4476,4495,4506,4530,4543],{"__ignoreMap":27},[32,4477,4478,4480,4482,4485,4487,4489,4491,4493],{"class":34,"line":35},[32,4479,39],{"class":38},[32,4481,3819],{"class":38},[32,4483,4484],{"class":45}," cleanupEffect",[32,4486,359],{"class":49},[32,4488,4367],{"class":65},[32,4490,69],{"class":38},[32,4492,884],{"class":45},[32,4494,961],{"class":49},[32,4496,4497,4499,4501,4503],{"class":34,"line":53},[32,4498,1494],{"class":38},[32,4500,3194],{"class":92},[32,4502,330],{"class":38},[32,4504,4505],{"class":49}," effect.deps;\n",[32,4507,4508,4511,4513,4515,4517,4519,4521,4524,4527],{"class":34,"line":99},[32,4509,4510],{"class":49},"  deps.",[32,4512,4361],{"class":45},[32,4514,4364],{"class":49},[32,4516,3988],{"class":65},[32,4518,86],{"class":49},[32,4520,89],{"class":38},[32,4522,4523],{"class":49}," dep.",[32,4525,4526],{"class":45},"delete",[32,4528,4529],{"class":49},"(effect));\n",[32,4531,4532,4534,4537,4539,4541],{"class":34,"line":117},[32,4533,4510],{"class":49},[32,4535,4536],{"class":92},"length",[32,4538,330],{"class":38},[32,4540,3172],{"class":92},[32,4542,96],{"class":49},[32,4544,4545],{"class":34,"line":130},[32,4546,217],{"class":49},[10,4548,4549,4550,4553],{},"在trigger内执行effect.run之后，在正式执行委托的this.fn之前会做一次清理，cleanupEffect，然后running计数器+1， 将正在激活的effect设置为自己，最后出去的时候计数器-1，将之前我们设置的activceEffect又设置回去，执行了之后操作obj的相关属性又会添加到deps里去， ",[29,4551,4552],{},"activeEffect!.deps.push(dep);"," 。",[10,4555,4556],{},"计数器是为了递归保护，如果有人分在effect里或schedular内部写了自增操作，比如Obj.count++，那么就会读get 和写set，这样触发triggerEffects的时候外层的if (effect !== activeEffect) 和内部的调度器的if (!effect.running) 就会拦截这次触发，防止run没跑完，内部又在无限递归调用导致栈溢出。",[4558,4559,4560],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":27,"searchDepth":53,"depth":53,"links":4562},[4563,4564,4565,4566],{"id":16,"depth":53,"text":17},{"id":539,"depth":53,"text":540},{"id":2106,"depth":53,"text":2106},{"id":3010,"depth":53,"text":3010},"md",{"date":4569,"tags":4570},"2026-08-21",[4571,4572],"vue","components","\u002Fvue\u002Fvue的组件和实例化模式设计思想",{"description":12},"Vue\u002Fvue的组件和实例化模式设计思想","OT_1DTY_QgdeZWRcGNXJPTo_W787jEOv9rAnd-aRzr4",1792775440356]