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

需求

方法一：拆了重建

方法二：diff

主要内容

snabbdom简介和测试环境搭建

snabbdom简介

• snabbdom是瑞典语单词，单词原意“速度”；

  

• snabbdom 是著名的虚拟DOM 库，是diff 算法的鼻祖，Vue 源码借鉴了snabbdom ；

• 官方git ：snabbdom

安装snabbdom

• 在git 上的snabbdom 源码是用TypeScript写的，git 上并不提供编译好的JavaScript 版本；

• 如果要直接使用build出来的JavaScript 版的snabbdom库，可以从npm上下载：

  npm i -S snabbdom
  

• 学习库底层时，建议大家阅读原汁原味的TS代码，最好带有库作者原注释，这样对你的源码阅读能力会有很大的提升。

snabbdom测试环境搭建

• snabbdom 库是DOM库，不能在nodejs环境运行，所以需要搭建webpack和webpack-dev-server开发环境，不需要安装任何loader

• 这里需要注意，必须安装最新版webpack@5，不能安装webpack@4，因为webpack4中没有读取exports的能力

  npm i -S webpack@5 webpack-cli@3 webpack-dev-server@3
  

• 参考webpack官网，书写好webpack.config.js文件

跑通官方git首页的demo程序

• 跑通snabbdom官方git首页的demo程序，即证明调试环境已经搭建成功

• 不要忘记在index.html中放置一个div#container

虚拟DOM和h函数

虚拟DOM类似于mustache中的token

diff是发生在虚拟DOM上的

课程不研究DOM如何变成虚拟DOM

研究内容

• 虚拟函数如何被渲染函数（h函数）产生？

  手写h函数

• diff算法原理？

  手写diff算法

• 虚拟DOM如何通过diff变为真正的DOM的

  事实上，虚拟DOM变回真正的DOM是涵盖在diff算法里面的

虚拟函数如何被渲染函数（h函数）产生？

h函数用来产生虚拟节点

h函数用来产生虚拟节点(vnode)

比如这样会调用h函数

将得到这样的虚拟节点

{
    "sel": "a",
    "data": {
        props: {
            href: "http://www.atguigu.com"
        }
    },
    "text": "尚硅谷"
}

它表示的真正DOM节点

一个虚拟节点都有哪些属性

{
    children: undefined,	// 子元素
    data: {},	// 属性、样式
    elm: undefined,	// 对应真正DOM节点，如果为undefined，表示该节点还未上树
    key: undefined,	// 节点唯一标识
    sel: "div",	// 选择器
    text: "我是一个盒子"	// 文字
}

h函数可以嵌套使用，从而得到虚拟DOM树（

标签：Vue,DOM,elm,children,oldVnode,key,节点,vnode,源码
来源： https://blog.csdn.net/KaiSarH/article/details/118518774