Difference between init() and x-init="foo()"

[lonix1]

One can do this:

x-data="{ 
  init() { ... } 
}"

And this:

x-data="{ 
  foo() { ... } 
}"
x-init="foo()"

Is there a difference between init() and x-init="foo()"?

[browner12]

Order of execution:

https://alpinejs.dev/directives/init

[lonix1]

Thanks for the link.

Is there a reason both exist? When should one use the one or the other?

[browner12]

they both do the same thing. there's no reason to use 1 over the other, just depends how you wanna call it, and what makes the most sense in the given situation.

[lonix1]

It's strange. I wonder what was the original reason for having both, because anything x-init="" can do, one can do in init() instead. It has access to this and all reactive data/behaviour. @ekwoka Would you perhaps have any insight into this?

[ekwoka]

One is bound in the Dom the other in the component.

X-init can go on any element even if it's not a component root element.

In the most strict sense, init() is useful for setup work a component will always need to do, while x-init is good when it's this specific instance needs to do something.