VUE 虚拟dom

VUE

对于vue的学习笔记 一些通过snabbdom进行领悟

vue的虚拟dom

是将vue的里面写的样式经过h()函数操作在通过vnode的返回形成的虚拟dom可以通过patch进行上树操作

vue的diff

1. 只有是同意节点才会进行精细化比较同一个samenode key相同并且是同一元素 没有key 那就是undefinde相同undefined==undefined
2. 最小量更新用key操作可以达到效果
3. diff的比较是对新旧虚拟dom的比较
4. patch（）先看是不是老的是虚拟节点如果不是那代表还没开始就会让新的上树（下面代码就是解释）

var myvonde = h('a',{props:{href:'www.baidu.com'}},'尚硅谷')
const patch = init([classModule,propsModule,styleModule,eventListenersModule])
const conti = document.getElementById('container')
patch(conti,myvonde)

diff的四个比较

所有的改变都是在老节点的基础上的

1. 新前指针与旧前指针

2. 新后指针与旧后指针

3. 新后指针与旧前指针 会移动节点把这个节点制动到旧后指针的后面旧节点原来位置设置成undefined
   

4. 新前指针与旧后指针 ‘命中后移动节点，移动到就节点前指针的前面’

5. 四个都没命中用循环遍历查找 查找找到了之后把这个位置定义为undefined把这个节点放到旧前节点的前面 没找到就会直接插入到旧前节点的前面

6. 当新节点们遍历完就节点没遍历完就把前后指针之间的节点们删除