Vue中只有一次DOM操作，有必要经过一层虚拟DOM吗？

Question

假设有一个<a>标签含有一个title属性，如果只修改title属性，为什么不直接操作DOM，而还要经过一层虚拟DOM再更新，这样不会更费事吗？

主要是想问：在只有一次DOM操作的时候，使用虚拟DOM和和直接修改真实DOM的区别？（注意，是只有一次操作）网上看了很多解答，基本都是在说有多次DOM操作的背景下使用虚拟DOM的好处，有的说直接操作真实DOM会引起从DOM树->CSSOM树->render树->重排->重绘的过程，有的说法是只会引起重排重绘，只是使用虚拟DOM的话【在多次操作下】重排重绘的频率会小很多。不知道有人知道两种情况下具体影响的是什么吗？以及上面那种场景只操作一次DOM的情况下，直接操作真实DOM性价比是否最优？

Answer 1

Vue 引入虚拟 DOM 的本质原因是使得跨平台渲染成为可能，比如 Server Side Rendering，Weex，甚至你自己实现一个 Canvas Renderer 都是可行的，虚拟 DOM 解耦了对 HTML DOM 的直接依赖。

论运行效率，绝对是手写 DOM API 最高效，你甚至可以针对性优化。虚拟 DOM 在单一的操作面前肯定体现不出优势，任何 DOM 上层的框架或者 API 都会带来性能损耗。多次操作的情况，虚拟 DOM 可以复用节点，diff 后做最小更新，但是你直接操作 DOM 也可以进行最小更新，你甚至可以直奔目的，只改你想改的，无须 diff。

但大多数时候，开发效率和可维护性其实比运行效率更重要。如果讨论的是开发维护成本的“性价比”，那框架的优势很大。你手写 DOM 大概率会写成难以维护的样子，亦或者你特别牛，引入了各种封装和抽象，最终你可能造出了你自己的前端框架。比起虚拟 DOM 或者说框架带来的微乎其微的性能损耗，其带来的开发效率提升和体验优化才是我们最最关心的。

在小范围直接操作 DOM 并不是完全禁止的。如果你遇到性能瓶颈，或者有特殊需求，那就用。但如果要跨平台渲染，就要注意了。

总结：虚拟 DOM 是为了跨平台渲染，顺带做一些能做的优化；单就一个操作讨论运行性能没有意义，在 VUE 的框架下就遵循 VUE 的范式；小范围直接操作 DOM 是允许的。

以上，个人拙见。