Vue 源码学习—Virtual DOM(虚拟 DOM)

Virtual DOM是什么

定义: 普通的js对象来描述DOM对象，不是真实的DOM，顾名思义，称为虚拟DOM

真实DOM成员

let _el = document.querySelector('#app')
    let _s = ''
    for (const key in _el) {
      _s += key + ','
    }
    console.log(_s, '#app')

使用Virtual DOM描述真实的DOM,如下示例：

{
  sel: 'div',
  data: {},
  children: undefined,
  text: 'Hello,this is Virtual-DOM',
  elm: undefined,
  key: undefined
}

引入原因

• 手动操作DOM较麻烦(需要手写原生js处理DOM元素逻辑)，需考虑浏览器的兼容性问题，虽然有jquery等库简化DOM操作，但是随着项目的复杂度，DOM操作复杂上升
• 为了简化DOM的复杂度操作出现了MVVM框架，MVVM框架解决了视图与状态的同步问题
• 为了简化视图的操作可以使用模板引擎，但是模板引擎没有解决跟踪状态变化的问题
• Virtual DOM可以当状态改变时不需要立即更新DOM，只需要创建一个虚拟树来描述DOM，Virtual DOM内部使用diff算法有效更新DOM

• 依照Virtual-DOM(https://github.com/Matt-Esch/virtual-dom)官方说法：

  

手动 DOM 操作很麻烦，而且很难跟踪之前的 DOM 状态。这个问题的一个解决方案是编写你的代码，就像你在状态改变时重新创建整个 DOM 一样。当然，如果您每次应用程序状态更改时都重新创建整个 DOM，您的应用程序将非常缓慢并且您的输入字段将失去焦点。

virtual-dom 是一组模块，旨在为您的应用程序提供一种表示 DOM 的声明性方式。因此，无需在应用程序状态更改时更新 DOM，只需创建一个虚拟树或 VTree，它看起来就像您想要的 DOM 状态。然后，virtual-dom 将弄清楚如何在不重新创建所有 DOM 节点的情况下有效地使 DOM 看起来像这样。

virtual-dom 允许您通过创建视图的完整 VTree 然后有效地修补 DOM 以使其看起来与您描述的完全一样，从而在状态发生变化时更新视图。这导致将手动 DOM 操作和先前状态跟踪排除在您的应用程序代码之外，促进了 Web 应用程序的干净和可维护的呈现逻辑。

作用

1. 维护视图和状态的关系
2. 复杂视图情况下提升渲染性能
3. 除了渲染DOM以外，还可以实现SSR(Nuxt.js/Next.js)、原生应用(Weex/React Native)、小程序(mpvue/uni-app)等

原创申明：

本人博客：https://blog.csdn.net/weixin_44617364
转载说明：与我说明，务必注明来源，附带本人博客链接，多谢！