所谓虚拟DOM,是一个用于表示真实 DOM 结构和属性的 JavaScript 对象,这个对象用于对比虚拟 DOM 和当前真实 DOM 的差异化,然后进行局部渲染从而实现性能上的优化。在Vue.js 中虚拟 DOM 的 JavaScript 对象就是 VNode。
换一种说法
虚拟dom就是通过一个对象描述一个html结构
在js对象和真实dom树之间存在的一个虚拟对象,
所有的dom树节点都是根据这个虚拟dom实现生成的
在虚拟dom向真实的dom树转换之前会根据diff算法动态的计算需要更改的标签 进行替换操作
虚拟DOM的优势
- 可以针对不同的终端平台 输出不同的页面展示节点
比如:网页、微信小程序、原生应用 - 在生成的时候只需要修改render方法渲染出不同的节点标签即可
为什么要用虚拟DOM?
浏览器在生成dom树的时候,非常消耗资源,因此引入虚拟dom概念
通过一定的算法优化之后能够非常快捷的根据数据生成真实的html节点
现在vue和react都是使用的虚拟dom
<script>
//虚拟dom就是通过一个对象描述一个html结构
//
var vnode = [{
tag: 'ul',
children: [
{
tag: 'li',
lable: '首页'
}, {
tag: 'li',
lable: '列表页',
}],
calssName: 'nav',
}];
//通过js写一个循环把节点生成在页面上
//需要修改某一个节点的值 可以直接修改对象上的属性
// 然后调用render方法重新渲染页面
// 渲染的时候回对虚拟dom中的节点做比对 只重新渲染数据改变的内容
</script>