2021-11-10

vue的渲染流程

Vue宣称可以更快地计算出Virtual DOM的差异，这是由于它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。

VUE流程步骤：

1. Vue的编译器在编译模板之后，会把这些模板编译成一个渲染函数。而函数被调用的时候就会渲染并且返回一个虚拟DOM的树。这个树非常轻量，它的职责就是描述当前界面所应处的状态。
2. 当我们有了这个虚拟的树之后，再交给一个patch函数，负责把这些虚拟DOM真正施加到真实的DOM上。在这个过程中，Vue有自身的响应式系统来侦测在渲染过程中所依赖到的数据来源。
3. 在渲染过程中，侦测到的数据来源之后，之后就可以精确感知数据源的变动。到时候就可以根据需要重新进行渲染。
4. 当重新进行渲染之后，会生成一个新的树，将新树与旧树进行对比，就可以最终得出应施加到真实DOM上的改动。最后再通过patch函数施加改动。

要点概括

• 当某个数据属性被用到时，触发 getter，这个属性就会被作为依赖被 watcher 记录下来。
• 整个函数被渲染完的时候，每一个被用到的数据属性都会被记录。
• 相应的数据变动时，例如给它一个新的值，就会触发 setter，通知数据对象对应数据有变化
• 此时会通知对应的组件，其数据依赖有所改动，需要重新渲染。
• 对应的组件再次调动渲染函数，生成 Virtual DOM，实现 DOM 更新。

两者相比

react和vue的相似之处：

1. 使用虚拟dom
2. 提供了响应式和组件化的视图组件
3. 关注核心库，伴随于此，有配套的路由和负责处理全局状态管理的库

vue的优势：

API设计上简单，语法简单，学习成本低
基于依赖追踪的观察系统，并且异步队列更新
简单的语法及项目搭建 ，更快的渲染速度和更小的体积

渲染性能
渲染用户界面的时候，dom的操作成本是最高的，那为了尽可能的减少对dom的操作，Vue和React都利用虚拟DOM来实现这一点，但Vue的Virtual DOM实现（一个陷阱的叉子）的权重要轻得多，因此比React的引入开销更少