三十天搞定前端面试（vue）模块第一天：第二题：什么是虚拟DOM?如何实现一个虚拟DOM?说说你的思路 1.什么是虚拟

第一天：

第二题：什么是虚拟DOM?如何实现一个虚拟DOM?说说你的思路

1.什么是虚拟DOM
- 虚拟 DOM （Virtual DOM ）这个概念相信大家都不陌生，从 React 到 Vue ，虚拟 DOM 为这两个框架都带来了跨平台的能力（React-Native 和 Weex）
- 实际上它只是一层对真实DOM的抽象，以JavaScript 对象 (VNode 节点) 作为基础的树，用对象的属性来描述节点，最终可以通过一系列操作使这棵树映射到真实环境上
- 在Javascript对象中，虚拟DOM 表现为一个 Object 对象。并且最少包含标签名 (tag)、属性 (attrs) 和子元素对象 (children) 三个属性，不同框架对这三个属性的名命可能会有差别
- 创建虚拟DOM就是为了更好将虚拟的节点渲染到页面视图中，所以虚拟DOM对象的节点与真实DOM的属性一一照应
2.虚拟DOM的工作原理如下：
1. 应用程序状态发生变化时，虚拟DOM根据新的状态生成新的虚拟DOM树。
2. 将新的虚拟DOM树与旧的虚拟DOM树进行比较，找到二者之间的差异。
3. 根据差异，仅对需要更新的部分进行真实DOM的操作，即最小化DOM操作。
4. 更新后，新的虚拟DOM树成为新的旧的虚拟DOM树，等待下一次状态变更。
3.虚拟DOM的好处
- 在于它能够减少直接操作真实DOM所带来的性能开销。通过批量更新和最小化DOM操作，可以提高页面的渲染性能和响应速度。此外，虚拟DOM也能够提供跨平台的能力，使得前端框架（如React、Vue等）可以同时支持Web、移动端和原生应用开发。
  
  在vue中同样使用到了虚拟DOM技术
  
  定义真实DOM
```
<div id="app">
    <p class="p">节点内容</p>
    <h3>{{ foo }}</h3>
</div>
```
  实例化vue
```
const app = new Vue({
    el:"#app",
    data:{
        foo:"foo"
    }
})
```
  观察render的render，我们能得到虚拟DOM
```
(function anonymous(
) {
    with(this){return _c('div',{attrs:{"id":"app"}},[_c('p',{staticClass:"p"},
                      [_v("节点内容")]),_v(" "),_c('h3',[_v(_s(foo))])])}})
```