Aurelia 2 Lifecycles Explained In As Few Words As Possible

With Aurelia 2, everything has been reimagined from the ground up. While the syntax and way you build applications is largely the same as Aurelia 1, there are some key differences and one of those is lifecycles.

When I say lifecycles I am talking about component lifecycles and router lifecycles. If you need a handy reference for what lifecycle you should use, you just found it.

This will not cover all lifecycle methods, just the ones that most people would want to know about such as dom attached and where you should load data from an api.

Component Lifecycles

There are a lot more lifecycles than shown below. These are the ones you want to know for loading data or working with the dom.

beforeBind (equivalent to bind in Aurelia 1) – Fetch data in here, initialize things and set up subscriptions. If you make this method async, Aurelia will wait for your function to resolve before rendering. This is a great place to load data. You can modify the bindings before they’re attached to the view (coerce values and so on).

afterAttach (equivalent to attached in Aurelia 1) – Work with the dom, use 3rd party libraries. Can be async.

afterDetach (equivalent to detached in Aurelia 1) – Clean up anything that touched the dom. Can be async.

Router Lifecycles

canEnter (equivalent to canActivate in Aurelia 1) – Useful for loading data or verifying parameters passed in the URL that are required for the component to render.

enter (equivalent to activate in Aurelia 1) – Similar to canEnter anything loaded in here is not necessarily crucial for the component to render.

canLeave (equivalent to canDeactivate in Aurelia 1) – Can the current user leave the component?

leave (equivalent to deactivate in Aurelia 1) – The user is leaving the current route and heading to another one.