Document common gotchas

[rigor789]

I have started working on a little explanation why some lifecycle hooks don't work the way users expect, and why sometimes we need to add a setTimeout and such. We should add this and other gotchas that we see often to the docs.

Note: this is a draft, could use some better wording and polishing...

---

Why lifecycle hooks don't always work in NativeScript-Vue

It is very common to run into issues when calling certain functions from Vue lifecycle hooks when working with NativeScript-Vue. For example, I see the following case fairly often:

created() {
  alert('I have been created!')
}

Which never shows an alert, and leads to the conclusion that the lifecycle function created is never called.

This is not the case actually, the hook is called the same way it is called when working with Vue on web, but there are certain limitations that come into play. In this example when the hook is called the application has not been fully started yet, and calls to alert are simply ignored by NativeScript.

To understand why this may be happening, we need to look into how NativeScript actually works compared to web. On web DOM manipulation (creating elements, adding/removing children etc.) is synchronous, which means that in our code we can manipulate the dom without worrying about callbacks/promises to ensure the update has been made. The asynchronous part - paint is handled by the browser and we don't need to worry about it too much in our code.

In NativeScript(-Vue) when a View is created and added to the "DOM" it may take some time for it to actually be there because it's handled by the native layer and it is asynchronous. To ensure the view is in the view hierarchy we can utilize the loaded event on any view, which is fired when the underlying native view is created and ready.

In the above example, the alert may show up if the created hook is used on a component that is only added to the "DOM" at a later point (with a v-if for example), but will not do anything if used on a component that is rendered initially when the app starts. This is because the code behind alert uses foregroundActivity which is not yet created when the Vue app is initialized, it's only created once all the views are rendered (async).

https://github.com/NativeScript/NativeScript/blob/8e9c6d5f321ca8b4fe57ab4e456f74ecfa3a7185/tns-core-modules/ui/dialogs/dialogs.android.ts#L15

[ikoevska]

@rigor789 do you want me to take a look at the text?