我理解的Vue虚拟DOM/组件

547 阅读2分钟

回顾了一下浏览器渲染的知识:juejin.cn/post/684490…

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

问题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树中,这个占位符节点就是代表一个组件。组件的出现让我们可以抽象化一个视图逻辑。从而将其进行复用,大大提高了开发效率。