Aurelia中的组件和视图之间的区别(及其生命周期) [英] Difference between a Component and a View in Aurelia (and their lifecycles)
问题描述
能否请您告诉我组件和Aurelia中的View有什么区别? 他们的体系结构是什么，生命周期之间有什么区别?
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中视图和组件之间的区别为:
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中的视图模型是其背后的代码(.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文档的含义:
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.
但是，至少在我看来，文档中目前尚未明确描述的是，并非所有组件都是相同的.至少就其在奥雷利亚的生命周期而言.例如，组件生命周期具有以下默认挂钩:
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()-首先调用视图模型的构造函数.
- 已创建(owningView:视图，myView:视图)
- bind(bindingContext:对象，overrideContext:对象)
- attached()
- detached()
- unbind()
此生命周期适用于所有组件.但是有一个微妙的区别，那就是当通过路由器运行(初始化)某个组件 时，就会有另外一组钩子可用:
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)
- activate(参数，routeConfig，navigationInstruction)
- canDeactivate()
- deactivate()
一个通过路由器管道的组件，例如通过代码或通过用户操作(如单击)明确地导航到的组件，将在其生命周期中包含其他激活步骤.
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屋！
