vue渲染页面的原理

vue模板渲染原理 

Vue模板渲染原理主要分为以下几个步骤：

1. 编译模板：Vue的编译器会将模板编译成一个渲染函数，这个函数描述了当前界面所应处的状态。

2. 创建虚拟DOM树：函数被调用时会渲染并返回一个虚拟DOM树，这个树非常轻量，它的职责就是描述当前界面所应处的状态。

3. 施加到真实DOM：有了虚拟DOM树后，再交给一个patch函数，负责把这些虚拟DOM真正施加到真实的DOM上。

4. 侦测数据源变动：Vue有自身的响应式系统来侦测在渲染过程中所依赖到的数据来源，当数据源变动时，可以精确感知。

5. 重新渲染：当数据源变动时，会生成一个新的树，将新树与旧树进行对比，就可以得出应施加到真实DOM上的改动，然后通过patch函数施加改动。

这样做的主要原因是，在浏览器中，JavaScript的运算在现代的引擎中非常快，但DOM本身是非常缓慢的。所以，本质的考量是，要把耗费时间的操作尽量放在纯粹的计算中去做，保证最后计算出来的需要实际接触真实DOM的操作是最少的。