虚拟DOM与Diff

简单介绍下虚拟DOM和diff算法

简单介绍虚拟DOM和diff

snabbdom简介和搭建测试环境

snabbdom简介和搭建环境

虚拟DOM和h函数

VDOM和h函数

手写snabbdom

1、手写h函数

h函数

2、patch函数

  • key很重要。key是这个节点的唯一标识，告诉diff算法，在更改前后他们是同一节点
  • 只有是同一个虚拟节点，才进行精细化比较，否则就是暴力删除旧的、插入新的。延伸问题：如何定义是同一个虚拟节点？答：选择器相同且key相同。
  • 只进行同层比较，不会进行跨层比较。即使是同一片虚拟节点，但是跨层了，对不起，精细化比较不diff你，而是暴力删除旧的、然后插入新的

处理不是同一节点时
处理新旧节点是同一节点

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

勤奋的代码搬运工<br>一位刚出来实习的前端程序员<br>谢谢大家