元素的生命周期
元素是dagger.js应用程序的最小处理单元。元素的生命周期指的是一个元素从创建到销毁的整个过程。
下表列出了元素生命周期的各个阶段内将执行的指令:
| 阶段名称 | 前置条件 | 元素连接状态 | 执行指令 |
|---|---|---|---|
| 解析 | 视图模板加载完成 | 未连接 | @raw |
| @directive | |||
| 加载前 | 宿主元素指令解析完成 | 未连接 | $each |
| $exist | |||
| 加载中 | $each/$exist未声明或执行完成 | 未连接 | +loading |
| 加载完成 | +loading未声明或执行完成 | 已连接 | +loaded |
| 控制指令 | |||
| 销毁中 | 当前元素即将从DOM移除 | 已连接 | +unloading |
| 已销毁 | +unloading未声明或执行完成 | 未连接 | +unloaded |
什么是生命周期指令
生命周期指令是在宿主元素的创建或销毁阶段触发执行的一组指令的统称。
生命周期指令列表
生命周期指令的执行顺序
对于同一个宿主元素来说:
在创建阶段,“+loading”指令首先执行,“+loaded”指令在“+loading”指令得到执行结果且宿主元素挂载到DOM树上之后执行。请注意,如果“+loading”指令表达式的返回值是一个Promise,那么“+loaded”将在这个Promise对象处于已兑现(fulfilled)状态之后执行。
在销毁阶段,“+unloading”指令首先执行,“+unloaded”指令在“+unloading”指令执行完成且宿主元素从DOM树上移除之后执行。“+unloading”和“+unloaded”指令都是作为同步函数执行的。
我们来看一个示例:
对于具有包含关系的宿主元素来说:
在创建阶段,父级元素的“+loading”指令得到执行结果后子级的“+loading”指令才会触发执行。
在销毁阶段,父级元素的“+unloading”指令执行完成后再依次执行子级元素的“+unloading”和“+unloaded”指令,最后执行父级元素的“+unloaded”指令。
我们来看一个示例:
“+sentry”指令在页面路由即将发生切换时触发。
目前只要理解各个生命周期方法的调用顺序就好,每个指令的具体功能和用法将在后面的章节中讲解。