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
3959f5119e
commit
9b6be14441
14 changed files with 308 additions and 60 deletions
49
docs/tut/crash-course/6-root.md
Normal file
49
docs/tut/crash-course/6-root.md
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
# 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
|
||||
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
|
||||
created within it, since reactive scopes track any reactive scopes created
|
||||
within them.
|
||||
|
||||
```lua
|
||||
local source = vide.source
|
||||
local effect = vide.effect
|
||||
|
||||
local function App()
|
||||
local count = source(0)
|
||||
|
||||
effect(function()
|
||||
print(count())
|
||||
end)
|
||||
end
|
||||
|
||||
vide.mount(App) -- works!
|
||||
|
||||
App() -- will error since effect() was not called within a reactive scope
|
||||
```
|
||||
|
||||
The reactive graph for the above example:
|
||||
|
||||
```mermaid
|
||||
%%{init: {
|
||||
"theme": "base",
|
||||
"themeVariables": {
|
||||
"primaryColor": "#1B1B1F",
|
||||
"primaryTextColor": "#fff",
|
||||
"primaryBorderColor": "#1B1B1F",
|
||||
"lineColor": "#79B8FF",
|
||||
"tertiaryColor": "#161618",
|
||||
"tertiaryBorderColor": "#161618"
|
||||
}
|
||||
}}%%
|
||||
|
||||
flowchart
|
||||
|
||||
subgraph root
|
||||
direction LR
|
||||
count --> effect
|
||||
end
|
||||
```
|
||||
Loading…
Add table
Add a link
Reference in a new issue