-
Notifications
You must be signed in to change notification settings - Fork 0
/
Untitled Diagram.drawio
480 lines (480 loc) · 52.3 KB
/
Untitled Diagram.drawio
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
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
<mxfile host="app.diagrams.net" modified="2022-03-18T10:07:01.016Z" agent="5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.51 Safari/537.36" etag="kFoJrFj4AEQV3mrTpqyG" version="17.1.3" type="github">
<diagram id="BRU-C2kcGeTS7Em7pVJV" name="Page-1">
<mxGraphModel dx="1358" dy="870" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
<root>
<mxCell id="0" />
<mxCell id="1" parent="0" />
<mxCell id="Et2niudzJevYGXXobUG--20" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="1" source="Et2niudzJevYGXXobUG--1" target="Et2niudzJevYGXXobUG--15">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--1" value="<br>数据变化前后生成真实 DOM 对应的虚拟 DOM 节点" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
<mxGeometry x="110" y="60" width="120" height="60" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--5" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="1" source="Et2niudzJevYGXXobUG--2" target="Et2niudzJevYGXXobUG--3">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--2" value="编译 template模板为Vnode" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
<mxGeometry x="380" y="710" width="120" height="60" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--9" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="1" source="Et2niudzJevYGXXobUG--3" target="Et2niudzJevYGXXobUG--8">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--3" value="实例化虚拟DOM，并缓存下来" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
<mxGeometry x="380" y="820" width="120" height="60" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--45" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;" edge="1" parent="1" source="Et2niudzJevYGXXobUG--8" target="Et2niudzJevYGXXobUG--42">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--8" value="<span>数据发生变化</span>" style="rhombus;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
<mxGeometry x="375" y="930" width="130" height="80" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--19" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="Et2niudzJevYGXXobUG--15" target="Et2niudzJevYGXXobUG--16">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--15" value="对比新旧的Vnode，找出差异" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
<mxGeometry x="290" y="60" width="120" height="60" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--18" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="Et2niudzJevYGXXobUG--16" target="Et2niudzJevYGXXobUG--17">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--16" value="更新有差异的DOM 节点" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
<mxGeometry x="470" y="60" width="120" height="60" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--17" value="达到最少操作真实DOM更新视图的目的" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
<mxGeometry x="640" y="60" width="120" height="60" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--21" value="VNode的作用：" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
<mxGeometry x="110" y="20" width="90" height="20" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--23" value="DOM-Diff 算法 对比新旧VNode过程——patch过程，即补丁过程" style="swimlane;fillColor=#f8cecc;strokeColor=#b85450;align=left;startSize=70;fontSize=20;" vertex="1" parent="1">
<mxGeometry x="930" y="290" width="2685" height="1690" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--73" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="Et2niudzJevYGXXobUG--23" source="Et2niudzJevYGXXobUG--24" target="Et2niudzJevYGXXobUG--72">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--24" value="VNode 节点为 元素类型" style="rounded=0;whiteSpace=wrap;html=1;align=center;" vertex="1" parent="Et2niudzJevYGXXobUG--23">
<mxGeometry x="379" y="1087" width="150" height="40" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--25" value="可被创建和插入DOM 的VNode 类型： 元素节点、文本节点、注释节点" style="text;html=1;strokeColor=none;fillColor=#f5f5f5;align=left;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontColor=#333333;" vertex="1" parent="Et2niudzJevYGXXobUG--23">
<mxGeometry x="30" y="90" width="520" height="30" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--170" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;fontFamily=Helvetica;fontSize=12;" edge="1" parent="Et2niudzJevYGXXobUG--23" source="Et2niudzJevYGXXobUG--50" target="Et2niudzJevYGXXobUG--63">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--50" value="vue 判断节点时判断新的 VNode <br>与 旧 VNode 有差异的节点的类型<br>是哪一种类型，<br>从而调用不同的方法创建并插入 DOM 中" style="rhombus;whiteSpace=wrap;html=1;align=center;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="Et2niudzJevYGXXobUG--23">
<mxGeometry x="296.5" y="780" width="315" height="140" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--51" value="旧 VNode:&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<span style="color: rgb(48 , 48 , 48) ; font-family: &#34;stsong&#34; ; font-size: 12pt">数据变化前视图所对应的的虚拟DOM节点<br>新 VNode：</span><span style="color: rgb(48 , 48 , 48) ; font-family: &#34;stsong&#34; ; font-size: 12pt">数据变化后将要渲染的新的视图所对应的虚拟 DOM 节点</span>" style="text;html=1;strokeColor=none;fillColor=#f5f5f5;align=left;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontColor=#333333;strokeWidth=0;dashed=1;" vertex="1" parent="Et2niudzJevYGXXobUG--23">
<mxGeometry x="30" y="130" width="520" height="60" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--158" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;fontFamily=Helvetica;fontSize=20;exitX=0.5;exitY=1;exitDx=0;exitDy=0;" edge="1" parent="Et2niudzJevYGXXobUG--23" source="Et2niudzJevYGXXobUG--53" target="Et2niudzJevYGXXobUG--107">
<mxGeometry relative="1" as="geometry">
<Array as="points">
<mxPoint x="899" y="520" />
<mxPoint x="452" y="520" />
<mxPoint x="452" y="600" />
</Array>
</mxGeometry>
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--160" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontFamily=Helvetica;fontSize=20;" edge="1" parent="Et2niudzJevYGXXobUG--23" source="Et2niudzJevYGXXobUG--53" target="Et2niudzJevYGXXobUG--110">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--186" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontFamily=Helvetica;fontSize=14;exitX=0.5;exitY=1;exitDx=0;exitDy=0;" edge="1" parent="Et2niudzJevYGXXobUG--23" source="Et2niudzJevYGXXobUG--53" target="Et2niudzJevYGXXobUG--153">
<mxGeometry relative="1" as="geometry">
<Array as="points">
<mxPoint x="899" y="520" />
<mxPoint x="1301" y="520" />
</Array>
</mxGeometry>
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--53" value="<span>以新的VNode 为基准，</span><br><span>改造旧的 VNode ，</span><br><span>使之成为与新的 VNode 一样</span>" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;fontColor=#333333;strokeColor=#666666;" vertex="1" parent="Et2niudzJevYGXXobUG--23">
<mxGeometry x="818.8800000000001" y="390" width="160" height="80" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--180" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontFamily=Helvetica;fontSize=12;" edge="1" parent="Et2niudzJevYGXXobUG--23" source="Et2niudzJevYGXXobUG--56" target="Et2niudzJevYGXXobUG--81">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--56" value="VNode 节点为 注释节点" style="rounded=0;whiteSpace=wrap;html=1;align=center;" vertex="1" parent="Et2niudzJevYGXXobUG--23">
<mxGeometry x="209.5" y="1089" width="140" height="40" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--69" value="Y" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="Et2niudzJevYGXXobUG--23" source="Et2niudzJevYGXXobUG--63" target="Et2niudzJevYGXXobUG--24">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--177" value="N" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=1;entryY=0.5;entryDx=0;entryDy=0;fontFamily=Helvetica;fontSize=12;" edge="1" parent="Et2niudzJevYGXXobUG--23" source="Et2niudzJevYGXXobUG--63" target="Et2niudzJevYGXXobUG--64">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--63" value="VNode 节点是否有<br>&nbsp;tag 标签" style="rhombus;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="Et2niudzJevYGXXobUG--23">
<mxGeometry x="389" y="960" width="130" height="80" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--176" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=1;entryY=0.5;entryDx=0;entryDy=0;fontFamily=Helvetica;fontSize=12;" edge="1" parent="Et2niudzJevYGXXobUG--23" source="Et2niudzJevYGXXobUG--64" target="Et2niudzJevYGXXobUG--65">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--178" value="N" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fontSize=12;fontFamily=Helvetica;" vertex="1" connectable="0" parent="Et2niudzJevYGXXobUG--176">
<mxGeometry x="-0.325" y="1" relative="1" as="geometry">
<mxPoint x="1" as="offset" />
</mxGeometry>
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--179" value="Y" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;fontFamily=Helvetica;fontSize=12;" edge="1" parent="Et2niudzJevYGXXobUG--23" source="Et2niudzJevYGXXobUG--64" target="Et2niudzJevYGXXobUG--56">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--64" value="VNode 节点 的 isComment = true" style="rhombus;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="Et2niudzJevYGXXobUG--23">
<mxGeometry x="214.5" y="960" width="130" height="80" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--77" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="Et2niudzJevYGXXobUG--23" source="Et2niudzJevYGXXobUG--72" target="Et2niudzJevYGXXobUG--74">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--72" value="调用createElement 方法创建元素节点" style="rounded=0;whiteSpace=wrap;html=1;align=center;" vertex="1" parent="Et2niudzJevYGXXobUG--23">
<mxGeometry x="379" y="1155" width="150" height="40" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--79" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="Et2niudzJevYGXXobUG--23" source="Et2niudzJevYGXXobUG--74" target="Et2niudzJevYGXXobUG--75">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--74" value="递归遍历创建所有子节点" style="rounded=0;whiteSpace=wrap;html=1;align=center;" vertex="1" parent="Et2niudzJevYGXXobUG--23">
<mxGeometry x="379" y="1229" width="150" height="40" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--174" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=1;entryY=0.5;entryDx=0;entryDy=0;fontFamily=Helvetica;fontSize=12;" edge="1" parent="Et2niudzJevYGXXobUG--23" source="Et2niudzJevYGXXobUG--75" target="Et2niudzJevYGXXobUG--76">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--75" value="将子节点插入到当前元素节点中" style="rounded=0;whiteSpace=wrap;html=1;align=center;" vertex="1" parent="Et2niudzJevYGXXobUG--23">
<mxGeometry x="379" y="1303" width="150" height="40" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--76" value="把当前元素节点插入到 DOM 中" style="rounded=0;whiteSpace=wrap;html=1;align=center;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="Et2niudzJevYGXXobUG--23">
<mxGeometry x="146.5" y="1303" width="150" height="40" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--82" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="Et2niudzJevYGXXobUG--23" source="Et2niudzJevYGXXobUG--81" target="Et2niudzJevYGXXobUG--76">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--81" value="调用createComment 方法创建注释节点" style="rounded=0;whiteSpace=wrap;html=1;align=center;" vertex="1" parent="Et2niudzJevYGXXobUG--23">
<mxGeometry x="204.5" y="1155" width="150" height="40" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--157" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;fontFamily=Helvetica;fontSize=20;shape=link;" edge="1" parent="Et2niudzJevYGXXobUG--23" source="Et2niudzJevYGXXobUG--96" target="Et2niudzJevYGXXobUG--50">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--96" value="创建节点" style="rounded=0;whiteSpace=wrap;html=1;dashed=1;strokeWidth=0;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="Et2niudzJevYGXXobUG--23">
<mxGeometry x="394" y="710" width="120" height="30" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--111" style="edgeStyle=orthogonalEdgeStyle;shape=link;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontFamily=Helvetica;fontSize=20;" edge="1" parent="Et2niudzJevYGXXobUG--23" source="Et2niudzJevYGXXobUG--100" target="Et2niudzJevYGXXobUG--110">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--182" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontFamily=Helvetica;fontSize=12;shape=link;" edge="1" parent="Et2niudzJevYGXXobUG--23" source="Et2niudzJevYGXXobUG--100" target="Et2niudzJevYGXXobUG--181">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--100" value="删除节点" style="rounded=0;whiteSpace=wrap;html=1;dashed=1;strokeWidth=0;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="Et2niudzJevYGXXobUG--23">
<mxGeometry x="838.8800000000001" y="710" width="120" height="30" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--154" style="edgeStyle=orthogonalEdgeStyle;shape=link;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontFamily=Helvetica;fontSize=20;" edge="1" parent="Et2niudzJevYGXXobUG--23" source="Et2niudzJevYGXXobUG--101" target="Et2niudzJevYGXXobUG--153">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--189" style="edgeStyle=orthogonalEdgeStyle;shape=link;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontFamily=Helvetica;fontSize=14;" edge="1" parent="Et2niudzJevYGXXobUG--23" source="Et2niudzJevYGXXobUG--101" target="Et2niudzJevYGXXobUG--188">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--101" value="更新节点" style="rounded=0;whiteSpace=wrap;html=1;dashed=1;strokeWidth=0;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="Et2niudzJevYGXXobUG--23">
<mxGeometry x="1241" y="710" width="120" height="30" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--159" style="edgeStyle=orthogonalEdgeStyle;shape=link;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;fontFamily=Helvetica;fontSize=20;" edge="1" parent="Et2niudzJevYGXXobUG--23" source="Et2niudzJevYGXXobUG--107" target="Et2niudzJevYGXXobUG--96">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--107" value="<h1 style="font-size: 13px;"><p style="font-size: 13px; margin: 0px;"><span style="font-size: 13px; color: rgb(48, 48, 48);">如果新的 VNode 有的节点，旧的 VNode 上没有，那么在旧的 VNode 加上去</span></p></h1>" style="text;html=1;strokeColor=none;fillColor=#f5f5f5;spacing=5;spacingTop=-20;whiteSpace=wrap;overflow=hidden;rounded=0;dashed=1;fontFamily=Helvetica;fontSize=13;fontColor=#333333;align=left;fontStyle=0;verticalAlign=bottom;" vertex="1" parent="Et2niudzJevYGXXobUG--23">
<mxGeometry x="368.5" y="600" width="171" height="70" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--110" value="<h1 style="font-size: 13px"><p style="font-size: 13px ; margin: 0px"><span style="font-size: 13px ; color: rgb(48 , 48 , 48)">如果新的 VNode 没有的节点，旧的 VNode 上有，那么在旧的 VNode 上删除</span></p></h1>" style="text;html=1;strokeColor=none;fillColor=#f5f5f5;spacing=5;spacingTop=-20;whiteSpace=wrap;overflow=hidden;rounded=0;dashed=1;fontFamily=Helvetica;fontSize=13;fontColor=#333333;align=left;fontStyle=0;verticalAlign=bottom;" vertex="1" parent="Et2niudzJevYGXXobUG--23">
<mxGeometry x="800" y="600" width="197.75" height="70" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--153" value="<h1 style="font-size: 13px"><p style="font-size: 13px ; margin: 0px"><span style="font-size: 13px ; color: rgb(48 , 48 , 48)">如果新旧的 VNode 都有，以新的为准，更新旧的 VNode ,让新旧 VNode 相同</span></p></h1>" style="text;html=1;strokeColor=none;fillColor=#f5f5f5;spacing=5;spacingTop=-20;whiteSpace=wrap;overflow=hidden;rounded=0;dashed=1;fontFamily=Helvetica;fontSize=13;fontColor=#333333;align=left;fontStyle=0;verticalAlign=bottom;" vertex="1" parent="Et2niudzJevYGXXobUG--23">
<mxGeometry x="1215.5" y="600" width="171" height="70" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--57" value="VNode 节点为 文本节点" style="rounded=0;whiteSpace=wrap;html=1;align=center;" vertex="1" parent="Et2niudzJevYGXXobUG--23">
<mxGeometry x="40" y="1089" width="139" height="40" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--71" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="Et2niudzJevYGXXobUG--23" source="Et2niudzJevYGXXobUG--65" target="Et2niudzJevYGXXobUG--57">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--65" value="其他" style="rhombus;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="Et2niudzJevYGXXobUG--23">
<mxGeometry x="44.5" y="960" width="130" height="80" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--175" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;fontFamily=Helvetica;fontSize=12;" edge="1" parent="Et2niudzJevYGXXobUG--23" source="Et2niudzJevYGXXobUG--87" target="Et2niudzJevYGXXobUG--76">
<mxGeometry relative="1" as="geometry">
<Array as="points">
<mxPoint x="103" y="1246" />
<mxPoint x="222" y="1246" />
</Array>
</mxGeometry>
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--87" value="调用createTextNodet 方法创建文本节点" style="rounded=0;whiteSpace=wrap;html=1;align=center;" vertex="1" parent="Et2niudzJevYGXXobUG--23">
<mxGeometry x="44.5" y="1155" width="130" height="40" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--89" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="Et2niudzJevYGXXobUG--23" source="Et2niudzJevYGXXobUG--57" target="Et2niudzJevYGXXobUG--87">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--181" value="<span style="color: rgb(44 , 62 , 80) ; font-size: 12px ; background-color: rgb(255 , 255 , 255)">在 旧 VNode 上，在要删除节点的父元素上调用</span><code style="color: rgb(71 , 101 , 130) ; padding: 0.25rem 0.5rem ; margin: 0px ; font-size: 12px ; background-color: rgba(27 , 31 , 35 , 0.05) ; border-radius: 3px">removeChild</code><span style="color: rgb(44 , 62 , 80) ; font-size: 12px ; background-color: rgb(255 , 255 , 255)">方法即可</span>" style="rounded=0;whiteSpace=wrap;html=1;align=center;fontSize=12;" vertex="1" parent="Et2niudzJevYGXXobUG--23">
<mxGeometry x="805.8200000000002" y="810" width="186.12" height="50" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--184" value="<p style="line-height: 0.1"></p><h1 style="font-size: 14px"><font style="font-size: 14px">静态节点</font></h1><font style="font-size: 14px"><span style="color: rgb(44 , 62 , 80) ; font-family: , &#34;system-ui&#34; , &#34;segoe ui&#34; , &#34;roboto&#34; , &#34;oxygen&#34; , &#34;ubuntu&#34; , &#34;cantarell&#34; , &#34;fira sans&#34; , &#34;droid sans&#34; , &#34;helvetica neue&#34; , sans-serif ; background-color: rgb(255 , 255 , 255)">节点里面只包含了纯文字，没有任何可变的变量；<br></span><span style="color: rgb(44 , 62 , 80) ; font-family: , &#34;system-ui&#34; , &#34;segoe ui&#34; , &#34;roboto&#34; , &#34;oxygen&#34; , &#34;ubuntu&#34; , &#34;cantarell&#34; , &#34;fira sans&#34; , &#34;droid sans&#34; , &#34;helvetica neue&#34; , sans-serif ; background-color: rgb(255 , 255 , 255)">即不管数据再怎么变化，只要这个节点第一次渲染了，那么它以后就永远不会发生变化，</span><span style="color: rgb(44 , 62 , 80) ; background-color: rgb(255 , 255 , 255)"><font style="font-size: 14px">因为它不包含任何变量，所以数据发生任何变化都与它无关。我们把这种节点称之为静态节点</font></span></font><p></p>" style="text;html=1;strokeColor=none;fillColor=#f5f5f5;spacing=5;spacingTop=-20;whiteSpace=wrap;overflow=hidden;rounded=0;dashed=1;fontFamily=Helvetica;fontSize=12;fontColor=#333333;" vertex="1" parent="Et2niudzJevYGXXobUG--23">
<mxGeometry x="30" y="230" width="500" height="110" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--242" value="N" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;fontFamily=Helvetica;fontSize=14;" edge="1" parent="Et2niudzJevYGXXobUG--23" source="Et2niudzJevYGXXobUG--188" target="Et2niudzJevYGXXobUG--241">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--244" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;fontFamily=Helvetica;fontSize=14;" edge="1" parent="Et2niudzJevYGXXobUG--23" source="Et2niudzJevYGXXobUG--188" target="Et2niudzJevYGXXobUG--243">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--247" value="Y" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fontSize=14;fontFamily=Helvetica;" vertex="1" connectable="0" parent="Et2niudzJevYGXXobUG--244">
<mxGeometry x="-0.0779" y="-1" relative="1" as="geometry">
<mxPoint as="offset" />
</mxGeometry>
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--188" value="新 VNode 和 旧 VNode 是否完全一样" style="rhombus;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="Et2niudzJevYGXXobUG--23">
<mxGeometry x="1236" y="795" width="130" height="80" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--249" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;fontFamily=Helvetica;fontSize=14;" edge="1" parent="Et2niudzJevYGXXobUG--23" source="Et2niudzJevYGXXobUG--241" target="Et2niudzJevYGXXobUG--248">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--241" value="新 VNode 和 旧 VNode 都是静态节点？" style="rhombus;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="Et2niudzJevYGXXobUG--23">
<mxGeometry x="1236" y="922" width="130" height="80" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--243" value="退出程序" style="rounded=0;whiteSpace=wrap;html=1;align=center;" vertex="1" parent="Et2niudzJevYGXXobUG--23">
<mxGeometry x="1432" y="815" width="150" height="40" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--309" value="N" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;fontFamily=Helvetica;fontSize=14;" edge="1" parent="Et2niudzJevYGXXobUG--23" source="Et2niudzJevYGXXobUG--248" target="Et2niudzJevYGXXobUG--308">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--248" value="新 VNode 是文本节点吗？即有 text 属性吗？" style="rhombus;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="Et2niudzJevYGXXobUG--23">
<mxGeometry x="1236" y="1040" width="130" height="80" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--316" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;fontFamily=Helvetica;fontSize=14;" edge="1" parent="Et2niudzJevYGXXobUG--23" source="Et2niudzJevYGXXobUG--308" target="Et2niudzJevYGXXobUG--315">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--317" value="Y" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fontSize=14;fontFamily=Helvetica;" vertex="1" connectable="0" parent="Et2niudzJevYGXXobUG--316">
<mxGeometry x="-0.2196" y="3" relative="1" as="geometry">
<mxPoint as="offset" />
</mxGeometry>
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--323" value="N" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontFamily=Helvetica;fontSize=14;" edge="1" parent="Et2niudzJevYGXXobUG--23" source="Et2niudzJevYGXXobUG--308" target="Et2niudzJevYGXXobUG--322">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--308" value="新 旧VNode 都有<br>子节点吗" style="rhombus;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="Et2niudzJevYGXXobUG--23">
<mxGeometry x="1236" y="1161" width="130" height="80" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--313" value="用新的VNode 文本替换真实 DOM 节点中的内容" style="rounded=0;whiteSpace=wrap;html=1;align=center;" vertex="1" parent="Et2niudzJevYGXXobUG--23">
<mxGeometry x="1622" y="1060" width="150" height="40" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--250" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontFamily=Helvetica;fontSize=14;entryX=0.5;entryY=1;entryDx=0;entryDy=0;" edge="1" parent="Et2niudzJevYGXXobUG--23" source="Et2niudzJevYGXXobUG--241" target="Et2niudzJevYGXXobUG--243">
<mxGeometry relative="1" as="geometry">
<mxPoint x="1512" y="860.9999999999998" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--321" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;fontFamily=Helvetica;fontSize=14;" edge="1" parent="Et2niudzJevYGXXobUG--23" source="Et2niudzJevYGXXobUG--315" target="Et2niudzJevYGXXobUG--320">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--333" value="Y" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fontSize=14;fontFamily=Helvetica;" vertex="1" connectable="0" parent="Et2niudzJevYGXXobUG--321">
<mxGeometry x="-0.2276" y="-3" relative="1" as="geometry">
<mxPoint as="offset" />
</mxGeometry>
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--315" value="新旧VNode 的<br>子节点不同 ？" style="rhombus;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="Et2niudzJevYGXXobUG--23">
<mxGeometry x="1462" y="1165.5" width="111" height="71" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--353" style="edgeStyle=orthogonalEdgeStyle;shape=link;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;fontFamily=Helvetica;fontSize=14;" edge="1" parent="Et2niudzJevYGXXobUG--23" source="Et2niudzJevYGXXobUG--320" target="Et2niudzJevYGXXobUG--352">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--320" value="更新子节点" style="rounded=0;whiteSpace=wrap;html=1;align=center;fillColor=#e1d5e7;strokeColor=#9673a6;" vertex="1" parent="Et2niudzJevYGXXobUG--23">
<mxGeometry x="1622" y="1181" width="138" height="40" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--325" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;fontFamily=Helvetica;fontSize=14;" edge="1" parent="Et2niudzJevYGXXobUG--23" source="Et2niudzJevYGXXobUG--322" target="Et2niudzJevYGXXobUG--324">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--332" value="Y" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fontSize=14;fontFamily=Helvetica;" vertex="1" connectable="0" parent="Et2niudzJevYGXXobUG--325">
<mxGeometry x="0.1857" y="1" relative="1" as="geometry">
<mxPoint as="offset" />
</mxGeometry>
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--335" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontFamily=Helvetica;fontSize=14;" edge="1" parent="Et2niudzJevYGXXobUG--23" source="Et2niudzJevYGXXobUG--322" target="Et2niudzJevYGXXobUG--326">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--341" value="N" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fontSize=14;fontFamily=Helvetica;" vertex="1" connectable="0" parent="Et2niudzJevYGXXobUG--335">
<mxGeometry x="-0.164" y="1" relative="1" as="geometry">
<mxPoint as="offset" />
</mxGeometry>
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--322" value="只有 新 VNode <br>有子节点" style="rhombus;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="Et2niudzJevYGXXobUG--23">
<mxGeometry x="1236" y="1283" width="130" height="80" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--328" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;fontFamily=Helvetica;fontSize=14;" edge="1" parent="Et2niudzJevYGXXobUG--23" source="Et2niudzJevYGXXobUG--324" target="Et2niudzJevYGXXobUG--327">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--331" value="Y" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fontSize=14;fontFamily=Helvetica;" vertex="1" connectable="0" parent="Et2niudzJevYGXXobUG--328">
<mxGeometry x="-0.3846" relative="1" as="geometry">
<mxPoint as="offset" />
</mxGeometry>
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--330" value="N" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontFamily=Helvetica;fontSize=14;" edge="1" parent="Et2niudzJevYGXXobUG--23" source="Et2niudzJevYGXXobUG--324" target="Et2niudzJevYGXXobUG--329">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--324" value="旧VNode 有文本&nbsp;？" style="rhombus;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="Et2niudzJevYGXXobUG--23">
<mxGeometry x="1462" y="1288" width="111" height="71" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--340" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;fontFamily=Helvetica;fontSize=14;" edge="1" parent="Et2niudzJevYGXXobUG--23" source="Et2niudzJevYGXXobUG--326" target="Et2niudzJevYGXXobUG--339">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--347" value="N" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fontSize=14;fontFamily=Helvetica;" vertex="1" connectable="0" parent="Et2niudzJevYGXXobUG--340">
<mxGeometry x="-0.0667" y="1" relative="1" as="geometry">
<mxPoint as="offset" />
</mxGeometry>
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--343" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;fontFamily=Helvetica;fontSize=14;" edge="1" parent="Et2niudzJevYGXXobUG--23" source="Et2niudzJevYGXXobUG--326" target="Et2niudzJevYGXXobUG--342">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--346" value="Y" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fontSize=14;fontFamily=Helvetica;" vertex="1" connectable="0" parent="Et2niudzJevYGXXobUG--343">
<mxGeometry x="-0.2114" relative="1" as="geometry">
<mxPoint as="offset" />
</mxGeometry>
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--326" value="只有旧 VNode <br>有子节点" style="rhombus;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="Et2niudzJevYGXXobUG--23">
<mxGeometry x="1236" y="1453" width="130" height="80" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--334" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=1;entryY=0.5;entryDx=0;entryDy=0;fontFamily=Helvetica;fontSize=14;" edge="1" parent="Et2niudzJevYGXXobUG--23" source="Et2niudzJevYGXXobUG--327" target="Et2niudzJevYGXXobUG--329">
<mxGeometry relative="1" as="geometry">
<Array as="points">
<mxPoint x="1712" y="1420" />
<mxPoint x="1592" y="1420" />
</Array>
</mxGeometry>
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--327" value="清空 DOM的文本" style="rounded=0;whiteSpace=wrap;html=1;align=center;" vertex="1" parent="Et2niudzJevYGXXobUG--23">
<mxGeometry x="1632" y="1303.5" width="150" height="40" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--329" value="把新VNode 中的子节点添加到DOM中" style="rounded=0;whiteSpace=wrap;html=1;align=center;" vertex="1" parent="Et2niudzJevYGXXobUG--23">
<mxGeometry x="1442.5" y="1404" width="150" height="40" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--344" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=1;entryY=0.5;entryDx=0;entryDy=0;fontFamily=Helvetica;fontSize=14;" edge="1" parent="Et2niudzJevYGXXobUG--23" source="Et2niudzJevYGXXobUG--339" target="Et2niudzJevYGXXobUG--327">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--345" value="Y" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fontSize=14;fontFamily=Helvetica;" vertex="1" connectable="0" parent="Et2niudzJevYGXXobUG--344">
<mxGeometry x="-0.926" y="-2" relative="1" as="geometry">
<mxPoint as="offset" />
</mxGeometry>
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--339" value="只有旧 VNode <br>有文本" style="rhombus;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="Et2niudzJevYGXXobUG--23">
<mxGeometry x="1236" y="1572" width="130" height="80" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--310" value="新 VNode 与 旧 VNode 的文本不同？" style="rhombus;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="Et2niudzJevYGXXobUG--23">
<mxGeometry x="1451.5" y="1044.5" width="111" height="71" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--311" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontFamily=Helvetica;fontSize=14;" edge="1" parent="Et2niudzJevYGXXobUG--23" source="Et2niudzJevYGXXobUG--248" target="Et2niudzJevYGXXobUG--310">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--318" value="Y" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fontSize=14;fontFamily=Helvetica;" vertex="1" connectable="0" parent="Et2niudzJevYGXXobUG--311">
<mxGeometry x="0.2291" y="-2" relative="1" as="geometry">
<mxPoint as="offset" />
</mxGeometry>
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--314" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;fontFamily=Helvetica;fontSize=14;" edge="1" parent="Et2niudzJevYGXXobUG--23" source="Et2niudzJevYGXXobUG--310" target="Et2niudzJevYGXXobUG--313">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--319" value="Y" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontFamily=Helvetica;fontSize=14;" edge="1" parent="Et2niudzJevYGXXobUG--23" source="Et2niudzJevYGXXobUG--310" target="Et2niudzJevYGXXobUG--313">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--342" value="清空 DOM的子节点" style="rounded=0;whiteSpace=wrap;html=1;align=center;" vertex="1" parent="Et2niudzJevYGXXobUG--23">
<mxGeometry x="1441.5" y="1473" width="150" height="40" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--357" value="N" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;fontFamily=Helvetica;fontSize=14;fontColor=#FF3333;" edge="1" parent="Et2niudzJevYGXXobUG--23" source="Et2niudzJevYGXXobUG--351" target="Et2niudzJevYGXXobUG--356">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--368" value="Y" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontFamily=Helvetica;fontSize=14;fontColor=#666666;" edge="1" parent="Et2niudzJevYGXXobUG--23" source="Et2niudzJevYGXXobUG--351" target="Et2niudzJevYGXXobUG--366">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--351" value="newChildren 的某个子节点在oldChildren 数组中是否找到相同的子节点" style="rhombus;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="Et2niudzJevYGXXobUG--23">
<mxGeometry x="2050" y="1163.5" width="210" height="75" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--355" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;fontFamily=Helvetica;fontSize=14;fontColor=#FF3333;" edge="1" parent="Et2niudzJevYGXXobUG--23" source="Et2niudzJevYGXXobUG--352" target="Et2niudzJevYGXXobUG--351">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--363" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;fontFamily=Helvetica;fontSize=14;fontColor=#666666;" edge="1" parent="Et2niudzJevYGXXobUG--23" source="Et2niudzJevYGXXobUG--352" target="Et2niudzJevYGXXobUG--358">
<mxGeometry relative="1" as="geometry">
<Array as="points">
<mxPoint x="1900" y="1583" />
</Array>
</mxGeometry>
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--352" value="遍历新旧VNode，对比子节点；新旧VNode 的<font color="#ff3333">子节点数组</font>用newChildren、oldChildren 比喻" style="rounded=0;whiteSpace=wrap;html=1;align=left;" vertex="1" parent="Et2niudzJevYGXXobUG--23">
<mxGeometry x="1820" y="1161" width="180" height="79" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--356" value="旧Node上 创建子节点" style="rounded=0;whiteSpace=wrap;html=1;align=center;fillColor=#e1d5e7;strokeColor=#9673a6;" vertex="1" parent="Et2niudzJevYGXXobUG--23">
<mxGeometry x="2299" y="1180.5" width="138" height="40" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--362" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontFamily=Helvetica;fontSize=14;fontColor=#666666;" edge="1" parent="Et2niudzJevYGXXobUG--23" source="Et2niudzJevYGXXobUG--358" target="Et2niudzJevYGXXobUG--360">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--358" value="遍历完 newChildren ，发现<br>oldChildren还有未处理的子节点，<br>说明子节点是废弃的" style="rhombus;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="Et2niudzJevYGXXobUG--23">
<mxGeometry x="2060" y="1533" width="220" height="100" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--360" value="旧Node上 删除子节点" style="rounded=0;whiteSpace=wrap;html=1;align=center;fillColor=#e1d5e7;strokeColor=#9673a6;" vertex="1" parent="Et2niudzJevYGXXobUG--23">
<mxGeometry x="2359" y="1563" width="138" height="40" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--370" value="N" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;fontFamily=Helvetica;fontSize=14;fontColor=#666666;" edge="1" parent="Et2niudzJevYGXXobUG--23" source="Et2niudzJevYGXXobUG--366" target="Et2niudzJevYGXXobUG--369">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--376" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;fontFamily=Helvetica;fontSize=14;fontColor=#666666;" edge="1" parent="Et2niudzJevYGXXobUG--23" source="Et2niudzJevYGXXobUG--366" target="Et2niudzJevYGXXobUG--372">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--366" value="所处位置是否不同" style="rhombus;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="Et2niudzJevYGXXobUG--23">
<mxGeometry x="2080" y="1288" width="150" height="72" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--369" value="移动子节点：<br><div style=""><span>以 newChildren 里子节点的位置为准，调整oldChildren 里该子节点的位置</span></div>" style="rounded=0;whiteSpace=wrap;html=1;align=left;fillColor=#e1d5e7;strokeColor=#9673a6;" vertex="1" parent="Et2niudzJevYGXXobUG--23">
<mxGeometry x="2299" y="1295.5" width="171" height="56" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--372" value="更新子节点：<br>更新oldChildren 该子节点的位置，使之与newChildren中的子节点的位置相同" style="rounded=0;whiteSpace=wrap;html=1;align=left;fillColor=#e1d5e7;strokeColor=#9673a6;" vertex="1" parent="Et2niudzJevYGXXobUG--23">
<mxGeometry x="2299" y="1380" width="230" height="61" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--48" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.385;entryY=-0.004;entryDx=0;entryDy=0;entryPerimeter=0;shape=link;" edge="1" parent="1" source="Et2niudzJevYGXXobUG--27" target="Et2niudzJevYGXXobUG--23">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--49" value="关系" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" vertex="1" connectable="0" parent="Et2niudzJevYGXXobUG--48">
<mxGeometry x="-0.051" y="-2" relative="1" as="geometry">
<mxPoint as="offset" />
</mxGeometry>
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--27" value="VNode 类型" style="swimlane;" vertex="1" parent="1">
<mxGeometry x="120" y="180" width="240" height="350" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--29" value="能够被创建并插入到 DOM " style="swimlane;" vertex="1" parent="Et2niudzJevYGXXobUG--27">
<mxGeometry x="22.5" y="50" width="195" height="160" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--30" value="元素节点" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;" vertex="1" parent="Et2niudzJevYGXXobUG--29">
<mxGeometry x="15" y="30" width="80" height="30" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--31" value="文本节点—text" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;" vertex="1" parent="Et2niudzJevYGXXobUG--29">
<mxGeometry x="15" y="70" width="170" height="30" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--32" value="注释节点—isComment" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;" vertex="1" parent="Et2niudzJevYGXXobUG--29">
<mxGeometry x="15" y="110" width="170" height="30" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--35" value="克隆节点—isCloned" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;" vertex="1" parent="Et2niudzJevYGXXobUG--27">
<mxGeometry x="15" y="220" width="170" height="30" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--36" value="函数式组件" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;" vertex="1" parent="Et2niudzJevYGXXobUG--27">
<mxGeometry x="15" y="260" width="170" height="30" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--37" value="组件节点" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;" vertex="1" parent="Et2niudzJevYGXXobUG--27">
<mxGeometry x="15" y="300" width="170" height="30" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--47" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="1" source="Et2niudzJevYGXXobUG--42">
<mxGeometry relative="1" as="geometry">
<mxPoint x="770" y="1190" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--42" value="对比新旧VNode" style="swimlane;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
<mxGeometry x="275" y="1060" width="330" height="260" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--44" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="Et2niudzJevYGXXobUG--42" source="Et2niudzJevYGXXobUG--14" target="Et2niudzJevYGXXobUG--22">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--14" value="数据变化后生成的新VNode与 前一次缓存的旧的VNode 通过 DOM-Diff&nbsp; 算法进行对比，计算差异" style="rounded=0;whiteSpace=wrap;html=1;align=left;" vertex="1" parent="Et2niudzJevYGXXobUG--42">
<mxGeometry x="61.25" y="49" width="207.5" height="90" as="geometry" />
</mxCell>
<mxCell id="Et2niudzJevYGXXobUG--22" value="根据有差异的VNode 创建出真实的DOM 节点，再插入到视图中" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="Et2niudzJevYGXXobUG--42">
<mxGeometry x="87.5" y="170" width="155" height="50" as="geometry" />
</mxCell>
</root>
</mxGraphModel>
</diagram>
</mxfile>