手把手带你学会Odoo OWL组件开发（5）：浅析OWL原理

【本系列内容直达：】
手把手带你学习Odoo OWL组件开发（1）：认识 OWL
手把手带你学会Odoo OWL组件开发（2）：OWL的使用
手把手带你学会Odoo OWL组件开发（3）：核心内容指南
手把手带你学会Odoo OWL组件开发（4）：OWL组件
手把手带你学会Odoo OWL组件开发（5）：浅析OWL原理
手把手带你学会Odoo OWL组件开发（6）：API
手把手带你学会Odoo OWL组件开发（7）：OWL项目实战使用

---

【本篇内容：浅析OWL原理】

---

通过前面的学习和理解，我们的我们对owl的使用和学习都有一些认识和实践了，本章讲解owl的官方设计方案，通过虚拟dom系统，组件系统，模板编译器，反应系统等是什么步奏往下执行，并渲染成我们看到的页面的

概述

从大范围来说，Owl的主要部分有5个：

• 一个虚拟的dom系统（src/blockdom）
• 一个组件系统（src/component）
• 一个模板编译器（src/compiler文件夹中）
• 一个小的运行时的关联(src/app)
• 反应系统（src/reactivity.ts）

还有一些其他的文件，但是通过这5个主要部分可以理解Owl的核心。

这是我的理解。

owl 渲染的所有内容在内部都由一个虚拟节点表示。虚拟 dom 的工作是有效地表示应用程序的当前状态，并在需要时构建实际的 DOM 表示，或者在需要时更新 DOM。

其他一些助手/较小规模的东西渲染分两个阶段进行：

虚拟渲染：这会在内存中异步生成虚拟 dom

patch：将虚拟树应用到屏幕（同步）

渲染涉及几个类：

• 组件
• 调度器
• 映射数据：包含一些元数据的小对象，与特定组件的渲染相关联

组件在用户界面中，可见的动态组件树中组织。每当在组件中启动渲染时：

• 使用Owl创建组件C并渲染的时候，
• 虚拟渲染阶段从 组件C 开始（将异步渲染所有子组件）
• 将映射数据添加到调度程序中，如果映射完成，
• 调度程序将连续轮询每个动画帧 一旦完成，
• 调度程序将调用任务回调，这将应用渲染上去（如果在此期间没有取消渲染）。

这个过程和和react的更类似，就是将全部的dom变化在虚拟树上循环获取后，在集体处理真实dom上的数据变化。所以，owl更喜欢xml组件的内嵌式创建，而不是分体式的先创建好相关的页面xml。

（就像官方给的，在component.js中通过，owl.utils.whenReady()的里面挂载创建的owl是不能直接在类中挂载template的模板的，也就是提前写好的那种dom，而只能是jsx的方式才能渲染。）

虚拟dom

Owl 是一个声明式组件系统：声明组件树的结构，Owl 会将其转换为命令式操作列表。这种翻译是由一个虚拟 dom 完成的。这是 Owl 的底层，大多数开发者不需要直接调用虚拟 dom 函数。

虚拟 dom 背后的主要思想是保留 DOM 的内存表示（称为虚拟节点），并且每当需要进行一些更改时，重新生成新的表示，计算新旧之间的差异，然后应用变化。

vdom导出两个函数：

• h: 创建一个新的虚拟节点
• patch：比较两个虚拟节点，并应用差异，更新视图。

当然owl的大部分方法源码都是在owl.js文件中的，addons\web\static\lib\owl\owl.js位置，

执行解析的部分，owl都帮你做了~

本期内容比较简单，就到此啦！下一期我们会详解API，敬请期待哦

版权声明:本文由神州数码云基地团队整理撰写，若转载请注明出处。

公众号后台回复Odoo，加入Odoo技术交流群。