虚拟dom比较原理
时间：2023-04-03 00:50:57
HTML
dom比较步骤1.用js对象表示dom结构tagName标签名props元素属性key唯一标识children子元素，格式同父元素count有几个子元素，用于计算当前元素的索引，这是整个dom中的第几个，方便dom操作原始js对象tagName":"h1","props":{"style":"color:red"},"children":["simplevirtualdom"],"count":1},{"tagName":"p","props":{},"children":["helloworld"],"count":1},{"tagName":"ul","props":{},"children":[{"tagName":"li","props":{},"children":["item#1"],"count":1},{"tagName":"li","props":{},"children":["item#2"],"count":1}],"count":4}],"count":9}2.将原始js对象渲染成一个dom结构简单的虚拟domhelloworld
3.修改原js对象{"tagName":"div","props":{"id":"container2"},"children":[{"tagName":"h5","props":{"style":"color:red"},"children":["simplevirtualdom"],"count":1},{"tagName":"p","props":{},"children":["你好world2"],"计数":1},{"tagName":"ul","props":{},"children":[{"tagName":"li","props":{},"children":["item#1"],"count":1},{"tagName":"li","props":{},"children":["item#2"],"count":1},{"tagName":"li","props":{},"children":["item#3"],"count":1}],"count":6}],"count":11}4.比较哪些节点是修改类型，0为标签名称变化，1为子元素变化（删除或添加），2为属性变化，3为内容变化key对象第一层中的key值代表索引，原dom中的哪个元素发生变化{"0"：[{“类型”：2，“道具”：{"id":"container2"}}],"1":[{"type":0,"node":{"tagName":"h5","props":{"style":"color:red"},"children":["simplevirtualdom"],"count":1}}],"4":[{"type":3,"content":"helloworld2"}],"5":[{“类型”：1，“移动”：[{“索引”：2，“项目”：{“标签名称”：“李”，“道具”：{}，“儿童”：[“项目＃3”],"count":1},"type":1}]}]}5.渲染修改后的js对象a。改标签名，直接重新渲染整个元素，包括元素b下的子元素。子元素被改变，删除的删除，加法（listframe有一套自己的计算方法，可以自行百度研究）c．属性改变，操作对应元素的属性d。内容变化，操作对应元素的内容
simplevirtualdomhelloworld2
