vDom和domDiff
虚拟dom和domDiff
1. 构建虚拟DOM
var tree = el('div', {'id': 'container'}, [
el('h1', {style: 'color: blue'}, ['simple virtal dom']),
el('p', ['Hello, virtual-dom']),
el('ul', [el('li')])
])
2. 通过虚拟DOM构建真正的DOM
var root = tree.render()
document.body.appendChild(root)
3. 当数据发生变化,生成新的虚拟DOM
var newTree = el('div', {'id': 'container'}, [
el('h1', {style: 'color: red'}, ['simple virtal dom']),
el('p', ['Hello, virtual-dom']),
el('ul', [el('li'), el('li')])
])
4. 比较两棵虚拟DOM树的不同
var patches = diff(tree, newTree)
5. 在真正的DOM元素上应用变更
patch(root, patches)
难点就在于比较diff
给你两个数组,数组里装着几个对象,对比这两个数组的区别,首先需要考虑的是什么,顺序,也就是复用性,因为dom里有子元素,如果能移动位置,就优先移动位置,对比之后,没有的就删了,在把新的添加就行,但是,但是对比对象的成本非常的高,我要对比两个对象是不是同一个要对比name,对比age,对比很多的值,才能知道这个是原本的第一个值现在变到第三个了,如何减少对比,用key
,用对象里不变的量做对比,因为有key,所以对象级别的对比就变成了字符串数组级别的对比,这也是vue的优化方案之一,如何对比字符串数组的diff,往下看
// 列表对比,主要也是根据 key 值查找匹配项
// 对比出新旧列表的新增/删除/移动
function diffList(oldList, newList, index, pathchs) {
let change = []
let list = []
const newKeys = getKey(newList)
oldList.map(v => {
if (newKeys.indexOf(v.key) > -1) {
list.push(v.key)
} else {
list.push(null)
}
})
// 标记删除
for (let i = list.length - 1; i>= 0; i--) {
if (!list[i]) {
list.splice(i, 1)
change.push({ type: 'remove', index: i })
}
}
// 标记新增和移动
newList.map((item, i) => {
const key = item.key
const index = list.indexOf(key)
if (index === -1 || key == null) {
// 新增
change.push({ type: 'add', node: item, index: i })
list.splice(i, 0, key)
} else {
// 移动
if (index !== i) {
change.push({
type: 'move',
form: index,
to: i,
})
move(list, index, i)
}
}
})
return { change, list }
}
更新
新增的新增,删除的删除的,移动的先移动,再对比移动的数据的标签值的变化,比如值的变化,class的变化,内容的变化等等,之后还要递归执行子一级的变化,才能完成一次domDiff
理想化
上面说的只是理想化的对比,如果我不设置key呢,vue会自己设置,就比如vue的dom上个特殊的id,那vue能自己设置还要我们设置干什么,他设置需要去生成uuid之类的id,是需要成本的
参考资料
domDiff第一篇
domDiff第二篇
domDiff第三篇
domDiff第四篇
domDiff第五篇
domDiff第六篇
domDiff第七篇
vDom和domDiff的更多相关文章
- WebWorker 中将已处理好的 VDOM 数据提交主线程渲染 DOM
上篇文章讲了 WebWorker 的简单用法,其实网上很多类似的文章,我写的也比较垃圾.不会的建议可以网上看比较好点的资料. 这里我会先讲下我的大致思路.然后会贴上一堆不实用的垃圾代码供参考. Web ...
- javascript基础修炼(11)——DOM-DIFF的实现
目录 一. 再谈从Virtual-Dom生成真实DOM 二. DOM-Diff的目的 三. DOM-Diff的基本算法描述 四. DOM-Diff的简单实现 4.1 期望效果 4.2 DOM-Diff ...
- vdom,diff,key 算法的了解
<ul id='list'> <li class='item'>Item1</li> <li class='item'>Item2 </li> ...
- VDOM configuration
VDOM configuration 来源 https://cookbook.fortinet.com/vdom-configuration/ Posted on January 6, 2015 by ...
- 浅谈React和VDom关系
组件化 组件的封装 组件的复用 组件的封装 视图 数据 视图和数据之间的变化逻辑 import React, {Component} from 'react'; export default clas ...
- 谈谈Vue/React中的虚拟DOM(vDOM)与Key值
谈谈Vue/React中的虚拟DOM(vDOM)与Key值 一.DocumentFragment 在了解虚拟DOM前,先来了解DOM的一个对象属性--DocumentFragment. 在一次操作中, ...
- VDOM总结
https://segmentfault.com/a/1190000016129036
- snabbdom vdom 框架
1.snabbdom github地址:https://github.com/snabbdom/snabbdom 2.核心方法 var vnode = h('div#container.two.cla ...
- 逐行剖析Vue源码(一)——写在最前面
1. 前言 博主作为一名前端开发,日常开发的技术栈是Vue,并且用Vue开发也有一年多了,对其用法也较为熟练了,但是对各种用法和各种api使用都是只知其然而不知其所以然,因此,有时候在排查bug的时候 ...
随机推荐
- C/C++网络编程8——多进程服务器端之销毁僵尸进程
上一节提到,当子进程执行结束,父进程还在执行,在父进程结束之前子进程会成为僵尸进程,那么怎么销毁僵尸进程呢?父进程主动接收子进程的返回值. 销毁僵尸进程的方法: 1:使用wait函数 2:使用wait ...
- 虚拟机安装CentOS详细操作
使用VMware安装CentOS 6.4 环境:Windows7 ,VMware Workstation10,CentOS6.4 为什么选择CentOS ? 主流:目前的Linux操作系统主要应用于生 ...
- Nmap 使用
0×01 前言 因为今天的重点并非nmap本身的使用,主要还是想借这次机会给大家介绍一些在实战中相对比较实用的nmap脚本,所以关于nmap自身的一些基础选项就不多说了,详情可参考博客端口渗透相关文章 ...
- freemarker作为PDF模板实现下载功能
freemarker 文件 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type ...
- MySQL的默认隔离级别的实现依赖于MVCC和锁,准确点说就是一致性读和锁。
MySQL的默认隔离级别的实现依赖于MVCC和锁,准确点说就是一致性读和锁.
- 图论初步<蒟蒻专属文章>
前言: 图论乃noip之重要知识点,但有点难理解 本人因此吃过不少亏 因为本人实在太弱,所以此篇乃正宗<蒟蒻专属文章> 正文:(本文仅介绍图论中的重点.难点,其余部分略将或不讲) 图 ...
- ssh_crm项目
1.代码 https://pan.baidu.com/s/1hudAhA8 密码:c7xu 2.总结 https://pan.baidu.com/s/1o9ArFf0 密码:hteu 3.资料 ht ...
- Python用户界面编程PyQt5的四种的布局方式
1.QT是C++编写的跨平台GUI库,GUI是指桌面程序应用. 2.开发基于pyqt5的桌面应用程序必须要使用两个类Qapplication和Qwidget类,都在PyQt5.Qt.widgets里面 ...
- routes 学习
对于routes的学习,感觉还是看官方文档理解的比较快,主要说明connect和resource Setting up routes¶ It is assumed that you are using ...
- 在webView中除去广告
首先建一个ADFilterTool.java类 代码如下 import android.content.Context; import android.content.res.Resources; p ...