Vue的运作机制

声明式的描述UI

• 采用与HTML一致的标签，属性，层级结构来描述UI，即HTML怎么写，Vue就怎么写

• 使用JavaScript对象来描述，如标签名对应tag属性，属性对应props属性，层级结构通过children描述

• JS对象描述的形式，就是我们的虚拟DOM。

• render函数内调用的h函数，Vue维护的工具函数，用于简化虚拟DOM的编写，最终返回的是虚拟DOM

渲染器

• 如上文所述，渲染器会接收h函数返回的虚拟DOM，将其渲染为真实DOM
• 渲染过程
  • 将VNode.tag作为标签名，调用Document.createElement来创建一个真实的标签
  • 遍历VNode.props，为真实标签添加所有的属性，遇到以on开头的，则调用addEventListener
  • 遍历children，嵌套调用渲染器进行处理，将当前节点作为子节点的挂载容器

组件的本质

• 虚拟DOM是对真实DOM的描述
• 组件是对一组虚拟DOM的封装，会返回需要渲染的虚拟DOM。
• 渲染器收到虚拟DOM后，判断tag类型，
  • 如果是字符串，调用mountElement函数，根据虚拟DOM创建真实DOM
  • 如果是函数，则调用mountComponent函数，调用tag值，获取真正的虚拟DOM，再调用mountElement

模板的工作原理

• 模板和虚拟DOM都属于声明式的描述UI
• 模板本质是字符串，通过编译器编译后构建出AST，将其转换为JS AST(虚拟DOM)

各模块间的配合

• 编译器将模板编译为渲染函数（返回虚拟DOM），为了渲染器能够更好的渲染，更新，我们在编译时，可以将会发生变更的属性或值，标记出来，这样渲染器更新时，可以直接通过标记来查找替换

总结

• 我们通过模板来描述真实DOM，通过编译器将模板转为机器可识别的虚拟DOM（subtree）
• 通过渲染器将虚拟DOM渲染为真实DOM
• 各模块间紧密配合，共同构成有机整体