mirror of
https://github.com/centau/vide.git
synced 2026-08-20 14:41:37 +00:00
Update docs
This commit is contained in:
parent
9b6be14441
commit
46937c6979
16 changed files with 157 additions and 116 deletions
|
|
@ -1,7 +1,7 @@
|
|||
# Root Reactive Scopes
|
||||
|
||||
Any reactive scopes created, such as one from `effect()`, must be done so within
|
||||
a "root" reactive scope. This is the main purpose of `mount()`, which you use
|
||||
Any reactive scopes created, such as by `effect()`, must be done so within a
|
||||
"root" reactive scope. This is the main purpose of `mount()`, which you use
|
||||
once at the top level to create your app as shown in the first introduction.
|
||||
|
||||
This is so that when the app is unmounted, it can clean up any reactive scopes
|
||||
|
|
@ -25,7 +25,18 @@ vide.mount(App) -- works!
|
|||
App() -- will error since effect() was not called within a reactive scope
|
||||
```
|
||||
|
||||
The reactive graph for the above example:
|
||||
Mounting returns a function that when called will destroy any reactive scopes
|
||||
created during the `mount()` call.
|
||||
|
||||
```lua
|
||||
local unmount = mount(App)
|
||||
|
||||
unmount()
|
||||
```
|
||||
|
||||
Vide's reactivity can be represented graphically, as a *reactive graph*.
|
||||
|
||||
The reactive graph for the above example looks like so:
|
||||
|
||||
```mermaid
|
||||
%%{init: {
|
||||
|
|
@ -40,10 +51,18 @@ The reactive graph for the above example:
|
|||
}
|
||||
}}%%
|
||||
|
||||
flowchart
|
||||
graph
|
||||
|
||||
subgraph root
|
||||
subgraph root["mount"]
|
||||
direction LR
|
||||
count --> effect
|
||||
end
|
||||
```
|
||||
|
||||
When the `mount` scope is destroyed, the `effect` scope will also be destroyed
|
||||
since it was created within it.
|
||||
|
||||
You don't need to worry about ensuring all your effects are created within a
|
||||
root scope, since you should be creating all your UI and corresponding effects
|
||||
within a top-level `mount()` call that puts all your UI together. So it is safe
|
||||
to assume that any effect you create will be created under this top level scope.
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue