mirror of
https://github.com/centau/vide.git
synced 2026-08-20 14:41:37 +00:00
74 lines
2.1 KiB
Markdown
74 lines
2.1 KiB
Markdown
# Root Reactive Scopes
|
|
|
|
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 UI.
|
|
|
|
This is so that if you want to destroy your UI, it can stop 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
|
|
```
|
|
|
|
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: {
|
|
"theme": "base",
|
|
"themeVariables": {
|
|
"primaryColor": "#1B1B1F",
|
|
"primaryTextColor": "#fff",
|
|
"primaryBorderColor": "#1B1B1F",
|
|
"lineColor": "#79B8FF",
|
|
"tertiaryColor": "#161618",
|
|
"tertiaryBorderColor": "#161618"
|
|
}
|
|
}}%%
|
|
|
|
graph
|
|
|
|
subgraph root
|
|
direction LR
|
|
count --> effect
|
|
end
|
|
```
|
|
|
|
When the root reactive scope created by `mount()` is destroyed, the `effect`
|
|
scope will also be destroyed since it was created within it.
|
|
|
|
This is important because you may have an effect that updates the property of a
|
|
UI instance, meaning the effect is referencing and holding that instance in
|
|
memory. The effect being destroyed will remove this reference, allowing the
|
|
instance to be garbage collected.
|
|
|
|
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.
|
|
Vide will prevent you from accidently doing otherwise anyways.
|