Aurelia中组件和视图之间的差异（及其生命周期）

Question

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

Answer 1

根据经验，Aurelia中视图与组件之间的差异可归纳为：

• Aurelia中的视图简单地放了.html及其附带的样式（.scss / .less / .css）
• Aurelia中的视图模型是其背后的代码（.js / .ts类）
• 组件是视图和视图模型之间的组合，并由Aurelia自动粘合在一起

从本质上讲，你可以说，Aurelia，你开发的几乎所有东西都是一个＆＃39;页面＆＃39;或者可重复使用的元素＆＃39;可以被视为一个组成部分。这就是Aurelia docs on components means：

  

组件是所有Aurelia应用程序的基本构建块。

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

1. constructor（） - 首先调用视图模型的构造函数。
2. 创建（拥有View：View，myView：View）
3. bind（bindingContext：Object，overrideContext：Object）
4. 附接（）
5. 分离（）
6. 解除绑定（）

此生命周期适用于所有组件。但是有一个细微的差别，当一个组件通过路由器运行（初始化）时，可以使用另外一组钩子：

• canActivate（params，routeConfig，navigationInstruction）
• 激活（params，routeConfig，navigationInstruction）
• canDeactivate（）
• 停用（）

这是一个通过路由器管道的组件，例如： 通过代码明确导航到的组件，或通过点击等用户操作，在其生命周期中将有其他激活步骤。

如前所述，我个人喜欢将这些组件称为＆＃34; pages＆＃34;，只是为了给它一个明确的标签，并将它们与例如可重复使用的控件和其他组件区分开来。

Answer 2

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

组件可以被视为Web组件，但在Aurelia中，文档描述的内容存在一些差异。 MDN describes Web Components well