Aurelia 中组件和视图之间的区别(及其生命周期) [英] Difference between a Component and a View in Aurelia (and their lifecycles)
问题描述
您能告诉我 Aurelia 中的组件和视图有什么区别吗?它们的架构是什么，它们的生命周期有什么区别?
Could you please tell me what is difference between a component and a View in Aurelia? What are their architectures and What is the difference between their lifecycles?
推荐答案
根据经验，可以总结出Aurelia中view和component的区别如:
As a rule of thumb, the difference between a view and a component in Aurelia can be summarised as:
- Aurelia 中的 视图 只是简单地将 .html 及其附带的样式 (.scss/.less/.css)
- Aurelia 中的 view-model 是其背后的代码(.js/.ts 类)
- 组件是视图和视图模型的组合，由 Aurelia 自动粘合在一起
- A view in Aurelia is simply put the .html and the styling that comes with it (.scss/.less/.css)
- A view-model in Aurelia is the code behind it (.js/.ts class)
- A component is the combination between a view and view-model, and is glued together automagically by Aurelia
本质上，您可以说，使用 Aurelia，您开发的几乎所有页面"或可重用元素"都可以被视为组件.这就是 Aurelia docs on components 的含义:
In essence you can say that, with Aurelia, pretty much everything you develop that is either a 'page' or a 'reusable element' can be considered a component. That is what the Aurelia docs on components means with:
组件是所有 Aurelia 应用程序的基本构建块.
Components are the basic building blocks of all Aurelia applications.
但至少在我看来，文档中目前没有明确描述的是，并非所有组件都是相同的.至少，就它们在 Aurelia 的生命周期而言.例如，组件生命周期具有以下默认挂钩:
But what is currently not described clearly in the docs, at least in my opinion, is that not all components are the same. At least, in terms of their lifecycle in Aurelia. For example, the Component Lifecycle has the following default hooks:
- constructor() - 首先调用视图模型的构造函数.
- created(owningView: View, myView: View)
- 绑定(绑定上下文:对象，覆盖上下文:对象)
- 附加()
- 分离()
- 解除绑定()
此生命周期适用于所有组件.但是有一个细微的差别，当组件运行(初始化)通过路由器时，会有一组额外的钩子可用:
This lifecycle is the case for all components. But there is a subtle difference that when a component is ran (initialized) through the Router, an additional set of hooks become available:
- canActivate(params, routeConfig, navigationInstruction)
- 激活(参数、路由配置、导航指令)
- canDeactivate()
- 停用()
所以一个通过路由器管道的组件，例如您通过代码或通过点击等用户操作显式导航到的组件将在其生命周期中具有额外的激活步骤.
So a component that goes through the plumbing of the router, e.g. a component where you explicitly navigate to through code, or through a user action like a click, will have additional activation steps in its lifecycle.
如前所述，我个人喜欢将这些组件称为页面"，只是为了给它一个清晰的标签，并将它们与可重用控件和其他组件区分开来.
As already mentioned earlier, I personally like to refer to these components as "pages", just to give it a clear label and distinct them from for example reusable controls and other components.
这篇关于Aurelia 中组件和视图之间的区别(及其生命周期)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
