Skip to content

Commit

Permalink
[doc] observer update
Browse files Browse the repository at this point in the history
  • Loading branch information
eaicardi committed Jul 9, 2024
1 parent 219c0bc commit 04141b6
Showing 1 changed file with 12 additions and 2 deletions.
14 changes: 12 additions & 2 deletions wiki/methods/observe.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ What is an observer ?

useObserve is a Vif method that takes an object as argument. this object has tagNames as keys and functions as values.

When hydrating an x-element, all nested x-elements will be submitted to the observer, if the tagName matches one of the keys, then the associated function will be executed (but only once).
When hydrating an `x-element`, all nested `x-element(s)` will be submitted to the observer, if the `.tagName` matches one of the keys, then the associated function will be executed (only once per key).

# Use case

Expand All @@ -28,10 +28,20 @@ useDefine("app", function () {
due to performance concerns -->
<x-app>
<!-- lazy loaded component -->
<x-my-component>
<x-my-component></x-my-component>
</x-app>
```

## Limitations

There are certain limitations due to the way the observer works :

- You cannot lazy-load root-level components.
- The style of components is not taken into account by the observer (an invisible component will still be loaded).
- Only components inside `<template>` tags can be delayed because observation takes place during hydration.

With this in mind, the observer is particularly useful for web applications with components rendered as raw html in javascript files, and for Single Page Applications where you only want to load one route at a time.

---

# Next
Expand Down

0 comments on commit 04141b6

Please sign in to comment.