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. 当新节点们遍历完就节点没遍历完就把前后指针之间的节点们删除

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

是一个小树呀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值