ivue 1.0.2 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.idea/codeStyles/Project.xml +65 -0
- package/.idea/codeStyles/codeStyleConfig.xml +5 -0
- package/.idea/inspectionProfiles/Project_Default.xml +6 -0
- package/.idea/ivue.iml +8 -0
- package/.idea/modules.xml +8 -0
- package/.idea/php.xml +19 -0
- package/.idea/vcs.xml +6 -0
- package/README.md +5 -5
- package/coverage/clover.xml +128 -128
- package/coverage/coverage-final.json +1 -1
- package/coverage/index.html +1 -1
- package/coverage/index.ts.html +27 -33
- package/dist/src/index.d.ts +5 -2
- package/docs/docs/.vitepress/config.ts +29 -6
- package/docs/docs/.vitepress/dist/404.html +3 -3
- package/docs/docs/.vitepress/dist/api/ivue.html +7 -7
- package/docs/docs/.vitepress/dist/api/propsWithDefaults.html +7 -7
- package/docs/docs/.vitepress/dist/assets/{api_ivue.md.BCZ4q_0D.js → api_ivue.md.MRwb9Lcb.js} +1 -1
- package/docs/docs/.vitepress/dist/assets/{api_ivue.md.BCZ4q_0D.lean.js → api_ivue.md.MRwb9Lcb.lean.js} +1 -1
- package/docs/docs/.vitepress/dist/assets/{api_propsWithDefaults.md.Cr5FwI9o.js → api_propsWithDefaults.md.CeE4IC-K.js} +1 -1
- package/docs/docs/.vitepress/dist/assets/{api_propsWithDefaults.md.Cr5FwI9o.lean.js → api_propsWithDefaults.md.CeE4IC-K.lean.js} +1 -1
- package/docs/docs/.vitepress/dist/assets/{app.DRiljpSE.js → app.CbDr3eFe.js} +1 -1
- package/docs/docs/.vitepress/dist/assets/chunks/@localSearchIndexroot.xSEJiuF6.js +1 -0
- package/docs/docs/.vitepress/dist/assets/chunks/Button.vue_vue_type_script_setup_true_lang.P7niV-n8.js +1 -0
- package/docs/docs/.vitepress/dist/assets/chunks/VPLocalSearchBox.C1TPvqwb.js +7 -0
- package/docs/docs/.vitepress/dist/assets/chunks/framework.CNtPHGsN.js +1 -0
- package/docs/docs/.vitepress/dist/assets/chunks/theme.DSY3Mj9W.js +2 -0
- package/docs/docs/.vitepress/dist/assets/index.md.CktQD561.js +1 -0
- package/docs/docs/.vitepress/dist/assets/index.md.CktQD561.lean.js +1 -0
- package/docs/docs/.vitepress/dist/assets/pages_getting-started.md.COGFS1PH.js +8 -0
- package/docs/docs/.vitepress/dist/assets/pages_getting-started.md.COGFS1PH.lean.js +1 -0
- package/docs/docs/.vitepress/dist/assets/{pages_how-it-works.md.DKizt6Ny.js → pages_how-it-works.md.DEn1nBQc.js} +1 -1
- package/docs/docs/.vitepress/dist/assets/{pages_how-it-works.md.DKizt6Ny.lean.js → pages_how-it-works.md.DEn1nBQc.lean.js} +1 -1
- package/docs/docs/.vitepress/dist/assets/pages_introduction.md.UHEKhynF.js +1 -0
- package/docs/docs/.vitepress/dist/assets/pages_introduction.md.UHEKhynF.lean.js +1 -0
- package/docs/docs/.vitepress/dist/assets/pages_usage.md.B75xObUi.js +275 -0
- package/docs/docs/.vitepress/dist/assets/pages_usage.md.B75xObUi.lean.js +275 -0
- package/docs/docs/.vitepress/dist/assets/{style.BSZVsGuP.css → style.DamVQLpl.css} +1 -1
- package/docs/docs/.vitepress/dist/hashmap.json +1 -1
- package/docs/docs/.vitepress/dist/index.html +8 -7
- package/docs/docs/.vitepress/dist/pages/getting-started.html +10 -10
- package/docs/docs/.vitepress/dist/pages/how-it-works.html +7 -7
- package/docs/docs/.vitepress/dist/pages/introduction.html +8 -7
- package/docs/docs/.vitepress/dist/pages/usage.html +272 -14
- package/docs/docs/components/examples/{Counter.vue → CounterBasic.vue} +4 -4
- package/docs/docs/components/examples/CounterComposables.vue +20 -0
- package/docs/docs/components/examples/CounterComposablesDestructuring.vue +66 -0
- package/docs/docs/components/examples/CounterDefineExpose.vue +12 -0
- package/docs/docs/components/examples/CounterDefineExposeClass.ts +11 -0
- package/docs/docs/components/examples/CounterExternalRefs.vue +25 -0
- package/docs/docs/components/examples/CounterInternalRefs.vue +26 -0
- package/docs/docs/components/examples/CounterWithProps.vue +29 -0
- package/docs/docs/components/examples/CounterWithPropsAndEmits.vue +36 -0
- package/docs/docs/index.md +5 -5
- package/docs/docs/pages/getting-started.md +9 -5
- package/docs/docs/pages/introduction.md +19 -11
- package/docs/docs/pages/usage.md +218 -9
- package/docs/package.json +3 -2
- package/package.json +1 -1
- package/src/index.ts +22 -24
- package/vitest.config.ts.timestamp-1723424289354-74cf8d2d72cb7.mjs +162 -0
- package/docs/docs/.vitepress/dist/assets/chunks/framework.CEhE-9HF.js +0 -1
- package/docs/docs/.vitepress/dist/assets/chunks/theme.CldUEgAJ.js +0 -1
- package/docs/docs/.vitepress/dist/assets/index.md.B1vDz5mb.js +0 -1
- package/docs/docs/.vitepress/dist/assets/index.md.B1vDz5mb.lean.js +0 -1
- package/docs/docs/.vitepress/dist/assets/pages_getting-started.md.C7qtPEWU.js +0 -8
- package/docs/docs/.vitepress/dist/assets/pages_getting-started.md.C7qtPEWU.lean.js +0 -1
- package/docs/docs/.vitepress/dist/assets/pages_introduction.md.Dkqu-XCz.js +0 -1
- package/docs/docs/.vitepress/dist/assets/pages_introduction.md.Dkqu-XCz.lean.js +0 -1
- package/docs/docs/.vitepress/dist/assets/pages_usage.md.qo7ICfLC.js +0 -17
- package/docs/docs/.vitepress/dist/assets/pages_usage.md.qo7ICfLC.lean.js +0 -17
|
@@ -6,19 +6,20 @@
|
|
|
6
6
|
<title>What is Infinite Vue (ivue) ? | VitePress</title>
|
|
7
7
|
<meta name="description" content="A VitePress site">
|
|
8
8
|
<meta name="generator" content="VitePress v1.3.2">
|
|
9
|
-
<link rel="preload stylesheet" href="/ivue/assets/style.
|
|
9
|
+
<link rel="preload stylesheet" href="/ivue/assets/style.DamVQLpl.css" as="style">
|
|
10
10
|
|
|
11
|
-
<script type="module" src="/ivue/assets/app.
|
|
11
|
+
<script type="module" src="/ivue/assets/app.CbDr3eFe.js"></script>
|
|
12
12
|
<link rel="preload" href="/ivue/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
|
|
13
|
-
<link rel="modulepreload" href="/ivue/assets/chunks/theme.
|
|
14
|
-
<link rel="modulepreload" href="/ivue/assets/chunks/framework.
|
|
15
|
-
<link rel="modulepreload" href="/ivue/assets/
|
|
13
|
+
<link rel="modulepreload" href="/ivue/assets/chunks/theme.DSY3Mj9W.js">
|
|
14
|
+
<link rel="modulepreload" href="/ivue/assets/chunks/framework.CNtPHGsN.js">
|
|
15
|
+
<link rel="modulepreload" href="/ivue/assets/chunks/Button.vue_vue_type_script_setup_true_lang.P7niV-n8.js">
|
|
16
|
+
<link rel="modulepreload" href="/ivue/assets/pages_introduction.md.UHEKhynF.lean.js">
|
|
16
17
|
<script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
|
|
17
18
|
<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
|
|
18
19
|
</head>
|
|
19
20
|
<body>
|
|
20
|
-
<div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar top" data-v-ae24b3ad data-v-6aa21345><div class="wrapper" data-v-6aa21345><div class="container" data-v-6aa21345><div class="title" data-v-6aa21345><div class="VPNavBarTitle has-sidebar" data-v-6aa21345 data-v-ab179fa1><a class="title" href="/ivue/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>ivue ∞ Infinite Vue</span><!--[--><!--]--></a></div></div><div class="content" data-v-6aa21345><div class="content-body" data-v-6aa21345><!--[--><!--]--><div class="VPNavBarSearch search" data-v-6aa21345><!----></div><!----><!----><div class="VPNavBarAppearance appearance" data-v-6aa21345 data-v-6c893767><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-6c893767 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-6aa21345 data-v-bb2aa2f0 data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-b98bc113><!----><!--[--><!--[--><!----><div class="group" data-v-bb2aa2f0><div class="item appearance" data-v-bb2aa2f0><p class="label" data-v-bb2aa2f0>Appearance</p><div class="appearance-action" data-v-bb2aa2f0><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-bb2aa2f0 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-6aa21345 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-6aa21345><div class="divider-line" data-v-6aa21345></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-17a5e62e><button data-v-17a5e62e>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-319d5ca6><div class="curtain" data-v-319d5ca6></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-319d5ca6><span class="visually-hidden" id="sidebar-aria-label" data-v-319d5ca6> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible has-active" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Guide</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/introduction.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>What is ivue?</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/how-it-works.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>How it works?</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/getting-started.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Getting Started</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Usage</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Basic Usage</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Class Inheritance</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Props</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Emits</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Composables</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Define Expose</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Extend Slots</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Functions</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/api/init.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>ivue</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/api/init.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>.toRefs()</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/api/propsWithDefaults.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>propsWithDefaults</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Utility Types</h2><!----></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/types/UnwrapComposable.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>UnwrapComposable</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/types/ExtractEmitTypes.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>ExtractEmitTypes</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/types/ExtractPropDefaultTypes.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>ExtractPropDefaultTypes</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/types/ExtendSlots.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>ExtendSlots</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-3f215769 data-v-a5bbad30><div class="content" data-v-a5bbad30><div class="outline-marker" data-v-a5bbad30></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-a5bbad30>On this page</div><ul class="VPDocOutlineItem root" data-v-a5bbad30 data-v-b933a997><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _ivue_pages_introduction" data-v-39a288b8><div><h1 id="what-is-infinite-vue-ivue" tabindex="-1">What is Infinite Vue (ivue) ? <a class="header-anchor" href="#what-is-infinite-vue-ivue" aria-label="Permalink to "What is Infinite Vue (ivue) ?""></a></h1><h2 id="the-purpose-of-infinite-vue" tabindex="-1">The Purpose of Infinite Vue <a class="header-anchor" href="#the-purpose-of-infinite-vue" aria-label="Permalink to "The Purpose of Infinite Vue""></a></h2><p>With the development of React hooks and Vue following in its footsteps with introduction of Vue 3 Composition API, the ecosystem has moved away from Options API.</p><p>While providing greater flexibility and composability the Composition API has its own downsides, one of them is having to use <code>.value</code> to refer to the reactive variables which makes the development process more clunky when the App reaches a certain size.</p><p>As some of you may know, <code>reactvity-transform</code> macros were an attempt to mitigate those issues, which turned out to create even more issues, and was discontinued.</p><p>See: <a href="https://vuejs.org/guide/extras/reactivity-transform.html" target="_blank" rel="noreferrer">https://vuejs.org/guide/extras/reactivity-transform.html</a></p><div class="info custom-block"><p class="custom-block-title">IVUE UNIFIES COMPOSITION & OPTIONS API VIA CLASS BASED ARCHITECTURE</p><p>— ivue mitigates the downsides of both Composition API and Options API, uses only their strengths and brings back Object Oriented Programming to allow the development of complex and scallable apps.</p><p>— ivue is fully interoperable with Composition API and does not work against it but rather with it, so you can use all of ecosystems composables seamlessly.</p><p>— ivue also offers a set of functions and utility types to make extensible & exportable props defaults, extensible emits and extensible slots possible.</p></div><h2 id="classes-are-back-with-full-vue-3-compatibility-beyond" tabindex="-1">Classes are Back with Full Vue 3 Compatibility & Beyond <a class="header-anchor" href="#classes-are-back-with-full-vue-3-compatibility-beyond" aria-label="Permalink to "Classes are Back with Full Vue 3 Compatibility & Beyond""></a></h2><p>With failed implementations of classes in React and also failed implementations using class components in Vue 2 / 3, the ecosystem decided that classes are bad and moved to pure procedural designs, while procedural programming has its strength, it also comes with its own weaknesses, like lack of inheritance and true composition.</p><div class="info custom-block"><p class="custom-block-title">IVUE IS DIFFERENT</p><p>— ivue does NOT inherit from a base class<br> — ivue does NOT use decorators to achieve its objectives<br> — ivue does NOT alter Vue 3 underlying behavior<br> — ivue is NOT class components (though you can build components with it)<br></p></div><h2 id="infinite-vue-achitecture" tabindex="-1">Infinite Vue Achitecture <a class="header-anchor" href="#infinite-vue-achitecture" aria-label="Permalink to "Infinite Vue Achitecture""></a></h2><p>ivue mimicks native JavaScript / TypeScript class implementation by extending descriptors up the whole prototype chain thus supporting classical inheritance.</p><p>By using TypeScript we are able to infer the arguments of the main <code>ivue</code> initializer function and pass the arguments to the constructor.</p><p><code>ivue</code> initializer function returns a reactive object with getters converted to computeds and adds <code>.toRefs()</code> method to the object, <code>.toRefs()</code> allows the object to be converted to native composable structure, so it can interoperate as a composable if needed.</p><h2 id="when-to-use-infinite-vue" tabindex="-1">When to use Infinite Vue? <a class="header-anchor" href="#when-to-use-infinite-vue" aria-label="Permalink to "When to use Infinite Vue?""></a></h2><p>When complexity of your app or components becomes very high using <strong>ivue</strong> can become a natural choice to deal with that complexity. Because there is no <code>.value</code> in ivue, everything is simply a reactive object of unwrapped Refs.</p></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-e257564d><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-e257564d><span class="visually-hidden" id="doc-footer-aria-label" data-v-e257564d>Pager</span><div class="pager" data-v-e257564d><!----></div><div class="pager" data-v-e257564d><a class="VPLink link pager-link next" href="/ivue/pages/how-it-works.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Next page</span><span class="title" data-v-e257564d>How it works?</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
|
|
21
|
-
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api_ivue.md\":\"
|
|
21
|
+
<div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar top" data-v-ae24b3ad data-v-6aa21345><div class="wrapper" data-v-6aa21345><div class="container" data-v-6aa21345><div class="title" data-v-6aa21345><div class="VPNavBarTitle has-sidebar" data-v-6aa21345 data-v-ab179fa1><a class="title" href="/ivue/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>ivue ∞ Infinite Vue</span><!--[--><!--]--></a></div></div><div class="content" data-v-6aa21345><div class="content-body" data-v-6aa21345><!--[--><!--]--><div class="VPNavBarSearch search" data-v-6aa21345><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><!----><!----><div class="VPNavBarAppearance appearance" data-v-6aa21345 data-v-6c893767><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-6c893767 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-6aa21345 data-v-bb2aa2f0 data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-b98bc113><!----><!--[--><!--[--><!----><div class="group" data-v-bb2aa2f0><div class="item appearance" data-v-bb2aa2f0><p class="label" data-v-bb2aa2f0>Appearance</p><div class="appearance-action" data-v-bb2aa2f0><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-bb2aa2f0 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-6aa21345 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-6aa21345><div class="divider-line" data-v-6aa21345></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-17a5e62e><button data-v-17a5e62e>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-319d5ca6><div class="curtain" data-v-319d5ca6></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-319d5ca6><span class="visually-hidden" id="sidebar-aria-label" data-v-319d5ca6> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible has-active" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Guide</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/introduction.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>What is ivue?</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/how-it-works.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>How it works?</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/getting-started.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Getting Started</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Usage</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Basic Usage</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Props</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Emits</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Refs</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Define Expose</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Using Composables</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Advanced Usage</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Extensible Classes</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Extensible Props</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Extensible Emits</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Extensible Slots</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/pages/usage.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>Extensible Components</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Core Functions</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/api/init.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>ivue</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/api/init.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>.init()</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/api/init.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>.toRefs()</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 collapsible" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Utility Functions</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b7550ba0><span class="vpi-chevron-right caret-icon" data-v-b7550ba0></span></div></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/api/propsWithDefaults.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>propsWithDefaults</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>Utility Types</h2><!----></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/types/ExtractPropDefaultTypes.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>ExtractPropDefaultTypes</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/types/ExtractEmitTypes.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>ExtractEmitTypes</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/types/ExtendSlots.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>ExtendSlots</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/ivue/types/UnwrapComposable.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>UnwrapComposable</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-3f215769 data-v-a5bbad30><div class="content" data-v-a5bbad30><div class="outline-marker" data-v-a5bbad30></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-a5bbad30>On this page</div><ul class="VPDocOutlineItem root" data-v-a5bbad30 data-v-b933a997><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _ivue_pages_introduction" data-v-39a288b8><div><h1 id="what-is-infinite-vue-ivue" tabindex="-1">What is Infinite Vue (ivue) ? <a class="header-anchor" href="#what-is-infinite-vue-ivue" aria-label="Permalink to "What is Infinite Vue (ivue) ?""></a></h1><h2 id="the-problem-ivue-aims-to-solve" tabindex="-1">The Problem <code>ivue</code> Aims to Solve <a class="header-anchor" href="#the-problem-ivue-aims-to-solve" aria-label="Permalink to "The Problem `ivue` Aims to Solve""></a></h2><p>With the development of React hooks and Vue following in its footsteps with introduction of Vue 3 Composition API, the ecosystem has moved away from Options API.</p><p>While providing greater flexibility and composability the Composition API has its own downsides, one of them is having to use <code>.value</code> to refer to the reactive variables which makes the development process more clunky when the App reaches a certain size.</p><p>As some of you may know, <code>reactvity-transform</code> macros were an attempt to mitigate those issues, which turned out to create even more issues, and was discontinued.</p><p>See: <a href="https://vuejs.org/guide/extras/reactivity-transform.html" target="_blank" rel="noreferrer">https://vuejs.org/guide/extras/reactivity-transform.html</a></p><div class="info custom-block"><p class="custom-block-title">IVUE UNIFIES COMPOSITION & OPTIONS API VIA CLASS BASED ARCHITECTURE</p><p>— <code>ivue</code> mitigates the downsides of both Composition API and Options API, uses only their strengths and brings back Object Oriented Programming to allow the development of complex and scallable apps.</p><p>— <code>ivue</code> is fully interoperable with Composition API and does not work against it but rather with it, so you can use all of ecosystems composables seamlessly.</p><p>— <code>ivue</code> also offers a set of functions and utility types to make extensible & exportable props defaults, extensible emits and extensible slots possible.</p></div><h2 id="classes-are-back-with-full-vue-3-compatibility-beyond" tabindex="-1">Classes are Back with Full Vue 3 Compatibility & Beyond <a class="header-anchor" href="#classes-are-back-with-full-vue-3-compatibility-beyond" aria-label="Permalink to "Classes are Back with Full Vue 3 Compatibility & Beyond""></a></h2><p>With failed implementations of classes in React and also failed implementations using class components in Vue 2 / 3, the ecosystem decided that classes are bad and moved to pure procedural designs.</p><p>While procedural programming has its strength, it also comes with its own weaknesses, like lack of inheritance and true composition.</p><div class="info custom-block"><p class="custom-block-title">IVUE IS DIFFERENT</p><p>— <code>ivue</code> does NOT inherit from a base class<br> — <code>ivue</code> does NOT use decorators to achieve its objectives<br> — <code>ivue</code> does NOT alter Vue 3 underlying behavior<br> — <code>ivue</code> is NOT the same as class components (though you can build components with it)<br></p></div><h2 id="infinite-vue-achitecture" tabindex="-1">Infinite Vue Achitecture <a class="header-anchor" href="#infinite-vue-achitecture" aria-label="Permalink to "Infinite Vue Achitecture""></a></h2><p><code>ivue</code> mimicks native JavaScript / TypeScript class implementation by extending descriptors (getters and setters) up the whole prototype chain thus supporting classical inheritance.</p><p>By using TypeScript we are able to infer the arguments of the main <code>ivue</code> initializer function and pass the arguments to the constructor.</p><p><code>ivue</code> initializer function returns a reactive object with getters converted to computeds and adds <code>.toRefs()</code> method to the object, <code>.toRefs()</code> allows the object to be converted to native composable structure, so it can interoperate as a composable if needed.</p><p><code>ivue</code> aims to be opaque and minimal, just doing the minimum to convert a class to a reactive object, leaving the rest to be implemented using Vue 3 composition api inside an initializer function called <code>.init()</code></p><p>You can read more about <code>ivue</code> internal architecture in <a href="/ivue/pages/how-it-works" style="inline:true;">How it works?</a> page.</p><h2 id="when-to-use-infinite-vue" tabindex="-1">When to use Infinite Vue? <a class="header-anchor" href="#when-to-use-infinite-vue" aria-label="Permalink to "When to use Infinite Vue?""></a></h2><p>When complexity of your app or components becomes very high using <code>ivue</code> can become a natural choice to deal with that complexity. Because <code>.value</code> is abstracted away in <code>ivue</code>, everything is simply a reactive object of unwrapped Refs.</p></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-e257564d><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-e257564d><span class="visually-hidden" id="doc-footer-aria-label" data-v-e257564d>Pager</span><div class="pager" data-v-e257564d><!----></div><div class="pager" data-v-e257564d><a class="VPLink link pager-link next" href="/ivue/pages/how-it-works.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Next page</span><span class="title" data-v-e257564d>How it works?</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
|
|
22
|
+
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api_ivue.md\":\"MRwb9Lcb\",\"api_propswithdefaults.md\":\"CeE4IC-K\",\"index.md\":\"CktQD561\",\"pages_getting-started.md\":\"COGFS1PH\",\"pages_how-it-works.md\":\"DEn1nBQc\",\"pages_introduction.md\":\"UHEKhynF\",\"pages_usage.md\":\"B75xObUi\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"VitePress\",\"description\":\"A VitePress site\",\"base\":\"/ivue/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"ivue ∞ Infinite Vue\",\"search\":{\"provider\":\"local\"},\"sidebar\":[{\"collapsed\":false,\"text\":\"Guide\",\"items\":[{\"text\":\"What is ivue?\",\"link\":\"/pages/introduction\"},{\"text\":\"How it works?\",\"link\":\"/pages/how-it-works\"},{\"text\":\"Getting Started\",\"link\":\"/pages/getting-started\"}]},{\"collapsed\":false,\"text\":\"Usage\",\"items\":[{\"text\":\"Basic Usage\",\"link\":\"/pages/usage\"},{\"text\":\"Using Props\",\"link\":\"/pages/usage\"},{\"text\":\"Using Emits\",\"link\":\"/pages/usage\"},{\"text\":\"Using Refs\",\"link\":\"/pages/usage\"},{\"text\":\"Using Define Expose\",\"link\":\"/pages/usage\"},{\"text\":\"Using Composables\",\"link\":\"/pages/usage\"}]},{\"collapsed\":false,\"text\":\"Advanced Usage\",\"items\":[{\"text\":\"Extensible Classes\",\"link\":\"/pages/usage\"},{\"text\":\"Extensible Props\",\"link\":\"/pages/usage\"},{\"text\":\"Extensible Emits\",\"link\":\"/pages/usage\"},{\"text\":\"Extensible Slots\",\"link\":\"/pages/usage\"},{\"text\":\"Extensible Components\",\"link\":\"/pages/usage\"}]},{\"collapsed\":false,\"text\":\"Core Functions\",\"items\":[{\"text\":\"ivue\",\"link\":\"/api/init\"},{\"text\":\".init()\",\"link\":\"/api/init\"},{\"text\":\".toRefs()\",\"link\":\"/api/init\"}]},{\"collapsed\":false,\"text\":\"Utility Functions\",\"items\":[{\"text\":\"propsWithDefaults\",\"link\":\"/api/propsWithDefaults\"}]},{\"text\":\"Utility Types\",\"items\":[{\"text\":\"ExtractPropDefaultTypes\",\"link\":\"/types/ExtractPropDefaultTypes\"},{\"text\":\"ExtractEmitTypes\",\"link\":\"/types/ExtractEmitTypes\"},{\"text\":\"ExtendSlots\",\"link\":\"/types/ExtendSlots\"},{\"text\":\"UnwrapComposable\",\"link\":\"/types/UnwrapComposable\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
|
|
22
23
|
|
|
23
24
|
</body>
|
|
24
25
|
</html>
|