Aurelia 中组件和视图的区别（及其生命周期）

Question

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

Answer 1

组件只是一个名称，通常用于描述视图和视图模型的配对。视图是 HTML 文件/模板，视图模型是支持 JavaScript 文件，尽管绝对可以有一个仅供查看的组件。

一个组件可以被认为是一个网络组件，尽管在 Aurelia 中文档描述了一些差异。 MDN describes Web Components well

Answer 2

根据经验，Aurelia 中的 view 和 component 的区别可以概括为：

• Aurelia 中的 view 只是将 .html 和它附带的样式 (.scss/.less/.css)
• Aurelia中的一个view-model是其背后的代码(.js/.tsclass)
• A component 是视图和视图模型之间的组合，由 Aurelia
自动粘合在一起

本质上你可以说，使用 Aurelia，你开发的几乎所有 'page' 或 'reusable element' 都可以被视为一个组件。这就是 Aurelia docs on components means 与：

Components are the basic building blocks of all Aurelia applications.

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

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

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

• canActivate（参数，routeConfig，navigationInstruction）
• 激活（参数、routeConfig、navigationInstruction）
• canDeactivate()
• 停用()

因此，通过路由器管道的组件，例如您通过代码或通过用户操作（如单击） 明确导航到 的组件在其生命周期中将有额外的激活步骤。

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