科技类网站风格,公众平台注册,上海微信网站公司,四川建设网网站一.什么是虚拟DOM#xff1f;
虚拟DOM是 VUE 一个比较核心的概念#xff0c;为什么会有虚拟DOM呢#xff1f;首先可以与传统的网页开发做个对比#xff0c;在没有 VUE 和 REACT 框架之前#xff0c;我们都是使用原生 JavaScript 或者 jQuery#xff0c;那时候是直接对 D…一.什么是虚拟DOM
虚拟DOM是 VUE 一个比较核心的概念为什么会有虚拟DOM呢首先可以与传统的网页开发做个对比在没有 VUE 和 REACT 框架之前我们都是使用原生 JavaScript 或者 jQuery那时候是直接对 DOM 元素进行操作来达到视图更新的一个效果。 操作DOM 》 视图更新 在使用 VUE 框架以后我们就变成了通过改变数据去推动视图更新。 数据改变 》 视图更新 虽然看着很神奇但是其实还是要去操作 DOM 来达到试图更新的效果。 数据改变 》 操作DOM 》 视图更新 而这一步 数据改变 》 操作DOM 就是VUE 框架内部来完成的。但是项目中会有很多数据发生改变那么是否每一次数据改变都要去操作DOM呢当然不是所以就推出了虚拟DOM这个概念。
VUE 中的 template 模板或者 render 函数都会去形成虚拟 DOM。
因为 JS 的执行速度是很快的比操作 DOM 要快很多所以说在数据改变的时候不去操作 DOM而是先去把这个进行的改变做个计算计算出所有的变更然后再去操作真实 DOM所以实际流程是 数据改变 》 虚拟DOM计算变更 》 操作真实的DOM 》 视图更新 什么是虚拟 DOM 呢 就是用 JS 去模拟我们的 DOM 结构。 举个例子下文是一个 DOM 结构。 div idapp classcontainerh1虚拟DOM/h1ul stylecolor: redli第一项/lili第二项/lili第三项/li/ul/div
我们会通过 JS 去表达一下这个结构。
这个做法会写成一个对象对象里面有三个比较重要的属性分别是tag标签、props属性、children子元素。
比如最外层的 DOM 节点为 div 标签所以 tag 就是 divprops 属性就为 id 和 classNamechildren 子元素可能不止一个所以是个数组然后里面的每一项都是个对象也有tagprops和 children属性。
let VNode {tag: div,props: {id: app,className: container,},children: [{tag: h1,children: 虚拟DOM,},{tag: ul,props: {style: color: red,},children: [{tag: li,children: 第一项,},{tag: li,children: 第二项,},{tag: li,children: 第三项,},],},],
};这样就完成了用 JS 表达 DOM结构然后就是用这个虚拟 DOM 结构去计算变更并且去操作真实 DOM。 二.怎么去使用虚拟DOM
Vue当中虚拟 DOM 的实现是参考了 Snabbdom 库。 Snabbdom库是准备一个空容器然后用 vnode 表示一个节点然后再通过 patch 函数把这个 vnode虚拟节点插入到容器里。
这里 h 函数就是创建虚拟节点的函数接受三个参数 h(tagpropschildren)就相当于用 JS 表达 DOM 结构。
我们现在模拟一下这个场景 bodydiv idcontainer/divbutton idbtn改变/button/bodyscript srchttps://cdn.bootcdn.net/ajax/libs/snabbdom/0.7.4/h.js/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/snabbdom/0.7.4/snabbdom-class.js/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/snabbdom/0.7.4/snabbdom-eventlisteners.js/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/snabbdom/0.7.4/snabbdom-props.js/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/snabbdom/0.7.4/snabbdom-style.js/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/snabbdom/0.7.4/snabbdom.js/scriptscript// 引入 snabbdom 库const snabbdom window.snabbdom;// 定义 patch 函数,将虚拟 DOM 插入到空容器const patch snabbdom.init([snabbdom_class,snabbdom_props,snabbdom_style,snabbdom_eventlisteners,]);// 引入 h 函数,用于创建虚拟节点const h snabbdom.h;// 创建空的容器const container document.getElementById(container);// 创建vnode h(ul#list,{},[]) 是说创建一个 ul 标签,id 是 list,没有属性,所以第二个参数为空对象{},然后子节点有多个 li 所以是个数组[]let vnode h(ul#list, {}, [h(li.item, {}, 第一项), // 子节点 [] 的每一项又是一个 h 函数去创建节点h(li.item, {}, 第二项), // 这里表示创建 li 标签,类名为 item,没有属性,子节点是文本,所以是字符串]);// 把 vnode 塞入到容器patch(container, vnode);/script
结果展示为 此时点击按钮改变将第二项内容改变然后再加一个第三项 // 获取按钮节点const btn document.getElementById(btn);btn.addEventListener(click, () {// 创建新的 vnodelet newVnode h(ul#list, {}, [h(li.item, {}, 第一项),h(li.item, {}, 第二项123),h(li.item, {}, 第三项),]);// 将新的 vnode 替换原来的 vnodepatch(vnode, newVnode);// 将 vnode 赋值成最新的 newVnode方便下次比较vnode newVnode;});
展示结果 会发现点击按钮以后第二项和第三项闪动了一下但是第一项没有是因为第一项数据和结构都没有发生变化所以不会去重新渲染第一项只会去渲染第二项和第三项。 这就是使用虚拟DOM的好处他会去比较变化去计算出来一个最小的需要更新的视图。
为什么会这样呢
这是旧的 DOM 结构对应的虚拟 DOM。
let oldVnode h(ul#list, {}, [h(li.item, {}, 第一项),h(li.item, {}, 第二项),
]);
这是新的 DOM 结构对应的虚拟 DOM。
let newVnode h(ul#list, {}, [h(li.item, {}, 第一项),h(li.item, {}, 第二项123),h(li.item, {}, 第三项),
]); Vue 并不会直接拿这个新的虚拟 DOM 去渲染成真实 DOM因为这样效率不高。 由此图看肯定是第二种方式比较快因为第一种方式中间还夹杂着生成虚拟 DOM 的过程所以此时还少了一部算法操作就是 diff 算法通过 diff 算法去计算出新旧两个虚拟 DOM 之间最小的变化然后再去渲染真实 DOM这一步也就是前文所说的计算变更也是为什么第一项不闪动没有重新渲染的原因。 三.什么是 diff 算法
diff 算法就是对比两个虚拟节点找出它们的差异对应到真实 DOM 上面去打补丁的过程。目的是找到这些差异以最小的代价去操作DOM。
上文中只有第二个 li 标签修改了文本新增了第三个 li 标签其他都是不变的所以没必要所有的节点都要更新只更新这两个 li 标签就行diff 算法就是查出这两个 li 标签的算法。
总结diff 算法是一种对比算法。对比两者是旧虚拟 DOM 和新虚拟 DOM对比出哪个虚拟节点更改了找出这个虚拟机点并且只更新这个虚拟节点所对应的真实节点而不用更新其他数据没发生改变的节点实现精准地更新真实 DOM进而提高效率。 四.diff 算法特点
1.同层节点比较
新旧虚拟 DOM 对比的时候diff 算法比较只会在同层级进行不会跨级比较。 2.节点比较规则
生成虚拟 DOM 的时候每一个节点都是有索引的类似于 v-for 循环生成时候的 key 值。对比新旧虚拟 DOM 的时候只有 key 相同的节点才会去进行对比。
这一点在以前将 v-if 的时候提到过一点。 这里就是利用 key 值不同使新旧虚拟 DOM 的 input 标签不去进行对比而是重新渲染。 3. 最小更新子节点
在同一节点下diff 算法会递归地比较和更新子节点如果有相同的子节点只是顺序不一样diff 算法会复用旧节点去替换而不是重新渲染。 就比如这个 p 标签和 span 标签在同一个 li 标签下且新旧 p 节点和 span 节点完全一样就不会重新渲染只是替换一下它们的位置。 4.深度优先
diff 算法是深度优先算法。会优先往深度去比较下图是顺序。
