- 模板编译过程,解析模板生成AST抽象语法树(解析器),遍历AST标记静态节点(优化器),AST生成渲染函数(生成器)。
- 执行渲染函数(render)生成VNode,由组件树建立的虚拟节点树(VNode),VNode最重要的作用是,对VNode进行缓存,将上一次缓存的VNode和当前新创建的VNode进行对比(diff),只更新发生变化的节点,这个过程就是patch。
- DOM操作的执行速度远不如Javascript的运算速度快,通过虚拟DOM方式,把大量的DOM操作放到Javascript中,使用patching算法计算出真正需要更新的节点,最大限度的减少DOM操作,可以显著提升性能。
- 每个组件对应一个Watcher实例,会在组件渲染的过程中把接触过的数据property记录为依赖,当依赖触发setter时,通知Watcher,从而使它关联的组件,生成新的VNode,组件内部通过虚拟DOM的diff算法,重新渲染页面。