Vue深入学习—虚拟DOM和Diff算法
1、snabbdom 是什么?
snabbdom是“速度"的意思,源码只有200行,使用TS写的,让东西变得模块化
2、snabbdom 的 h 函数如何工作?
h函数用于产生虚拟节点,同时也可以嵌套使用,得到虚拟DOM树,
3、什么是虚拟DOM?
用js对象描述DOM 的层次结构,DOM中的一切属性都在虚拟DOM中有对应到的属性。
3.1、创建一个虚拟DOM
const patch = init([classModule, propsModule, styleModule, eventListenersModule]);// 创建虚拟节点
const myVirtual1 = h('a', {props: {href:'https://blog.lijianlin.com.cn/',target: '_blank'}
},'魁首');
console.log(myVirtual);//让虚拟节点上树
const container = document.getElementById('container');
patch(container, myVirtual1);
3.2、patch函数源码流程图
export default function(oldVnode, newVnode){// 1、判断传入的第一个参数,是DOM节点还是虚拟节点?if(oldValue.sel == '' || oldValue.sel == undefined){// 2、传入的第一个参数是DOM 节点,包装成虚拟节点oldValue = vnode(oldValue.tagName.toLowerCase(), {}, [], undefined, oldValue);}// 3、判断oldValue和newValue是否为同一节点?if(oldValue.key == newValue.kee && oldValue.sel == newValue.sel){console.log('是同一个节点');// 3.1、判断新旧vnode是否为同一个对象if(oldValue == newValue) return;// 3.2、判断新旧vnode有没有text属性if(newValue.text != undefined && (newValue.children == undefined || newValue.children.length == 0)){console.log('新vnode有text属性');// 3.2.1、如果新虚拟节点中的text和老的虚拟节点的text不同,那么直接让新的text写入老的elm中。如果老的elm中的chilren,那么也会立即消失掉。if(newValue.text != oldValue.text){oldValue.elm.innerHTML = newValue.text;}}else {// 新vnode没有text属性,有chidrenconsole.log('新的vnode没有text属性');// 3.2.2、判断老的有咩有childrenif(oldValue.children != undefined && oldVlaue.children > 0){// 3.2.2.1、老节点有childrenlet ch = newVnode.children[i];// 3.2.2.2、再次遍历,看看oldValue 中有没有节点和他是same的let isExist = false;for(let j = 0; j < oldValue.children.length; j++){if(oldValue.children[j].sel == ch.sel && oldValue.children[j].key == ch.key){isExist = true; }}if(!isExist){console.log(ch, i);let dom = createElement(ch);ch.elm = dom;}}else{// 3.2.2.3、老节点没有chidlren// 3.2.2.4、清空老节点内容oldValue.elm.innerHTML = '';// 3.2.2.5、遍历新的vnode子节点,创建DOM,上树for(let i = 0; i < newVnode.children.length; i++){let dom = createElement(newVnode.children[i]);oldVnode.elm.appendChild(dom);}}}}else{ console.log('不是同一个节点')let newVnoElm = createElement(newVnode);// 4、插入到老节点之前oldValue.elm.parentNode.insertBefore(newVnodeElm, oldVnode.elm);}
}
4、diff 算法原理
4.1、diff是发生在虚拟DOM上的,用来计算两个虚拟DOM的差异,并重新熏染。
const patch = init([classModule, propsModule, styleModule, eventListenersModule]);// 创建虚拟节点
const myVirtual2 = h('ul',{},[h('li',{key:'A'},'A'),h('li',{key:'B'},'B'),h('li',{key:'C'},'C'),h('li',{key:'D'},'D'),
]);
// 上树
patch(container, myVirtual2);// 创建替换节点
const myVirtual3 = h('ul',{},[h('li',{key:'D'},'D'),h('li',{key:'A'},'A'),h('li',{key:'B'},'B),h('li',{key:'C'},'C'),h('li',{key:'D'},'D'),
]);
4.2、Diff值得注意的地方:
- Diff算法更改前后是同一个DOM节点
- 选择器、key相同则判断为同一个节点。
- 只进行同层半价,不会跨层比较。
Vue深入学习—虚拟DOM和Diff算法相关推荐
- 探秘vue核心之虚拟DOM与diff算法
探秘vue核心之虚拟DOM与diff 一.真实DOM和其解析流程 所有的浏览器渲染引擎工作流程大致分为5步: 创建 DOM 树 -> 创建 Style Rules -> 构建 Render ...
- 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 ...
- 【Vue源码解析】Vue虚拟dom和diff算法
Vue虚拟dom和diff算法 1. 简介 2. 搭建环境 1. 安装snabbdom 2. 安装webpack5并配置 3.函数 3.1 虚拟节点vnode的属性 3.2 使用h函数 创建虚拟节点 ...
- vue 虚拟dom和diff算法详解
虚拟dom是当前前端最流行的两个框架(vue和react)都用到的一种技术,都说他能帮助vue和react提升渲染性能,提升用户体验.那么今天我们来详细看看虚拟dom到底是个什么鬼 虚拟dom的定义与 ...
- 虚拟DOM和Diff算法 - 入门级
什么是虚拟Dom 我们知道我们平时的页面都是有很多Dom组成,那虚拟Dom(virtual dom)到底是什么,简单来讲,就是将真实的dom节点用JavaScript来模拟出来,而Dom变化的对比,放 ...
- vue--mixin混入以及虚拟DOM和diff算法
mixin混入 使用它的好处: 将 options 中的配置项可以单独抽离出来,单独管理,这样方便维护 使用: 新建一个对象用来保存 options 中某一个配置项,比如: methods 接下来要将 ...
- 【总结】1135- 图解虚拟 DOM 之 DIff 算法
原文: https://juejin.cn/post/7000266544181674014 1. 目录 1. 相关知识点: 2. 虚拟DOM(Virtual DOM) 2.1. 什么是虚拟DOM 2 ...
- 浏览器性能优化(2)React 虚拟 dom与diff算法
随着前端技术快速发展,现在的mvvm几大框架遍布前端行业,那么它们对浏览器的性能到底影响多大?与传统的jq相比做了哪些优化呢? 文章目录: React中的虚拟DOM是什么? 虚拟DOM的简单实现(di ...
- 学习Vue3 第五章(Vue核心虚拟Dom和 diff 算法)
为什么要学习源码 1.可以提升自己学习更优秀的API设计和代码逻辑 2.面试的时候也会经常问源码相关的东西 3.更快的掌握vue和遇到问题可以定位 介绍虚拟DOM 虚拟DOM就是通过JS来生成一个AS ...
最新文章
- 【怎样写代码】参数化类型 -- 泛型(五):泛型类
- HDU 2830 Matrix Swapping II
- Android布局之相对布局——RelativeLayout
- 学习,编译ffmpeg tutorial
- Jpeglib使用指南, 各种压缩包的压缩和解压方法, 开源社区分裂史
- IOC和DI是什么?
- 我的 11 年编程生涯
- linux dhcpd 设置 关于 subnet
- 超融合带来的IT人员问题 企业是否看到?
- Visio绘制电路图
- matlab 三角函数积分,正弦函数与三角函数积分及Matlab编程.doc
- 阿里云等企业主导的龙蜥社区发起“龙腾计划”;OpenInfra 基金会推出 LOKI 标准;GitLab 14.6 发布 | 开源日报
- mysql左连接和右连接_MYSQL 左连接与右连接
- 长阳土家族自治县政府与升哲科技达成战略合作
- 预测身高c需语言,预测身高问题。不知哪出问题了,算出乱码。求解!
- WIFI模块接入ONENET步骤
- [UNR#5]诡异操作
- 沙奎尔·奥尼尔——盘点那些“巨人”的事①
- 月GMV超3000万,中小商家如何跻身快手电商头部?
- BPM软件_财务报销流程管理解决方案_K2工作流引擎
热门文章
- java ftp 假死_FTPClient下载文件,程序假死问题
- akka java_java – Akka和Spring集成
- 2c总线的布线宽度_PCIExpress总线接口的布线规则
- (转载)委托与函数指针辨析
- 底层技术革命是如何爆发的?_转
- 二分图匹配(Luogu3386)
- 我被C++开发欺辱的岁月
- 报错500 DEFAULT_INCOMPATIBLE_IMPROVEMENTS
- python 用pip安装python库下载超时的解决办法
- PAT (Top Level) Practise 1008 Airline Routes(Tarjan模版题)