profectus-docs/assets/guide_reactivity.md.97a52654.js

import{_ as e,c as t,o as a,a as o}from"./app.8e8712eb.js";const f='{"title":"Reactivity","description":"","frontmatter":{},"headers":[{"level":2,"title":"Computable","slug":"computable"}],"relativePath":"guide/reactivity.md"}',r={},s=o('<h1 id="reactivity" tabindex="-1">Reactivity <a class="header-anchor" href="#reactivity" aria-hidden="true">#</a></h1><p>Profectus takes large advantage of Vue&#39;s reactivity system. It&#39;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&#39;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="./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&#39;s reactivity is probably the &quot;quirkiest&quot; 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&#39;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>',7),i=[s];function n(u,c,d,l,h,p){return a(),t("div",null,i)}var y=e(r,[["render",n]]);export{f as __pageData,y as default};