22、Vue 渲染流程

50 阅读1分钟

以初始化为例:

1、模板编译

根据引入路径,将<template>里面的代码编译成模板 AST 树(描述模板的)

再根据模板 AST 树生成JS AST 树(用来描述渲染函数的),在这期间会做 diff 后续可用的优化:静态标记、动态节点等

2、渲染函数

基于JS AST 树 生成 render 函数

3、虚拟 DOM

在渲染时,调用 render 函数生成对应的虚拟 DOM

每次数据更新时,都会调用 render 函数生成新的虚拟 DOM

5、渲染器

将虚拟 DOM 生成真实 DOM 的方法

在生成期间会进行新旧虚拟 DOM 的 Diff 算法,优化生成速度

6、真实 DOM

真实可渲染到页面的 DOM 树