Difference between component and view in Aurelia (and their lifecycles)

Generally, the difference between a view and a component in Aurelia can be summarized as:

• A view in Aurelia just puts .html and the style that comes with it (.scss / .less / .css)
• A view-model in Aurelia is the code behind it (.js / .ts class)
• Component is a combination between view and view model and is automatically matched by Aurelia

In essence, you can say that with Aurelia, almost anything you develop, either a "page" or a "reusable item", can be considered a component. This is what the Aurelia docs on components mean with:

Components are the basic building blocks of all Aurelia applications.

But what is currently not clearly described in the docs, at least in my opinion, is that not all components are the same. At least in terms of their life cycle in Aurelia. For example, the Lifecycle of a Component has the following hooks by default:

• constructor () - The view constructor is created first.
• created (owningView: View, myView: View)
• bind (bindingContext: Object, overrideContext: Object)
• attached ()
• separately()
• untie ()

This lifecycle applies to all components. But there is a subtle difference in that when a component is launched (initialized) through a router , an additional set of interceptors appears:

• canActivate (params, routeConfig, navigationInstruction)
• activate (params, routeConfig, navigationInstruction)
• canDeactivate ()
• deactivate ()

So the component that goes through the plumbing of the router, for example. a component that you explicitly view through code or through a user action like a click will have additional activation stages in its lifecycle.

As mentioned earlier, I personally like to refer to these components as “pages”, just to give it a bright label and distinguish it from, for example, reusable items and other components.