【发布时间】：2017-12-18 04:27:00
【问题描述】：
您能告诉我 Aurelia 中的组件和视图有什么区别吗？ 它们的架构是什么，它们的生命周期有什么区别？
【问题讨论】：
标签： typescript view components aurelia lifecycle
【发布时间】：2017-12-18 04:27:00
【问题描述】：
根据经验，Aurelia 中视图和组件之间的区别可以总结为：
- Aurelia 中的 view 只是简单地将 .html 及其附带的样式 (.scss/.less/.css)
- Aurelia 中的 view-model 是其背后的代码（.js/.ts 类）
- 组件是视图和视图模型的组合，由 Aurelia 自动粘合在一起
本质上，您可以说，使用 Aurelia，您开发的几乎所有“页面”或“可重用元素”都可以视为组件。这就是Aurelia docs on components means 的含义：
组件是所有 Aurelia 应用程序的基本构建块。
但至少在我看来，文档中目前没有明确描述的是，并非所有组件都是相同的。至少，就它们在 Aurelia 的生命周期而言。例如，Component Lifecycle 具有以下默认挂钩：
- constructor() - 首先调用视图模型的构造函数。
- 已创建（拥有视图：视图，我的视图：视图）
- 绑定（绑定上下文：对象，覆盖上下文：对象）
- 附加()
- 分离（）
- 解除绑定()
此生命周期适用于所有组件。但是有一个细微的差别，当组件运行（初始化）通过路由器时，会有一组额外的钩子可用：
- canActivate(params, routeConfig, navigationInstruction)
- activate(params, routeConfig, navigationInstruction)
- canDeactivate()
- 停用()
因此，通过路由器管道的组件，例如您通过代码或通过点击等用户操作显式导航到的组件将在其生命周期中具有额外的激活步骤。
如前所述，我个人喜欢将这些组件称为“页面”，只是为了给它一个清晰的标签，并将它们与可重用控件和其他组件区分开来。
【讨论】：
-
完美。非常感谢。
-
很好的答案！关于组件生命周期与路由页面生命周期的细节让许多开发人员感到困惑。
组件只是一个名称，通常用于描述视图和视图模型的配对。视图是 HTML 文件/模板，视图模型是支持 JavaScript 文件，尽管绝对有可能拥有仅视图组件。
一个组件可以被认为是一个 Web 组件，尽管在 Aurelia 中有一些文档描述的差异。 MDN describes Web Components well
【讨论】：