27 lines
No EOL
36 KiB
HTML
27 lines
No EOL
36 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Reactivity | Profectus</title>
|
|
<meta name="description" content="A game engine that grows with you.">
|
|
<link rel="stylesheet" href="/assets/style.e3402314.css">
|
|
<link rel="modulepreload" href="/assets/app.ab34650d.js">
|
|
<link rel="modulepreload" href="/assets/guide_important-concepts_reactivity.md.412135dc.lean.js">
|
|
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,400;0,600;1,400">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
|
<link rel="manifest" href="/site.webmanifest">
|
|
<script defer="true" data-domain="moddingtree.com" src="https://plausible.io/js/plausible.js"></script>
|
|
<meta name="og:description" content="A game engine that grows with you">
|
|
<meta name="og:image" content="/Logo.png">
|
|
</head>
|
|
<body>
|
|
<div id="app"><div class="Layout" data-v-6b5fd0a9><!--[--><!--]--><!--[--><span tabindex="-1" data-v-45f6ae50></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-45f6ae50> Skip to content </a><!--]--><!----><header class="VPNav" data-v-6b5fd0a9 data-v-0e356168><div class="VPNavBar has-sidebar" data-v-0e356168 data-v-8856f192><div class="container" data-v-8856f192><div class="VPNavBarTitle has-sidebar" data-v-8856f192 data-v-6a6f7ff6><a class="title" href="/" data-v-6a6f7ff6><!--[--><img class="VPImage logo" src="/favicon.svg" data-v-73ae1788><!--]--><!--[-->Profectus<!--]--></a></div><div class="content" data-v-8856f192><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-8856f192 data-v-a30758ee><span id="main-nav-aria-label" class="visually-hidden" data-v-a30758ee>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/guide/" data-v-a30758ee data-v-8fba5fa8 data-v-5704c677><!--[-->Guide<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/api/overview.html" data-v-a30758ee data-v-8fba5fa8 data-v-5704c677><!--[-->API<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="https://forums.moddingtree.com" target="_blank" rel="noopener noreferrer" data-v-a30758ee data-v-8fba5fa8 data-v-5704c677><!--[-->Forums<!--]--><!----></a><!--]--><!--]--></nav><!----><!----><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-8856f192 data-v-0ae890f7 data-v-4dcbaf3a><!--[--><a class="VPSocialLink" href="https://discord.gg/F3xveHV" title="discord" target="_blank" rel="noopener noreferrer" data-v-4dcbaf3a data-v-48c45ef6><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-48c45ef6><path d="M20.222 0c1.406 0 2.54 1.137 2.607 2.475V24l-2.677-2.273-1.47-1.338-1.604-1.398.67 2.205H3.71c-1.402 0-2.54-1.065-2.54-2.476V2.48C1.17 1.142 2.31.003 3.715.003h16.5L20.222 0zm-6.118 5.683h-.03l-.202.2c2.073.6 3.076 1.537 3.076 1.537-1.336-.668-2.54-1.002-3.744-1.137-.87-.135-1.74-.064-2.475 0h-.2c-.47 0-1.47.2-2.81.735-.467.203-.735.336-.735.336s1.002-1.002 3.21-1.537l-.135-.135s-1.672-.064-3.477 1.27c0 0-1.805 3.144-1.805 7.02 0 0 1 1.74 3.743 1.806 0 0 .4-.533.805-1.002-1.54-.468-2.14-1.404-2.14-1.404s.134.066.335.2h.06c.03 0 .044.015.06.03v.006c.016.016.03.03.06.03.33.136.66.27.93.4.466.202 1.065.403 1.8.536.93.135 1.996.2 3.21 0 .6-.135 1.2-.267 1.8-.535.39-.2.87-.4 1.397-.737 0 0-.6.936-2.205 1.404.33.466.795 1 .795 1 2.744-.06 3.81-1.8 3.87-1.726 0-3.87-1.815-7.02-1.815-7.02-1.635-1.214-3.165-1.26-3.435-1.26l.056-.02zm.168 4.413c.703 0 1.27.6 1.27 1.335 0 .74-.57 1.34-1.27 1.34-.7 0-1.27-.6-1.27-1.334.002-.74.573-1.338 1.27-1.338zm-4.543 0c.7 0 1.266.6 1.266 1.335 0 .74-.57 1.34-1.27 1.34-.7 0-1.27-.6-1.27-1.334 0-.74.57-1.338 1.27-1.338z"></path></svg><span class="visually-hidden" data-v-48c45ef6>discord</span></a><a class="VPSocialLink" href="https://github.com/profectus-engine/Profectus" title="github" target="_blank" rel="noopener noreferrer" data-v-4dcbaf3a data-v-48c45ef6><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-48c45ef6><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg><span class="visually-hidden" data-v-48c45ef6>github</span></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-8856f192 data-v-0562f5c0 data-v-8dccea88><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-8dccea88><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-8dccea88><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-8dccea88><div class="VPMenu" data-v-8dccea88 data-v-e73581a2><!----><!--[--><!--[--><!----><!----><div class="group" data-v-0562f5c0><div class="item social-links" data-v-0562f5c0><div class="VPSocialLinks social-links-list" data-v-0562f5c0 data-v-4dcbaf3a><!--[--><a class="VPSocialLink" href="https://discord.gg/F3xveHV" title="discord" target="_blank" rel="noopener noreferrer" data-v-4dcbaf3a data-v-48c45ef6><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-48c45ef6><path d="M20.222 0c1.406 0 2.54 1.137 2.607 2.475V24l-2.677-2.273-1.47-1.338-1.604-1.398.67 2.205H3.71c-1.402 0-2.54-1.065-2.54-2.476V2.48C1.17 1.142 2.31.003 3.715.003h16.5L20.222 0zm-6.118 5.683h-.03l-.202.2c2.073.6 3.076 1.537 3.076 1.537-1.336-.668-2.54-1.002-3.744-1.137-.87-.135-1.74-.064-2.475 0h-.2c-.47 0-1.47.2-2.81.735-.467.203-.735.336-.735.336s1.002-1.002 3.21-1.537l-.135-.135s-1.672-.064-3.477 1.27c0 0-1.805 3.144-1.805 7.02 0 0 1 1.74 3.743 1.806 0 0 .4-.533.805-1.002-1.54-.468-2.14-1.404-2.14-1.404s.134.066.335.2h.06c.03 0 .044.015.06.03v.006c.016.016.03.03.06.03.33.136.66.27.93.4.466.202 1.065.403 1.8.536.93.135 1.996.2 3.21 0 .6-.135 1.2-.267 1.8-.535.39-.2.87-.4 1.397-.737 0 0-.6.936-2.205 1.404.33.466.795 1 .795 1 2.744-.06 3.81-1.8 3.87-1.726 0-3.87-1.815-7.02-1.815-7.02-1.635-1.214-3.165-1.26-3.435-1.26l.056-.02zm.168 4.413c.703 0 1.27.6 1.27 1.335 0 .74-.57 1.34-1.27 1.34-.7 0-1.27-.6-1.27-1.334.002-.74.573-1.338 1.27-1.338zm-4.543 0c.7 0 1.266.6 1.266 1.335 0 .74-.57 1.34-1.27 1.34-.7 0-1.27-.6-1.27-1.334 0-.74.57-1.338 1.27-1.338z"></path></svg><span class="visually-hidden" data-v-48c45ef6>discord</span></a><a class="VPSocialLink" href="https://github.com/profectus-engine/Profectus" title="github" target="_blank" rel="noopener noreferrer" data-v-4dcbaf3a data-v-48c45ef6><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-48c45ef6><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg><span class="visually-hidden" data-v-48c45ef6>github</span></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-8856f192 data-v-6f008456><span class="container" data-v-6f008456><span class="top" data-v-6f008456></span><span class="middle" data-v-6f008456></span><span class="bottom" data-v-6f008456></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-6b5fd0a9 data-v-92b0f14a><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-92b0f14a><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-92b0f14a><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-92b0f14a>Menu</span></button><a class="top-link" href="#" data-v-92b0f14a> Return to top </a></div><aside class="VPSidebar" data-v-6b5fd0a9 data-v-55e4c7db><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-55e4c7db><span class="visually-hidden" id="sidebar-aria-label" data-v-55e4c7db> Sidebar Navigation </span><!--[--><div class="group" data-v-55e4c7db><section class="VPSidebarGroup collapsible" data-v-55e4c7db data-v-1f69a7ed><div class="title" role="button" data-v-1f69a7ed><h2 class="title-text" data-v-1f69a7ed>Getting Started</h2><div class="action" data-v-1f69a7ed><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-1f69a7ed><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-1f69a7ed><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-1f69a7ed><!--[--><a class="VPLink link" href="/guide/" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Introduction</span><!--]--><!----></a><a class="VPLink link" href="/guide/getting-started/setup.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Setting Up</span><!--]--><!----></a><a class="VPLink link" href="/guide/getting-started/updating.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Updating Profectus</span><!--]--><!----></a><a class="VPLink link" href="/guide/getting-started/examples.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Example Projects</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-55e4c7db><section class="VPSidebarGroup collapsible" data-v-55e4c7db data-v-1f69a7ed><div class="title" role="button" data-v-1f69a7ed><h2 class="title-text" data-v-1f69a7ed>Creating Your Project</h2><div class="action" data-v-1f69a7ed><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-1f69a7ed><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-1f69a7ed><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-1f69a7ed><!--[--><a class="VPLink link" href="/guide/creating-your-project/project-info.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Project Info</span><!--]--><!----></a><a class="VPLink link" href="/guide/creating-your-project/project-entry.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Project Entry</span><!--]--><!----></a><a class="VPLink link" href="/guide/creating-your-project/changelog.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Changelog</span><!--]--><!----></a><a class="VPLink link" href="/guide/creating-your-project/themes.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Themes</span><!--]--><!----></a><a class="VPLink link" href="/guide/creating-your-project/utils.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Utilities</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-55e4c7db><section class="VPSidebarGroup collapsible" data-v-55e4c7db data-v-1f69a7ed><div class="title" role="button" data-v-1f69a7ed><h2 class="title-text" data-v-1f69a7ed>Important Concepts</h2><div class="action" data-v-1f69a7ed><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-1f69a7ed><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-1f69a7ed><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-1f69a7ed><!--[--><a class="VPLink link" href="/guide/important-concepts/layers.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Layers</span><!--]--><!----></a><a class="VPLink link" href="/guide/important-concepts/features.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Features</span><!--]--><!----></a><a class="VPLink link" href="/guide/important-concepts/coercable.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Coercable Components</span><!--]--><!----></a><a class="VPLink link active" href="/guide/important-concepts/reactivity.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Reactivity</span><!--]--><!----></a><a class="VPLink link" href="/guide/important-concepts/persistence.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Persistence</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-55e4c7db><section class="VPSidebarGroup collapsible" data-v-55e4c7db data-v-1f69a7ed><div class="title" role="button" data-v-1f69a7ed><h2 class="title-text" data-v-1f69a7ed>Recipes</h2><div class="action" data-v-1f69a7ed><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-1f69a7ed><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-1f69a7ed><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-1f69a7ed><!--[--><a class="VPLink link" href="/guide/recipes/save-progress.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Display Save Progress</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-55e4c7db><section class="VPSidebarGroup collapsible" data-v-55e4c7db data-v-1f69a7ed><div class="title" role="button" data-v-1f69a7ed><h2 class="title-text" data-v-1f69a7ed>Advanced Concepts</h2><div class="action" data-v-1f69a7ed><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-1f69a7ed><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-1f69a7ed><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-1f69a7ed><!--[--><a class="VPLink link" href="/guide/advanced-concepts/creating-features.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Creating Features</span><!--]--><!----></a><a class="VPLink link" href="/guide/advanced-concepts/dynamic-layers.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Dynamic Layers</span><!--]--><!----></a><!--]--></div></section></div><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-6b5fd0a9 data-v-a4c57a06><div class="VPDoc has-sidebar" data-v-a4c57a06 data-v-79ca2460><div class="container" data-v-79ca2460><div class="aside" data-v-79ca2460><div class="aside-curtain" data-v-79ca2460></div><div class="aside-container" data-v-79ca2460><div class="aside-content" data-v-79ca2460><div class="VPDocAside" data-v-79ca2460 data-v-779d834d><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline has-outline" data-v-779d834d data-v-51e5a8ce><div class="content" data-v-51e5a8ce><div class="outline-marker" data-v-51e5a8ce></div><div class="outline-title" data-v-51e5a8ce>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-51e5a8ce><span class="visually-hidden" id="doc-outline-aria-label" data-v-51e5a8ce> Table of Contents for current page </span><ul class="root" data-v-51e5a8ce><!--[--><li style="" data-v-51e5a8ce><a class="outline-link" href="#computable" data-v-51e5a8ce>Computable</a><!----></li><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-779d834d></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-79ca2460><div class="content-container" data-v-79ca2460><!--[--><!--]--><main class="main" data-v-79ca2460><div style="position:relative;" class="vp-doc _guide_important-concepts_reactivity" data-v-79ca2460><div><h1 id="reactivity" tabindex="-1">Reactivity <a class="header-anchor" href="#reactivity" aria-hidden="true">#</a></h1><p>Profectus takes large advantage of Vue's reactivity system. It's recommended to read up on how <a href="https://vuejs.org/guide/essentials/reactivity-fundamentals.html#reactive-variables-with-ref" target="_blank" rel="noopener noreferrer">refs</a> and <a href="https://vuejs.org/guide/essentials/computed.html" target="_blank" rel="noopener noreferrer">computed</a> refs work. Ultimately this means that sometimes you'll need to type <code>.value</code> to get the actual value of something, but also you are able to pass things around by reference instead of by value. Indeed, it is recommended to only unwrap the actual value when you actually need it. <code>.value</code> is guaranteed to be correct and up to date only on the exact moment it is accessed.</p><p>With a proper IDE, such as <a href="./../getting-started/setup.html#visual-studio-code-setup">Visual Studio Code</a>, you should be able to see whether or not something is a ref or not from type hints. If in doubt, you can always wrap the property in an <code>unref</code> call.</p><p>Vue's reactivity is probably the "quirkiest" part of Profectus, and not even the documentation makes all of those quirks clear. It is recommend to read <a href="https://github.com/vuejs/docs/issues/849" target="_blank" rel="noopener noreferrer">this thread</a> of common misconceptions around Vue reactivity.</p><h2 id="computable" tabindex="-1">Computable <a class="header-anchor" href="#computable" aria-hidden="true">#</a></h2><p>Most properties on features will accept <code>Computable</code> values. Computable values can either be a raw value, a ref to the value, or a function that returns the value. In the lattermost case it will be wrapped in <code>computed</code>, turning it into a ref. The feature type will handle it being a ref or a raw value by using <code>unref</code> when accessing those values. With type hints, your IDE should correctly identify these values as refs or raw values so you can treat them as the types they actually are.</p><p>Because functions are automatically wrapped in <code>computed</code> for many properties, it might be expected to happen to custom properties you add to a feature that isn't defined by the feature type. These functions will <em>not</em> be wrapped, and if you want it cached you should wrap it in a <code>computed</code> yourself. This does, however, allow you to include custom methods on a feature without worry.</p></div></div></main><footer class="VPDocFooter" data-v-79ca2460 data-v-04568844><div class="edit-info" data-v-04568844><div class="edit-link" data-v-04568844><a class="VPLink link edit-link-button" href="https://github.com/profectus-engine/profectus-docs/edit/main/docs/guide/important-concepts/reactivity.md" target="_blank" rel="noopener noreferrer" data-v-04568844 data-v-5704c677><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" data-v-04568844><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--><!----></a></div><div class="last-updated" data-v-04568844><p class="VPLastUpdated" data-v-04568844 data-v-0ce8c960>Last updated: <time datatime="2022-07-17T22:25:15.000Z" data-v-0ce8c960></time></p></div></div><div class="prev-next" data-v-04568844><div class="pager" data-v-04568844><a class="pager-link prev" href="/guide/important-concepts/coercable.html" data-v-04568844><span class="desc" data-v-04568844>Previous page</span><span class="title" data-v-04568844>Coercable Components</span></a></div><div class="has-prev pager" data-v-04568844><a class="pager-link next" href="/guide/important-concepts/persistence.html" data-v-04568844><span class="desc" data-v-04568844>Next page</span><span class="title" data-v-04568844>Persistence</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><!----><!--[--><!--]--></div></div>
|
|
<script>__VP_HASH_MAP__ = JSON.parse("{\"api_classes_lib_break_eternity.default.md\":\"1290440e\",\"api_components_contextcomponent.md\":\"d8857c87\",\"api_components_infocomponent.md\":\"a3ada40e\",\"api_components_layercomponent.md\":\"719b2b23\",\"api_components_marknodecomponent.md\":\"9ff2021c\",\"api_components_modalcomponent.md\":\"c6af37d6\",\"api_components_nodecomponent.md\":\"e6b27589\",\"api_components_savecomponent.md\":\"377941ea\",\"api_components_fields_dangerbuttoncomponent.md\":\"9c7ae321\",\"api_components_fields_feedbackbuttoncomponent.md\":\"fd493d2b\",\"api_components_fields_selectcomponent.md\":\"b358625d\",\"api_components_fields_slidercomponent.md\":\"626bc315\",\"api_components_fields_textcomponent.md\":\"8e30567c\",\"api_components_fields_togglecomponent.md\":\"7f5f7bd8\",\"api_components_layout_collapsiblecomponent.md\":\"d360a794\",\"api_components_layout_columncomponent.md\":\"a60adb9c\",\"api_components_layout_rowcomponent.md\":\"3996636f\",\"api_components_layout_spacercomponent.md\":\"4b7102a5\",\"api_components_layout_stickycomponent.md\":\"7b034b7f\",\"api_components_layout_verticalrulecomponent.md\":\"a5a98edf\",\"api_components_math_floorcomponent.md\":\"b5ec3a74\",\"api_components_math_sqrtcomponent.md\":\"d1a98a8b\",\"api_enums_data_themes.themes.md\":\"cb2c6c21\",\"api_enums_features_boards_board.progressdisplay.md\":\"4edec575\",\"api_enums_features_boards_board.shape.md\":\"d29ef164\",\"api_enums_features_feature.visibility.md\":\"f7ecb050\",\"api_enums_features_milestones_milestone.milestonedisplay.md\":\"39d1fa14\",\"api_enums_util_common.direction.md\":\"0e00c6d4\",\"api_interfaces_data_common.layertreenodeoptions.md\":\"d7ad7953\",\"api_interfaces_data_common.resetbuttonoptions.md\":\"85d2c912\",\"api_interfaces_data_themes.theme.md\":\"6e26bdae\",\"api_interfaces_data_themes.themevars.md\":\"7e47c03d\",\"api_interfaces_features_achievements_achievement.achievementoptions.md\":\"e3bb9e10\",\"api_interfaces_features_achievements_achievement.baseachievement.md\":\"2720dde1\",\"api_interfaces_features_bars_bar.baroptions.md\":\"88cdcf49\",\"api_interfaces_features_bars_bar.basebar.md\":\"db8e4ea8\",\"api_interfaces_features_boards_board.baseboard.md\":\"52e79f2d\",\"api_interfaces_features_boards_board.baseboardnodeaction.md\":\"c31a59bb\",\"api_interfaces_features_boards_board.basenodetype.md\":\"bd8dbc71\",\"api_interfaces_features_boards_board.boardnode.md\":\"0cc3dbfa\",\"api_interfaces_features_boards_board.boardnodeactionoptions.md\":\"2a5b2665\",\"api_interfaces_features_boards_board.boardnodelink.md\":\"e4c431f0\",\"api_interfaces_features_boards_board.boardoptions.md\":\"3cbda49d\",\"api_interfaces_features_boards_board.nodelabel.md\":\"fe7b2f21\",\"api_interfaces_features_boards_board.nodetypeoptions.md\":\"9cdab6c0\",\"api_interfaces_features_buyable.basebuyable.md\":\"5d8810f8\",\"api_interfaces_features_buyable.buyableoptions.md\":\"38091563\",\"api_interfaces_features_challenges_challenge.basechallenge.md\":\"1144d5c7\",\"api_interfaces_features_challenges_challenge.challengeoptions.md\":\"1ec2fcf6\",\"api_interfaces_features_clickables_clickable.baseclickable.md\":\"06109a64\",\"api_interfaces_features_clickables_clickable.clickableoptions.md\":\"f7a7ae11\",\"api_interfaces_features_conversion.baseconversion.md\":\"9cb19bfd\",\"api_interfaces_features_conversion.conversionoptions.md\":\"bc32d8b6\",\"api_interfaces_features_conversion.scalingfunction.md\":\"6a2a175d\",\"api_interfaces_features_grids_grid.basegrid.md\":\"da2c6613\",\"api_interfaces_features_grids_grid.gridcell.md\":\"f77bad6a\",\"api_interfaces_features_grids_grid.gridoptions.md\":\"f3f8a065\",\"api_interfaces_features_hotkey.basehotkey.md\":\"59749b52\",\"api_interfaces_features_hotkey.hotkeyoptions.md\":\"8d1c87ad\",\"api_interfaces_features_infoboxes_infobox.baseinfobox.md\":\"0b8fa392\",\"api_interfaces_features_infoboxes_infobox.infoboxoptions.md\":\"0432d40e\",\"api_interfaces_features_links_links.baselinks.md\":\"f22c773a\",\"api_interfaces_features_links_links.link.md\":\"884cae83\",\"api_interfaces_features_links_links.linksoptions.md\":\"b33725e9\",\"api_interfaces_features_milestones_milestone.basemilestone.md\":\"da47de03\",\"api_interfaces_features_milestones_milestone.milestoneoptions.md\":\"83349bd5\",\"api_interfaces_features_particles_particles.baseparticles.md\":\"6051b08b\",\"api_interfaces_features_particles_particles.particlesoptions.md\":\"cab52692\",\"api_interfaces_features_reset.basereset.md\":\"0aaee6a5\",\"api_interfaces_features_reset.resetoptions.md\":\"e4457e15\",\"api_interfaces_features_resources_resource.resource.md\":\"4642dd5e\",\"api_interfaces_features_tabs_tab.basetab.md\":\"5111ac2f\",\"api_interfaces_features_tabs_tab.taboptions.md\":\"76360ded\",\"api_interfaces_features_tabs_tabfamily.basetabbutton.md\":\"4d467baa\",\"api_interfaces_features_tabs_tabfamily.basetabfamily.md\":\"f94ee862\",\"api_interfaces_features_tabs_tabfamily.tabbuttonoptions.md\":\"6b9f68a4\",\"api_interfaces_features_tabs_tabfamily.tabfamilyoptions.md\":\"6d9a7c51\",\"api_interfaces_features_tooltips_tooltip.basetooltip.md\":\"1f53afea\",\"api_interfaces_features_tooltips_tooltip.tooltipoptions.md\":\"da07b29e\",\"api_interfaces_features_trees_tree.basetree.md\":\"4c9d354d\",\"api_interfaces_features_trees_tree.basetreenode.md\":\"9aa8988f\",\"api_interfaces_features_trees_tree.treebranch.md\":\"585c60bb\",\"api_interfaces_features_trees_tree.treenodeoptions.md\":\"b800da02\",\"api_interfaces_features_trees_tree.treeoptions.md\":\"696f3164\",\"api_interfaces_features_upgrades_upgrade.baseupgrade.md\":\"550f5465\",\"api_interfaces_features_upgrades_upgrade.upgradeoptions.md\":\"67bb67b8\",\"api_interfaces_game_events.globalevents.md\":\"56bdb71d\",\"api_interfaces_game_layers.baselayer.md\":\"96d8a56f\",\"api_interfaces_game_layers.featurenode.md\":\"efcfeb87\",\"api_interfaces_game_layers.layerevents.md\":\"1ad51117\",\"api_interfaces_game_layers.layeroptions.md\":\"2feb7841\",\"api_interfaces_game_layers.position.md\":\"bc975f0f\",\"api_interfaces_game_modifiers.modifier.md\":\"cd7aaea5\",\"api_interfaces_game_player.playerdata.md\":\"eb316c34\",\"api_interfaces_game_settings.settings.md\":\"53192dfb\",\"api_interfaces_game_state.transient.md\":\"a080a663\",\"api_interfaces_lib_pwa-register.registerswoptions.md\":\"67a3e37c\",\"api_modules_data_common.md\":\"fec69339\",\"api_modules_data_projentry.md\":\"798dd0d5\",\"api_modules_data_themes.md\":\"e773216a\",\"api_modules_features_achievements_achievementcomponent.md\":\"6d787eea\",\"api_modules_features_achievements_achievement.md\":\"0b28a02b\",\"api_modules_features_bars_barcomponent.md\":\"5e7717f8\",\"api_modules_features_bars_bar.md\":\"cabe3e15\",\"api_modules_features_boards_boardcomponent.md\":\"7da59571\",\"api_modules_features_boards_boardlinkcomponent.md\":\"9e5467a6\",\"api_modules_features_boards_boardnodecomponent.md\":\"a7b1dd7e\",\"api_modules_features_boards_board.md\":\"7a6b7e01\",\"api_modules_features_buyable.md\":\"97c22bc3\",\"api_modules_features_challenges_challengecomponent.md\":\"846d8b8e\",\"api_modules_features_challenges_challenge.md\":\"4ae2f8a0\",\"api_modules_features_clickables_clickablecomponent.md\":\"8a74f64d\",\"api_modules_features_clickables_clickable.md\":\"b817aee2\",\"api_modules_features_conversion.md\":\"d9c2ff26\",\"api_modules_features_feature.md\":\"156dc078\",\"api_modules_features_grids_gridcellcomponent.md\":\"9b34a274\",\"api_modules_features_grids_gridcomponent.md\":\"ce17cbe7\",\"api_modules_features_grids_grid.md\":\"88110bd8\",\"api_modules_features_hotkey.md\":\"f1686e13\",\"api_modules_features_infoboxes_infoboxcomponent.md\":\"63ba9291\",\"api_modules_features_infoboxes_infobox.md\":\"c2cbbaa2\",\"api_modules_features_links_linkcomponent.md\":\"11b0d97e\",\"api_modules_features_links_linkscomponent.md\":\"2c32c4b5\",\"api_modules_features_links_links.md\":\"81ed5d06\",\"api_modules_features_milestones_milestonecomponent.md\":\"a452ab04\",\"api_modules_features_milestones_milestone.md\":\"f62388b4\",\"api_modules_features_particles_particlescomponent.md\":\"94c44f12\",\"api_modules_features_particles_particles.md\":\"7cb0364a\",\"api_modules_features_reset.md\":\"33547e6c\",\"api_modules_features_resources_maindisplaycomponent.md\":\"2ee12087\",\"api_modules_features_resources_resourcecomponent.md\":\"e37af5e2\",\"api_modules_features_resources_resource.md\":\"a1e39127\",\"api_modules_features_tabs_tabbuttoncomponent.md\":\"244fc06e\",\"api_modules_features_tabs_tabcomponent.md\":\"923254b8\",\"api_modules_features_tabs_tabfamilycomponent.md\":\"424df151\",\"api_modules_features_tabs_tab.md\":\"b4228ba6\",\"api_modules_features_tabs_tabfamily.md\":\"a02f2d4c\",\"api_modules_features_tooltips_tooltipcomponent.md\":\"09a578eb\",\"api_modules_features_tooltips_tooltip.md\":\"ba34412c\",\"api_modules_features_trees_treecomponent.md\":\"55dce179\",\"api_modules_features_trees_treenodecomponent.md\":\"1158642d\",\"api_modules_features_trees_tree.md\":\"46681117\",\"api_modules_features_upgrades_upgradecomponent.md\":\"c26dec10\",\"api_modules_features_upgrades_upgrade.md\":\"cdf58471\",\"api_modules_game_events.md\":\"2f34b3ad\",\"api_modules_game_layers.md\":\"21cf1996\",\"api_modules_game_modifiers.md\":\"b2863ef2\",\"api_modules_game_notifications.md\":\"2cf2d6a5\",\"api_modules_game_persistence.md\":\"503a8c0f\",\"api_modules_game_player.md\":\"70a229bb\",\"api_modules_game_settings.md\":\"648a4653\",\"api_modules_game_state.md\":\"f2335fa2\",\"api_modules_lib_break_eternity.md\":\"aa7a31a7\",\"api_modules_lib_pwa-register.md\":\"93dfaf81\",\"api_modules_util_bignum.md\":\"a72d9d17\",\"api_modules_util_break_eternity.md\":\"f46b0d30\",\"api_modules_util_common.md\":\"c060302e\",\"api_modules_util_computed.md\":\"0d2e1e2e\",\"api_modules_util_proxies.md\":\"04d3dbd2\",\"api_modules_util_save.md\":\"1d2634b2\",\"api_modules_util_vue.md\":\"820c6c41\",\"api_overview.md\":\"24570ec0\",\"guide_advanced-concepts_creating-features.md\":\"f70bc439\",\"guide_advanced-concepts_dynamic-layers.md\":\"1e7ed780\",\"guide_creating-your-project_changelog.md\":\"571a4d47\",\"guide_creating-your-project_project-entry.md\":\"da9e6683\",\"guide_creating-your-project_project-info.md\":\"2d219d7f\",\"guide_creating-your-project_themes.md\":\"7d4fac6e\",\"guide_creating-your-project_utils.md\":\"f1171f2e\",\"guide_getting-started_examples.md\":\"0c043ece\",\"guide_getting-started_setup.md\":\"7cd5bd40\",\"guide_getting-started_updating.md\":\"6500cf04\",\"guide_important-concepts_coercable.md\":\"d283d763\",\"guide_important-concepts_features.md\":\"d9cd2b78\",\"guide_important-concepts_layers.md\":\"deb2a72c\",\"guide_important-concepts_persistence.md\":\"4f3c6d66\",\"guide_important-concepts_reactivity.md\":\"412135dc\",\"guide_index.md\":\"a29a0eb3\",\"guide_recipes_save-progress.md\":\"b8ff9e6a\",\"index.md\":\"7de140c3\"}")</script>
|
|
<script type="module" async src="/assets/app.ab34650d.js"></script>
|
|
|
|
</body>
|
|
</html> |