vue xunidom_我理解的Vue虚拟DOM/组件__Vue.js

其中有关于重绘与重排的内容。

问题1：操作真实DOM的成本

web最终是要进行用于与界面交互的，用户通过外部输入来改变视图，或者说是来改变浏览器页面内的DOM。那么问题就来了，当用户进行复杂的操作的时候，真实的DOM是频繁地修改的。这些动作大多会引起整个页面的重排/重绘。

但是JS是单线程语言，其中重排会占用渲染进程主线程，导致阻塞后续代码执行。

更可怕的问题还在于，新手对于DOM的操作优化不了解，造成了强制同步布局与布局抖动的问题。因此，如果想写出性能良好的代码，会有较大的心智负担。

这一时期，我觉得也可以称之为用工匠精神来操作每一个DOM。

虚拟DOM的优点

上面提到了操作真实DOM的缺点是页面的重排/重绘。虚拟DOM的出现，缓解了这个问题。在web中存在dom树，虚拟dom也存在树结构的数据。虚拟dom树除了有映射真实dom结构之外，也存储了与dom操作有关的数据。

在操作界面的时候，必然会导致数据的更新，数据更新会重新渲染页面，此时如果一个一个dom操作，如果发生重排，主线程会被占用，后续的一系列操作导致的数值计算被阻塞了。

那么有了虚拟dom，我们可以修改虚拟dom的数据，然后Vue的patch方法将虚拟dom进行更新，最后一口气更新真实dom树。

显而易见地，先更新完数据，再一口气更新真实的dom效率远高于逐个修改真实dom；另外，也不用担心一些强制同步布局的问题。因为在vue中是操作数据的(当然，也可以操作真实dom，只不过不是很推荐)。

问题2：何为组件？

在我看来，组件就是一个通用逻辑的视图。面向对象编程讲究封装，继承与多态。在编写组件的时候与这个也差不多一个意思。

Vue的源码中提到了placeholder VNode。在虚拟DOM树中，这个占位符节点就是代表一个组件。组件的出现让我们可以抽象化一个视图逻辑。从而将其进行复用，大大提高了开发效率。

版权声明：著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

作者: Simplyme0823

原文链接：https://juejin.im/post/6869411844851777543

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！