Vue中虚拟DOM的理解
Vue中虚拟DOM的理解
Virtual DOM
是一棵以JavaScript
对象作为基础的树,每一个节点称为VNode
,用对象属性来描述节点,实际上它是一层对真实DOM
的抽象,最终可以通过渲染操作使这棵树映射到真实环境上,简单来说Virtual DOM
就是一个Js
对象,用以描述整个文档。
描述
在浏览器中构建页面时需要使用DOM
节点描述整个文档。
<div class="root" name="root">
<p>1</p>
<div>11</div>
</div>
如果使用Js
对象去描述上述的节点以及文档,那么便类似于下面的样子,当然这不是Vue
中用以描述节点的对象,Vue
中用以描述一个节点的对象包括大量属性,例如tag
、data
、children
、text
、elm
、ns
、context
、key
、componentOptions
、componentInstance
、parent
、raw
、isStatic
、isRootInsert
、isComment
、isCloned
等等,具体的属性可以参阅Vue
源码的/dev/src/core/vdom/vnode.js
。
{
type: "tag",
tagName: "div",
attr: {
className: "root"
name: "root"
},
parent: null,
children: [{
type: "tag",
tagName: "p",
attr: {},
parent: {} /* 父节点的引用 */,
children: [{
type: "text",
tagName: "text",
parent: {} /* 父节点的引用 */,
content: "1"
}]
},{
type: "tag",
tagName: "div",
attr: {},
parent: {} /* 父节点的引用 */,
children: [{
type: "text",
tagName: "text",
parent: {} /* 父节点的引用 */,
content: "11"
}]
}]
}
在Vue
中首先会解析template
中定义的HTML
节点以及组件节点,为render
作准备,在解析的过程中会生成_c()
、_v()
等函数,其作为renderHelpers
用以创建节点,_v()
函数就是用以创建文本节点,而_c()
函数就是用以创建VNode
节点的,这个函数其实就是Vue
中定义的_createElement()
函数,通过这个函数来确定创建的是普通节点还是组件节点,具体可以在Vue
源码中/dev/src/core/vdom/create-element.js
以及/dev/src/core/vdom/create-element.js
查阅,当解析完成之后,便能够生成render
函数,而当render
函数执行后便返回了VNode
节点组成的虚拟DOM
树,树中的每一颗节点都会存储渲染的时候需要的信息,之后便是通过diff
算法以及patch
过程的createElm
或patchVnode
渲染到真实DOM
。
if (typeof tag === 'string') {
let Ctor
ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
if (config.isReservedTag(tag)) {
// platform built-in elements
if (process.env.NODE_ENV !== 'production' && isDef(data) && isDef(data.nativeOn)) {
warn(
`The .native modifier for v-on is only valid on components but it was used on <${tag}>.`,
context
)
}
vnode = new VNode(
config.parsePlatformTagName(tag), data, children,
undefined, undefined, context
)
} else if ((!data || !data.pre) && isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
// component
vnode = createComponent(Ctor, data, context, children, tag)
} else {
// unknown or unlisted namespaced elements
// check at runtime because it may get assigned a namespace when its
// parent normalizes children
vnode = new VNode(
tag, data, children,
undefined, undefined, context
)
}
} else {
// direct component options / constructor
vnode = createComponent(tag, data, context, children)
}
作用
渲染真实DOM
的过程中开销是很大的,例如当有时候修改了某个数据或者属性,如果直接渲染到真实DOM
上可能会引起整个DOM
树的重绘与回流,而diff
算法能够只更新修改的那部分DOM
结构而不更新整个DOM
,这里需要说明的是操作DOM
结构的速度并不慢,而性能消耗主要是在浏览器重绘与回流的操作上。
当选用diff
算法进行部分更新的时候就需要比较旧DOM
结构与新DOM
结构的不同,此时就需要VNode
来描述整个DOM
结构,首先根据真实DOM
生成Virtual DOM
,当Virtual DOM
某个节点的数据改变后会生成一个新的Vnode
,然后通过newVNode
和oldVNode
进行对比,发现有不同之处便进行patch
修改于真实DOM
,然后使旧的Virtual DOM
赋值为新的Virtual DOM
。
简单来说建立Virtual DOM
的目的是减少对于整个DOM
的操作,通过建立Virtual DOM
来追踪如何改变真实DOM
,从而实现更高效地更新节点。
使用Virtual DOM
同样也是有部分缺点,代码更多,体积更大,内存占用增大,对于小量的单一的DOM
修改使用虚拟DOM
成本反而更高,但是整体来说,使用Virtual DOM
是优点远大于缺点的。
每日一题
https://github.com/WindrunnerMax/EveryDay
参考
https://juejin.im/post/6844903607913938951
https://segmentfault.com/a/1190000018211084
https://github.com/lihongxun945/myblog/issues/32
https://cloud.tencent.com/developer/article/1004551
https://www.cnblogs.com/fundebug/p/vue-virtual-dom.html
https://blog.csdn.net/u010692018/article/details/78799335/
- Mybatis【缓存、代理、逆向工程】
- 关于db_files和maxdatafiles的问题(r4笔记第31天)
- 了解一下CPU 第一篇(r4笔记第30天)
- Java中的String类能否被继承?为什么?
- Mybatis【与Spring整合】
- 使用logon trigger完成动态的session跟踪(r4笔记第29天)
- struts2关于action拦截器使用方法 现记录如下
- Struts2【入门】
- 通过ORA错误反思sql语句规范(r4笔记第41天)
- 算法01 七大排序之:冒泡排序和快速排序
- 自下向上的编写容易阅读的代码(上)
- Hibernate【inverse和cascade属性】知识要点
- 算法02 七大排序之:直接选择排序和堆排序
- Hibernate【映射】续篇
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- win10 uwp 不显示 SplashScreen 欢迎界面的方法
- WPF 在 XAML 写 C# 代码
- 解析 HashMap源码值概括
- 解析 HashMap 源码之基本操作
- Docker手册
- 小知识:TFA收集日志报错空间不足
- Java SPI 居然这么多知名框架在用
- Ceph 入门到实战之 RBD 块存储接口
- 聊聊 Python 面试最常被问到的几种设计模式(下)
- 带你用 Python 实现自动化群控(入门篇)
- 实战篇 | 基于freeRTOS的多任务事件传输demo(附代码)
- 在kali linux中你应该知道的信息收集姿势(一)
- 【拓展】谈谈字符编码:Unicode编码与emoji表情编码
- TCP/IP 应用层协议解释
- Cisco Packet Tracer服务器模拟搭建