01
概述
从大范围来说，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的方式才能渲染。）
02
虚拟dom
Owl 是一个声明式组件系统：声明组件树的结构，Owl 会将其转换为命令式操作列表。这种翻译是由一个虚拟 dom 完成的。这是 Owl 的底层，大多数开发者不需要直接调用虚拟 dom 函数。
虚拟 dom 背后的主要思想是保留 DOM 的内存表示（称为虚拟节点），并且每当需要进行一些更改时，重新生成新的表示，计算新旧之间的差异，然后应用变化。
vdom导出两个函数：
h: 创建一个新的虚拟节点
patch：比较两个虚拟节点，并应用差异，更新视图。
当然owl的大部分方法源码都是在owl.js文件中的，addons\web\static\lib\owl\owl.js位置，
执行解析的部分，owl都帮你做了~
本期内容比较简单，就到此啦！下一期我们会详解API，敬请期待哦
“
Hello~
这里是神州数码云基地
编程大法，技术前沿，尽在其中
超多原创技术干货持续输出ing~
想要第一时间获取
超硬技术干货
快快点击关注+设为星标★
拜托拜托啦
这对“我们”都很重要哦~
- END -
往期精选
了解云基地，就现在！
