前端框架 & diff算法优化 & vue中的key

1. 使用前端框架（angular/vue/react）带来哪些好处，相对于使用jQuery click

jquery通过操作dom进行完成视图更新，vue通过改变数据来完成更新视图；
过程是数据改变 =====> 虚拟DOM计算变更 ====> 操作真实DOM ===> 视图更新；从改变数据到视图更新不直接操作dom，操作dom的过程是由框架来完成的。
虚拟DOM：js模拟，如下题图一右侧

2. vue框架中的diff算法是如何优化渲染的计算或者优化效率的 click

使用虚拟DOM模拟真实DOM目的：计算最小变化，再更新真实DOM结构。
过程：
	1、遍历老虚拟DOM
	2、遍历新虚拟DOM（发现更新和新增）
	3、根据变化重新排序
	若有1000个节点，需要计算1000^3次，该算法性能不佳
优化： 
	1、只比较同一层级，不跨级比较
	2、比较标签名。标签名不同直接删除，不继续深度比较，创建新节点
	3、标签名相同，key相同就认为是同一个节点，不继续深度比较；key不同创建新节点
	1000个节点只比较1000次
key：唯一确定一个dom元素，diff算法更高效

左边为真实DOM，右边为虚拟DOM
diff算法

patch渲染虚拟dom：
	第一次将虚拟dom渲染关联到空容器（element）中；
后期，虚拟dom发生变化，判断是否是同一个vnode（key和tag是否   都  相同）
		是：使用新虚拟dom（vnode）替换旧虚拟dom；===>patchVnode
		不是：创建新DOM元素，删除旧DOM元素

patchVnode：
	1、获取真实dom元素
	2、children：老children==新children？
				相同： 不做任何操作，返回
				不同：
					新vnode有text & 无children
						text不等：老vnode有children，直接移除；更新text
					新vnode无text & 有children
						老vnode有child===>updateChildren
						老vnode无children \=\=有text ：清空text & 添加新children
						... ... ...
						
updateChildren：涉及 删除、增加、排序
	1、定义oldStartIndx、oldEndIndx、newStartIndx、newEndIndx
	2、每次都排列组合做 4 个比较，是否存在同一个节点（tag+key），同一个节点不做变化，比较的节点后移（前面出现相同节点）或前移（后面出现相同节点）获得下一个进行比较的节点，开始判断下一个，直到所有节点都判断完
	3、所有节点都不相同：查找key对应元素，判断tag是否想等
			tag相等：更新node
			tag不相等：创建新node
	

优化diff算法，每个节点都是vnode，
updateChildren：
startidx进行移动，

3. vue中 key 值的作用 click
   1、key的作用主要是高效的更新虚拟DOM，原理：vue在patch过程中可以精准判断两个节点是否为同一个，从而避免频繁更新不同元素，使得patch过程更加高效。减少DOM操作量，提高性能。（简言之：起个名字更好找。五个相同标签p，要在第三个位置插入新标签，若五个标签没有名字，需要挨个进行比较，到第三个的时候，原来的位置换内容，第四个也换，第五个也换，并且创建第六个节点存放原来第五个的内容，三次更新+一次创建。若有了名字，只需要从第一个开始比较，再比较第二个，比较第三个的时候发现不同，换一端进行比较，发现相同（正序走不通走倒序）最后在第三个前面插入新元素，总共只创建了一个元素。）
   2、不设置key还可能在列表更新时引发隐蔽bug
   3、vue在使用相同标签名元素的过度切换时，也会使用key，目的时为了vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果