Vue的虚拟DOM怎么处理

什么是虚拟DOM？

DOM也可以用Javascript表示为数据结构。这是有关如何表示DOM节点的伪代码：

// An unordered list represented as Javascript
let domNode = {
  tag: 'ul',
  attributes: { id: 'myId' },
  children: [
    // where the LI's would go
  ]
};

如果我们称其为“虚拟” DOM节点，则DOM节点的完整结构将构成我们的虚拟DOM。

但是为什么要这样做呢？
如果我们使用虚拟DOM，而不是使用诸如.getElementById进行更新之类的方法直接调用DOM API 的代码，则代码将仅对JS对象进行更改，这很便宜。

然后，当需要使真实的DOM与我们所做的更改同步时，将使用有效的更新功能：
超越性能
拥有虚拟DOM不仅可以提高性能，还意味着可以实现其他功能。

例如，在Vue.js中，您可以使用render()返回虚拟节点的方法来绕过对HTML模板或模板属性的需求：

new Vue({
  el: '#app',
  data: {
    message: 'hello world'
  },
  render(createElement) {
    return createElement(
      'div', 
      { attrs: { id: 'myId' } }, 
      this.message
    );
  }
});

输出：

<div id='app'>
  <div id='myId'>hello world</div>
</div>

为什么这样 有几个可能的优点：

您将获得Javascript的编程功能。您可以创建工厂样式的函数，以使用Javascript的数组方法等构建虚拟节点，而使用模板语法会更困难。
您可以使代码通用。由于您的Vue实例实际上不在HTML文件上，因此服务器也可以将其渲染为服务器端渲染。
JSX。渲染功能允许JSX之类的JS扩展，这些扩展对于构建基于组件的应用程序可能是理想的。