虚拟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的更多相关文章

  1. WebWorker 中将已处理好的 VDOM 数据提交主线程渲染 DOM

    上篇文章讲了 WebWorker 的简单用法,其实网上很多类似的文章,我写的也比较垃圾.不会的建议可以网上看比较好点的资料. 这里我会先讲下我的大致思路.然后会贴上一堆不实用的垃圾代码供参考. Web ...

  2. javascript基础修炼(11)——DOM-DIFF的实现

    目录 一. 再谈从Virtual-Dom生成真实DOM 二. DOM-Diff的目的 三. DOM-Diff的基本算法描述 四. DOM-Diff的简单实现 4.1 期望效果 4.2 DOM-Diff ...

  3. vdom,diff,key 算法的了解

    <ul id='list'> <li class='item'>Item1</li> <li class='item'>Item2 </li> ...

  4. VDOM configuration

    VDOM configuration 来源 https://cookbook.fortinet.com/vdom-configuration/ Posted on January 6, 2015 by ...

  5. 浅谈React和VDom关系

    组件化 组件的封装 组件的复用 组件的封装 视图 数据 视图和数据之间的变化逻辑 import React, {Component} from 'react'; export default clas ...

  6. 谈谈Vue/React中的虚拟DOM(vDOM)与Key值

    谈谈Vue/React中的虚拟DOM(vDOM)与Key值 一.DocumentFragment 在了解虚拟DOM前,先来了解DOM的一个对象属性--DocumentFragment. 在一次操作中, ...

  7. VDOM总结

    https://segmentfault.com/a/1190000016129036

  8. snabbdom vdom 框架

    1.snabbdom github地址:https://github.com/snabbdom/snabbdom 2.核心方法 var vnode = h('div#container.two.cla ...

  9. 逐行剖析Vue源码(一)——写在最前面

    1. 前言 博主作为一名前端开发,日常开发的技术栈是Vue,并且用Vue开发也有一年多了,对其用法也较为熟练了,但是对各种用法和各种api使用都是只知其然而不知其所以然,因此,有时候在排查bug的时候 ...

随机推荐

  1. C/C++网络编程8——多进程服务器端之销毁僵尸进程

    上一节提到,当子进程执行结束,父进程还在执行,在父进程结束之前子进程会成为僵尸进程,那么怎么销毁僵尸进程呢?父进程主动接收子进程的返回值. 销毁僵尸进程的方法: 1:使用wait函数 2:使用wait ...

  2. 虚拟机安装CentOS详细操作

    使用VMware安装CentOS 6.4 环境:Windows7 ,VMware Workstation10,CentOS6.4 为什么选择CentOS ? 主流:目前的Linux操作系统主要应用于生 ...

  3. Nmap 使用

    0×01 前言 因为今天的重点并非nmap本身的使用,主要还是想借这次机会给大家介绍一些在实战中相对比较实用的nmap脚本,所以关于nmap自身的一些基础选项就不多说了,详情可参考博客端口渗透相关文章 ...

  4. freemarker作为PDF模板实现下载功能

    freemarker 文件 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type ...

  5. MySQL的默认隔离级别的实现依赖于MVCC和锁,准确点说就是一致性读和锁。

    MySQL的默认隔离级别的实现依赖于MVCC和锁,准确点说就是一致性读和锁.

  6. 图论初步<蒟蒻专属文章>

    前言:    图论乃noip之重要知识点,但有点难理解 本人因此吃过不少亏 因为本人实在太弱,所以此篇乃正宗<蒟蒻专属文章> 正文:(本文仅介绍图论中的重点.难点,其余部分略将或不讲) 图 ...

  7. ssh_crm项目

    1.代码 https://pan.baidu.com/s/1hudAhA8  密码:c7xu 2.总结 https://pan.baidu.com/s/1o9ArFf0 密码:hteu 3.资料 ht ...

  8. Python用户界面编程PyQt5的四种的布局方式

    1.QT是C++编写的跨平台GUI库,GUI是指桌面程序应用. 2.开发基于pyqt5的桌面应用程序必须要使用两个类Qapplication和Qwidget类,都在PyQt5.Qt.widgets里面 ...

  9. routes 学习

    对于routes的学习,感觉还是看官方文档理解的比较快,主要说明connect和resource Setting up routes¶ It is assumed that you are using ...

  10. 在webView中除去广告

    首先建一个ADFilterTool.java类 代码如下 import android.content.Context; import android.content.res.Resources; p ...