简单介绍一下虚拟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和diff算法相关推荐

1. 探秘vue核心之虚拟DOM与diff算法

   探秘vue核心之虚拟DOM与diff 一.真实DOM和其解析流程 所有的浏览器渲染引擎工作流程大致分为5步: 创建 DOM 树 -> 创建 Style Rules -> 构建 Render ...

2. Vue深入学习—虚拟DOM和Diff算法

   1.snabbdom 是什么? snabbdom是"速度"的意思,源码只有200行,使用TS写的,让东西变得模块化 2.snabbdom 的 h 函数如何工作? h函数用于产生虚拟 ...

3. 【Vue源码初探】五.diff算法原理

   五.diff算法原理 文章目录 五.diff算法原理 一.基本Diff算法 不是同一个节点 同一个节点 递归比较儿子节点 二.完整的Diff算法 在开头和结尾新增元素 头移尾,尾移头 图示 乱序比对 ...

4. vue之购物车案例升级版、v-model之lazy、number、trim的使用、fetch和axios、计算属性、Mixins、虚拟dom与diff算法 key的作用及组件化开发

   文章目录 1.购物车案例升级版(含价格统计.全选/反选.商品增加减少) 2.v-model之lazy.number.trim的使用 3.fetch和axios 3.1.通过jquery+ajax实现v ...

5. 【Vue源码解析】Vue虚拟dom和diff算法

   Vue虚拟dom和diff算法 1. 简介 2. 搭建环境 1. 安装snabbdom 2. 安装webpack5并配置 3.函数 3.1 虚拟节点vnode的属性 3.2 使用h函数 创建虚拟节点 ...

6. vue 虚拟dom和diff算法详解

   虚拟dom是当前前端最流行的两个框架(vue和react)都用到的一种技术,都说他能帮助vue和react提升渲染性能,提升用户体验.那么今天我们来详细看看虚拟dom到底是个什么鬼 虚拟dom的定义与 ...

7. 虚拟DOM和Diff算法 - 入门级

   什么是虚拟Dom 我们知道我们平时的页面都是有很多Dom组成,那虚拟Dom(virtual dom)到底是什么,简单来讲,就是将真实的dom节点用JavaScript来模拟出来,而Dom变化的对比,放 ...

8. 深入浅出虚拟 DOM 和 Diff 算法，及 Vue2 与 Vue3 中的区别

   因为 Diff 算法,计算的就是虚拟 DOM 的差异,所以先铺垫一点点虚拟 DOM,了解一下其结构,再来一层层揭开 Diff 算法的面纱,深入浅出,助你彻底弄懂 Diff 算法原理 认识虚拟 DOM ...

9. vue--mixin混入以及虚拟DOM和diff算法

   mixin混入 使用它的好处: 将 options 中的配置项可以单独抽离出来,单独管理,这样方便维护 使用: 新建一个对象用来保存 options 中某一个配置项,比如: methods 接下来要将 ...

10. 浏览器性能优化（2）React 虚拟 dom与diff算法

    随着前端技术快速发展,现在的mvvm几大框架遍布前端行业,那么它们对浏览器的性能到底影响多大?与传统的jq相比做了哪些优化呢? 文章目录: React中的虚拟DOM是什么? 虚拟DOM的简单实现(di ...

最新文章

1. 随机一段字符串，浏览器点击复制
2. 力扣第三题java_LeetCode 题解 | 力扣杯 LCP 06. 拿硬币
3. 帝国网站管理系统7.5服务器信息,帝国CMS程序 7.5版本新闻可以使用的后台免登录接口...
4. java如果把字符串转成对象_Java中的重复对象：不仅仅是字符串
5. 字符流读取，乱码问题
6. Docker核心技术之联合文件系统
7. 2017年度中国专利代理十强
8. MyCat双机HA高可用集群搭建_HAProxy安装和配置---MyCat分布式数据库集群架构工作笔记0028
9. it专员职责_【IT专员工作内容|工作职责|IT专员做什么】-看准网
10. java常用类objet,Java基础-常用API-Object类
11. Verilog语言生成4位伪随机码
12. 归并排序 MergeSort
13. 以观察者设计模式举例的房产信息系统
14. 用Python实现一个电影订票系统
15. 【matlab】图像二值化---最大类间方差法
16. linux软硬链接 计数,深入理解Linux的软链接和硬链接
17. 计算机网路课程设计——电子邮件客户端的设计与实现——接收邮件（POP3协议）
18. 爆肝100天，B站UP主开发会写高考作文的AI，内含17亿参数、2亿数据、1万行代码
19. C语言short转成int,short转换int的小例子
20. 【Mathematica】 函数的积分

热门文章

1. 5.UNIX 环境高级编程--标准I/O库
2. 49. 精简 JavaScript(10)
3. 2. PSR-2 --- 代码风格指南
4. 78. Cookie
5. layer —— 一个简单的jQuery弹出层插件
6. Splay模板 1.0
7. session放入缓存（redis）、DB
8. django 分页(2) 使用类 页码显示
9. 如何切换DNN编辑器
10. Visual Studio 2010全球发布会 上海站(图)