typescript - Aurelia 中组件和 View 的区别(及其生命周期)

Question

您能告诉我 Aurelia 中的组件和 View 有什么区别吗？ 它们的架构是什么？它们的生命周期有什么区别？

Answer 1

根据经验，Aurelia 中的 View 和组件 之间的区别可以概括为:

• Aurelia 中的 View 只是简单地放置 .html 及其附带的样式 (.scss/.less/.css)
• Aurelia 中的view-model 是其背后的代码(.js/.ts 类)
• 组件是 View 和 View 模型之间的组合，由 Aurelia 自动粘合在一起

本质上，您可以说，使用 Aurelia，您开发的几乎所有“页面”或“可重用元素”都可以被视为组件。那就是Aurelia docs on components means与:

Components are the basic building blocks of all Aurelia applications.

但是目前文档中没有明确描述的是，至少在我看来，并非所有组件都是相同的。至少，就它们在 Aurelia 中的生命周期而言。例如，Component Lifecycle具有以下默认 Hook :

1. constructor() - 首先调用 View 模型的构造函数。
2. 创建(owningView: View ，myView: View )
3. 绑定(bind)(绑定(bind)上下文:对象，覆盖上下文:对象)
4. 附加()
5. 分离()
6. 解除绑定(bind)()

此生命周期适用于所有组件。但是有一个微妙的区别，当一个组件通过路由器运行(初始化)时，一组额外的钩子(Hook)变得可用:

• canActivate(参数，routeConfig，navigationInstruction)
• 激活(参数，routeConfig，navigationInstruction)
• 可以停用()
• 停用()

因此，一个组件通过路由器的管道，例如您通过代码或通过用户操作(如点击)显式导航到 的组件在其生命周期中会有额外的激活步骤。

如前所述，我个人喜欢将这些组件称为“页面”，只是为了给它一个清晰的标签，并将它们与例如可重用控件和其他组件区分开来。