js 虚拟DOM-VDOM base::

虚拟DOM

1. 适用范围:

1. 优点:

1.1. 性能方面

• 相较于真实node, vnode需要实现的属性比较少
• 虚拟DOM可以作为DOM修改的缓冲, 防止多次重绘DOM
  • 将所有的修改集中到虚拟DOM中, 然后再一次性的修改真实DOM

1.2. 必要性

• 现代js框架的基本功能都是以虚拟DOM为基础

1.3. 跨平台

• 虚拟DOM本质就是一个js对象, 天生具有跨平台的能力

2. 梗概:

虚拟 DOM (Virtual DOM，简称 VDOM) 是一种编程概念

1. 将用户将要被渲染的标签用特定的数据结构表示出来, 保存在内存中
2. 这样就能方便地将虚拟DOM与真实DOM标签进行相互转换
3. 尽可能接近，所以会把一些框架的抽象标签（如Vue 组件模板中的teleport标签、Vue 动态组件）转换成更底层的html 标签 这个概念是由 React 率先开拓，随后在许多不同的框架中都有不同的实现，当然也包括 Vue。

指向原始笔记的链接

3. 实例:

我们随便规定了一种数据结构, 用来表示一个html标签

const vnode = {
  type: 'div',
  props: {
    id: 'hello'
  },
  children: [
    /* 更多 vnode */
  ]
}

相当于<div id="hello"></div>

挂载虚拟DOM

child::挂载虚拟DOM