novel/vue.drawio at main · weishell/novel · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
<mxfile host="app.diagrams.net" modified="2022-08-28T04:51:41.754Z" agent="5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36" etag="MwuPZTbBAERbL8h7Oldd" version="20.2.7" type="github">
  <diagram name="Page-1" id="c7558073-3199-34d8-9f00-42111426c3f3">
    <mxGraphModel dx="1038" dy="1708" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="826" pageHeight="1169" background="none" math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        <mxCell id="2" value="&lt;p style=&quot;margin: 4px 0px 0px;&quot;&gt;&lt;u&gt;// 初始化一个应用的方式如下&lt;/u&gt;&lt;/p&gt;&lt;p style=&quot;margin: 4px 0px 0px;&quot;&gt;&lt;u&gt;&lt;br&gt;&lt;/u&gt;&lt;/p&gt;&lt;p style=&quot;margin: 4px 0px 0px;&quot;&gt;&lt;u&gt;import { createApp } from &#39;vue&#39;&lt;/u&gt;&lt;/p&gt;&lt;p style=&quot;margin: 4px 0px 0px;&quot;&gt;&lt;u&gt;&lt;br&gt;&lt;/u&gt;&lt;/p&gt;&lt;p style=&quot;margin: 4px 0px 0px;&quot;&gt;&lt;u&gt;import App from &#39;./app&#39;&lt;/u&gt;&lt;/p&gt;&lt;p style=&quot;margin: 4px 0px 0px;&quot;&gt;&lt;u&gt;&lt;br&gt;&lt;/u&gt;&lt;/p&gt;&lt;p style=&quot;margin: 4px 0px 0px;&quot;&gt;&lt;u&gt;const app = &lt;font color=&quot;#ff0080&quot;&gt;createApp(App)&lt;/font&gt;&lt;/u&gt;&lt;/p&gt;&lt;p style=&quot;margin: 4px 0px 0px;&quot;&gt;&lt;u&gt;&lt;br&gt;&lt;/u&gt;&lt;/p&gt;&lt;p style=&quot;margin: 4px 0px 0px;&quot;&gt;&lt;u&gt;app.mount(&#39;#app&#39;)&lt;/u&gt;&lt;/p&gt;&lt;div&gt;&lt;br&gt;&lt;/div&gt;" style="verticalAlign=middle;align=center;overflow=fill;fontSize=12;fontFamily=Helvetica;html=1;rounded=1;fontStyle=1;strokeWidth=3;fillColor=#E6FFCC" parent="1" vertex="1">
          <mxGeometry x="184" y="140" width="276" height="176" as="geometry" />
        </mxCell>
        <object label="Vue3" id="5">
          <mxCell style="shape=process;whiteSpace=wrap;align=center;verticalAlign=middle;size=0.0475;fontStyle=1;strokeWidth=3;fillColor=#FFCCCC" parent="1" vertex="1">
            <mxGeometry x="201" y="391" width="249" height="50" as="geometry" />
          </mxCell>
        </object>
        <mxCell id="56" value="" style="edgeStyle=elbowEdgeStyle;elbow=horizontal;strokeColor=#990000;strokeWidth=2" parent="1" source="2" target="5" edge="1">
          <mxGeometry width="100" height="100" relative="1" as="geometry">
            <mxPoint x="50" y="500" as="sourcePoint" />
            <mxPoint x="150" y="400" as="targetPoint" />
            <Array as="points">
              <mxPoint x="320" y="330" />
              <mxPoint x="290" y="350" />
              <mxPoint x="280" y="360" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="57" value="创建实例" style="text;spacingTop=-5;align=center" parent="1" vertex="1">
          <mxGeometry x="306" y="341" width="30" height="20" as="geometry" />
        </mxCell>
        <mxCell id="p2N06ffcsC0MJF7vxpci-98" value="&lt;div style=&quot;text-align: left;&quot;&gt;&lt;b&gt;const &lt;font color=&quot;#cc0066&quot;&gt;createApp&lt;/font&gt; = ((...args) =&amp;gt; {&lt;/b&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;b&gt;&lt;br&gt;&lt;/b&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;b&gt;&lt;font color=&quot;#0000cc&quot;&gt;&amp;nbsp; &lt;/font&gt;&lt;font color=&quot;#0000ff&quot;&gt;// 创建 app 对象&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;b&gt;&amp;nbsp; const app = &lt;font color=&quot;#cc0066&quot;&gt;ensureRenderer&lt;/font&gt;().createApp(...args)&lt;/b&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;b&gt;&amp;nbsp; const { mount } = app&lt;/b&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;b&gt;&lt;br&gt;&lt;/b&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;b&gt;&amp;nbsp;&lt;font color=&quot;#0000ff&quot;&gt; // 重写 mount 方法&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;b&gt;&amp;nbsp; &lt;font color=&quot;#cc0066&quot;&gt;app.mount&lt;/font&gt; = (containerOrSelector) =&amp;gt; {&lt;/b&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; // ...&lt;/b&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;b&gt;&amp;nbsp; }&lt;/b&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;b&gt;&lt;br&gt;&lt;/b&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;b&gt;&amp;nbsp; return app&lt;/b&gt;&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;b&gt;})&lt;/b&gt;&lt;/div&gt;" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
          <mxGeometry x="510" y="30" width="340" height="320" as="geometry" />
        </mxCell>
        <mxCell id="p2N06ffcsC0MJF7vxpci-100" value="" style="endArrow=classic;html=1;rounded=0;fontColor=#000000;jumpSize=4;" edge="1" parent="1">
          <mxGeometry width="50" height="50" relative="1" as="geometry">
            <mxPoint x="460" y="230" as="sourcePoint" />
            <mxPoint x="510" y="180" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="p2N06ffcsC0MJF7vxpci-102" value="&lt;div&gt;&lt;font color=&quot;#000000&quot;&gt;&lt;b&gt;// 渲染相关的一些配置，比如更新属性的方法，操作 DOM 的方法&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;&lt;div&gt;&lt;font color=&quot;#000000&quot;&gt;&lt;b&gt;const rendererOptions = {...&lt;/b&gt;&lt;/font&gt;&lt;b style=&quot;background-color: initial;&quot;&gt;}&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;font color=&quot;#000000&quot;&gt;&lt;b&gt;&lt;br&gt;&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;&lt;div&gt;&lt;font color=&quot;#000000&quot;&gt;&lt;b&gt;let renderer&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;&lt;div&gt;&lt;font color=&quot;#000000&quot;&gt;&lt;b&gt;&lt;br&gt;&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;&lt;div&gt;&lt;font color=&quot;#000000&quot;&gt;&lt;b&gt;// 延时创建渲染器，当用户只依赖响应式包的时候，可以通过 tree-shaking 移除核心渲染逻辑相关的代码&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;&lt;div&gt;&lt;font color=&quot;#000000&quot;&gt;&lt;b&gt;function ensureRenderer() {&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;&lt;div&gt;&lt;font color=&quot;#000000&quot;&gt;&lt;b&gt;&amp;nbsp; return renderer || (renderer = createRenderer(rendererOptions))&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;&lt;div&gt;&lt;font color=&quot;#000000&quot;&gt;&lt;b&gt;}&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;&lt;div&gt;&lt;font color=&quot;#000000&quot;&gt;&lt;b&gt;function createRenderer(options) {&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;&lt;div&gt;&lt;font color=&quot;#000000&quot;&gt;&lt;b&gt;&amp;nbsp; return baseCreateRenderer(options)&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;&lt;div&gt;&lt;font color=&quot;#000000&quot;&gt;&lt;b&gt;}&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;&lt;div&gt;&lt;b style=&quot;&quot;&gt;function &lt;font color=&quot;#cc0066&quot;&gt;baseCreateRenderer&lt;/font&gt;(options) {&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b style=&quot;&quot;&gt;&amp;nbsp; function &lt;font color=&quot;#cc0066&quot;&gt;render&lt;/font&gt;(vnode, container) {&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b style=&quot;&quot;&gt;&amp;nbsp; &amp;nbsp;&lt;font color=&quot;#0000ff&quot;&gt; // 组件渲染的核心逻辑&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;font color=&quot;#000000&quot;&gt;&lt;b&gt;&amp;nbsp; }&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;&lt;div&gt;&lt;font color=&quot;#000000&quot;&gt;&lt;b&gt;&amp;nbsp; return {&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;&lt;div&gt;&lt;font color=&quot;#000000&quot;&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; render,&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;&lt;div&gt;&lt;b style=&quot;&quot;&gt;&amp;nbsp; &amp;nbsp; createApp: &lt;font color=&quot;#cc0066&quot;&gt;createAppAPI&lt;/font&gt;(render)&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;font color=&quot;#000000&quot;&gt;&lt;b&gt;&amp;nbsp; }&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;&lt;div&gt;&lt;font color=&quot;#000000&quot;&gt;&lt;b&gt;}&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;&lt;div&gt;&lt;font color=&quot;#000000&quot;&gt;&lt;b&gt;&lt;br&gt;&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;&lt;div&gt;&lt;br&gt;&lt;/div&gt;&lt;div&gt;&lt;br&gt;&lt;/div&gt;" style="whiteSpace=wrap;html=1;aspect=fixed;align=left;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
          <mxGeometry x="980" y="-10" width="370" height="370" as="geometry" />
        </mxCell>
        <mxCell id="p2N06ffcsC0MJF7vxpci-103" value="" style="endArrow=classic;html=1;rounded=0;fontColor=#CC0066;jumpSize=4;entryX=0;entryY=0.5;entryDx=0;entryDy=0;startArrow=none;" edge="1" parent="1" source="p2N06ffcsC0MJF7vxpci-105" target="p2N06ffcsC0MJF7vxpci-102">
          <mxGeometry width="50" height="50" relative="1" as="geometry">
            <mxPoint x="850" y="150" as="sourcePoint" />
            <mxPoint x="900" y="100" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="p2N06ffcsC0MJF7vxpci-105" value="&lt;b style=&quot;text-align: left;&quot;&gt;&lt;font color=&quot;#cc0000&quot;&gt;ensureRenderer&lt;/font&gt;&lt;/b&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontColor=#0000FF;" vertex="1" parent="1">
          <mxGeometry x="900" y="150" width="60" height="30" as="geometry" />
        </mxCell>
        <mxCell id="p2N06ffcsC0MJF7vxpci-106" value="" style="endArrow=none;html=1;rounded=0;fontColor=#CC0066;jumpSize=4;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" target="p2N06ffcsC0MJF7vxpci-105">
          <mxGeometry width="50" height="50" relative="1" as="geometry">
            <mxPoint x="850" y="150" as="sourcePoint" />
            <mxPoint x="960" y="228" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="p2N06ffcsC0MJF7vxpci-107" value="&lt;div style=&quot;text-align: left;&quot;&gt;&lt;font style=&quot;&quot;&gt;&lt;b style=&quot;&quot;&gt;function &lt;font color=&quot;#cc0066&quot;&gt;createAppAPI&lt;/font&gt;(render) {&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;color: rgb(0, 0, 0); text-align: left;&quot;&gt;&lt;font color=&quot;#000000&quot;&gt;&lt;b&gt;&amp;nbsp; // createApp createApp 方法接受的两个参数：根组件的对象和 prop&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;color: rgb(0, 0, 0); text-align: left;&quot;&gt;&lt;font color=&quot;#000000&quot;&gt;&lt;b&gt;&amp;nbsp; return function createApp(rootComponent, rootProps = null) {&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;color: rgb(0, 0, 0); text-align: left;&quot;&gt;&lt;font color=&quot;#000000&quot;&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; const app = {&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;color: rgb(0, 0, 0); text-align: left;&quot;&gt;&lt;font color=&quot;#000000&quot;&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; _component: rootComponent,&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;color: rgb(0, 0, 0); text-align: left;&quot;&gt;&lt;font color=&quot;#000000&quot;&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; _props: rootProps,&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;color: rgb(0, 0, 0); text-align: left;&quot;&gt;&lt;font color=&quot;#000000&quot;&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; mount(rootContainer) {&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;color: rgb(0, 0, 0); text-align: left;&quot;&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;font color=&quot;#0000ff&quot;&gt;&amp;nbsp;// 创建根组件的 vnode&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div style=&quot;color: rgb(0, 0, 0); text-align: left;&quot;&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp;&amp;nbsp;&lt;font color=&quot;#cc0066&quot;&gt;&amp;nbsp; const vnode = createVNode(rootComponent, rootProps)&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div style=&quot;color: rgb(0, 0, 0); text-align: left;&quot;&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;font color=&quot;#0000ff&quot;&gt;&amp;nbsp;// 利用渲染器渲染 vnode&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div style=&quot;color: rgb(0, 0, 0); text-align: left;&quot;&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&amp;nbsp;&lt;font color=&quot;#cc0066&quot;&gt;render(vnode, rootContainer)&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div style=&quot;color: rgb(0, 0, 0); text-align: left;&quot;&gt;&lt;font color=&quot;#000000&quot;&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; app._container = rootContainer&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;color: rgb(0, 0, 0); text-align: left;&quot;&gt;&lt;font color=&quot;#000000&quot;&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; return vnode.component.proxy&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;color: rgb(0, 0, 0); text-align: left;&quot;&gt;&lt;font color=&quot;#000000&quot;&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; }&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;color: rgb(0, 0, 0); text-align: left;&quot;&gt;&lt;font color=&quot;#000000&quot;&gt;&lt;b&gt;&lt;br&gt;&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;color: rgb(0, 0, 0); text-align: left;&quot;&gt;&lt;font color=&quot;#000000&quot;&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; }&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;color: rgb(0, 0, 0); text-align: left;&quot;&gt;&lt;font color=&quot;#000000&quot;&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; return app&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;color: rgb(0, 0, 0); text-align: left;&quot;&gt;&lt;font color=&quot;#000000&quot;&gt;&lt;b&gt;&amp;nbsp; }&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;color: rgb(0, 0, 0); text-align: left;&quot;&gt;&lt;font color=&quot;#000000&quot;&gt;&lt;b&gt;&lt;br&gt;&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;color: rgb(0, 0, 0); text-align: left;&quot;&gt;&lt;font color=&quot;#000000&quot;&gt;&lt;b&gt;}&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
          <mxGeometry x="1450" y="-5" width="380" height="340" as="geometry" />
        </mxCell>
        <mxCell id="p2N06ffcsC0MJF7vxpci-110" value="" style="endArrow=classic;startArrow=classic;html=1;rounded=0;fontColor=#CC0066;jumpSize=4;" edge="1" parent="1" target="p2N06ffcsC0MJF7vxpci-107">
          <mxGeometry width="50" height="50" relative="1" as="geometry">
            <mxPoint x="1350" y="170" as="sourcePoint" />
            <mxPoint x="1400" y="120" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="p2N06ffcsC0MJF7vxpci-111" value="&lt;div&gt;&lt;b&gt;app.mount = (containerOrSelector) =&amp;gt; {&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; // 标准化容器&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; const container = normalizeContainer(containerOrSelector)&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&amp;nbsp;......&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; const component = app._component&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;br&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp;// 如组件对象没定义 render 函数和 template ，取容器的 innerHTML 作为组件模板内容&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;br&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; if (!isFunction(component) &amp;amp;&amp;amp; !component.render &amp;amp;&amp;amp; !component.template) {&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;br&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; component.template = container.innerHTML&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;br&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; }&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;br&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; // 挂载前清空容器内容&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; container.innerHTML = &#39;&#39;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;br&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; // 真正的挂载,调用createAppApi里的mount&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; return &lt;font color=&quot;#cc0066&quot;&gt;mount&lt;/font&gt;(container)&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;br&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;}&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;br&gt;&lt;/div&gt;" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;align=left;" vertex="1" parent="1">
          <mxGeometry x="510" y="-430" width="490" height="390" as="geometry" />
        </mxCell>
        <mxCell id="p2N06ffcsC0MJF7vxpci-112" value="" style="endArrow=classic;startArrow=classic;html=1;rounded=0;fontColor=#CC0066;jumpSize=4;entryX=0.551;entryY=1;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1">
          <mxGeometry width="50" height="50" relative="1" as="geometry">
            <mxPoint x="761" y="30" as="sourcePoint" />
            <mxPoint x="760.99" y="-40" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="p2N06ffcsC0MJF7vxpci-113" value="&lt;b&gt;&lt;font color=&quot;#cc0000&quot;&gt;createAppApi&lt;/font&gt;&lt;/b&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontColor=#CC0066;" vertex="1" parent="1">
          <mxGeometry x="1370" y="130" width="60" height="30" as="geometry" />
        </mxCell>
        <mxCell id="p2N06ffcsC0MJF7vxpci-114" value="&lt;b&gt;重写app.mount&lt;/b&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontColor=#CC0000;" vertex="1" parent="1">
          <mxGeometry x="760" y="-20" width="70" height="30" as="geometry" />
        </mxCell>
        <mxCell id="p2N06ffcsC0MJF7vxpci-119" value="" style="endArrow=none;dashed=1;html=1;rounded=0;fontColor=#CC0066;jumpSize=4;entryX=-0.006;entryY=0.022;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" target="p2N06ffcsC0MJF7vxpci-107">
          <mxGeometry width="50" height="50" relative="1" as="geometry">
            <mxPoint x="1000" y="-130" as="sourcePoint" />
            <mxPoint x="1050" y="-180" as="targetPoint" />
            <Array as="points">
              <mxPoint x="1260" y="-120" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="p2N06ffcsC0MJF7vxpci-121" value="&lt;b&gt;&lt;font color=&quot;#cc0000&quot;&gt;mount重写之后再调用最初的&lt;/font&gt;&lt;/b&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontColor=#CC0066;" vertex="1" parent="1">
          <mxGeometry x="1220" y="-140" width="100" height="30" as="geometry" />
        </mxCell>
        <mxCell id="p2N06ffcsC0MJF7vxpci-122" value="&lt;div&gt;&lt;b&gt;&lt;font color=&quot;#000000&quot;&gt;function &lt;/font&gt;&lt;font color=&quot;#cc0066&quot;&gt;createVNode&lt;/font&gt;&lt;font color=&quot;#000000&quot;&gt;(type, props = null&lt;/font&gt;&lt;/b&gt;&lt;b style=&quot;background-color: initial;&quot;&gt;&lt;font color=&quot;#000000&quot;&gt;,children = null) {&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;font color=&quot;#000000&quot;&gt;&amp;nbsp; if (props) {&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;font color=&quot;#000000&quot;&gt;&amp;nbsp; &amp;nbsp; // 处理 props 相关逻辑，标准化 class 和 style&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;font color=&quot;#000000&quot;&gt;&amp;nbsp; }&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;font color=&quot;#000000&quot;&gt;&amp;nbsp; // 对 vnode 类型信息编码&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;font color=&quot;#000000&quot;&gt;&amp;nbsp; const shapeFlag = isString(type)&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;font color=&quot;#000000&quot;&gt;&amp;nbsp; &amp;nbsp; ? 1 /* ELEMENT */&amp;nbsp;&lt;/font&gt;&lt;/b&gt;&lt;b style=&quot;background-color: initial;&quot;&gt;&lt;font color=&quot;#000000&quot;&gt;: isSuspense(type)&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;font color=&quot;#000000&quot;&gt;&amp;nbsp; &amp;nbsp; ? 128 /* SUSPENSE */&amp;nbsp;&lt;/font&gt;&lt;/b&gt;&lt;b style=&quot;background-color: initial;&quot;&gt;&lt;font color=&quot;#000000&quot;&gt;: isTeleport(type)&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;font color=&quot;#000000&quot;&gt;&amp;nbsp; &amp;nbsp; ? 64 /* TELEPORT */&amp;nbsp;&amp;nbsp;&lt;/font&gt;&lt;/b&gt;&lt;b style=&quot;background-color: initial;&quot;&gt;&lt;font color=&quot;#000000&quot;&gt;: isObject(type)&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b style=&quot;background-color: initial;&quot;&gt;&lt;font color=&quot;#000000&quot;&gt;&amp;nbsp; &amp;nbsp; ? 4 /* STATEFUL_COMPONENT */&lt;/font&gt;&lt;/b&gt;&lt;b style=&quot;background-color: initial;&quot;&gt;&lt;font color=&quot;#000000&quot;&gt;: isFunction(type)&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;font color=&quot;#000000&quot;&gt;&amp;nbsp; &amp;nbsp; ? 2 /* FUNCTIONAL_COMPONENT */&amp;nbsp;&lt;/font&gt;&lt;/b&gt;&lt;b style=&quot;background-color: initial;&quot;&gt;&lt;font color=&quot;#000000&quot;&gt;: 0&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;font color=&quot;#000000&quot;&gt;&lt;br&gt;&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;font color=&quot;#000000&quot;&gt;&amp;nbsp; const vnode = {&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;font color=&quot;#000000&quot;&gt;&amp;nbsp; &amp;nbsp; type,&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;font color=&quot;#000000&quot;&gt;&amp;nbsp; &amp;nbsp; props,&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;font color=&quot;#000000&quot;&gt;&amp;nbsp; &amp;nbsp; shapeFlag,&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;font color=&quot;#000000&quot;&gt;&amp;nbsp; &amp;nbsp; // 一些其他属性&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;font color=&quot;#000000&quot;&gt;&amp;nbsp; }&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;font color=&quot;#000000&quot;&gt;&amp;nbsp; // 标准化子节点，把不同数据类型的 children 转成数组或者文本类型&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;font color=&quot;#000000&quot;&gt;&amp;nbsp; &lt;/font&gt;&lt;font color=&quot;#cc0066&quot;&gt;normalizeChildren&lt;/font&gt;&lt;font color=&quot;#000000&quot;&gt;(vnode, children)&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;font color=&quot;#000000&quot;&gt;&amp;nbsp; return vnode&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;font color=&quot;#000000&quot;&gt;&lt;br&gt;&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;font color=&quot;#000000&quot;&gt;}&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;br&gt;&lt;/div&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
          <mxGeometry x="1445" y="380" width="390" height="380" as="geometry" />
        </mxCell>
        <mxCell id="p2N06ffcsC0MJF7vxpci-126" value="" style="endArrow=classic;html=1;rounded=0;fontColor=#000000;jumpSize=4;exitX=0.5;exitY=1;exitDx=0;exitDy=0;" edge="1" parent="1" source="p2N06ffcsC0MJF7vxpci-107">
          <mxGeometry width="50" height="50" relative="1" as="geometry">
            <mxPoint x="1639.99" y="355" as="sourcePoint" />
            <mxPoint x="1639.5" y="380" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="p2N06ffcsC0MJF7vxpci-127" value="&lt;div&gt;&lt;b style=&quot;background-color: initial;&quot;&gt;&lt;font color=&quot;#000000&quot;&gt;const render = (vnode, container) =&amp;gt; {&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;font color=&quot;#000000&quot;&gt;&amp;nbsp; if (vnode == null) {&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;font color=&quot;#000000&quot;&gt;&amp;nbsp; &amp;nbsp;&lt;/font&gt;&lt;font color=&quot;#0000ff&quot;&gt; // 销毁组件&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;font color=&quot;#000000&quot;&gt;&amp;nbsp; &amp;nbsp; if (container._vnode) {&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;font color=&quot;#000000&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;/font&gt;&lt;font color=&quot;#cc0066&quot;&gt;unmount&lt;/font&gt;&lt;font color=&quot;#000000&quot;&gt;(container._vnode, null, null, true)&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;font color=&quot;#000000&quot;&gt;&amp;nbsp; &amp;nbsp; }&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;font color=&quot;#000000&quot;&gt;&amp;nbsp; } else {&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;font color=&quot;#000000&quot;&gt;&amp;nbsp; &lt;/font&gt;&lt;font color=&quot;#0000ff&quot;&gt;&amp;nbsp; // 创建或者更新组件&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;font color=&quot;#000000&quot;&gt;&amp;nbsp; &amp;nbsp; &lt;/font&gt;&lt;font color=&quot;#cc0066&quot;&gt;patch(container._vnode || null, vnode, container)&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;font color=&quot;#000000&quot;&gt;&amp;nbsp; }&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;font color=&quot;#000000&quot;&gt;&lt;br&gt;&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;font color=&quot;#000000&quot;&gt;&amp;nbsp; // 缓存 vnode 节点，表示已经渲染&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;font color=&quot;#000000&quot;&gt;&amp;nbsp; container._vnode = vnode&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;font color=&quot;#000000&quot;&gt;&lt;br&gt;&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;font color=&quot;#000000&quot;&gt;}&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;br&gt;&lt;/div&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
          <mxGeometry x="1447.5" y="815" width="387.5" height="240" as="geometry" />
        </mxCell>
        <mxCell id="p2N06ffcsC0MJF7vxpci-128" value="" style="endArrow=classic;html=1;rounded=0;fontColor=#000000;jumpSize=4;" edge="1" parent="1">
          <mxGeometry width="50" height="50" relative="1" as="geometry">
            <mxPoint x="1640" y="762" as="sourcePoint" />
            <mxPoint x="1640.3676470588234" y="812" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="p2N06ffcsC0MJF7vxpci-129" value="&lt;div&gt;&lt;b&gt;const patch = (n1, n2, container, anchor = null, parentComponent = null,...) =&amp;gt; {&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &lt;font color=&quot;#0000ff&quot;&gt;// 如果存在新旧节点, 且新旧节点类型不同，则销毁旧节点&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; if (n1 &amp;amp;&amp;amp; !isSameVNodeType(n1, n2)) {&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; anchor = getNextHostNode(n1)&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; unmount(n1, parentComponent, parentSuspense, true)&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; n1 = null&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; }&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;br&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; const { type, shapeFlag } = n2&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; switch (type) {&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; case Text:&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; break&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; case Comment:&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; break&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; case Static:&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; // 处理静态节点&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; break&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; case Fragment:&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; // 处理 Fragment 元素&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; break&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; default:&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; if (shapeFlag &amp;amp; 1 /* ELEMENT */) {&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; // 处理普通 DOM 元素&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;font color=&quot;#cc0066&quot;&gt;processElement&lt;/font&gt;(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized)&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; }&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; else if (shapeFlag &amp;amp; 6 /* COMPONENT */) {&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; // 处理组件&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;font color=&quot;#cc0066&quot;&gt;processComponent&lt;/font&gt;(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized)&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; }&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; else if (shapeFlag &amp;amp; 64 /* TELEPORT */) {&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; // 处理 TELEPORT&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; }&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; else if (shapeFlag &amp;amp; 128 /* SUSPENSE */) {&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; // 处理 SUSPENSE&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; }&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; }&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;}&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;br&gt;&lt;/div&gt;" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;align=left;" vertex="1" parent="1">
          <mxGeometry x="710" y="400" width="650" height="570" as="geometry" />
        </mxCell>
        <mxCell id="p2N06ffcsC0MJF7vxpci-130" value="" style="endArrow=classic;html=1;rounded=0;fontColor=#0000FF;jumpSize=4;exitX=0.779;exitY=0.557;exitDx=0;exitDy=0;exitPerimeter=0;" edge="1" parent="1">
          <mxGeometry width="50" height="50" relative="1" as="geometry">
            <mxPoint x="1445.83" y="865.77" as="sourcePoint" />
            <mxPoint x="1360" y="866" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="p2N06ffcsC0MJF7vxpci-131" value="&lt;font color=&quot;#cc0000&quot;&gt;&lt;b&gt;patch&lt;/b&gt;&lt;/font&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontColor=#CC0066;" vertex="1" parent="1">
          <mxGeometry x="1372" y="836" width="60" height="30" as="geometry" />
        </mxCell>
        <mxCell id="p2N06ffcsC0MJF7vxpci-132" value="&lt;div&gt;&lt;b&gt;const &lt;font color=&quot;#cc0066&quot;&gt;processComponent&lt;/font&gt; = (n1, n2, container, anchor, parentComponent, ...) =&amp;gt; {&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; if (n1 == null) {&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp;// 挂载组件&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp;&lt;font color=&quot;#cc0066&quot;&gt;mountComponent&lt;/font&gt;(n2, container, anchor, parentComponent, ...)&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; }&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; else {&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; // 更新组件&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; &lt;font color=&quot;#cc0066&quot;&gt;updateComponent&lt;/font&gt;(n1, n2, parentComponent, optimized)&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; }&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;}&lt;/b&gt;&lt;/div&gt;" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;align=left;" vertex="1" parent="1">
          <mxGeometry x="710" y="1100" width="460" height="200" as="geometry" />
        </mxCell>
        <mxCell id="p2N06ffcsC0MJF7vxpci-133" value="" style="endArrow=classic;html=1;rounded=0;fontColor=#CC0066;jumpSize=4;entryX=0.174;entryY=0.591;entryDx=0;entryDy=0;entryPerimeter=0;exitX=0.124;exitY=1.006;exitDx=0;exitDy=0;exitPerimeter=0;" edge="1" parent="1" source="p2N06ffcsC0MJF7vxpci-129">
          <mxGeometry width="50" height="50" relative="1" as="geometry">
            <mxPoint x="790" y="990" as="sourcePoint" />
            <mxPoint x="790.04" y="1100.02" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="p2N06ffcsC0MJF7vxpci-134" value="&lt;b style=&quot;color: rgb(0, 0, 0); text-align: left;&quot;&gt;&lt;font color=&quot;#cc0066&quot;&gt;processComponent&lt;/font&gt;&lt;/b&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontColor=#CC0066;" vertex="1" parent="1">
          <mxGeometry x="759" y="1021" width="60" height="30" as="geometry" />
        </mxCell>
        <mxCell id="p2N06ffcsC0MJF7vxpci-138" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;jumpSize=4;orthogonalLoop=1;jettySize=auto;html=1;fontColor=#000000;exitX=0.003;exitY=0.573;exitDx=0;exitDy=0;exitPerimeter=0;entryX=1.004;entryY=0.665;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="p2N06ffcsC0MJF7vxpci-135" target="p2N06ffcsC0MJF7vxpci-137">
          <mxGeometry relative="1" as="geometry">
            <mxPoint x="680" y="1420" as="sourcePoint" />
            <mxPoint x="680" y="1460" as="targetPoint" />
            <Array as="points">
              <mxPoint x="711" y="1445" />
              <mxPoint x="690" y="1445" />
              <mxPoint x="690" y="1460" />
              <mxPoint x="630" y="1460" />
              <mxPoint x="630" y="1376" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="p2N06ffcsC0MJF7vxpci-135" value="&lt;div&gt;&lt;b&gt;const &lt;font color=&quot;#cc0066&quot;&gt;mountComponent&lt;/font&gt; = (initialVNode, container, anchor, parentComponent) =&amp;gt; {&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; // 创建组件实例&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; const instance = (initialVNode.component = createComponentInstance(initialVNode, parentComponent, parentSuspense))&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; // 设置组件实例&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &lt;font color=&quot;#cc0066&quot;&gt;setupComponent(instance)&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &lt;font color=&quot;#0000ff&quot;&gt;// 设置并运行带副作用的渲染函数&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &lt;font color=&quot;#cc0066&quot;&gt;setupRenderEffect&lt;/font&gt;(instance, initialVNode, container, anchor)&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;}&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;br&gt;&lt;/div&gt;" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;align=left;" vertex="1" parent="1">
          <mxGeometry x="710" y="1350" width="460" height="190" as="geometry" />
        </mxCell>
        <mxCell id="p2N06ffcsC0MJF7vxpci-136" value="" style="endArrow=classic;html=1;rounded=0;fontColor=#CC0066;jumpSize=4;" edge="1" parent="1">
          <mxGeometry width="50" height="50" relative="1" as="geometry">
            <mxPoint x="790" y="1301" as="sourcePoint" />
            <mxPoint x="790" y="1350" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="p2N06ffcsC0MJF7vxpci-137" value="&lt;b style=&quot;&quot;&gt;const &lt;font color=&quot;#cc0066&quot;&gt;setupRenderEffect&lt;/font&gt; = (instance, initialVNode, container, anchor, parentSuspense, isSVG, optimized) =&amp;gt; {&lt;br&gt;&lt;br&gt;&amp;nbsp; // 创建响应式的副作用渲染函数&lt;br&gt;&amp;nbsp; instance.update = effect(function componentEffect() {&lt;br&gt;&amp;nbsp; &amp;nbsp; if (!instance.isMounted) {&lt;br&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; // 渲染组件生成子树 vnode&lt;br&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; const &lt;font color=&quot;#cc0066&quot;&gt;subTree&lt;/font&gt; = (instance.subTree = renderComponentRoot(instance))&lt;br&gt;&lt;br&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; // 把子树 vnode 挂载到 container 中&lt;br&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;font color=&quot;#cc0066&quot;&gt;patch(null, subTree, container, anchor, instance, parentSuspense, isSVG)&lt;/font&gt;&lt;br&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; // 保留渲染生成的子树根 DOM 节点&lt;br&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; initialVNode.el = subTree.el&lt;br&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; instance.isMounted = true&lt;br&gt;&amp;nbsp; &amp;nbsp; }&lt;br&gt;&lt;br&gt;&amp;nbsp; &amp;nbsp; else {&lt;br&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; // 更新组件&lt;br&gt;&amp;nbsp; &amp;nbsp; }&lt;br&gt;&lt;br&gt;&amp;nbsp; }, prodEffectOptions)&lt;br&gt;&lt;br&gt;}&lt;/b&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
          <mxGeometry x="160" y="1110" width="460" height="400" as="geometry" />
        </mxCell>
        <mxCell id="p2N06ffcsC0MJF7vxpci-140" value="&lt;div&gt;&lt;b&gt;const &lt;font color=&quot;#cc0066&quot;&gt;processElement&lt;/font&gt; = (n1, n2, container, anchor, parentComponent, parentSuspense, ...) =&amp;gt; {&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;br&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; isSVG = isSVG || n2.type === &#39;svg&#39;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;br&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; if (n1 == null) {&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;br&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; &lt;font color=&quot;#0000ff&quot;&gt;//挂载元素节点&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp;&lt;font color=&quot;#cc0066&quot;&gt; mountElement&lt;/font&gt;(n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized)&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; }&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;br&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; else {&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; &lt;font color=&quot;#0000ff&quot;&gt;//更新元素节点&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; &lt;font color=&quot;#cc0066&quot;&gt;patchElement&lt;/font&gt;(n1, n2, parentComponent, parentSuspense, isSVG, optimized)&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; }&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;br&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;}&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;br&gt;&lt;/div&gt;" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;align=left;" vertex="1" parent="1">
          <mxGeometry x="1200" y="1100" width="570" height="340" as="geometry" />
        </mxCell>
        <mxCell id="p2N06ffcsC0MJF7vxpci-141" value="" style="endArrow=classic;html=1;rounded=0;fontColor=#CC0066;jumpSize=4;" edge="1" parent="1">
          <mxGeometry width="50" height="50" relative="1" as="geometry">
            <mxPoint x="1300" y="971" as="sourcePoint" />
            <mxPoint x="1300" y="1100" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="p2N06ffcsC0MJF7vxpci-142" value="&lt;b style=&quot;text-align: left;&quot;&gt;&lt;font color=&quot;#cc0000&quot;&gt;processElement&lt;/font&gt;&lt;/b&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontColor=#CC0066;" vertex="1" parent="1">
          <mxGeometry x="1270" y="1021" width="60" height="30" as="geometry" />
        </mxCell>
        <mxCell id="p2N06ffcsC0MJF7vxpci-144" value="" style="curved=1;endArrow=classic;html=1;rounded=0;fontColor=#0000FF;jumpSize=4;entryX=-0.004;entryY=0.629;entryDx=0;entryDy=0;entryPerimeter=0;exitX=0.25;exitY=0;exitDx=0;exitDy=0;" edge="1" parent="1" source="p2N06ffcsC0MJF7vxpci-137" target="p2N06ffcsC0MJF7vxpci-129">
          <mxGeometry width="50" height="50" relative="1" as="geometry">
            <mxPoint x="391" y="1112" as="sourcePoint" />
            <mxPoint x="441" y="1062" as="targetPoint" />
            <Array as="points">
              <mxPoint x="441" y="1112" />
              <mxPoint x="391" y="1062" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="p2N06ffcsC0MJF7vxpci-145" value="&lt;b&gt;&lt;font color=&quot;#cc0000&quot;&gt;如果subtree是&lt;span style=&quot;font-family: -apple-system, BlinkMacSystemFont, &amp;quot;Helvetica Neue&amp;quot;, Helvetica, &amp;quot;Segoe UI&amp;quot;, Arial, Roboto, &amp;quot;PingFang SC&amp;quot;, miui, &amp;quot;Hiragino Sans GB&amp;quot;, &amp;quot;Microsoft Yahei&amp;quot;, sans-serif; text-align: justify; background-color: rgb(255, 255, 255);&quot;&gt;&lt;font style=&quot;font-size: 12px;&quot;&gt;普通元素 vnode&lt;/font&gt;&lt;/span&gt;&lt;/font&gt;&lt;/b&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontColor=#0000FF;" vertex="1" parent="1">
          <mxGeometry x="440" y="970" width="110" height="30" as="geometry" />
        </mxCell>
        <mxCell id="p2N06ffcsC0MJF7vxpci-148" value="" style="endArrow=classic;html=1;rounded=0;fontSize=12;fontColor=#CC0000;jumpSize=4;" edge="1" parent="1">
          <mxGeometry width="50" height="50" relative="1" as="geometry">
            <mxPoint x="440" y="1110" as="sourcePoint" />
            <mxPoint x="712" y="823" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="p2N06ffcsC0MJF7vxpci-149" value="&lt;b style=&quot;color: rgb(0, 0, 255); background-color: rgb(248, 249, 250);&quot;&gt;&lt;font color=&quot;#cc0000&quot;&gt;如果subtree是组件&lt;span style=&quot;font-family: -apple-system, BlinkMacSystemFont, &amp;quot;Helvetica Neue&amp;quot;, Helvetica, &amp;quot;Segoe UI&amp;quot;, Arial, Roboto, &amp;quot;PingFang SC&amp;quot;, miui, &amp;quot;Hiragino Sans GB&amp;quot;, &amp;quot;Microsoft Yahei&amp;quot;, sans-serif; text-align: justify; background-color: rgb(255, 255, 255);&quot;&gt;vnode&lt;/span&gt;&lt;/font&gt;&lt;/b&gt;" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fontSize=12;fontColor=#CC0000;" vertex="1" connectable="0" parent="p2N06ffcsC0MJF7vxpci-148">
          <mxGeometry x="0.3405" y="2" relative="1" as="geometry">
            <mxPoint x="-1" y="14" as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="p2N06ffcsC0MJF7vxpci-150" value="&lt;div&gt;&lt;b&gt;const &lt;font color=&quot;#cc0066&quot;&gt;mountElement&lt;/font&gt; = (vnode, container, anchor, parentComponent, ) =&amp;gt; {&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;br&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; let el&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; const { type, props, shapeFlag } = vnode&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;br&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; // 创建 DOM 元素节点&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; el = &lt;font color=&quot;#cc0000&quot;&gt;vnode.el&lt;/font&gt; = &lt;font color=&quot;#cc0066&quot;&gt;hostCreateElement&lt;/font&gt;(vnode.type, isSVG, props &amp;amp;&amp;amp; props.is)&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; if (props) {&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; // 处理 props，比如 class、style、event 等属性&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; for (const key in props) {&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; if (!isReservedProp(key)) {&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; hostPatchProp(el, key, null, props[key], isSVG)&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; }&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; }&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; }&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;br&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; if (shapeFlag &amp;amp; 8 /* TEXT_CHILDREN */) {&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; // 处理子节点是纯文本的情况&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; hostSetElementText(el, vnode.children)&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; }&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;br&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; else if (shapeFlag &amp;amp; 16 /* ARRAY_CHILDREN */) {&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; // 处理子节点是数组的情况&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; mountChildren(vnode.children, el, null, parentComponent, parentSuspense, isSVG &amp;amp;&amp;amp; type !== &#39;foreignObject&#39;, optimized || !!&lt;font color=&quot;#cc0000&quot;&gt;vnode.dynamicChildren&lt;/font&gt;)&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; }&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &lt;font color=&quot;#0000ff&quot;&gt;// 把创建的 DOM 元素节点挂载到 container 上&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; hostInsert(el, container, anchor)&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;br&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;}&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;br&gt;&lt;/div&gt;" style="rounded=0;whiteSpace=wrap;html=1;fontSize=12;fillColor=#fff2cc;strokeColor=#d6b656;align=left;" vertex="1" parent="1">
          <mxGeometry x="1200" y="1568" width="570" height="470" as="geometry" />
        </mxCell>
        <mxCell id="p2N06ffcsC0MJF7vxpci-151" value="" style="endArrow=classic;html=1;rounded=0;fontSize=12;fontColor=#CC0000;jumpSize=4;entryX=0.439;entryY=0.167;entryDx=0;entryDy=0;entryPerimeter=0;exitX=0.439;exitY=-0.003;exitDx=0;exitDy=0;exitPerimeter=0;" edge="1" parent="1">
          <mxGeometry width="50" height="50" relative="1" as="geometry">
            <mxPoint x="1450.23" y="1439.6599999999999" as="sourcePoint" />
            <mxPoint x="1450.23" y="1572.2600000000002" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="p2N06ffcsC0MJF7vxpci-152" value="&lt;b style=&quot;color: rgb(0, 0, 0); text-align: left;&quot;&gt;&lt;font color=&quot;#cc0066&quot;&gt;mountElement&lt;/font&gt;&amp;nbsp;&lt;/b&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=12;fontColor=#0000FF;" vertex="1" parent="1">
          <mxGeometry x="1430" y="1490" width="60" height="30" as="geometry" />
        </mxCell>
        <mxCell id="p2N06ffcsC0MJF7vxpci-153" value="&lt;div&gt;&lt;b&gt;&lt;font color=&quot;#000000&quot;&gt;function createElement(tag, isSVG, is) {&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;font color=&quot;#000000&quot;&gt;&lt;br&gt;&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;font color=&quot;#000000&quot;&gt;&amp;nbsp; isSVG ? document.createElementNS(svgNS, tag)&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;font color=&quot;#000000&quot;&gt;&lt;br&gt;&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;font color=&quot;#000000&quot;&gt;&amp;nbsp; &amp;nbsp; : document.createElement(tag, is ? { is } : undefined)&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;font color=&quot;#000000&quot;&gt;&lt;br&gt;&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;font color=&quot;#000000&quot;&gt;}&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;br&gt;&lt;/div&gt;" style="rounded=0;whiteSpace=wrap;html=1;fontSize=12;align=left;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
          <mxGeometry x="1890" y="1570" width="290" height="160" as="geometry" />
        </mxCell>
        <mxCell id="p2N06ffcsC0MJF7vxpci-154" value="" style="endArrow=classic;html=1;rounded=0;fontSize=12;fontColor=#000000;jumpSize=4;entryX=0;entryY=0.438;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1">
          <mxGeometry width="50" height="50" relative="1" as="geometry">
            <mxPoint x="1770" y="1643.92" as="sourcePoint" />
            <mxPoint x="1890" y="1640" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="p2N06ffcsC0MJF7vxpci-157" value="&lt;span style=&quot;font-family: -apple-system, BlinkMacSystemFont, &amp;quot;Helvetica Neue&amp;quot;, Helvetica, &amp;quot;Segoe UI&amp;quot;, Arial, Roboto, &amp;quot;PingFang SC&amp;quot;, miui, &amp;quot;Hiragino Sans GB&amp;quot;, &amp;quot;Microsoft Yahei&amp;quot;, sans-serif; text-align: justify;&quot;&gt;&lt;font style=&quot;font-size: 12px;&quot;&gt;&lt;b&gt;hostCreateElement&lt;/b&gt;&lt;/font&gt;&lt;/span&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=12;fontColor=#CC0000;" vertex="1" parent="1">
          <mxGeometry x="1800" y="1620" width="60" height="30" as="geometry" />
        </mxCell>
        <mxCell id="p2N06ffcsC0MJF7vxpci-158" value="&lt;div&gt;&lt;b&gt;&lt;font color=&quot;#000000&quot;&gt;function setElementText(el, text) {&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;font color=&quot;#000000&quot;&gt;&lt;br&gt;&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;font color=&quot;#000000&quot;&gt;&amp;nbsp; el.textContent = text&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;font color=&quot;#000000&quot;&gt;&lt;br&gt;&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;font color=&quot;#000000&quot;&gt;}&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;br&gt;&lt;/div&gt;" style="rounded=0;whiteSpace=wrap;html=1;labelBackgroundColor=none;fontSize=12;align=left;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
          <mxGeometry x="1890" y="1780" width="290" height="100" as="geometry" />
        </mxCell>
        <mxCell id="p2N06ffcsC0MJF7vxpci-159" value="" style="endArrow=classic;html=1;rounded=0;fontSize=12;fontColor=#000000;jumpSize=4;entryX=-0.003;entryY=0.388;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" target="p2N06ffcsC0MJF7vxpci-158">
          <mxGeometry width="50" height="50" relative="1" as="geometry">
            <mxPoint x="1772" y="1819" as="sourcePoint" />
            <mxPoint x="1832" y="1819.1" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="p2N06ffcsC0MJF7vxpci-160" value="&lt;b style=&quot;text-align: left;&quot;&gt;&lt;font color=&quot;#cc0000&quot;&gt;hostSetElementText&lt;/font&gt;&lt;/b&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;labelBackgroundColor=none;fontSize=12;fontColor=#000000;" vertex="1" parent="1">
          <mxGeometry x="1800" y="1800" width="60" height="30" as="geometry" />
        </mxCell>
        <mxCell id="p2N06ffcsC0MJF7vxpci-161" value="&lt;div&gt;&lt;b&gt;const mountChildren = (children, container, anchor, parentComponent,) =&amp;gt; {&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; for (let i = start; i &amp;lt; children.length; i++) {&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; // 预处理 child&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; const child = (children[i] = optimized&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; ? cloneIfMounted(children[i])&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; : normalizeVNode(children[i]))&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp;&lt;font color=&quot;#0000ff&quot;&gt; // 递归 patch 挂载 child&lt;/font&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; &lt;font color=&quot;#cc0066&quot;&gt;patch&lt;/font&gt;(null, child, container, anchor, parentComponent)&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; }&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;br&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;}&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;br&gt;&lt;/div&gt;" style="rounded=0;whiteSpace=wrap;html=1;labelBackgroundColor=none;fontSize=12;fillColor=#fff2cc;strokeColor=#d6b656;align=left;" vertex="1" parent="1">
          <mxGeometry x="1890" y="1920" width="440" height="200" as="geometry" />
        </mxCell>
        <mxCell id="p2N06ffcsC0MJF7vxpci-162" value="" style="endArrow=classic;html=1;rounded=0;fontSize=12;fontColor=#CC0000;jumpSize=4;" edge="1" parent="1">
          <mxGeometry width="50" height="50" relative="1" as="geometry">
            <mxPoint x="1772" y="1960" as="sourcePoint" />
            <mxPoint x="1890" y="1960" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="p2N06ffcsC0MJF7vxpci-163" value="&lt;span style=&quot;font-family: -apple-system, BlinkMacSystemFont, &amp;quot;Helvetica Neue&amp;quot;, Helvetica, &amp;quot;Segoe UI&amp;quot;, Arial, Roboto, &amp;quot;PingFang SC&amp;quot;, miui, &amp;quot;Hiragino Sans GB&amp;quot;, &amp;quot;Microsoft Yahei&amp;quot;, sans-serif; text-align: justify;&quot;&gt;&lt;font style=&quot;font-size: 12px;&quot;&gt;&lt;b style=&quot;&quot;&gt;&amp;nbsp;mountChildren&lt;/b&gt;&lt;/font&gt;&lt;/span&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;labelBackgroundColor=none;fontSize=12;fontColor=#CC0000;" vertex="1" parent="1">
          <mxGeometry x="1800" y="1930" width="60" height="30" as="geometry" />
        </mxCell>
        <mxCell id="p2N06ffcsC0MJF7vxpci-164" value="" style="endArrow=none;dashed=1;html=1;dashPattern=1 3;strokeWidth=2;rounded=0;fontSize=12;fontColor=#0000FF;jumpSize=4;exitX=-0.002;exitY=0.574;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0.683;entryY=1.001;entryDx=0;entryDy=0;entryPerimeter=0;strokeColor=#7EA6E0;" edge="1" parent="1" source="p2N06ffcsC0MJF7vxpci-161" target="p2N06ffcsC0MJF7vxpci-129">
          <mxGeometry width="50" height="50" relative="1" as="geometry">
            <mxPoint x="1590" y="1970" as="sourcePoint" />
            <mxPoint x="1640" y="1920" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="p2N06ffcsC0MJF7vxpci-165" value="&lt;div&gt;&lt;b&gt;function insert(child, parent, anchor) {&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; if (anchor) {&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; parent.insertBefore(child, anchor)&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; }&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; else {&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; parent.appendChild(child)&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&amp;nbsp; }&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;}&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;br&gt;&lt;/div&gt;" style="rounded=0;whiteSpace=wrap;html=1;labelBackgroundColor=none;fontSize=12;fillColor=#fff2cc;strokeColor=#d6b656;align=left;" vertex="1" parent="1">
          <mxGeometry x="1890" y="2140" width="440" height="170" as="geometry" />
        </mxCell>
        <mxCell id="p2N06ffcsC0MJF7vxpci-166" value="" style="endArrow=classic;html=1;rounded=0;fontSize=12;fontColor=#0000FF;strokeColor=#7EA6E0;jumpSize=4;entryX=-0.005;entryY=0.402;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" target="p2N06ffcsC0MJF7vxpci-165">
          <mxGeometry width="50" height="50" relative="1" as="geometry">
            <mxPoint x="1650" y="2040" as="sourcePoint" />
            <mxPoint x="2050" y="2130" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="p2N06ffcsC0MJF7vxpci-167" value="&lt;b style=&quot;text-align: left;&quot;&gt;&lt;font color=&quot;#cc0000&quot;&gt;hostInsert&lt;/font&gt;&lt;/b&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;labelBackgroundColor=none;fontSize=12;fontColor=#0000FF;" vertex="1" parent="1">
          <mxGeometry x="1750" y="2120" width="60" height="30" as="geometry" />
        </mxCell>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>