{"template":{"name":"#### template","description":"","attribute":"##### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| lang | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"web\"}],\"rows\":[[\"3.9\",\"x\",\"4.0\"]]}' /> | |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| html | - | html |\n@| pug | - | 仅 Web 端支持 |","event":"","example":"","compatibility":"\n##### 兼容性\n| Android | iOS | web |\n| :- | :- | :- |\n| 3.9 | 4.11 | 4.0 |\n","children":"","reference":""},"slot":{"name":"#### slot","description":"> 组件类型：string \n\n \\<slot> 元素作为组件模板之中的内容分发插槽。\\<slot> 元素自身将被替换。","attribute":"##### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| name | string | - | - | 用于命名插槽。 |","event":"","example":"","compatibility":"\n##### 兼容性\n| Android | iOS | web |\n| :- | :- | :- |\n| 3.9 | 4.11 | 4.0 |\n","children":"","reference":"\n##### 参见\n- [Reference](https://v3.cn.vuejs.org/api/built-in-components.html#slot)\n"},"script":{"name":"#### script","description":"","attribute":"##### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| setup | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"web\"}],\"rows\":[[\"4.0\",\"4.11\",\"4.0\"]]}' /> | - |\n| lang | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"web\"}],\"rows\":[[\"4.0\",\"4.11\",\"4.0\"]]}' /> | |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| uts | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"web\"}],\"rows\":[[\"4.0\",\"4.11\",\"4.0\"]]}' /> | uts |","event":"","example":"","compatibility":"\n##### 兼容性\n| Android | iOS | web |\n| :- | :- | :- |\n| 3.9 | 4.11 | 4.0 |\n","children":"","reference":""},"style":{"name":"#### style","description":"","attribute":"##### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| lang | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"web\"}],\"rows\":[[\"3.9\",\"4.11\",\"4.0\"]]}' /> | |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| scss | - | - |\n@| less | - | - |\n@| stylus | - | - |\n| scoped | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"web\"}],\"rows\":[[\"x\",\"x\",\"4.0\"]]}' /> | - |\n| module | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"web\"}],\"rows\":[[\"x\",\"x\",\"4.0\"]]}' /> | - |","event":"","example":"","compatibility":"\n##### 兼容性\n| Android | iOS | web |\n| :- | :- | :- |\n| 3.9 | 4.11 | 4.0 |\n","children":"","reference":""},"keep-alive":{"name":"#### keep-alive","description":"> 组件类型：string \n\n \\<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 \\<transition> 相似，\\<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。","attribute":"##### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| include | string | - | - | 字符串或正则表达式。只有名称匹配的组件会被缓存。 |\n| exclude | string | - | - | 字符串或正则表达式。任何名称匹配的组件都不会被缓存。 |\n| max | string | - | - | 最多可以缓存多少组件实例。 |","event":"","example":"","compatibility":"\n##### 兼容性\n| Android | iOS | web |\n| :- | :- | :- |\n| 4.0 | 4.11 | 4.0 |\n","children":"","reference":"\n##### 参见\n- [Reference](https://v3.cn.vuejs.org/api/built-in-components.html#keep-alive)\n"},"component":{"name":"#### component","description":"> 组件类型：string \n\n 渲染一个“元组件”为动态组件。依 is 的值，来决定哪个组件被渲染。","attribute":"##### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| is | Any | - | - | - |\n| inline-template | Any | - | - | - |","event":"","example":"","compatibility":"\n##### 兼容性\n| Android | iOS | web |\n| :- | :- | :- |\n| 3.99 | 4.11 | 4.0 |\n","children":"","reference":"\n##### 参见\n- [Reference](https://v3.cn.vuejs.org/api/built-in-components.html#component)\n"},"transition":{"name":"#### transition","description":"> 组件类型：string \n\n \\<transition> 元素作为单个元素/组件的过渡效果。\\<transition> 只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在检测过的组件层级中。","attribute":"##### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| name | string | - | - | 用于自动生成 CSS 过渡类名。例如：name: 'fade' 将自动拓展为.fade-enter，.fade-enter-active等。默认类名为 \"v\" |\n| appear | string(true \\| false) | - | - | 是否在初始渲染时使用过渡。默认为 false。 |\n| css | string(true \\| false) | - | - | 是否使用 CSS 过渡类。默认为 true。如果设置为 false，将只通过组件事件触发注册的 JavaScript 钩子。 |\n| type | string | - | - | 指定过渡事件类型，侦听过渡何时结束。有效值为 \"transition\" 和 \"animation\"。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。 |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| transition | - | - |\n@| animation | - | - |\n| mode | string | - | - | 控制离开/进入的过渡时间序列。有效的模式有 \"out-in\" 和 \"in-out\"；默认同时生效。 |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| out-in | - | - |\n@| in-out | - | - |\n| duration | string | - | - | 指定过渡的持续时间。默认情况下，Vue 会等待过渡所在根元素的第一个 transitionend 或 animationend 事件。 |\n| enter-class | Any | - | - | - |\n| leave-class | Any | - | - | - |\n| appear-class | Any | - | - | - |\n| enter-to-class | Any | - | - | - |\n| leave-to-class | Any | - | - | - |\n| appear-to-class | Any | - | - | - |\n| enter-active-class | Any | - | - | - |\n| leave-active-class | Any | - | - | - |\n| appear-active-class | Any | - | - | - |\n| @before-enter | Any | - | - | - |\n| @before-leave | Any | - | - | - |\n| @before-appear | Any | - | - | - |\n| @enter | Any | - | - | - |\n| @leave | Any | - | - | - |\n| @appear | Any | - | - | - |\n| @after-enter | Any | - | - | - |\n| @after-leave | Any | - | - | - |\n| @after-appear | Any | - | - | - |\n| @enter-cancelled | Any | - | - | - |\n| @leave-cancelled | string | - | - | v-show only |\n| @appear-cancelled | Any | - | - | - |","event":"","example":"","compatibility":"\n##### 兼容性\n| Android | iOS | web |\n| :- | :- | :- |\n| x | x | 4.0 |\n","children":"","reference":"\n##### 参见\n- [Reference](https://v3.cn.vuejs.org/api/built-in-components.html#transition)\n"},"transition-group":{"name":"#### transition-group","description":"> 组件类型：string \n\n \\<transition-group> 元素作为多个元素/组件的过渡效果。\\<transition-group> 渲染一个真实的 DOM 元素。默认渲染 \\<span>，可以通过 tag 属性配置哪个元素应该被渲染。","attribute":"##### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| tag | string | - | - | 默认为 span。 |\n| move-class | string | - | - | 覆盖移动过渡期间应用的 CSS 类。 |\n| name | string | - | - | 用于自动生成 CSS 过渡类名。例如：name: 'fade' 将自动拓展为.fade-enter，.fade-enter-active等。默认类名为 \"v\" |\n| appear | string(true \\| false) | - | - | 是否在初始渲染时使用过渡。默认为 false。 |\n| css | string(true \\| false) | - | - | 是否使用 CSS 过渡类。默认为 true。如果设置为 false，将只通过组件事件触发注册的 JavaScript 钩子。 |\n| type | string | - | - | 指定过渡事件类型，侦听过渡何时结束。有效值为 \"transition\" 和 \"animation\"。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。 |\n@| 值名称 | 兼容性 | 描述 |\n@| :- | :-: | :- |\n@| transition | - | - |\n@| animation | - | - |\n| mode | Any | - | - | - |\n| duration | string | - | - | 指定过渡的持续时间。默认情况下，Vue 会等待过渡所在根元素的第一个 transitionend 或 animationend 事件。 |\n| enter-class | Any | - | - | - |\n| leave-class | Any | - | - | - |\n| appear-class | Any | - | - | - |\n| enter-to-class | Any | - | - | - |\n| leave-to-class | Any | - | - | - |\n| appear-to-class | Any | - | - | - |\n| enter-active-class | Any | - | - | - |\n| leave-active-class | Any | - | - | - |\n| appear-active-class | Any | - | - | - |\n| @before-enter | Any | - | - | - |\n| @before-leave | Any | - | - | - |\n| @before-appear | Any | - | - | - |\n| @enter | Any | - | - | - |\n| @leave | Any | - | - | - |\n| @appear | Any | - | - | - |\n| @after-enter | Any | - | - | - |\n| @after-leave | Any | - | - | - |\n| @after-appear | Any | - | - | - |\n| @enter-cancelled | Any | - | - | - |\n| @leave-cancelled | string | - | - | v-show only |\n| @appear-cancelled | Any | - | - | - |","event":"","example":"","compatibility":"\n##### 兼容性\n| Android | iOS | web |\n| :- | :- | :- |\n| x | x | 4.0 |\n","children":"","reference":"\n##### 参见\n- [Reference](https://v3.cn.vuejs.org/api/built-in-components.html#transition-group)\n"},"teleport":{"name":"#### teleport","description":"> 组件类型：string \n\n Teleport 提供了一种干净的方法，允许我们控制在 DOM 中哪个父节点下呈现 HTML，而不必求助于全局状态或将其拆分为两个组件。","attribute":"##### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :-: | :- |\n| to | string | - | - | 必须是有效的查询选择器或 HTMLElement (如果在浏览器环境中使用)。指定将在其中移动 \\<teleport> 内容的目标元素 |\n| disabled | boolean | - | - | 此可选属性可用于禁用 \\<teleport> 的功能，这意味着其插槽内容将不会移动到任何位置，而是在您在周围父组件中指定了 \\<teleport> 的位置渲染。 |","event":"","example":"","compatibility":"\n##### 兼容性\n| Android | iOS | web |\n| :- | :- | :- |\n| 4.0 | 4.11 | 4.0 |\n","children":"","reference":"\n##### 参见\n- [Reference](https://v3.vuejs.org/api/built-in-components.html#teleport)\n"},"application":{"compatibility":"| | Android | iOS | web |\n| :- | :- | :- | :- |\n| createApp() | √ | 4.11 | 4.0 |\n| createSSRApp() | √ | 4.11 | 4.0 |\n| app.mount() | √ | 4.11 | 4.0 |\n| app.unmount() | √ | 4.11 | 4.0 |\n| app.component() | √ | 4.11 | 4.0 |\n| app.directive() | - | - | - |\n| app.use() | 3.99 | 4.11 | 4.0 |\n| app.mixin() | 3.99 | 4.11 | 4.0 |\n| app.provide() | 3.99 | 4.11 | 4.0 |\n| app.runWithContext() | - | - | - |\n| app.version | √ | 4.11 | 4.0 |\n| app.config | - | - | - |\n| app.config.errorHandler | x | 4.11 | 4.0 |\n| app.config.warnHandler | - | - | - |\n| app.config.performance | - | - | - |\n| app.config.compilerOptions | - | - | - |\n| app.config.globalProperties | 3.99 | 4.11 | 4.0 |\n| app.config.optionMergeStrategies | - | - | - |","example":""},"general":{"compatibility":"| | Android | iOS | web |\n| :- | :- | :- | :- |\n| version | √ | 4.11 | 4.0 |\n| nextTick() | √ | 4.11 | 4.0 |\n| defineComponent() | x | x | 4.0 |\n| defineAsyncComponent() | - | - | - |\n| defineCustomElement() | - | - | - |","example":""},"reactivity_core":{"compatibility":"| | Android | iOS | web |\n| :- | :- | :- | :- |\n| ref() | √ | 4.11 | 4.0 |\n| computed() | - | - | - |\n| reactive() | √ | 4.11 | 4.0 |\n| readonly() | 4.0 | 4.11 | 4.0 |\n| watchEffect() | 4.0 | 4.11 | 4.0 |\n| watchPostEffect() | 4.0 | 4.11 | 4.0 |\n| watchSyncEffect() | 4.0 | 4.11 | 4.0 |\n| watch() | 4.0 | 4.11 | 4.0 |","example":""},"reactivity_utilities":{"compatibility":"| | Android | iOS | web |\n| :- | :- | :- | :- |\n| isRef() | 4.0 | 4.11 | 4.0 |\n| unref() | 4.0 | 4.11 | 4.0 |\n| toRef() | 4.0 | 4.11 | 4.11 |\n| toValue() | 4.0 | 4.11 | 4.11 |\n| toRefs() | 4.0 | 4.11 | 4.11 |\n| isProxy() | 4.0 | 4.11 | 4.0 |\n| isReactive() | 4.0 | 4.11 | 4.0 |\n| isReadonly() | 4.0 | 4.11 | 4.0 |","example":""},"reactivity_advanced":{"compatibility":"| | Android | iOS | web |\n| :- | :- | :- | :- |\n| shallowRef() | 4.0 | 4.11 | 4.0 |\n| triggerRef() | 4.0 | 4.11 | x |\n| customRef() | 4.0 | 4.11 | 4.0 |\n| shallowReactive() | 4.0 | 4.11 | 4.0 |\n| shallowReadonly() | 4.0 | 4.11 | 4.0 |\n| toRaw() | 4.0 | 4.11 | 4.0 |\n| markRaw() | - | - | - |\n| effectScope() | 4.0 | 4.11 | 4.0 |\n| getCurrentScope() | 4.0 | 4.11 | 4.0 |\n| onScopeDispose() | 4.0 | 4.11 | 4.0 |","example":""},"composition_lifecycle":{"compatibility":"| | Android | iOS | web | 描述 |\n| :- | :- | :- | :- | :- |\n| onMounted() | 4.0 | 4.11 | 4.0 | el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。<br/>如果 root 实例挂载了一个文档内元素，当 onMounted 被调用时 vm.$el 也在文档内。 |\n| onUpdated() | 4.0 | 4.11 | 4.0 | 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。 |\n| onUnmounted() | 4.0 | 4.11 | 4.0 | 卸载组件实例后调用。<br/>调用此钩子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被卸载。 |\n| onBeforeMount() | 4.0 | 4.11 | 4.0 | 在挂载开始之前被调用：相关的 render 函数首次被调用。 |\n| onBeforeUpdate() | 4.0 | 4.11 | 4.0 | 数据更新时调用，发生在虚拟 DOM 打补丁之前。<br/>这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。 |\n| onBeforeUnmount() | 4.0 | 4.11 | 4.0 | 在卸载组件实例之前调用。在这个阶段，实例仍然是完全正常的。 |\n| onErrorCaptured() | x | x | x | 注册一个钩子，在捕获了后代组件传递的错误时调用。 |\n| onRenderTracked() | x | x | x | 注册一个调试钩子，当组件渲染过程中追踪到响应式依赖时调用。 |\n| onRenderTriggered() | x | x | x | 注册一个调试钩子，当响应式依赖的变更触发了组件渲染时调用。 |\n| onActivated() | x | x | 4.0 | keep-alive 组件激活时调用。 |\n| onDeactivated() | x | x | 4.0 | keep-alive 组件停用时调用。 |\n| onServerPrefetch() | x | x | x | 注册一个异步函数，在组件实例在服务器上被渲染之前调用。<br/>如果这个钩子返回了一个 Promise，服务端渲染会在渲染该组件前等待该 Promise 完成。<br/>这个钩子仅会在服务端渲染中执行，可以用于执行一些仅存在于服务端的数据抓取过程。 |","example":""},"composition_injection":{"compatibility":"| | Android | iOS | web |\n| :- | :- | :- | :- |\n| provide() | 4.0 | 4.11 | 4.0 |\n| inject() | - | - | - |\n| hasInjectionContext() | 4.0 | 4.11 | 4.11 |","example":""},"options_state":{"compatibility":"| | Android | iOS | web |\n| :- | :- | :- | :- |\n| data | 3.9 | 4.11 | 4.0 |\n| props | 3.9 | 4.11 | 4.0 |\n| computed | 3.9 | 4.11 | 4.0 |\n| methods | 3.9 | 4.11 | 4.0 |\n| watch | 3.9 | 4.11 | 4.0 |\n| emits | 3.9 | 4.11 | 4.0 |\n| expose | x | x | 4.0 |","example":""},"options_rendering":{"compatibility":"| | Android | iOS | web |\n| :- | :- | :- | :- |\n| template | - | - | - |\n| render | 3.9 | 4.11 | 4.0 |\n| compilerOptions | - | - | - |\n| slots | 3.9 | 4.11 | 4.0 |","example":""},"options_lifecycle":{"compatibility":"| | Android | iOS | web | 描述 |\n| :- | :- | :- | :- | :- |\n| beforeCreate | 3.9 | 4.11 | 4.0 | 在组件实例初始化完成之后立即调用。<br/>在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 |\n| created | 3.9 | 4.11 | 4.0 | 在组件实例处理完所有与状态相关的选项后调用。<br/>在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。<br/>然而，此时挂载阶段还未开始，因此 $el 属性仍不可用。 |\n| beforeMount | 3.9 | 4.11 | 4.0 | 在组件被挂载之前调用。<br/>相关的 render 函数首次被调用。<br/>当这个钩子被调用时，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点。<br/>它即将首次执行 DOM 渲染过程。 |\n| mounted | 3.9 | 4.11 | 4.0 | 在组件被挂载之后调用。<br/>el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。<br/>如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。 |\n| beforeUpdate | 3.9 | 4.11 | 4.0 | 在组件即将因为一个响应式状态变更而更新其 DOM 树之前调用。<br/>数据更新时调用，发生在虚拟 DOM 打补丁之前。<br/>这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。 |\n| updated | 3.9 | 4.11 | 4.0 | 在组件因为一个响应式状态变更而更新其 DOM 树之后调用。<br/>父组件的更新钩子将在其子组件的更新钩子之后调用。<br/>这个钩子会在组件的任意 DOM 更新后被调用，这些更新可能是由不同的状态变更导致的。<br/>如果你需要在某个特定的状态更改后访问更新后的 DOM，请使用 nextTick() 作为替代。 |\n| beforeUnmount | 3.9 | 4.11 | 4.0 | 在一个组件实例被卸载之前调用。<br/>当这个钩子被调用时，组件实例依然还保有全部的功能。 |\n| unmounted | 3.9 | 4.11 | 4.0 | 在一个组件实例被卸载之后调用。<br/>可以在这个钩子中手动清理一些副作用，例如计时器、DOM 事件监听器或者与服务器的连接。 |\n| errorCaptured | x | x | 4.0 | 在捕获了后代组件传递的错误时调用。<br/>这个钩子带有三个实参：错误对象、触发该错误的组件实例，以及一个说明错误来源类型的信息字符串。<br/>这个钩子可以通过返回 false 来阻止错误继续向上传递。 |\n| renderTracked | x | x | 4.0 | 在一个响应式依赖被组件的渲染作用追踪后调用。<br/>跟踪虚拟 DOM 重新渲染时调用。钩子接收 debugger event 作为参数。<br/>此事件告诉你哪个操作跟踪了组件以及该操作的目标对象和键。 |\n| renderTriggered | x | x | 4.0 | 在一个响应式依赖被组件触发了重新渲染之后调用。<br/>当虚拟 DOM 重新渲染为 triggered.Similarly 为renderTracked，接收 debugger event 作为参数。<br/>此事件告诉你是什么操作触发了重新渲染，以及该操作的目标对象和键。 |\n| activated | 4.0 | 4.11 | 4.0 | 若组件实例是 \\<KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。<br/>keep-alive 组件激活时调用。 |\n| deactivated | 4.0 | 4.11 | 4.0 | 若组件实例是 \\<KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。<br/>keep-alive 组件停用时调用。 |\n| serverPrefetch | - | - | - | - |","example":""},"options_composition":{"compatibility":"| | Android | iOS | web |\n| :- | :- | :- | :- |\n| provide | 3.99 | 4.11 | 4.0 |\n| inject | 3.99 | 4.11 | 4.0 |\n| mixins | 3.99 | 4.11 | 4.0 |\n| extends | - | - | - |","example":""},"options_misc":{"compatibility":"| | Android | iOS | web |\n| :- | :- | :- | :- |\n| name | 3.9 | 4.11 | 4.0 |\n| inheritAttrs | 3.9 | 4.11 | 4.0 |\n| components | 3.9 | 4.11 | 4.0 |\n| directives | - | - | - |","example":""},"component_instance":{"compatibility":"| | Android | iOS | web |\n| :- | :- | :- | :- |\n| $data | √ | 4.11 | 4.0 |\n| $props | √ | 4.11 | 4.0 |\n| $el | √ | 4.11 | 4.0 |\n| $options | √ | 4.11 | 4.0 |\n| $parent | √ | 4.11 | 4.0 |\n| $root | √ | 4.11 | 4.0 |\n| $slots | √ | 4.11 | 4.0 |\n| $refs | √ | 4.11 | 4.0 |\n| $attrs | √ | 4.11 | 4.0 |\n| $watch() | √ | 4.11 | 4.0 |\n| $emit | √ | 4.11 | 4.0 |\n| $forceUpdate | √ | 4.11 | 4.0 |\n| $nextTick | √ | 4.11 | 4.0 |\n| $callMethod | √ | 4.11 | 4.0 |","example":""},"directives":{"compatibility":"| | Android | iOS | web |\n| :- | :- | :- | :- |\n| v-text | x | x | 4.0 |\n| v-html | 3.99 | x | 4.0 |\n| v-show | 3.9 | 4.11 | 4.0 |\n| v-if | 3.9 | 4.11 | 4.0 |\n| v-else | 3.9 | 4.11 | 4.0 |\n| v-else-if | 3.9 | 4.11 | 4.0 |\n| v-for | 3.9 | 4.11 | 4.0 |\n| v-on | 3.9 | 4.11 | 4.0 |\n| v-bind | 3.9 | 4.11 | 4.0 |\n| v-model | 3.9 | 4.11 | 4.0 |\n| v-slot | 3.9 | 4.11 | 4.0 |\n| v-pre | 3.99 | 4.11 | 4.0 |\n| v-once | 3.99 | 4.11 | x |\n| v-memo | 3.99 | 4.11 | x |\n| v-cloak | x | x | 4.0 |","example":""},"special_attributes":{"compatibility":"| | Android | iOS | web |\n| :- | :- | :- | :- |\n| key | 3.9 | 4.11 | 4.0 |\n| ref | 3.9 | 4.11 | 4.0 |\n| is | 3.99 | 4.11 | 4.0 |","example":""},"render_function":{"compatibility":"| | Android | iOS | web |\n| :- | :- | :- | :- |\n| h() | 3.99 | 4.11 | 4.0 |\n| mergeProps() | 4.0 | 4.11 | 4.0 |\n| cloneVNode() | 4.0 | x | 4.0 |\n| isVNode() | √ | 4.11 | 4.0 |\n| resolveComponent() | √ | 4.11 | 4.0 |\n| resolveDirective() | - | - | - |\n| withDirectives() | x | 4.11 | 4.0 |\n| withModifiers() | √ | 4.11 | 4.0 |","example":""},"single_file_component_script":{"compatibility":"| | Android | iOS | web |\n| :- | :- | :- | :- |\n| defineProps() | 4.0 | 4.11 | 4.0 |\n| defineEmits() | 4.0 | 4.11 | 4.0 |\n| defineModel() | 4.0 | 4.11 | 4.11 |\n| defineExpose() | 4.0 | 4.11 | 4.0 |\n| defineOptions() | 4.0 | 4.11 | 4.11 |\n| defineSlots() | 4.0 | 4.11 | 4.0 |\n| useSlots() | 4.0 | 4.11 | 4.0 |\n| useAttrs() | 4.0 | 4.11 | 4.0 |","example":""},"eventModifiers":{"stop":{"name":"### stop\n","description":"单击事件将停止传递","compatibility":"**兼容性** \n | Android | iOS | web |\n| :- | :- | :- |\n| 3.9 | 4.11 | 4.0 |"},"prevent":{"name":"### prevent\n","description":"提交事件将不再重新加载页面","compatibility":"**兼容性** \n | Android | iOS | web |\n| :- | :- | :- |\n| x | x | 4.0 |"},"capture":{"name":"### capture\n","description":"添加事件监听器时，使用 `capture` 捕获模式（例如：指向内部元素的事件，在被内部元素处理前，先被外部处理）","compatibility":"**兼容性** \n | Android | iOS | web |\n| :- | :- | :- |\n| x | x | 4.0 |"},"self":{"name":"### self\n","description":"仅当 event.target 是元素本身时才会触发事件处理器（仅当 event.target 是元素本身时才会触发事件处理器）","compatibility":"**兼容性** \n | Android | iOS | web |\n| :- | :- | :- |\n| x | x | 4.0 |"},"once":{"name":"### once\n","description":"点击事件最多被触发一次","compatibility":"**兼容性** \n | Android | iOS | web |\n| :- | :- | :- |\n| 3.9 | x | 4.0 |"},"passive":{"name":"### passive\n","description":"滚动事件的默认行为 (scrolling) 将立即发生而非等待 `onScroll` 完成（滚动事件的默认行为 (scrolling) 将立即发生而非等待 `onScroll` 完成）","compatibility":"**兼容性** \n | Android | iOS | web |\n| :- | :- | :- |\n| x | x | 4.0 |"}},"keyModifiers":{"enter":{"name":"### enter\n","description":"仅在 `key` 为 `Enter` 时调用事件处理器（keycode 为 13）","compatibility":"**兼容性** \n | Android | iOS | web |\n| :- | :- | :- |\n| x | x | 4.0 |"},"tab":{"name":"### tab\n","description":"仅在 `key` 为 `Tab` 时调用事件处理器（keycode 为 9）","compatibility":"**兼容性** \n | Android | iOS | web |\n| :- | :- | :- |\n| x | x | 4.0 |"},"delete":{"name":"### delete\n","description":"仅在 `key` 为 `Delete` 或 `Backspace` 时调用事件处理器","compatibility":"**兼容性** \n | Android | iOS | web |\n| :- | :- | :- |\n| x | x | 4.0 |"},"esc":{"name":"### esc\n","description":"仅在 `key` 为 `Escape` 时调用事件处理器（keycode 为 27）","compatibility":"**兼容性** \n | Android | iOS | web |\n| :- | :- | :- |\n| x | x | 4.0 |"},"space":{"name":"### space\n","description":"仅在 `key` 为 `Space` 时调用事件处理器（keycode 为 32）","compatibility":"**兼容性** \n | Android | iOS | web |\n| :- | :- | :- |\n| x | x | 4.0 |"},"up":{"name":"### up\n","description":"仅在 `key` 为 `ArrowUp` 时调用事件处理器（keycode 为 38）","compatibility":"**兼容性** \n | Android | iOS | web |\n| :- | :- | :- |\n| x | x | 4.0 |"},"down":{"name":"### down\n","description":"仅在 `key` 为 `ArrowDown` 时调用事件处理器（keycode 为 40）","compatibility":"**兼容性** \n | Android | iOS | web |\n| :- | :- | :- |\n| x | x | 4.0 |"},"left":{"name":"### left\n","description":"仅在 `key` 为 `ArrowLeft` 时调用事件处理器（keycode 为 37）","compatibility":"**兼容性** \n | Android | iOS | web |\n| :- | :- | :- |\n| x | x | 4.0 |"},"right":{"name":"### right\n","description":"仅在 `key` 为 `ArrowRight` 时调用事件处理器（keycode 为 39）","compatibility":"**兼容性** \n | Android | iOS | web |\n| :- | :- | :- |\n| x | x | 4.0 |"}},"mouseModifiers":{"left":{"name":"### left\n","description":"单击鼠标左键时触发鼠标事件。","compatibility":"**兼容性** \n | Android | iOS | web |\n| :- | :- | :- |\n| x | x | 4.0 |"},"right":{"name":"### right\n","description":"单击鼠标右键时触发鼠标事件","compatibility":"**兼容性** \n | Android | iOS | web |\n| :- | :- | :- |\n| x | x | 4.0 |"},"middle":{"name":"### middle\n","description":"单击鼠标中键（滚轮）时触发鼠标事件","compatibility":"**兼容性** \n | Android | iOS | web |\n| :- | :- | :- |\n| x | x | 4.0 |"}},"systemModifiers":{"ctrl":{"name":"### ctrl\n","description":"当按下 \\<Control> 时触发鼠标或键盘事件。","compatibility":"**兼容性** \n | Android | iOS | web |\n| :- | :- | :- |\n| x | x | 4.0 |"},"alt":{"name":"### alt\n","description":"当按下 \\<Alt> 时触发鼠标或键盘事件。","compatibility":"**兼容性** \n | Android | iOS | web |\n| :- | :- | :- |\n| x | x | 4.0 |"},"shift":{"name":"### shift\n","description":"当按下 \\<Shift> 时触发鼠标或键盘事件。","compatibility":"**兼容性** \n | Android | iOS | web |\n| :- | :- | :- |\n| x | x | 4.0 |"},"meta":{"name":"### meta\n","description":"当按下 \\<Meta> 时触发鼠标或键盘事件。","compatibility":"**兼容性** \n | Android | iOS | web |\n| :- | :- | :- |\n| x | x | 4.0 |"},"exact":{"name":"### exact\n","description":"`.exact` 修饰符允许控制触发事件所需的系统修饰符的精确组合。","compatibility":"**兼容性** \n | Android | iOS | web |\n| :- | :- | :- |\n| x | x | 4.0 |"}},"propsModifiers":{"sync":{"name":"### sync\n","description":"","compatibility":""}},"vModelModifiers":{"lazy":{"name":"### lazy\n","description":"默认情况下，`v-model` 会在每次 `input` 事件后更新数据 (IME 拼字阶段的状态例外)。你可以添加 `lazy` 修饰符来改为在每次 `change` 事件后更新数据","compatibility":"**兼容性** \n | Android | iOS | web |\n| :- | :- | :- |\n| 3.9 | x | x |"},"number":{"name":"### number\n","description":"如果你想让用户输入自动转换为数字，你可以在 `v-model` 后添加 `.number` 修饰符来管理输入","compatibility":"**兼容性** \n | Android | iOS | web |\n| :- | :- | :- |\n| 3.9 | x | 4.0 |"},"trim":{"name":"### trim\n","description":"如果你想要默认自动去除用户输入内容中两端的空格，你可以在 `v-model` 后添加 `.trim` 修饰符","compatibility":"**兼容性** \n | Android | iOS | web |\n| :- | :- | :- |\n| 3.9 | x | 4.0 |"}},"E_App":{"example":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/App.uvue","code":"```vue\n<script lang=\"uts\">\r\n import { state, setLifeCycleNum, setAppLaunchPath, setAppShowPath } from './store/index.uts'\r\n\r\n let firstBackTime = 0\r\n export default {\r\n onLaunch: function (options) {\r\n console.log(options)\r\n // 自动化测试\r\n setLifeCycleNum(state.lifeCycleNum + 1000)\r\n setAppLaunchPath(options.path)\r\n console.log('App Launch')\r\n // #ifdef UNI-APP-X && APP-ANDROID\r\n const performance = uni.getPerformance()\r\n const observer : PerformanceObserver = performance.createObserver((entryList : PerformanceObserverEntryList) => {\r\n console.log('observer:entryList.getEntries()')\r\n console.log(entryList.getEntries())\r\n })\r\n observer.observe({\r\n entryTypes: ['render', 'navigation'],\r\n } as PerformanceObserverOptions)\r\n // #endif\r\n },\r\n onShow: function (options) {\r\n // 自动化测试\r\n setLifeCycleNum(state.lifeCycleNum + 100)\r\n setAppShowPath(options.path)\r\n console.log('App Show')\r\n },\r\n onHide: function () {\r\n // 自动化测试\r\n setLifeCycleNum(state.lifeCycleNum - 100)\r\n console.log('App Hide')\r\n },\r\n // #ifdef APP-ANDROID\r\n onLastPageBackPress: function () {\r\n // 自动化测试\r\n setLifeCycleNum(state.lifeCycleNum - 1000)\r\n console.log('App LastPageBackPress')\r\n if (firstBackTime == 0) {\r\n uni.showToast({\r\n title: '再按一次退出应用',\r\n position: 'bottom',\r\n })\r\n firstBackTime = Date.now()\r\n setTimeout(() => {\r\n firstBackTime = 0\r\n }, 2000)\r\n } else if (Date.now() - firstBackTime < 2000) {\r\n firstBackTime = Date.now()\r\n uni.exit()\r\n }\r\n },\r\n onExit() {\r\n console.log('App Exit')\r\n },\r\n // #endif\r\n methods: {\r\n checkLaunchPath() : boolean {\r\n const HOME_PATH = 'pages/index/index'\r\n if (state.appLaunchPath != HOME_PATH) {\r\n return false\r\n }\r\n if (state.appShowPath != HOME_PATH) {\r\n return false\r\n }\r\n return true\r\n }\r\n }\r\n }\r\n</script>\r\n\r\n<style>\r\n@import './styles/common.css';\r\n\r\n.list-item-text {\r\n line-height: 36px;\r\n}\r\n\r\n.split-title {\r\n margin: 20px 0 5px;\r\n padding: 5px 0;\r\n border-bottom: 1px solid #dfdfdf;\r\n}\r\n\r\n.btn-view {\r\n margin: 10px 0;\r\n padding: 10px;\r\n border: 1px solid #dfdfdf;\r\n border-radius: 3px;\r\n}\r\n</style>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#"}},"E_type":{"type":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/type/type.uvue","code":"```vue\n<template>\r\n <!-- #ifdef APP -->\r\n <scroll-view style=\"flex: 1\">\r\n <!-- #endif -->\r\n <!-- #ifdef APP -->\r\n </scroll-view>\r\n <!-- #endif -->\r\n</template>\r\n\r\n<script lang='uts'>\r\n // 仅引用类型，模板中不使用，也要保证不报错\r\n let testType: TestTypeComponentPublicInstance | null = null;\r\n export default {\r\n data() {\r\n return {}\r\n },\r\n onLoad() {\r\n console.log('testType', testType)\r\n },\r\n }\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/type/type"}},"E_app-instance":{"component_component":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/app-instance/component/component.uvue","code":"```vue\n<template>\r\n <view class=\"page\">\r\n <CompForAppComponent class=\"component-for-app-component\" />\r\n </view>\r\n</template>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/app-instance/component/component"},"globalProperties_globalProperties-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/app-instance/globalProperties/globalProperties-composition.uvue","code":"```vue\n<template>\r\n <!-- #ifdef APP -->\r\n <scroll-view style=\"flex: 1; padding-bottom: 20px\">\r\n <!-- #endif -->\r\n <view class=\"uni-padding-wrap\">\r\n <text class=\"mt-10\"\r\n >globalProperties string: {{ globalPropertiesStr }}</text\r\n >\r\n <text class=\"mt-10\"\r\n >globalProperties number: {{ globalPropertiesNum }}</text\r\n >\r\n <text class=\"mt-10\"\r\n >globalProperties boolean: {{ globalPropertiesBool }}</text\r\n >\r\n <text class=\"mt-10\"\r\n >globalProperties object: {{ globalPropertiesObj }}</text\r\n >\r\n <text class=\"mt-10\"\r\n >globalProperties null: {{ globalPropertiesNull }}</text\r\n >\r\n <text class=\"mt-10\"\r\n >globalProperties array: {{ globalPropertiesArr }}</text\r\n >\r\n <text class=\"mt-10\"\r\n >globalProperties set: {{ globalPropertiesSet }}</text\r\n >\r\n <text class=\"mt-10\"\r\n >globalProperties map: {{ globalPropertiesMap }}</text\r\n >\r\n <text class=\"mt-10\"\r\n >globalProperties reactiveObj.str:\r\n {{ globalPropertiesReactiveObj['str'] }}</text\r\n >\r\n <text class=\"mt-10\"\r\n >globalProperties reactiveObj.num:\r\n {{ globalPropertiesReactiveObj['num'] }}</text\r\n >\r\n <text class=\"mt-10\"\r\n >globalProperties reactiveObj.boolean:\r\n {{ globalPropertiesReactiveObj['bool'] }}</text\r\n >\r\n <text class=\"mt-10\"\r\n >globalProperties fun 返回值: {{ globalPropertiesFn() }}</text\r\n >\r\n <button @click=\"updateGlobalProperties\" class=\"mt-10\">\r\n update globalProperties\r\n </button>\r\n </view>\r\n <!-- #ifdef APP -->\r\n </scroll-view>\r\n <!-- #endif -->\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\ntype MyGlobalProperties = {\r\n\tstr : string;\r\n\tnum : number;\r\n\tbool : boolean;\r\n\tobj : UTSJSONObject;\r\n\tnull : string | null;\r\n\tarr : number[];\r\n\tset : string[];\r\n\tmap : UTSJSONObject;\r\n\treactiveObj : UTSJSONObject;\r\n globalPropertiesFnRes: string;\r\n}\r\n\r\nconst myGlobalProperties = reactive<MyGlobalProperties>({\r\n\tstr: '',\r\n\tnum: 0,\r\n\tbool: false,\r\n\tobj: {},\r\n\tnull: null,\r\n\tarr: [] as number[],\r\n\tset: [] as string[],\r\n\tmap: {},\r\n\treactiveObj: {\r\n\t\tstr: '',\r\n\t\tnum: 0,\r\n\t\tbool: false,\r\n\t},\r\n globalPropertiesFnRes: '',\r\n} as MyGlobalProperties)\r\n\r\nconst instance = getCurrentInstance()!.proxy!\r\nconst getGlobalProperties = () => {\r\n\tmyGlobalProperties.str = instance.globalPropertiesStr\r\n\tmyGlobalProperties.num = instance.globalPropertiesNum\r\n\tmyGlobalProperties.bool = instance.globalPropertiesBool\r\n\tmyGlobalProperties.obj = instance.globalPropertiesObj\r\n\tmyGlobalProperties.null = instance.globalPropertiesNull\r\n\tmyGlobalProperties.arr = instance.globalPropertiesArr\r\n\tmyGlobalProperties.set = []\r\n\tinstance.globalPropertiesSet.forEach(item => {\r\n\t\tmyGlobalProperties.set.push(item)\r\n\t})\r\n\tmyGlobalProperties.map = {}\r\n\tinstance.globalPropertiesMap.forEach((value: number, key: string) => {\r\n\t\tmyGlobalProperties.map[key] = value\r\n\t})\r\n\tmyGlobalProperties.reactiveObj = instance.globalPropertiesReactiveObj\r\n\tmyGlobalProperties.globalPropertiesFnRes = instance.globalPropertiesFn()\r\n}\r\n\r\nsetTimeout(() => {\r\n // 等待 globalProperties-options resetGlobalProperties 完成\r\n\tgetGlobalProperties()\r\n}, 1000)\r\n\r\nconst updateGlobalProperties = () => {\r\n\tinstance.globalPropertiesStr = 'new string'\r\n\tinstance.globalPropertiesNum = 100\r\n\tinstance.globalPropertiesBool = true\r\n\tinstance.globalPropertiesObj = {\r\n\t\tstr: 'new globalProperties obj string',\r\n\t\tnum: 100,\r\n\t\tbool: true,\r\n\t}\r\n\tinstance.globalPropertiesNull = 'not null'\r\n\tinstance.globalPropertiesArr = [1, 2, 3]\r\n\tinstance.globalPropertiesSet = new Set(['a', 'b', 'c'])\r\n\tinstance.globalPropertiesMap = new Map([['a', 1], ['b', 2], ['c', 3]])\r\n\tinstance.globalPropertiesReactiveObj['str'] = 'new reactive string'\r\n\tinstance.globalPropertiesReactiveObj['num'] = 200\r\n\tinstance.globalPropertiesReactiveObj['bool'] = true\r\n\tgetGlobalProperties()\r\n}\r\n\r\ndefineExpose({\r\n myGlobalProperties,\r\n updateGlobalProperties\r\n})\r\n</script>\r\n\r\n<style>\r\n.uni-padding-wrap {\r\n padding: 10px;\r\n}\r\n</style>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/app-instance/globalProperties/globalProperties-composition"},"globalProperties_globalProperties-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/app-instance/globalProperties/globalProperties-options.uvue","code":"```vue\n<template>\r\n <!-- #ifdef APP -->\r\n <scroll-view style=\"flex: 1; padding-bottom: 20px\">\r\n <!-- #endif -->\r\n <view class=\"uni-padding-wrap\">\r\n <text class=\"mt-10\"\r\n >globalProperties string: {{ globalPropertiesStr }}</text\r\n >\r\n <text class=\"mt-10\"\r\n >globalProperties number: {{ globalPropertiesNum }}</text\r\n >\r\n <text class=\"mt-10\"\r\n >globalProperties boolean: {{ globalPropertiesBool }}</text\r\n >\r\n <text class=\"mt-10\"\r\n >globalProperties object: {{ globalPropertiesObj }}</text\r\n >\r\n <text class=\"mt-10\"\r\n >globalProperties null: {{ globalPropertiesNull }}</text\r\n >\r\n <text class=\"mt-10\"\r\n >globalProperties array: {{ globalPropertiesArr }}</text\r\n >\r\n <text class=\"mt-10\"\r\n >globalProperties set: {{ globalPropertiesSet }}</text\r\n >\r\n <text class=\"mt-10\"\r\n >globalProperties map: {{ globalPropertiesMap }}</text\r\n >\r\n <text class=\"mt-10\"\r\n >globalProperties reactiveObj.str:\r\n {{ globalPropertiesReactiveObj['str'] }}</text\r\n >\r\n <text class=\"mt-10\"\r\n >globalProperties reactiveObj.num:\r\n {{ globalPropertiesReactiveObj['num'] }}</text\r\n >\r\n <text class=\"mt-10\"\r\n >globalProperties reactiveObj.boolean:\r\n {{ globalPropertiesReactiveObj['bool'] }}</text\r\n >\r\n <text class=\"mt-10\"\r\n >globalProperties fun 返回值: {{ globalPropertiesFn() }}</text\r\n >\r\n <button @click=\"updateGlobalProperties\" class=\"mt-10\">\r\n update globalProperties\r\n </button>\r\n </view>\r\n <!-- #ifdef APP -->\r\n </scroll-view>\r\n <!-- #endif -->\r\n</template>\r\n\r\n<script lang=\"uts\">\r\ntype MyGlobalProperties = {\r\n\tstr : string;\r\n\tnum : number;\r\n\tbool : boolean;\r\n\tobj : UTSJSONObject;\r\n\tnull : string | null;\r\n\tarr : number[];\r\n\tset : string[];\r\n\tmap : UTSJSONObject;\r\n\treactiveObj : UTSJSONObject;\r\n\tglobalPropertiesFnRes: string\r\n}\r\nexport default {\r\n\tdata() {\r\n\t\treturn {\r\n\t\t\tmyGlobalProperties: {\r\n\t\t\t\tstr: '',\r\n\t\t\t\tnum: 0,\r\n\t\t\t\tbool: false,\r\n\t\t\t\tobj: {},\r\n\t\t\t\tnull: null,\r\n\t\t\t\tarr: [],\r\n\t\t\t\tset: [],\r\n\t\t\t\tmap: {},\r\n\t\t\t\treactiveObj: {\r\n\t\t\t\t\tstr: '',\r\n\t\t\t\t\tnum: 0,\r\n\t\t\t\t\tbool: false,\r\n\t\t\t\t} as UTSJSONObject,\r\n\t\t\t\tglobalPropertiesFnRes: '',\r\n\t\t\t} as MyGlobalProperties,\r\n\t\t}\r\n\t},\r\n\tonLoad() {\r\n\t\tthis.getGlobalProperties()\r\n\t},\r\n\tonUnload(){\r\n\t\tthis.resetGlobalProperties()\r\n\t},\r\n\tmethods: {\r\n\t\tgetGlobalProperties() {\r\n\t\t\tthis.myGlobalProperties.str = this.globalPropertiesStr\r\n\t\t\tthis.myGlobalProperties.num = this.globalPropertiesNum\r\n\t\t\tthis.myGlobalProperties.bool = this.globalPropertiesBool\r\n\t\t\tthis.myGlobalProperties.obj = this.globalPropertiesObj\r\n\t\t\tthis.myGlobalProperties.null = this.globalPropertiesNull\r\n\t\t\tthis.myGlobalProperties.arr = this.globalPropertiesArr\r\n\t\t\tthis.myGlobalProperties.set = []\r\n\t\t\tthis.globalPropertiesSet.forEach(item => {\r\n\t\t\t\tthis.myGlobalProperties.set.push(item)\r\n\t\t\t})\r\n\t\t\tthis.myGlobalProperties.map = {}\r\n\t\t\tthis.globalPropertiesMap.forEach((value: number, key: string) => {\r\n\t\t\t\tthis.myGlobalProperties.map[key] = value\r\n\t\t\t})\r\n\t\t\tthis.myGlobalProperties.reactiveObj = this.globalPropertiesReactiveObj\r\n\t\t\tthis.myGlobalProperties.globalPropertiesFnRes = this.globalPropertiesFn()\r\n\t\t},\r\n\t\tresetGlobalProperties() {\r\n\t\t\tthis.globalPropertiesStr = 'default string'\r\n\t\t\tthis.globalPropertiesNum = 0\r\n\t\t\tthis.globalPropertiesBool = false\r\n\t\t\tthis.globalPropertiesObj = {\r\n\t\t\t\tstr: 'default globalProperties obj string',\r\n\t\t\t\tnum: 0,\r\n\t\t\t\tbool: false,\r\n\t\t\t}\r\n\t\t\tthis.globalPropertiesNull = null\r\n\t\t\tthis.globalPropertiesArr = []\r\n\t\t\tthis.globalPropertiesSet = new Set()\r\n\t\t\tthis.globalPropertiesMap = new Map()\r\n\t\t\tthis.globalPropertiesReactiveObj['str'] = 'default reactive string'\r\n\t\t\tthis.globalPropertiesReactiveObj['num'] = 0\r\n\t\t\tthis.globalPropertiesReactiveObj['bool'] = false\r\n\t\t},\r\n\t\tupdateGlobalProperties() {\r\n\t\t\tthis.globalPropertiesStr = 'new string'\r\n\t\t\tthis.globalPropertiesNum = 100\r\n\t\t\tthis.globalPropertiesBool = true\r\n\t\t\tthis.globalPropertiesObj = {\r\n\t\t\t\tstr: 'new globalProperties obj string',\r\n\t\t\t\tnum: 100,\r\n\t\t\t\tbool: true,\r\n\t\t\t}\r\n\t\t\tthis.globalPropertiesNull = 'not null'\r\n\t\t\tthis.globalPropertiesArr = [1, 2, 3]\r\n\t\t\tthis.globalPropertiesSet = new Set(['a', 'b', 'c'])\r\n\t\t\tthis.globalPropertiesMap = new Map([['a', 1], ['b', 2], ['c', 3]])\r\n\t\t\tthis.globalPropertiesReactiveObj['str'] = 'new reactive string'\r\n\t\t\tthis.globalPropertiesReactiveObj['num'] = 200\r\n\t\t\tthis.globalPropertiesReactiveObj['bool'] = true\r\n\t\t\tthis.getGlobalProperties()\r\n\t\t}\r\n\t},\r\n}\r\n</script>\r\n\r\n<style>\r\n.uni-padding-wrap {\r\n padding: 10px;\r\n}\r\n</style>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/app-instance/globalProperties/globalProperties-options"},"use_use-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/app-instance/use/use-composition.uvue","code":"```vue\n<template>\r\n <view class=\"page\">\r\n <CompForAppUse class=\"component-for-app-use\" />\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nimport CompForAppUse from '@/components/CompForAppUse.uvue'\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/app-instance/use/use-composition"},"use_use-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/app-instance/use/use-options.uvue","code":"```vue\n<template>\r\n <view class=\"page\">\r\n <CompForAppUse class=\"component-for-app-use\" />\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nimport CompForAppUse from '@/components/CompForAppUse.uvue'\r\n\r\nexport default {\r\n components: {\r\n CompForAppUse\r\n }\r\n}\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/app-instance/use/use-options"}},"E_component-instance":{"attrs_attrs-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/attrs/attrs-composition.uvue","code":"```vue\n<template>\n <view class=\"page\">\n <child\n class=\"child-class\"\n str=\"str from parent\"\n @childClick=\"() => {}\" />\n </view>\n</template>\n\n<script setup lang=\"uts\">\nimport child from './child-composition.uvue'\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/attrs/attrs-composition"},"attrs_attrs-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/attrs/attrs-options.uvue","code":"```vue\n<template>\n <view class=\"page\">\n <child\n class=\"child-class\"\n str=\"str from parent\"\n @childClick=\"() => {}\" />\n </view>\n</template>\n\n<script lang=\"uts\">\nimport child from './child-options.uvue'\n\nexport default {\n components: {\n child,\n },\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/attrs/attrs-options"},"attrs_child-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/attrs/child-composition.uvue","code":"```vue\n<template>\n <view>\n <view class=\"mb-10 flex flex-row justify-between\">\n <text>hasPropsAttr</text>\n <text id=\"has-props-attr\">{{ hasPropsAttr }}</text>\n </view>\n <view class=\"mb-10 flex flex-row justify-between\">\n <text>hasEmitsAttr</text>\n <text id=\"has-emits-attr\">{{ hasEmitsAttr }}</text>\n </view>\n <view class=\"mb-10 flex flex-row justify-between\">\n <text>hasClassAttr</text>\n <text id=\"has-class-attr\">{{ hasClassAttr }}</text>\n </view>\n </view>\n</template>\n\n<script setup lang=\"uts\">\ndefineEmits(['childClick'])\n\ndefineProps({\n str: {\n type: String,\n required: true\n }\n})\n\nconst attrs = useAttrs()\n\nconst hasPropsAttr = computed(():boolean => {\n // #ifdef APP-ANDROID\n return attrs.has('val')\n // #endif\n // #ifndef APP-ANDROID\n return !!attrs['val']\n // #endif\n})\n\nconst hasEmitsAttr = computed(():boolean => {\n // #ifdef APP-ANDROID\n return attrs.has('childClick')\n // #endif\n // #ifndef APP-ANDROID\n return !!attrs['childClick']\n // #endif\n})\n\nconst hasClassAttr = computed(():boolean => {\n // #ifdef APP-ANDROID\n return attrs.has('class')\n // #endif\n // #ifndef APP-ANDROID\n return !!attrs['class']\n // #endif\n})\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/attrs/child-composition"},"attrs_child-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/attrs/child-options.uvue","code":"```vue\n<template>\n <view>\n <view class=\"mb-10 flex flex-row justify-between\">\n <text>hasPropsAttr</text>\n <text id=\"has-props-attr\">{{ hasPropsAttr }}</text>\n </view>\n <view class=\"mb-10 flex flex-row justify-between\">\n <text>hasEmitsAttr</text>\n <text id=\"has-emits-attr\">{{ hasEmitsAttr }}</text>\n </view>\n <view class=\"mb-10 flex flex-row justify-between\">\n <text>hasClassAttr</text>\n <text id=\"has-class-attr\">{{ hasClassAttr }}</text>\n </view>\n </view>\n</template>\n\n<script lang=\"uts\">\nexport default {\n emits: ['childClick'],\n props: {\n str: {\n type: String,\n required: true\n }\n },\n computed: {\n hasPropsAttr(): boolean {\n // #ifdef APP-ANDROID\n return this.$attrs.has('val')\n // #endif\n // #ifndef APP-ANDROID\n return !!this.$attrs['val']\n // #endif\n },\n hasEmitsAttr(): boolean {\n // #ifdef APP-ANDROID\n return this.$attrs.has('childClick')\n // #endif\n // #ifndef APP-ANDROID\n return !!this.$attrs['childClick']\n // #endif\n },\n hasClassAttr(): boolean {\n // #ifdef APP-ANDROID\n return this.$attrs.has('class')\n // #endif\n // #ifndef APP-ANDROID\n return !!this.$attrs['class']\n // #endif\n }\n }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/attrs/child-options"},"circular-reference_ChildA-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/circular-reference/ChildA-composition.uvue","code":"```vue\n<template>\r\n <view class=\"child-a\">\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>child A limit:</text>\r\n <text>{{limit}}</text>\r\n </view>\r\n <child-b v-if=\"limit>1\" :limit=\"limit-1\" />\r\n </view>\r\n</template>\r\n\r\n<script setup lang='uts'>\r\n import ChildB from './childB-composition.uvue'\r\n\r\n defineProps({\r\n limit: {\r\n type: Number,\r\n default: 0\r\n }\r\n })\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/circular-reference/ChildA-composition"},"circular-reference_ChildA-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/circular-reference/ChildA-options.uvue","code":"```vue\n<template>\r\n <view class=\"child-a\">\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>child A limit:</text>\r\n <text>{{limit}}</text>\r\n </view>\r\n <child-b v-if=\"limit>1\" :limit=\"limit-1\" />\r\n </view>\r\n</template>\r\n\r\n<script lang='uts'>\r\n import ChildB from './childB-options.uvue'\r\n\r\n export default {\r\n components: {\r\n ChildB\r\n },\r\n props: {\r\n limit: {\r\n type: Number,\r\n default: 0\r\n }\r\n }\r\n }\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/circular-reference/ChildA-options"},"circular-reference_ChildB-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/circular-reference/ChildB-composition.uvue","code":"```vue\n<template>\n <view class=\"child-b\">\n <view class=\"flex justify-between flex-row mb-10\">\n <text>child B limit:</text>\n <text>{{ limit }}</text>\n </view>\n <child-a v-if=\"limit > 1\" :limit=\"limit - 1\" />\n </view>\n</template>\n\n<script setup lang=\"uts\">\n import ChildA from './childA-composition.uvue'\n\n defineProps({\n limit: {\n type: Number,\n default: 0\n }\n })\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/circular-reference/ChildB-composition"},"circular-reference_ChildB-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/circular-reference/ChildB-options.uvue","code":"```vue\n<template>\n <view class=\"child-b\">\n <view class=\"flex justify-between flex-row mb-10\">\n <text>child B limit:</text>\n <text>{{limit}}</text>\n </view>\n <child-a v-if=\"limit>1\" :limit=\"limit-1\" />\n </view>\n</template>\n\n<script lang='uts'>\n import ChildA from './childA-options.uvue'\n\n export default {\n components: {\n ChildA\n },\n props: {\n limit: {\n type: Number,\n default: 0\n }\n }\n }\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/circular-reference/ChildB-options"},"circular-reference_ChildC-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/circular-reference/ChildC-composition.uvue","code":"```vue\n<template>\r\n <view class=\"child-c\">\n <view class=\"flex justify-between flex-row mb-10\">\n <text>child C limit:</text>\n <text>{{limit}}</text>\n </view>\n <child-c-composition v-if=\"limit>1\" :limit=\"limit-1\" />\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n defineOptions({\r\n name: \"ChildCComposition\"\r\n })\r\n\r\n defineProps({\r\n limit: {\r\n type: Number,\r\n default: 0\r\n }\r\n })\r\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/circular-reference/ChildC-composition"},"circular-reference_ChildC-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/circular-reference/ChildC-options.uvue","code":"```vue\n<template>\r\n <view class=\"child-c\">\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>child C limit:</text>\r\n <text>{{limit}}</text>\r\n </view>\r\n <child-c-options v-if=\"limit>1\" :limit=\"limit-1\" />\r\n </view>\r\n</template>\r\n\r\n<script lang='uts'>\r\n export default {\r\n name: \"ChildCOptions\",\r\n props: {\r\n limit: {\r\n type: Number,\r\n default: 0\r\n }\r\n }\r\n }\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/circular-reference/ChildC-options"},"circular-reference_circular-reference-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/circular-reference/circular-reference-composition.uvue","code":"```vue\n<template>\r\n <view class=\"page\">\r\n <!-- #ifdef APP-ANDROID -->\r\n <!-- TODO: ios & web 不支持 a b 互相引用 -->\r\n <child-a :limit=\"5\" />\r\n <!-- #endif -->\r\n <child-c :limit=\"5\" />\r\n </view>\r\n</template>\r\n\r\n<script setup lang='uts'>\r\n // #ifdef APP-ANDROID\r\n import ChildA from './childA-composition.uvue'\r\n // #endif\r\n import ChildC from './ChildC-composition.uvue'\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/circular-reference/circular-reference-composition"},"circular-reference_circular-reference-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/circular-reference/circular-reference-options.uvue","code":"```vue\n<template>\r\n <view class=\"page\">\r\n <!-- #ifdef APP-ANDROID -->\r\n <!-- TODO: ios & web 不支持 a b 互相引用 -->\r\n <child-a :limit=\"5\" />\r\n <!-- #endif -->\r\n <child-c :limit=\"5\" />\r\n </view>\r\n</template>\r\n\r\n<script lang='uts'>\r\n // #ifdef APP-ANDROID\r\n import ChildA from './childA-options.uvue'\r\n // #endif\r\n import childC from './childC-options.uvue'\r\n\r\n export default {\r\n components: {\r\n // #ifdef APP-ANDROID\r\n ChildA,\r\n // #endif\r\n childC\r\n }\r\n }\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/circular-reference/circular-reference-options"},"data_data-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/data/data-composition.uvue","code":"```vue\n<template>\n <view class=\"page\">\n <view class=\"flex justify-between flex-row mb-10\">\n <text>str: </text>\n <text id=\"str\">{{ str }}</text>\n </view>\n <view class=\"flex justify-between flex-row mb-10\">\n <text>num: </text>\n <text id=\"num\">{{ num }}</text>\n </view>\n <view class=\"flex justify-between flex-row mb-10\">\n <text>arr: </text>\n <text id=\"arr\">{{ arr.join(',') }}</text>\n </view>\n <view class=\"flex justify-between flex-row mb-10\">\n <text>obj.str: </text>\n <text id=\"obj-str\">{{ obj.str }}</text>\n </view>\n <view class=\"flex justify-between flex-row mb-10\">\n <text>obj.num: </text>\n <text id=\"obj-num\">{{ obj.num }}</text>\n </view>\n <view class=\"flex justify-between flex-row mb-10\">\n <text>obj.arr: </text>\n <text id=\"obj-arr\">{{ obj.arr.join(',') }}</text>\n </view>\n <button @click=\"updateData\">update data</button>\n </view>\n</template>\n\n<script setup lang=\"uts\">\n type Obj = {\n str : string,\n num : number,\n arr : number[]\n }\n \n const str = ref('default str')\n const num = ref(0)\n // 可通过泛型指定类型\n const arr = ref<number[]>([1, 2, 3])\n const obj = ref<Obj>({\n str: 'default obj.str',\n num: 10,\n arr: [4, 5, 6]\n })\n\n const updateData = () => {\n str.value = 'new str'\n num.value = 1\n arr.value = [4, 5, 6]\n \n obj.value.str = 'new obj.str'\n obj.value.num = 100\n obj.value.arr = [7, 8, 9]\n }\n\n defineExpose({\n updateData\n })\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/data/data-composition"},"data_data-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/data/data-options.uvue","code":"```vue\n<template>\n <view class=\"page\">\n <view class=\"flex justify-between flex-row mb-10\">\n <text>str: </text>\n <text id=\"str\">{{ str }}</text>\n </view>\n <view class=\"flex justify-between flex-row mb-10\">\n <text>num: </text>\n <text id=\"num\">{{ num }}</text>\n </view>\n <view class=\"flex justify-between flex-row mb-10\">\n <text>arr: </text>\n <text id=\"arr\">{{ arr.join(',') }}</text>\n </view>\n <view class=\"flex justify-between flex-row mb-10\">\n <text>obj.str: </text>\n <text id=\"obj-str\">{{ obj.str }}</text>\n </view>\n <view class=\"flex justify-between flex-row mb-10\">\n <text>obj.num: </text>\n <text id=\"obj-num\">{{ obj.num }}</text>\n </view>\n <view class=\"flex justify-between flex-row mb-10\">\n <text>obj.arr: </text>\n <text id=\"obj-arr\">{{ obj.arr.join(',') }}</text>\n </view>\n <button @click=\"updateData\">update data</button>\n </view>\n</template>\r\n\r\n<script lang=\"uts\">\n type Obj = {\n str : string,\n num : number,\n arr : number[]\n }\r\n export default {\r\n data() {\r\n return {\r\n str: 'default str',\r\n num: 0,\r\n arr: [1, 2, 3],\n // 特殊类型需要通过 as 指定类型\r\n obj: {\r\n str: 'default obj.str',\r\n num: 10,\r\n arr: [4, 5, 6]\r\n } as Obj\r\n }\r\n },\r\n methods: {\r\n updateData() {\r\n this.str = 'new str'\r\n this.num = 1\r\n this.arr = [4, 5, 6]\r\n\r\n this.obj.str = 'new obj.str'\r\n this.obj.num = 100\r\n this.obj.arr = [7, 8, 9]\r\n },\r\n },\r\n }\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/data/data-options"},"define-expose_define-expose":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/define-expose/define-expose.uvue","code":"```vue\n<template>\n <view class=\"page\">\n <define-expose-foo ref=\"fooRef\" />\n <view class=\"flex justify-between flex-row mt-10\">\n <text>str from component Foo: </text>\n <text id=\"foo-str\">{{ fooStr }}</text>\n </view>\n <view class=\"flex justify-between flex-row mt-10\">\n <text>num from component Foo: </text>\n <text id=\"foo-num\">{{ fooNum }}</text>\n </view>\n <button class=\"increment-btn mt-10\" @click=\"increment\">\n trigger Foo increment\n </button>\n </view>\n</template>\n\n<script setup lang=\"uts\">\nconst fooRef = ref<DefineExposeFooComponentPublicInstance | null>(null)\nconst fooStr = ref('')\nconst fooNum = ref<number>(0)\n\nonMounted(() => {\n fooStr.value = fooRef.value!.str\n fooNum.value = fooRef.value!.num\n})\n\nconst increment = () => {\n fooRef.value!.increment()\n fooNum.value = fooRef.value!.num\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/define-expose/define-expose"},"el_el-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/el/el-composition.uvue","code":"```vue\n\n<template>\n <view class=\"page flex justify-between flex-row\">\n <text class=\"child\">root node tagName：</text>\n <text class=\"tag-name\">{{ el }}</text>\n </view>\n</template>\n\n<script setup lang='uts'>\nconst el = ref('')\nconst instance = getCurrentInstance()!.proxy!\nonMounted(() => {el.value = instance.$el?.nodeName ?? ''})\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/el/el-composition"},"el_el-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/el/el-options.uvue","code":"```vue\n<template>\n <view class=\"page flex justify-between flex-row\">\n <text class=\"child\">root node tagName：</text>\n <text class=\"tag-name\">{{ el }}</text>\n </view>\n</template>\n\n<script lang='uts'>\nexport default {\n data() {\n return {\n el: '',\n }\n },\n mounted() {\n this.el = this.$el?.nodeName ?? ''\n },\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/el/el-options"},"emit-function_child-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/emit-function/child-composition.uvue","code":"```vue\n<template>\n <view>\n <button @click=\"click\" class=\"call-parent-btn\">调用父组件事件</button>\n </view>\n</template>\n\n<script setup lang=\"uts\">\nconst emit = defineEmits(['callback'])\n\nconst click = () => {\n emit('callback', `${Date.now()}`)\n}\n\ndefineExpose({\n click\n})\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/emit-function/child-composition"},"emit-function_child-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/emit-function/child-options.uvue","code":"```vue\n<template>\n <view>\n <button @click=\"click\" class=\"call-parent-btn\">调用父组件事件</button>\n </view>\n</template>\n\n<script>\nexport default {\n emits: ['callback'],\n methods: {\n click () {\n this.$emit('callback', `${Date.now()}`)\n }\n }\n}\n</script>\n\n<style scoped>\n\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/emit-function/child-options"},"emit-function_emit-function-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/emit-function/emit-function-composition.uvue","code":"```vue\n<template>\n <view class=\"page\">\n <view class=\"row\">\n <text>子组件传的参数</text>\n <text id=\"value\">\n {{ value }}\n </text>\n </view>\n <child @callback=\"callback\"></child>\n </view>\n</template>\n\n<script setup lang=\"uts\">\nimport child from './child-composition.uvue'\n\nconst value = ref('')\n\nconst callback = (str: string) => {\n value.value = str\n}\n</script>\n\n<style>\n.row {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n margin-bottom: 10px;\n}\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/emit-function/emit-function-composition"},"emit-function_emit-function-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/emit-function/emit-function-options.uvue","code":"```vue\n<template>\n <view class=\"page\">\n <view class=\"row\">\n <text>子组件传的参数</text>\n <text id=\"value\">\n {{ value }}\n </text>\n </view>\n <child @callback=\"callback\"></child>\n </view>\n</template>\n\n<script>\nimport child from './child-options.uvue'\n\nexport default {\n components: {\n child\n },\n data () {\n return {\n value: \"\"\n }\n },\n methods: {\n callback (str: string) {\n this.value = str\n }\n }\n}\n</script>\n\n<style>\n.row {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n margin-bottom: 10px;\n}\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/emit-function/emit-function-options"},"force-update_force-update-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/force-update/force-update-composition.uvue","code":"```vue\n<template>\n <view class=\"page\">\n <view class=\"split-title\">$forceUpdate</view>\n <text class=\"mt-10 time\">Date.now(): {{ Date.now() }}</text>\n <button class=\"mt-10 trigger-force-update-btn\" type=\"primary\" @click=\"triggerForceUpdate\">trigger $forceUpdate</button>\n </view>\n</template>\n\n<script setup lang=\"uts\">\nconst instance = getCurrentInstance()\n\nconst triggerForceUpdate = () => {\n instance?.proxy?.$forceUpdate()\n}\n\ndefineExpose({\n triggerForceUpdate\n})\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/force-update/force-update-composition"},"force-update_force-update-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/force-update/force-update-options.uvue","code":"```vue\n<template>\n <view class=\"page\">\n <view class=\"split-title\">$forceUpdate</view>\n <text class=\"uni-common-mt time\">Date.now(): {{ Date.now() }}</text>\n <button\n class=\"uni-common-mt trigger-force-update-btn\"\n type=\"primary\"\n @click=\"triggerForceUpdate\">\n trigger $forceUpdate\n </button>\n </view>\n</template>\n\n<script lang=\"uts\">\nexport default {\n methods: {\n triggerForceUpdate(){\n this.$forceUpdate()\n }\n }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/force-update/force-update-options"},"inject_inject-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/inject/inject-composition.uvue","code":"```vue\n<template>\r\n <view>\r\n <text>inject page</text>\r\n <text class=\"mt-10 msg\">msg: {{msg}}</text>\r\n <text class=\"mt-10 num\">num: {{num}}</text>\r\n <text class=\"mt-10 obj\">obj: {{JSON.stringify(obj)}}</text>\r\n <text class=\"mt-10 arr\">arr: {{JSON.stringify(arr)}}</text>\r\n <text class=\"mt-10 arr-0\">arr[0]: {{ arr[0]}}</text>\r\n <text class=\"mt-10 fn\">fn: {{fn?.()}}</text>\r\n <text class=\"mt-10 has-injection-context\">hasInjectionContext:\r\n {{checkHasInjectionContextRes}}</text>\r\n <button class=\"mt-10 check-has-injection-context-btn\" @click=\"checkHasInjectionContext\">check\r\n hasInjectionContext</button>\r\n </view>\r\n</template>\r\n\r\n<script setup lang='uts'>\r\n const msg = inject<string>('msg')\r\n const num = inject('num')\r\n const obj = inject('obj')\r\n const arr = inject<number[]>('arr', [99])\r\n const fn = inject<() => string>('fn')\r\n\r\n const checkHasInjectionContextRes = ref('')\r\n\r\n const checkHasInjectionContext = () => {\r\n checkHasInjectionContextRes.value = `${hasInjectionContext()}`\r\n }\r\n checkHasInjectionContext()\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/inject/inject-composition"},"inject_inject-options-1":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/inject/inject-options-1.uvue","code":"```vue\n<template>\n <view>\n <text class=\"mt-10 bold\">component for inject 1</text>\n <text class=\"mt-10 alias-provide-page-title\"\n >aliasProvidePageTitle: {{ aliasProvidePageTitle }}</text\n >\n <text class=\"mt-10 provide-page-str\"\n >providePageStr: {{ providePageStr }}</text\n >\n <text class=\"mt-10 provide-page-num\"\n >providePageNum: {{ providePageNum }}</text\n >\n <text class=\"mt-10 provide-page-bool\"\n >providePageBool: {{ providePageBool }}</text\n >\n <text class=\"mt-10 provide-page-object-title\"\n >providePageObject.title: {{ providePageObject['title'] }}</text\n >\n <text class=\"mt-10 provide-page-object-content\"\n >providePageObject.content: {{ providePageObject['content'] }}</text\n >\n <text class=\"mt-10 provide-page-arr\"\n >providePageArr: {{ JSON.stringify(providePageArr) }}</text\n >\n <text class=\"mt-10 provide-page-map\"\n >providePageMap: {{ JSON.stringify(providePageMapObj) }}</text\n >\n <text class=\"mt-10 provide-page-set\"\n >providePageSet: {{ JSON.stringify(providePageSetArr) }}</text\n >\n <text class=\"mt-10 test-inject-string-default-value\"\n >testInjectStringDefaultValue: {{ testInjectStringDefaultValue }}</text\n >\n <text class=\"mt-10 test-inject-object-default-value-title\"\n >testInjectObjectDefaultValue.title:\n {{ testInjectObjectDefaultValue['title'] }}</text\n >\n <text class=\"mt-10 test-inject-object-default-value-content\"\n >testInjectObjectDefaultValue.content:\n {{ testInjectObjectDefaultValue['content'] }}</text\n >\n </view>\n</template>\n\n<script lang=\"uts\">\nexport default {\n inject: {\n aliasProvidePageTitle: {\n type: String,\n from: 'providePageTitle',\n default: 'default alias provide page title'\n },\n providePageStr: {\n type: String,\n default: 'default provide page str'\n },\n providePageNum: {\n type: Number,\n default: 0\n },\n providePageBool: {\n type: Boolean,\n default: false\n },\n providePageObject: {\n type: Object as PropType<UTSJSONObject>,\n default: (): UTSJSONObject => {\n return {\n title: 'default provide page object title',\n content: 'default provide page object content'\n }\n }\n },\n providePageArr: {\n type: Array as PropType<String[]>,\n default: (): String[] => {\n return ['default provide page arr']\n }\n },\n providePageMap: {\n type: Object as PropType<Map<string, string>>,\n default: (): Map<string, string> => {\n return new Map<string, string>([['key', 'default provide page map']])\n }\n },\n providePageSet: {\n type: Object as PropType<Set<string>>,\n default: (): Set<string> => {\n return new Set<string>(['default provide page set'])\n }\n },\n testInjectStringDefaultValue: {\n type: String,\n default: 'test inject string default value'\n },\n testInjectObjectDefaultValue: {\n type: Object as PropType<UTSJSONObject>,\n default(): UTSJSONObject {\n return {\n title: 'test inject object default value title',\n content: 'test inject object default value content'\n }\n }\n }\n },\n\tcomputed: {\n\t\tprovidePageMapObj(): UTSJSONObject {\n\t\t\tconst obj: UTSJSONObject = {}\n\t\t\tthis.providePageMap.forEach((value, key) => {\n\t\t\t\tobj[key] = value\n\t\t\t})\n\t\t\treturn obj\n\t\t},\n\t\tprovidePageSetArr(): string[] {\n\t\t\tconst arr: string[] = []\n\t\t\tthis.providePageSet.forEach((value) => {\n\t\t\t\tarr.push(value)\n\t\t\t})\n\t\t\treturn arr\n\t\t}\n\t}\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/inject/inject-options-1"},"inject_inject-options-2":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/inject/inject-options-2.uvue","code":"```vue\n<template>\n <view>\n <text class=\"mt-10 bold\">component for inject 2</text>\n <text class=\"mt-10 provide-page-title\"\n >providePageTitle: {{ providePageTitle }}</text\n >\n <text class=\"mt-10 provide-page-str\">providePageStr: {{ providePageStr }}</text>\n <text class=\"mt-10 provide-page-num\">providePageNum: {{ providePageNum }}</text>\n <text class=\"mt-10 provide-page-bool\">providePageBool: {{ providePageBool }}</text>\n <text class=\"mt-10 provide-page-object-title\"\n >providePageObject.title: {{ providePageObject['title'] }}</text\n >\n <text class=\"mt-10 provide-page-object-content\"\n >providePageObject.content: {{ providePageObject['content'] }}</text\n >\n <text class=\"mt-10 provide-page-arr\">providePageArr: {{ JSON.stringify(providePageArr) }}</text>\n <text class=\"mt-10 provide-page-map\">providePageMap: {{ JSON.stringify(providePageMapObj) }}</text>\n <text class=\"mt-10 provide-page-set\">providePageSet: {{ JSON.stringify(providePageSetArr) }}</text>\n </view>\n</template>\n\n<script lang=\"uts\">\nexport default {\n inject: {\n providePageTitle: {\n type: String,\n default: 'default provide page title'\n },\n providePageStr: {\n type: String,\n default: 'default provide page str'\n },\n providePageNum: {\n type: Number,\n default: 0\n },\n providePageBool: {\n type: Boolean,\n default: false\n },\n providePageObject: {\n type: Object as PropType<UTSJSONObject>,\n default: (): UTSJSONObject => {\n return {\n title: 'default provide page object title',\n content: 'default provide page object content'\n }\n }\n },\n providePageArr: {\n type: Array as PropType<String[]>,\n default: (): String[] => {\n return ['default provide page arr']\n }\n },\n providePageMap: {\n type: Object as PropType<Map<string, string>>,\n default: (): Map<string, string> => {\n return new Map<string, string>([['key', 'default provide page map']])\n }\n },\n providePageSet: {\n type: Object as PropType<Set<string>>,\n default: (): Set<string> => {\n return new Set<string>(['default provide page set'])\n }\n },\n },\n\tcomputed: {\n\t\tprovidePageMapObj(): UTSJSONObject {\n\t\t\tconst obj: UTSJSONObject = {}\n\t\t\tthis.providePageMap.forEach((value, key) => {\n\t\t\t\tobj[key] = value\n\t\t\t})\n\t\t\treturn obj\n\t\t},\n\t\tprovidePageSetArr(): string[] {\n\t\t\tconst arr: string[] = []\n\t\t\tthis.providePageSet.forEach((value) => {\n\t\t\t\tarr.push(value)\n\t\t\t})\n\t\t\treturn arr\n\t\t}\n\t}\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/inject/inject-options-2"},"methods_call-method-define-expose":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/methods/call-method-define-expose.uvue","code":"```vue\n<template>\n <view>\n <component-define-expose ref=\"component\"></component-define-expose>\n <button @click='callMethod'>callMethod</button>\n <view class=\"mt-10 flex\">\n <text>调用子组件 difineExpose 暴露方法结果: </text>\n <text class='mt-10'>{{ callMethodRes }}</text>\n </view>\n </view>\n</template>\n\n<script setup lang=\"uts\">\nimport ComponentDefineExpose from './component-define-expose.uvue'\n\nconst component = ref<ComponentPublicInstance | null>(null)\nconst callMethodRes = ref('')\n\nconst callMethod = () : string => {\n callMethodRes.value = component.value?.$callMethod('test', 'call defineExpose method res') as string\n return callMethodRes.value\n}\n\ndefineExpose({\n callMethod\n})\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/methods/call-method-define-expose"},"methods_call-method-easycom-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/methods/call-method-easycom-composition.uvue","code":"```vue\n<template>\n <view>\n <call-easy-method ref=\"callEasyMethod1\"></call-easy-method>\n </view>\n</template>\n\n<script setup lang=\"uts\">\nconst callEasyMethod1 = ref<CallEasyMethodComponentPublicInstance | null>(null)\n\nconst callMethod1 = () => {\n // 调用组件的 foo1 方法\n callEasyMethod1.value?.foo1?.()\n}\n\nconst callMethod2 = () => {\n // 调用组件的 foo2 方法并传递 1个参数\n callEasyMethod1.value?.foo2?.(Date.now())\n}\n\nconst callMethod3 = () => {\n // 调用组件的 foo3 方法并传递 2个参数\n callEasyMethod1.value?.foo3?.(Date.now(), Date.now())\n}\n\nconst callMethod4 = () => {\n // 调用组件的 foo4 方法并传递 callback\n callEasyMethod1.value?.foo4?.(() => {\n console.log('callback')\n })\n}\n\nconst callMethod5 = () => {\n // 注意： 返回值可能为 null，当前例子一定不为空，所以加了 !\n const result = callEasyMethod1.value?.foo5?.('string1') as string\n console.log(result) // string1\n}\n\nconst callMethodTest = (text: string): string | null => {\n const result = callEasyMethod1.value?.foo5?.(text) as string\n return result\n}\n\nconst delay = (): Promise<string> =>\n new Promise((resolve, _) => {\n setTimeout(() => {\n resolve('')\n }, 1000)\n })\n\nconst call = async (): Promise<void> => {\n callMethod1()\n await delay()\n callMethod2()\n await delay()\n callMethod3()\n await delay()\n callMethod4()\n await delay()\n callMethod5()\n}\n\nonReady(() => {\n call()\n})\n\ndefineExpose({\n callMethodTest\n})\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/methods/call-method-easycom-composition"},"methods_call-method-easycom-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/methods/call-method-easycom-options.uvue","code":"```vue\n<template>\n <view>\n <call-easy-method ref=\"callEasyMethod1\"></call-easy-method>\n </view>\n</template>\n\n<script lang=\"uts\">\nconst delay = (): Promise<string> =>\n new Promise((resolve, _) => {\n setTimeout(() => {\n resolve('')\n }, 1000)\n })\n\nexport default {\n data() {\n return {\n callEasyMethod1: null as CallEasyMethodComponentPublicInstance | null\n }\n },\n onReady() {\n // 通过组件 ref 属性获取组件实例, 组件标签名首字母大写，驼峰+ComponentPublicInstance\n this.callEasyMethod1 = this.$refs['callEasyMethod1'] as CallEasyMethodComponentPublicInstance\n },\n methods: {\n async call(): Promise<void> {\n this.callMethod1()\n await delay()\n this.callMethod2()\n await delay()\n this.callMethod3()\n await delay()\n this.callMethod4()\n await delay()\n this.callMethod5()\n },\n callMethod1() {\n // 调用组件的 foo1 方法\n this.callEasyMethod1?.foo1?.()\n },\n callMethod2() {\n // 调用组件的 foo2 方法并传递 1个参数\n this.callEasyMethod1?.foo2?.(Date.now())\n },\n callMethod3() {\n // 调用组件的 foo3 方法并传递 2个参数\n this.callEasyMethod1?.foo3?.(Date.now(), Date.now())\n },\n callMethod4() {\n // 调用组件的 foo4 方法并传递 callback\n this.callEasyMethod1?.foo4?.(() => {\n console.log('callback')\n })\n },\n callMethod5() {\n // 注意： 返回值可能为 null，当前例子一定不为空，所以加了 !\n const result = this.callEasyMethod1?.foo5?.('string1') as string\n console.log(result) // string1\n },\n callMethodTest(text: string): string | null {\n const result = this.callEasyMethod1?.foo5?.(text) as string\n return result\n }\n }\n}\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/methods/call-method-easycom-options"},"methods_call-method-easycom-uni-modules-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/methods/call-method-easycom-uni-modules-composition.uvue","code":"```vue\n<template>\n <view>\n <call-easy-method-uni-modules ref=\"callEasyMethod1\"></call-easy-method-uni-modules>\n </view>\n</template>\n\n<script setup lang=\"uts\">\nimport { testInOtherFile } from './call-method-easycom-uni-modules'\n\nconst delay = (): Promise<string> =>\n new Promise((resolve, _) => {\n setTimeout(() => {\n resolve('')\n }, 1000)\n })\n\nconst callEasyMethod1 = ref<CallEasyMethodUniModulesComponentPublicInstance | null>(null)\n\nconst callMethod1 = () => {\n // 调用组件的 foo1 方法\n callEasyMethod1.value?.foo1?.()\n}\nconst callMethod2 = () => {\n // 调用组件的 foo2 方法并传递 1个参数\n callEasyMethod1.value?.foo2?.(Date.now())\n}\nconst callMethod3 = () => {\n // 调用组件的 foo3 方法并传递 2个参数\n callEasyMethod1.value?.foo3?.(Date.now(), Date.now())\n}\nconst callMethod4 = () => {\n // 调用组件的 foo4 方法并传递 callback\n callEasyMethod1.value?.foo4?.(() => {\n console.log('callback')\n })\n}\nconst callMethod5 = () => {\n // 注意： 返回值可能为 null，当前例子一定不为空，所以加了 !\n const result = callEasyMethod1.value?.foo5?.('string5') as string\n console.log(result) // string1\n}\nconst callMethodTest = (text: string): string | null => {\n const result = callEasyMethod1.value?.foo5?.(text) as string\n return result\n}\nconst callMethodInOtherFile = (text: string): string => {\n return testInOtherFile(callEasyMethod1.value!, text)\n}\n\nconst call = async (): Promise<void> => {\n callMethod1()\n await delay()\n callMethod2()\n await delay()\n callMethod3()\n await delay()\n callMethod4()\n await delay()\n callMethod5()\n}\n\nonReady(() => {\n call()\n})\n\ndefineExpose({\n callMethodTest,\n callMethodInOtherFile\n})\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/methods/call-method-easycom-uni-modules-composition"},"methods_call-method-easycom-uni-modules-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/methods/call-method-easycom-uni-modules-options.uvue","code":"```vue\n<template>\n <view>\n <call-easy-method-uni-modules ref=\"callEasyMethod1\"></call-easy-method-uni-modules>\n </view>\n</template>\n\n<script lang=\"uts\">\nimport { testInOtherFile } from './call-method-easycom-uni-modules'\n\nconst delay = (): Promise<string> =>\n new Promise((resolve, _) => {\n setTimeout(() => {\n resolve('')\n }, 1000)\n })\n\nexport default {\n data() {\n return {\n callEasyMethod1: null as CallEasyMethodUniModulesComponentPublicInstance | null\n }\n },\n onReady() {\n // 通过组件 ref 属性获取组件实例, 组件标签名首字母大写，驼峰+ComponentPublicInstance\n this.callEasyMethod1 = this.$refs['callEasyMethod1'] as CallEasyMethodUniModulesComponentPublicInstance\n\n this.call()\n },\n methods: {\n async call(): Promise<void> {\n this.callMethod1()\n await delay()\n this.callMethod2()\n await delay()\n this.callMethod3()\n await delay()\n this.callMethod4()\n await delay()\n this.callMethod5()\n },\n callMethod1() {\n // 调用组件的 foo1 方法\n this.callEasyMethod1?.foo1?.()\n },\n callMethod2() {\n // 调用组件的 foo2 方法并传递 1个参数\n this.callEasyMethod1?.foo2?.(Date.now())\n },\n callMethod3() {\n // 调用组件的 foo3 方法并传递 2个参数\n this.callEasyMethod1?.foo3?.(Date.now(), Date.now())\n },\n callMethod4() {\n // 调用组件的 foo4 方法并传递 callback\n this.callEasyMethod1?.foo4?.(() => {\n console.log('callback')\n })\n },\n callMethod5() {\n // 注意： 返回值可能为 null，当前例子一定不为空，所以加了 !\n const result = this.callEasyMethod1?.foo5?.('string5') as string\n console.log(result) // string1\n },\n callMethodTest(text: string): string | null {\n const result = this.callEasyMethod1?.foo5?.(text) as string\n return result\n },\n callMethodInOtherFile(text: string): string {\n return testInOtherFile(this.callEasyMethod1!, text)\n }\n }\n}\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/methods/call-method-easycom-uni-modules-options"},"methods_call-method-other-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/methods/call-method-other-composition.uvue","code":"```vue\n<template>\n <view>\n <component1 ref=\"componentRef\"></component1>\n </view>\n</template>\n\n<script setup lang=\"uts\">\n// 非easycom组件需import引用组件 componentRef-composition.uvue\nimport component1 from './component1-composition.uvue'\n\nconst componentRef = ref<ComponentPublicInstance | null>(null)\n\nconst callMethod1 = () => {\n // 通过 $callMethod 调用组件的 foo1 方法\n componentRef.value?.$callMethod('foo1')\n}\n\nconst callMethod2 = () => {\n // 通过 $callMethod 调用组件的 foo2 方法并传递 1个参数\n componentRef.value?.$callMethod('foo2', Date.now())\n}\n\nconst callMethod3 = () => {\n // 通过 $callMethod 调用组件的 foo3 方法并传递 2个参数\n componentRef.value?.$callMethod('foo3', Date.now(), Date.now())\n}\n\nconst callMethod4 = () => {\n // 通过 $callMethod 调用组件的 foo4 方法并传递 callback\n componentRef.value?.$callMethod('foo4', () => {\n console.log('callback')\n })\n}\n\nconst callMethod5 = () => {\n // 通过 $callMethod 调用组件的 foo5 方法并接收返回值\n // 注意： 返回值可能为 null，当前例子一定不为空，所以加了 !\n const result = componentRef.value?.$callMethod('foo5', 'string1') as string\n console.log(result) // string1\n}\n\nconst callMethodTest = (text: string): string | null => {\n const result = componentRef.value?.$callMethod('foo5', text) as string\n return result\n}\n\nconst delay = (): Promise<string> =>\n new Promise((resolve, _) => {\n setTimeout(() => {\n resolve('')\n }, 1000)\n })\n\nconst call = async (): Promise<void> => {\n callMethod1()\n await delay()\n callMethod2()\n await delay()\n callMethod3()\n await delay()\n callMethod4()\n await delay()\n callMethod5()\n}\n\nonReady(() => {\n call()\n})\n\ndefineExpose({\n callMethodTest\n})\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/methods/call-method-other-composition"},"methods_call-method-other-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/methods/call-method-other-options.uvue","code":"```vue\n<template>\n <view>\n <component1 ref=\"component1\"></component1>\n </view>\n</template>\n\n<script>\n// 非easycom组件需import引用组件 component1.uvue\nimport component1 from './component1.uvue'\n\nconst delay = (): Promise<string> =>\n new Promise((resolve, _) => {\n setTimeout(() => {\n resolve('')\n }, 1000)\n })\n\nexport default {\n components: {\n component1\n },\n data() {\n return {\n component1: null as ComponentPublicInstance | null\n }\n },\n onReady() {\n // 通过组件 ref 属性获取组件实例\n this.component1 = this.$refs['component1'] as ComponentPublicInstance;\n this.call()\n },\n methods: {\n async call(): Promise<void> {\n this.callMethod1()\n await delay()\n this.callMethod2()\n await delay()\n this.callMethod3()\n await delay()\n this.callMethod4()\n await delay()\n this.callMethod5()\n },\n callMethod1() {\n // 通过 $callMethod 调用组件的 foo1 方法\n this.component1?.$callMethod('foo1');\n },\n callMethod2() {\n // 通过 $callMethod 调用组件的 foo2 方法并传递 1个参数\n this.component1?.$callMethod('foo2', Date.now());\n },\n callMethod3() {\n // 通过 $callMethod 调用组件的 foo3 方法并传递 2个参数\n this.component1?.$callMethod('foo3', Date.now(), Date.now());\n },\n callMethod4() {\n // 通过 $callMethod 调用组件的 foo4 方法并传递 callback\n this.component1?.$callMethod('foo4', () => {\n console.log('callback')\n });\n },\n callMethod5() {\n // 通过 $callMethod 调用组件的 foo5 方法并接收返回值\n // 注意： 返回值可能为 null，当前例子一定不为空，所以加了 !\n const result = this.component1?.$callMethod('foo5', 'string1') as string;\n console.log(result); // string1\n },\n callMethodTest(text: string): string | null {\n const result = this.component1?.$callMethod('foo5', text) as string;\n return result;\n },\n }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/methods/call-method-other-options"},"methods_call-method-uni-element-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/methods/call-method-uni-element-composition.uvue","code":"```vue\n<template>\n <view>\n <slider :show-value=\"true\" ref=\"sliderRef\"></slider>\n </view>\n</template>\n\n<script setup lang=\"uts\">\nconst sliderRef = ref<UniSliderElement | null>(null)\n\nonReady(() => {\n sliderRef.value!.value = 80\n})\n\nconst callMethodTest = (text: string): string | null => {\n sliderRef.value?.setAttribute('str', text)\n const result = sliderRef.value?.getAttribute('str') as string\n return result\n}\n\ndefineExpose({\n callMethodTest\n})\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/methods/call-method-uni-element-composition"},"methods_call-method-uni-element-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/methods/call-method-uni-element-options.uvue","code":"```vue\n<template>\n <view>\n <slider :show-value=\"true\" ref=\"slider1\"></slider>\n </view>\n</template>\n\n<script>\nexport default {\n data() {\n return {\n slider1: null as UniSliderElement | null\n }\n },\n onReady() {\n // 通过组件 ref 属性获取组件实例, Uni组件名(驼峰)UniElement\n this.slider1 = this.$refs['slider1'] as UniSliderElement;\n this.setValue()\n },\n methods: {\n setValue() {\n this.slider1!.value = 80\n },\n callMethodTest(text: string): string | null {\n this.slider1?.setAttribute('str', text);\n const result = this.slider1?.getAttribute('str') as string;\n return result;\n },\n }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/methods/call-method-uni-element-options"},"methods_component-define-expose":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/methods/component-define-expose.uvue","code":"```vue\n<template>\r\n <view></view>\r\n</template>\r\n\r\n<script setup lang='uts'>\r\n function test(name : string) : string {\r\n return name\r\n }\r\n defineExpose({\r\n test\r\n })\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/methods/component-define-expose"},"methods_component1-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/methods/component1-composition.uvue","code":"```vue\n<template>\n <view>{{ result }}</view>\n</template>\n\n<script setup lang=\"uts\">\nconst result = ref<string>('')\n\nconst foo1 = () => {\n result.value = 'foo1'\n}\n\nconst foo2 = (date1: number) => {\n result.value = 'foo2=' + date1\n}\n\nconst foo3 = (date1: number, date2: number) => {\n result.value = 'foo3=' + date1 + ' ' + date2\n}\n\nconst foo4 = (callback: () => void) => {\n callback()\n}\n\nconst foo5 = (text: string): string => {\n result.value = text\n return text\n}\n\ndefineExpose({\n foo1,\n foo2,\n foo3,\n foo4,\n foo5\n})\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/methods/component1-composition"},"methods_component1":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/methods/component1.uvue","code":"```vue\n<template>\n <view>{{result}}</view>\n</template>\n\n<script>\n export default {\n data() {\n return {\n result: ''\n }\n },\n methods: {\n foo1() {\n this.result = \"foo1\"\n },\n foo2(date1 : number) {\n this.result = \"foo2=\" + date1\n },\n foo3(date1 : number, date2 : number) {\n this.result = \"foo3=\" + date1 + \" \" + date2\n },\n foo4(callback : (() => void)) {\n callback()\n },\n foo5(text1 : string) : string | null {\n this.result = text1\n return text1\n }\n }\n }\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/methods/component1"},"mixins_mixins-app-page-namesake":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/mixins/mixins-app-page-namesake.uvue","code":"```vue\n<template>\n <!-- #ifdef APP -->\n <scroll-view style=\"flex: 1\">\n <!-- #endif -->\n <view class=\"page\">\n <text class=\"bold\">props:</text>\n <text class=\"mt-10 namesake-mixin-prop\">{{ namesakeMixinProp }}</text>\n <text class=\"mt-10 namesake-child-mixin-prop\">{{ namesakeChildMixinProp }}</text>\n\n <text class=\"bold mt-10\">data:</text>\n <text class=\"mt-10 namesake-mixin-data-msg\">{{ namesakeMixinDataMsg }}</text>\n <text class=\"mt-10 namesake-child-mixin-data-msg\">{{ namesakeChildMixinDataMsg }}</text>\n\n <text class=\"bold mt-10\">computed:</text>\n <text class=\"mt-10 namesake-mixin-computed\">{{ namesakeMixinComputed }}</text>\n <text class=\"mt-10 namesake-child-mixin-computed\">{{ namesakeChildMixinComputed }}</text>\n\n <text class=\"mt-10 bold\">method:</text>\n <text class=\"mt-10 namesake-mixin-method\">{{ namesakeMixinMethod() }}</text>\n <text class=\"mt-10 namesake-child-mixin-method\">{{ namesakeChildMixinMethod() }}</text>\n\n <text class=\"mt-10 bold\">mixin component:</text>\n <GlobalMixinComp1 />\n <GlobalChildMixinComp1 />\n <GlobalMixinComp2 />\n <GlobalChildMixinComp2 />\n <MixinComp1 />\n <ChildMixinComp1 />\n <MixinComp2 />\n <ChildMixinComp2 />\n <MixinComp />\n </view>\n <!-- #ifdef APP -->\n </scroll-view>\n <!-- #endif -->\n</template>\n\n<script lang=\"uts\">\nimport MixinComp2 from './components/MixinComp2.uvue'\nimport ChildMixinComp2 from './components/ChildMixinComp2.uvue'\nimport CompForPage from './components/CompForPage.uvue'\nimport { pageMixin } from './mixins'\n\nexport default {\n components: {\n MixinComp: CompForPage\n },\n mixins: [\n pageMixin,\n {\n mixins: [{\n components: {ChildMixinComp2},\n props: {\n childMixinProp2: {\n type: String,\n default: '通过字面量定义非全局 child mixin props'\n },\n namesakeChildMixinProp: {\n type: String,\n default: '通过字面量定义非全局同名 child mixin props'\n }\n },\n data() {\n return {\n childMixinDataMsg2: '通过字面量定义非全局 child mixin data',\n namesakeChildMixinDataMsg: '通过字面量定义非全局同名 child mixin data',\n childMixinOnLoadMsg2: '',\n childMixinWatchMsg2: ''\n }\n },\n computed: {\n childMixinComputed2(): string {\n const res = `通过字面量定义非全局 child mixin computed, 更新后的 childMixinOnLoadMsg2: ${this.childMixinOnLoadMsg2}`\n console.log(res)\n return res\n },\n namesakeChildMixinComputed(): string {\n const res = '通过字面量定义非全局同名 child mixin computed'\n console.log(res)\n return res\n }\n },\n watch: {\n globalMixinOnloadMsg1(newVal: string) {\n this.childMixinWatchMsg2 = `通过字面量定义非全局 child mixin watch, 更新后的 globalMixinOnloadMsg1: ${newVal}`\n console.log(this.childMixinWatchMsg2)\n },\n },\n onLoad() {\n const res = '通过字面量定义非全局 child mixin onLoad'\n console.log(res)\n this.childMixinOnLoadMsg2 = res\n },\n methods: {\n childMixinMethod2(): string {\n const res = '通过字面量定义非全局 child mixin method'\n console.log(res)\n return res\n },\n namesakeChildMixinMethod(): string {\n const res = '通过字面量定义非全局同名 child mixin method'\n console.log(res)\n return res\n },\n },\n }],\n components: {MixinComp2},\n props: {\n mixinProp2: {\n type: String,\n default: '通过字面量定义非全局 mixin props'\n },\n namesakeMixinProp: {\n type: String,\n default: '通过字面量定义非全局同名 mixin props'\n }\n },\n data() {\n return {\n mixinDataMsg2: '通过字面量定义非全局 mixin data',\n namesakeMixinDataMsg: '通过字面量定义非全局同名 mixin data',\n mixinOnloadMsg2: '',\n mixinWatchMsg2: ''\n }\n },\n computed: {\n mixinComputed2(): string {\n const res = `通过字面量定义非全局 mixin computed, 更新后的 mixinOnloadMsg2: ${this.mixinOnloadMsg2}`\n console.log(res)\n return res\n },\n namesakeMixinComputed(): string {\n const res = '通过字面量定义非全局同名 mixin computed'\n console.log(res)\n return res\n }\n },\n watch: {\n globalMixinOnloadMsg1(newVal: string) {\n this.mixinWatchMsg2 = `通过 defineMixin 定义非全局 child mixin watch, 更新后的 globalMixinOnloadMsg1: ${newVal}`\n console.log(this.mixinWatchMsg2)\n },\n },\n onLoad() {\n const res = '通过字面量定义非全局 mixin onLoad'\n console.log(res)\n this.mixinOnloadMsg2 = res\n },\n methods: {\n mixinMethod2(): string {\n const res = '通过字面量定义非全局 mixin method'\n console.log(res)\n return res\n },\n namesakeMixinMethod(): string {\n const res = '通过字面量定义非全局同名 mixin method'\n console.log(res)\n return res\n }\n },\n },\n ],\n props: {\n namesakeMixinProp: {\n type: String,\n default: '页面内的同名 props'\n },\n namesakeChildMixinProp: {\n type: String,\n default: '页面内的同名 child props'\n },\n },\n data(){\n return {\n namesakeMixinDataMsg: '页面内的同名 data',\n namesakeChildMixinDataMsg: '页面内的同名 child data',\n mixinWatchMsg: ''\n }\n },\n watch: {\n globalMixinOnloadMsg1(newVal: string) {\n this.mixinWatchMsg = `页面内部定义的 watch, 更新后的 globalMixinOnloadMsg1: ${newVal}`\n console.log(this.mixinWatchMsg)\n },\n },\n computed: {\n namesakeMixinComputed(): string {\n const res = '页面内的同名 computed'\n console.log(res)\n return res\n },\n namesakeChildMixinComputed(): string {\n const res = '页面内的同名 child computed'\n console.log(res)\n return res\n }\n },\n methods: {\n namesakeMixinMethod(): string {\n const res = '页面内的同名 method'\n console.log(res)\n return res\n },\n namesakeChildMixinMethod(): string {\n const res = '页面内的同名 child method'\n console.log(res)\n return res\n },\n }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/mixins/mixins-app-page-namesake"},"mixins_mixins-app":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/mixins/mixins-app.uvue","code":"```vue\n<template>\n <!-- #ifdef APP -->\n <scroll-view style=\"flex: 1\">\n <!-- #endif -->\n <view class=\"page\">\n <button type=\"primary\" @click=\"goMixinPageNamesake\">go mixin page namesake</button>\n <text class=\"mt-10 bold\">props:</text>\n <text class=\"mt-10 global-mixin-prop-1\">{{ globalMixinProp1 }}</text>\n <text class=\"mt-10 global-child-mixin-prop-1\">{{ globalChildMixinProp1 }}</text>\n <text class=\"mt-10 global-mixin-prop-2\">{{ globalMixinProp2 }}</text>\n <text class=\"mt-10 global-child-mixin-prop-2\">{{ globalChildMixinProp2 }}</text>\n <text class=\"mt-10 mixin-prop-1\">{{ mixinProp1 }}</text>\n <text class=\"mt-10 child-mixin-prop-1\">{{ childMixinProp1 }}</text>\n <text class=\"mt-10 mixin-prop-2\">{{ mixinProp2 }}</text>\n <text class=\"mt-10 child-mixin-prop-2\">{{ childMixinProp2 }}</text>\n <text class=\"mt-10 namesake-mixin-prop\">{{ namesakeMixinProp }}</text>\n <text class=\"mt-10 namesake-child-mixin-prop\">{{ namesakeChildMixinProp }}</text>\n\n <text class=\"bold mt-10\">data:</text>\n <text class=\"mt-10 global-mixin-data-msg-1\">{{ globalMixinDataMsg1 }}</text>\n <text class=\"mt-10 global-child-mixin-data-msg-1\">{{ globalChildMixinDataMsg1 }}</text>\n <text class=\"mt-10 global-mixin-data-msg-2\">{{ globalMixinDataMsg2 }}</text>\n <text class=\"mt-10 global-child-mixin-data-msg-2\">{{ globalChildMixinDataMsg2 }}</text>\n <text class=\"mt-10 mixin-data-msg-1\">{{ mixinDataMsg1 }}</text>\n <text class=\"mt-10 child-mixin-data-msg-1\">{{ childMixinDataMsg1 }}</text>\n <text class=\"mt-10 mixin-data-msg-2\">{{ mixinDataMsg2 }}</text>\n <text class=\"mt-10 child-mixin-data-msg-2\">{{ childMixinDataMsg2 }}</text>\n <text class=\"mt-10 namesake-mixin-data-msg\">{{ namesakeMixinDataMsg }}</text>\n <text class=\"mt-10 namesake-child-mixin-data-msg\">{{ namesakeChildMixinDataMsg }}</text>\n\n <text class=\"bold mt-10\">computed:</text>\n <text class=\"mt-10 global-mixin-computed-1\">{{ globalMixinComputed1 }}</text>\n <text class=\"mt-10 global-child-mixin-computed-1\">{{ globalChildMixinComputed1 }}</text>\n <text class=\"mt-10 global-mixin-computed-2\">{{ globalMixinComputed2 }}</text>\n <text class=\"mt-10 global-child-mixin-computed-2\">{{ globalChildMixinComputed2 }}</text>\n <text class=\"mt-10 mixin-computed-1\">{{ mixinComputed1 }}</text>\n <text class=\"mt-10 child-mixin-computed-1\">{{ childMixinComputed1 }}</text>\n <text class=\"mt-10 mixin-computed-2\">{{ mixinComputed2 }}</text>\n <text class=\"mt-10 child-mixin-computed-2\">{{ childMixinComputed2 }}</text>\n <text class=\"mt-10 namesake-mixin-computed\">{{ namesakeMixinComputed }}</text>\n <text class=\"mt-10 namesake-child-mixin-computed\">{{ namesakeChildMixinComputed }}</text>\n\n <text class=\"bold mt-10\">watch:</text>\n <text class=\"mt-10 global-mixin-watch-1\">{{ globalMixinWatchMsg1 }}</text>\n <text class=\"mt-10 global-child-mixin-watch-1\">{{ globalChildMixinWatchMsg1 }}</text>\n <text class=\"mt-10 global-mixin-watch-2\">{{ globalMixinWatchMsg2 }}</text>\n <text class=\"mt-10 global-child-mixin-watch-2\">{{ globalChildMixinWatchMsg2 }}</text>\n <text class=\"mt-10 mixin-watch-1\">{{ mixinWatchMsg1 }}</text>\n <text class=\"mt-10 child-mixin-watch-1\">{{ childMixinWatchMsg1 }}</text>\n <text class=\"mt-10 mixin-watch-2\">{{ mixinWatchMsg2 }}</text>\n <text class=\"mt-10 child-mixin-watch-2\">{{ childMixinWatchMsg2 }}</text>\n <text class=\"mt-10 mixin-watch\">{{ mixinWatchMsg }}</text>\n\n <text class=\"bold mt-10\">lifecycle:</text>\n <text class=\"mt-10\">{{ globalMixinOnloadMsg1 }}</text>\n <text class=\"mt-10\">{{ globalMixinOnloadMsg2 }}</text>\n <text class=\"mt-10\">{{ globalChildMixinOnloadMsg1 }}</text>\n <text class=\"mt-10\">{{ globalChildMixinOnloadMsg2 }}</text>\n <text class=\"mt-10\">{{ mixinOnloadMsg1 }}</text>\n <text class=\"mt-10\">{{ mixinOnloadMsg2 }}</text>\n <text class=\"mt-10\">{{ childMixinOnloadMsg1 }}</text>\n <text class=\"mt-10\">{{ childMixinOnloadMsg2 }}</text>\n <text class=\"mt-10\">{{ onloadMsg }}</text>\n\n <text class=\"mt-10 bold\">method:</text>\n <text class=\"mt-10 global-mixin-method-1\">{{ globalMixinMethod1() }}</text>\n <text class=\"mt-10 global-child-mixin-method-1\">{{ globalChildMixinMethod1() }}</text>\n <text class=\"mt-10 global-mixin-method-2\">{{ globalMixinMethod2() }}</text>\n <text class=\"mt-10 global-child-mixin-method-2\">{{ globalChildMixinMethod2() }}</text>\n <text class=\"mt-10 mixin-method-1\">{{ mixinMethod1() }}</text>\n <text class=\"mt-10 child-mixin-method-1\">{{ childMixinMethod1() }}</text>\n <text class=\"mt-10 mixin-method-2\">{{ mixinMethod2() }}</text>\n <text class=\"mt-10 child-mixin-method-2\">{{ childMixinMethod2() }}</text>\n <text class=\"mt-10 namesake-mixin-method\">{{ namesakeMixinMethod() }}</text>\n <text class=\"mt-10 namesake-child-mixin-method\">{{ namesakeChildMixinMethod() }}</text>\n\n <text class=\"mt-10 bold\">component:</text>\n <Comp1\n title=\"title\"\n @globalMixinEmit1=\"(arg: string) => handleMixinEmitter('globalMixinEmit1', arg)\"\n @globalChildMixinEmit1=\"(arg: string) => handleMixinEmitter('globalChildMixinEmit1', arg)\"\n @globalMixinEmit2=\"(arg: string) => handleMixinEmitter('globalMixinEmit2', arg)\"\n @globalChildMixinEmit2=\"(arg: string) => handleMixinEmitter('globalChildMixinEmit2', arg)\"\n @mixinEmit=\"(arg: string) => handleMixinEmitter('mixinEmit', arg)\"\n @childMixinEmit=\"(arg: string) => handleMixinEmitter('childMixinEmit', arg)\" />\n <text v-if=\"handleMixinEmitterMsg\" class=\"mt-10 handle-mixin-emitter-msg\"\n >handleMixinEmitterMsg: {{ handleMixinEmitterMsg }}</text\n >\n <Comp2 class='comp2' title=\"title\" />\n <text class=\"mt-10 bold\">mixin component:</text>\n <GlobalMixinComp1 />\n <GlobalChildMixinComp1 />\n <GlobalMixinComp2 />\n <GlobalChildMixinComp2 />\n <MixinComp1 />\n <ChildMixinComp1 />\n <MixinComp2 />\n <ChildMixinComp2 />\n </view>\n <!-- #ifdef APP -->\n </scroll-view>\n <!-- #endif -->\n</template>\n\n<script lang=\"uts\">\nimport Comp1 from './components/Comp1.uvue'\nimport Comp2 from './components/Comp2.uvue'\nimport MixinComp2 from './components/MixinComp2.uvue'\nimport ChildMixinComp2 from './components/ChildMixinComp2.uvue'\nimport { pageMixin } from './mixins'\n\nexport default {\n components: {\n Comp1,\n Comp2,\n },\n mixins: [\n pageMixin,\n {\n mixins: [{\n components: {ChildMixinComp2},\n props: {\n childMixinProp2: {\n type: String,\n default: '通过字面量定义非全局 child mixin props'\n },\n namesakeChildMixinProp: {\n type: String,\n default: '通过字面量定义非全局同名 child mixin props'\n }\n },\n data() {\n return {\n childMixinDataMsg2: '通过字面量定义非全局 child mixin data',\n namesakeChildMixinDataMsg: '通过字面量定义非全局同名 child mixin data',\n childMixinOnloadMsg2: '',\n childMixinOnloadTime2: 0,\n childMixinWatchMsg2: ''\n }\n },\n computed: {\n childMixinComputed2(): string {\n const res = `通过字面量定义非全局 child mixin computed, 更新后的 childMixinOnloadMsg2: ${this.childMixinOnloadMsg2}`\n console.log(res)\n return res\n },\n namesakeChildMixinComputed(): string {\n const res = '通过字面量定义非全局同名 child mixin computed'\n console.log(res)\n return res\n }\n },\n watch: {\n globalMixinOnloadMsg1(newVal: string) {\n this.childMixinWatchMsg2 = `通过字面量定义非全局 child mixin watch, 更新后的 globalMixinOnloadMsg1: ${newVal}`\n console.log(this.childMixinWatchMsg2)\n },\n },\n onLoad() {\n this.childMixinOnloadTime2 = Date.now()\n const res = '通过字面量定义非全局 child mixin onLoad'\n console.log(res)\n this.childMixinOnloadMsg2 = res\n },\n methods: {\n childMixinMethod2(): string {\n const res = '通过字面量定义非全局 child mixin method'\n console.log(res)\n return res\n },\n namesakeChildMixinMethod(): string {\n const res = '通过字面量定义非全局同名 child mixin method'\n console.log(res)\n return res\n },\n },\n }],\n components: {MixinComp2},\n props: {\n mixinProp2: {\n type: String,\n default: '通过字面量定义非全局 mixin props'\n },\n namesakeMixinProp: {\n type: String,\n default: '通过字面量定义非全局同名 mixin props'\n }\n },\n data() {\n return {\n mixinDataMsg2: '通过字面量定义非全局 mixin data',\n namesakeMixinDataMsg: '通过字面量定义非全局同名 mixin data',\n mixinOnloadMsg2: '',\n mixinOnloadTime2: 0,\n mixinWatchMsg2: ''\n }\n },\n computed: {\n mixinComputed2(): string {\n const res = `通过字面量定义非全局 mixin computed, 更新后的 mixinOnloadMsg2: ${this.mixinOnloadMsg2}`\n console.log(res)\n return res\n },\n namesakeMixinComputed(): string {\n const res = '通过字面量定义非全局同名 mixin computed'\n console.log(res)\n return res\n }\n },\n watch: {\n globalMixinOnloadMsg1(newVal: string) {\n this.mixinWatchMsg2 = `通过字面量定义非全局 mixin watch, 更新后的 globalMixinOnloadMsg1: ${newVal}`\n console.log(this.mixinWatchMsg2)\n },\n },\n onLoad() {\n this.mixinOnloadTime2 = Date.now()\n const res = '通过字面量定义非全局 mixin onLoad'\n console.log(res)\n this.mixinOnloadMsg2 = res\n },\n methods: {\n mixinMethod2(): string {\n const res = '通过字面量定义非全局 mixin method'\n console.log(res)\n return res\n },\n namesakeMixinMethod(): string {\n const res = '通过字面量定义非全局同名 mixin method'\n console.log(res)\n return res\n }\n },\n },\n ],\n data(){\n return {\n handleMixinEmitterMsg: '',\n mixinWatchMsg: '',\n mixinOnloadTime: 0,\n onloadMsg: ''\n }\n },\n watch: {\n globalMixinOnloadMsg1(newVal: string) {\n this.mixinWatchMsg = `页面内部定义的 watch, 更新后的 globalMixinOnloadMsg1: ${newVal}`\n console.log(this.mixinWatchMsg)\n },\n },\n onLoad(){\n this.mixinOnloadTime = Date.now()\n const res = '页面内的 onLoad'\n console.log(res)\n this.onloadMsg = res\n },\n methods: {\n goMixinPageNamesake(){\n uni.navigateTo({url: './mixins-app-page-namesake'})\n },\n handleMixinEmitter(emit: string, arg: string){\n this.handleMixinEmitterMsg = `触发 ${emit}, 参数为 ${arg}`\n console.log(this.handleMixinEmitterMsg)\n }\n }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/mixins/mixins-app"},"mixins_mixins-web":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/mixins/mixins-web.uvue","code":"```vue\n<template>\r\n <!-- #ifdef APP -->\r\n <scroll-view style=\"flex: 1\">\r\n <!-- #endif -->\r\n <view class=\"page\">\r\n <text id=\"mixin-prop\" class=\"mb-10\">mixinProp: {{mixinProp}}</text>\r\n <text id=\"mixin-data-msg\" class=\"mb-10\">mixinDataMsg: {{mixinDataMsg}}</text>\r\n <text id=\"mixin-onload-msg\" class=\"mb-10\">mixinOnloadMsg: {{mixinOnloadMsg}}</text>\r\n <text id=\"mixin-computed\" class=\"mb-10\">mixinComputed: {{mixinComputed}}</text>\r\n\r\n <Comp1 title=\"title\" @globalMixinEmit1=\"(arg: string) => handleMixinEmitter('globalMixinEmit1', arg)\"\r\n @globalChildMixinEmit1=\"(arg: string) => handleMixinEmitter('globalChildMixinEmit1', arg)\"\r\n @globalMixinEmit2=\"(arg: string) => handleMixinEmitter('globalMixinEmit2', arg)\"\r\n @globalChildMixinEmit2=\"(arg: string) => handleMixinEmitter('globalChildMixinEmit2', arg)\"\r\n @mixinEmit=\"(arg: string) => handleMixinEmitter('mixinEmit', arg)\"\r\n @childMixinEmit=\"(arg: string) => handleMixinEmitter('childMixinEmit', arg)\" />\r\n <text v-if=\"handleMixinEmitterMsg\" class=\"mt-10 handle-mixin-emitter-msg\">\r\n handleMixinEmitterMsg: {{ handleMixinEmitterMsg }}\r\n </text>\r\n <Comp2 class='comp2' title=\"title\" />\r\n </view>\r\n <!-- #ifdef APP -->\r\n </scroll-view>\r\n <!-- #endif -->\r\n</template>\r\n\r\n<script lang=\"uts\">\r\n import Comp1 from './components/Comp1.uvue'\r\n import Comp2 from './components/Comp2.uvue'\r\n export default {\r\n components: {\r\n Comp1,\r\n Comp2,\r\n },\r\n mixins: [defineMixin({\r\n props: {\r\n mixinProp: {\r\n type: String,\r\n default: '通过字面量定义非全局 mixin props'\r\n }\r\n },\r\n data() {\r\n return {\r\n handleMixinEmitterMsg: '',\r\n mixinDataMsg: '通过字面量定义非全局 mixin data',\r\n mixinOnloadMsg: ''\r\n }\r\n },\r\n computed: {\r\n mixinComputed(): string {\r\n const res = `通过字面量定义非全局 mixin computed, 更新后的 mixinOnloadMsg: ${this.mixinOnloadMsg}`\r\n console.log(res)\r\n return res\r\n }\r\n },\r\n onLoad() {\r\n this.mixinOnloadMsg = 'mixin onLoad msg in onLoad'\r\n },\r\n methods: {\r\n mixinMethod(): string {\r\n const res = '通过字面量定义非全局 mixin method'\r\n console.log(res)\r\n return res\r\n },\r\n handleMixinEmitter(emit: string, arg: string) {\r\n this.handleMixinEmitterMsg = `触发 ${emit}, 参数为 ${arg}`\r\n console.log(this.handleMixinEmitterMsg)\r\n }\r\n },\r\n })]\r\n }\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/mixins/mixins-web"},"nextTick_child-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/nextTick/child-composition.uvue","code":"```vue\n<template>\r\n <!-- #ifdef APP -->\r\n <scroll-view style=\"flex: 1\">\r\n <!-- #endif -->\r\n <view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text ref=\"text\">title:</text>\r\n <text id=\"child-text\">{{ dataInfo.title }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text ref=\"text\">before $nextTick title:</text>\r\n <text>{{ dataInfo.beforeNextTickTitle }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text ref=\"text\">after $nextTick title:</text>\r\n <text>{{ dataInfo.afterNextTickTitle }}</text>\r\n </view>\r\n <button id=\"child-test-next-tick-btn\" @click=\"childTestNextTick\">child test nextTick</button>\r\n </view>\r\n <!-- #ifdef APP -->\r\n </scroll-view>\r\n <!-- #endif -->\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n type DataInfo = {\r\n title : string\r\n beforeNextTickTitle : string\r\n afterNextTickTitle : string\r\n }\r\n\r\n const dataInfo = reactive({\r\n title: 'default title',\r\n beforeNextTickTitle: '',\r\n afterNextTickTitle: '',\r\n } as DataInfo)\r\n\r\n const testNextTick = async () => {\r\n const childText = uni.getElementById('child-text')!\r\n dataInfo.title = 'new title'\r\n\r\n // #ifdef APP\r\n dataInfo.beforeNextTickTitle = childText.getAttribute('value')!\r\n // #endif\r\n // #ifndef APP\r\n // @ts-ignore\r\n dataInfo.beforeNextTickTitle = childText.textContent\r\n // #endif\n \r\n await nextTick()\n \r\n // #ifdef APP\r\n dataInfo.afterNextTickTitle = childText.getAttribute('value')!\r\n // #endif\r\n // #ifndef APP\r\n // @ts-ignore\r\n dataInfo.afterNextTickTitle = childText.textContent\r\n // #endif\r\n }\r\n const childTestNextTick = () => {\r\n testNextTick()\r\n }\r\n\r\n defineExpose({\r\n dataInfo\r\n })\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/nextTick/child-composition"},"nextTick_child-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/nextTick/child-options.uvue","code":"```vue\n<template>\r\n <!-- #ifdef APP -->\r\n <scroll-view style=\"flex: 1\">\r\n <!-- #endif -->\r\n <view>\r\n <view class=\"flex justify-between mb-10\">\r\n <text ref=\"text\">title for callback:</text>\r\n <text id=\"child-text-callback\">{{ dataInfo.titleForCallback }}</text>\r\n </view>\r\n <view class=\"flex justify-between mb-10\">\r\n <text ref=\"text\">before $nextTick callback title:</text>\r\n <text>{{ dataInfo.beforeNextTickCallbackTitle }}</text>\r\n </view>\r\n <view class=\"flex justify-between mb-10\">\r\n <text ref=\"text\">after $nextTick callback title:</text>\r\n <text>{{ dataInfo.afterNextTickCallbackTitle }}</text>\r\n </view>\r\n <view class=\"flex justify-between mb-10\">\r\n <text ref=\"text\">title for promise:</text>\r\n <text id=\"child-text-promise\">{{ dataInfo.titleForPromise }}</text>\r\n </view>\r\n <view class=\"flex justify-between mb-10\">\r\n <text ref=\"text\">before $nextTick promise title:</text>\r\n <text>{{ dataInfo.beforeNextTickPromiseTitle }}</text>\r\n </view>\r\n <view class=\"flex justify-between mb-10\">\r\n <text ref=\"text\">after $nextTick promise title:</text>\r\n <text>{{ dataInfo.afterNextTickPromiseTitle }}</text>\r\n </view>\r\n <button id=\"child-test-next-tick-btn\" @click=\"childTestNextTick\">child test $nextTick</button>\r\n </view>\r\n <!-- #ifdef APP -->\r\n </scroll-view>\r\n <!-- #endif -->\r\n</template>\r\n\r\n<script lang=\"uts\">\r\n type DataInfo = {\r\n titleForCallback : string\r\n beforeNextTickCallbackTitle : string\r\n afterNextTickCallbackTitle : string\r\n titleForPromise : string\r\n beforeNextTickPromiseTitle : string\r\n afterNextTickPromiseTitle : string\r\n }\r\n\r\n export default {\r\n data() {\r\n return {\r\n dataInfo: {\r\n titleForCallback: 'default title for callback',\r\n beforeNextTickCallbackTitle: '',\r\n afterNextTickCallbackTitle: '',\r\n titleForPromise: 'default title for promise',\r\n beforeNextTickPromiseTitle: '',\r\n afterNextTickPromiseTitle: '',\r\n } as DataInfo\r\n }\r\n },\r\n methods: {\r\n childTestNextTick() {\r\n this.nextTickCallback()\r\n this.nextTickPromise()\r\n },\r\n nextTickCallback() {\r\n const childText = uni.getElementById('child-text-callback')!\r\n this.dataInfo.titleForCallback = 'new title for callback'\r\n\r\n // #ifdef APP\r\n this.dataInfo.beforeNextTickCallbackTitle = childText.getAttribute('value')!\r\n // #endif\r\n // #ifndef APP\r\n // @ts-ignore\r\n this.dataInfo.beforeNextTickCallbackTitle = childText.textContent\r\n // #endif\n \r\n this.$nextTick(() => {\r\n // #ifdef APP\r\n this.dataInfo.afterNextTickCallbackTitle = childText.getAttribute('value')!\r\n // #endif\r\n // #ifndef APP\r\n // @ts-ignore\r\n this.dataInfo.afterNextTickCallbackTitle = childText.textContent\r\n // #endif\r\n })\r\n },\r\n nextTickPromise() {\r\n const childText = uni.getElementById('child-text-promise')!\r\n this.dataInfo.titleForPromise = 'new title for promise'\r\n\r\n // #ifdef APP\r\n this.dataInfo.beforeNextTickPromiseTitle = childText.getAttribute('value')!\r\n // #endif\r\n // #ifndef APP\r\n // @ts-ignore\r\n this.dataInfo.beforeNextTickPromiseTitle = childText.textContent\r\n // #endif\n \r\n this.$nextTick().then(() => {\r\n // #ifdef APP\r\n this.dataInfo.afterNextTickPromiseTitle = childText.getAttribute('value')!\r\n // #endif\r\n // #ifndef APP\r\n // @ts-ignore\r\n this.dataInfo.afterNextTickPromiseTitle = childText.textContent\r\n // #endif\r\n })\r\n }\r\n }\r\n }\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/nextTick/child-options"},"nextTick_nextTick-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/nextTick/nextTick-composition.uvue","code":"```vue\n<template>\r\n <!-- #ifdef APP -->\r\n <scroll-view style=\"flex: 1\">\r\n <!-- #endif -->\r\n <view class=\"page\">\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text ref=\"text\">title:</text>\r\n <text id=\"page-text\">{{ dataInfo.title }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text ref=\"text\">before $nextTick title:</text>\r\n <text>{{ dataInfo.beforeNextTickTitle }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text ref=\"text\">after $nextTick title:</text>\r\n <text>{{ dataInfo.afterNextTickTitle }}</text>\r\n </view>\r\n <button id=\"page-test-next-tick-btn\" @click=\"pageTestNextTick\">\r\n page test $nextTick\r\n </button>\r\n <Child id=\"child-component\" />\r\n </view>\r\n <!-- #ifdef APP -->\r\n </scroll-view>\r\n <!-- #endif -->\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n import Child from './child-composition.uvue'\r\n\r\n type DataInfo = {\r\n title : string\r\n beforeNextTickTitle : string\r\n afterNextTickTitle : string\r\n }\r\n\r\n const dataInfo = reactive({\r\n title: 'default title',\r\n beforeNextTickTitle: '',\r\n afterNextTickTitle: '',\r\n } as DataInfo)\r\n\r\n const testNextTick = async () => {\r\n const pageText = uni.getElementById('page-text')!\r\n dataInfo.title = 'new title'\r\n\r\n // #ifdef APP\r\n dataInfo.beforeNextTickTitle = pageText.getAttribute('value')!\r\n // #endif\r\n // #ifndef APP\r\n // @ts-ignore\r\n dataInfo.beforeNextTickTitle = pageText.textContent\r\n // #endif\n \r\n await nextTick()\n \r\n // #ifdef APP\r\n dataInfo.afterNextTickTitle = pageText.getAttribute('value')!\r\n // #endif\r\n // #ifndef APP\r\n // @ts-ignore\r\n dataInfo.afterNextTickTitle = pageText.textContent\r\n // #endif\r\n }\r\n const pageTestNextTick = () => {\r\n testNextTick()\r\n }\r\n\r\n defineExpose({\r\n dataInfo\r\n })\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/nextTick/nextTick-composition"},"nextTick_nextTick-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/nextTick/nextTick-options.uvue","code":"```vue\n<template>\r\n <!-- #ifdef APP -->\r\n <scroll-view style=\"flex: 1\">\r\n <!-- #endif -->\r\n <view class=\"page\">\r\n <view class=\"flex justify-between mb-10\">\r\n <text ref=\"text\">title for callback:</text>\r\n <text id=\"page-text-callback\">{{ dataInfo.titleForCallback }}</text>\r\n </view>\r\n <view class=\"flex justify-between mb-10\">\r\n <text ref=\"text\">before $nextTick callback title:</text>\r\n <text>{{ dataInfo.beforeNextTickCallbackTitle }}</text>\r\n </view>\r\n <view class=\"flex justify-between mb-10\">\r\n <text ref=\"text\">after $nextTick callback title:</text>\r\n <text>{{ dataInfo.afterNextTickCallbackTitle }}</text>\r\n </view>\r\n <view class=\"flex justify-between mb-10\">\r\n <text ref=\"text\">title for promise:</text>\r\n <text id=\"page-text-promise\">{{ dataInfo.titleForPromise }}</text>\r\n </view>\r\n <view class=\"flex justify-between mb-10\">\r\n <text ref=\"text\">before $nextTick promise title:</text>\r\n <text>{{ dataInfo.beforeNextTickPromiseTitle }}</text>\r\n </view>\r\n <view class=\"flex justify-between mb-10\">\r\n <text ref=\"text\">after $nextTick promise title:</text>\r\n <text>{{ dataInfo.afterNextTickPromiseTitle }}</text>\r\n </view>\r\n <button id=\"page-test-next-tick-btn\" @click=\"pageTestNextTick\">page test $nextTick</button>\r\n <Child id=\"child-component\" />\r\n </view>\r\n <!-- #ifdef APP -->\r\n </scroll-view>\r\n <!-- #endif -->\r\n</template>\r\n\r\n<script lang=\"uts\">\r\n import Child from './child-options.uvue'\r\n \r\n type DataInfo = {\r\n titleForCallback : string\r\n beforeNextTickCallbackTitle : string\r\n afterNextTickCallbackTitle : string\r\n titleForPromise : string\r\n beforeNextTickPromiseTitle : string\r\n afterNextTickPromiseTitle : string\r\n }\r\n\r\n export default {\r\n components: {\r\n Child\r\n },\r\n data() {\r\n return {\r\n dataInfo: {\r\n titleForCallback: 'default title for callback',\r\n beforeNextTickCallbackTitle: '',\r\n afterNextTickCallbackTitle: '',\r\n titleForPromise: 'default title for promise',\r\n beforeNextTickPromiseTitle: '',\r\n afterNextTickPromiseTitle: '',\r\n } as DataInfo\r\n }\r\n },\r\n methods: {\r\n pageTestNextTick() {\r\n this.nextTickCallback()\r\n this.nextTickPromise()\r\n },\r\n nextTickCallback() {\r\n const pageText = uni.getElementById('page-text-callback')!\r\n this.dataInfo.titleForCallback = 'new title for callback'\r\n\r\n // #ifdef APP\r\n this.dataInfo.beforeNextTickCallbackTitle = pageText.getAttribute('value')!\r\n // #endif\r\n // #ifndef APP\r\n // @ts-ignore\r\n this.dataInfo.beforeNextTickCallbackTitle = pageText.textContent\r\n // #endif\n \r\n this.$nextTick(() => {\r\n // #ifdef APP\r\n this.dataInfo.afterNextTickCallbackTitle = pageText.getAttribute('value')!\r\n // #endif\r\n // #ifndef APP\r\n // @ts-ignore\r\n this.dataInfo.afterNextTickCallbackTitle = pageText.textContent\r\n // #endif\r\n })\r\n },\r\n nextTickPromise() {\r\n const pageText = uni.getElementById('page-text-promise')!\r\n this.dataInfo.titleForPromise = 'new title for promise'\r\n\r\n // #ifdef APP\r\n this.dataInfo.beforeNextTickPromiseTitle = pageText.getAttribute('value')!\r\n // #endif\n // #ifndef APP\n // @ts-ignore\r\n this.dataInfo.beforeNextTickPromiseTitle = pageText.textContent\r\n // #endif\n \r\n this.$nextTick().then(() => {\r\n // #ifdef APP\r\n this.dataInfo.afterNextTickPromiseTitle = pageText.getAttribute('value')!\r\n // #endif\r\n // #ifndef APP\r\n // @ts-ignore\r\n this.dataInfo.afterNextTickPromiseTitle = pageText.textContent\r\n // #endif\r\n })\r\n }\r\n }\r\n }\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/nextTick/nextTick-options"},"options_options-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/options/options-composition.uvue","code":"```vue\n<template>\r\n <view class=\"page\">\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>component name: </text>\r\n <text id=\"component-name\">{{ dataInfo.name }}</text>\r\n </view>\r\n <!-- #ifndef APP-ANDROID -->\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>custom key: </text>\r\n <text id=\"custom-key\">{{ dataInfo.customKey }}</text>\r\n </view>\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>mixin data str: </text>\r\n <text id=\"mixin-data-str\">{{ dataInfo.mixinDataStr }}</text>\r\n </view>\r\n <!-- #endif -->\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nimport mixins from \"./mixins.uts\"\r\n\r\ndefineOptions({\r\n mixins: [mixins],\r\n name: \"$options\",\r\n _customKey: \"custom key\"\r\n})\n\ntype DataInfo = {\n name: string\n customKey: string\n mixinDataStr: string\n}\r\n\nconst dataInfo = reactive({\n name: \"\",\n customKey: \"\",\n mixinDataStr: \"\"\n} as DataInfo)\n\r\nonMounted(() => {\r\n const instance = getCurrentInstance()!.proxy!\r\n // #ifdef APP-ANDROID\r\n dataInfo.name = instance.$options.name\r\n // #endif\r\n // #ifndef APP-ANDROID\r\n dataInfo.name = instance.$options.name!\r\n dataInfo.customKey = instance.$options._customKey\r\n dataInfo.mixinDataStr = instance.$options.data!({})!['str']\r\n // #endif\r\n})\n\ndefineExpose({\n dataInfo\n})\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/options/options-composition"},"options_options-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/options/options-options.uvue","code":"```vue\n<template>\r\n <view class=\"page\">\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>component name: </text>\r\n <text id=\"component-name\">{{ dataInfo.name }}</text>\r\n </view>\r\n <!-- #ifndef APP-ANDROID -->\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>custom key: </text>\r\n <text id=\"custom-key\">{{ dataInfo.customKey }}</text>\r\n </view>\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>mixin data str: </text>\r\n <text id=\"mixin-data-str\">{{ dataInfo.mixinDataStr }}</text>\r\n </view>\r\n <!-- #endif -->\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nimport mixins from \"./mixins.uts\"\r\n\ntype DataInfo = {\n name: string\n customKey: string\n mixinDataStr: string\n}\n\r\nexport default {\r\n mixins: [mixins],\r\n name: \"$options\",\r\n _customKey: \"custom key\",\r\n data() {\r\n return {\r\n dataInfo: {\n name: \"\",\n customKey: \"\",\n mixinDataStr: \"\",\n } as DataInfo\r\n }\r\n },\r\n mounted() {\r\n // #ifdef APP-ANDROID\r\n this.dataInfo.name = this.$options.name\r\n // #endif\r\n // #ifndef APP-ANDROID\r\n this.dataInfo.name = this.$options.name!\r\n this.dataInfo.customKey = this.$options._customKey\n // @ts-ignore\r\n this.dataInfo.mixinDataStr = this.$options.data({})['str']\r\n // #endif\r\n },\r\n}\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/options/options-options"},"parent_child-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/parent/child-composition.uvue","code":"```vue\n<template>\r\n <view>\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>parent str: </text>\r\n <text id=\"parent-str\">{{ parentStr }}</text>\r\n </view>\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>parent num: </text>\r\n <text id=\"parent-num\">{{ parentNum }}</text>\r\n </view>\r\n <button @click=\"triggerParentFn\" id=\"trigger-parent-fn\">\r\n 调用父组件方法\r\n </button>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n const parentStr = ref('')\r\n const parentNum = ref(0)\r\n\r\n const instance = getCurrentInstance()!.proxy!\r\n\r\n onMounted(() => {\r\n // #ifdef APP-ANDROID\r\n parentStr.value = (instance.$parent!.$exposed['str'] as Ref<string>).value\r\n // #endif\r\n // #ifndef APP-ANDROID\r\n parentStr.value = instance.$parent!['str'] as string\r\n // #endif\r\n })\r\n\r\n const triggerParentFn = () => {\r\n // #ifdef APP-ANDROID\r\n parentNum.value = instance.$parent!.$callMethod('callMethodByChild') as number\r\n // #endif\r\n // #ifndef APP-ANDROID\r\n parentNum.value = instance.$parent!['callMethodByChild']()\r\n // #endif\r\n }\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/parent/child-composition"},"parent_child-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/parent/child-options.uvue","code":"```vue\n<template>\r\n <view>\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>parent str: </text>\r\n <text id=\"parent-str\">{{ parentStr }}</text>\r\n </view>\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>parent num: </text>\r\n <text id=\"parent-num\">{{ parentNum }}</text>\r\n </view>\r\n <button @click=\"triggerParentFn\" id=\"trigger-parent-fn\">\r\n 调用父组件方法\r\n </button>\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\n export default {\r\n data() {\r\n return {\r\n parentStr: '',\r\n parentNum: 0\r\n }\r\n },\r\n mounted() {\r\n this.parentStr = this.$parent!.$data['str'] as string\r\n },\r\n methods: {\r\n triggerParentFn() {\r\n // #ifdef APP-ANDROID\r\n this.parentNum = this.$parent!.$callMethod('callMethodByChild') as number\r\n // #endif\r\n // #ifndef APP-ANDROID\r\n this.parentNum = this.$parent!['callMethodByChild']()\r\n // #endif\r\n }\r\n }\r\n }\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/parent/child-options"},"parent_parent-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/parent/parent-composition.uvue","code":"```vue\n<template>\r\n <view class=\"page\">\r\n <child ref=\"childRef\" />\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n import Child from './child-composition.uvue'\r\n\r\n const childRef = ref<ComponentPublicInstance | null>(null)\r\n const str = ref('parent str')\r\n const num = ref(1)\r\n\r\n const getNum = () : number => { return num.value }\r\n\r\n const instance = getCurrentInstance()!.proxy!\r\n\r\n const callMethodByChild = () : number => {\r\n const childComponent = instance.$refs['childRef'] as ComponentPublicInstance\r\n // #ifdef APP-ANDROID\r\n return childComponent.$parent!.$callMethod('getNum') as number\r\n // #endif\r\n // #ifndef APP-ANDROID\r\n return childComponent.$parent!['getNum']()\r\n // #endif\r\n }\r\n\r\n defineExpose({\r\n str,\r\n getNum,\r\n callMethodByChild\r\n })\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/parent/parent-composition"},"parent_parent-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/parent/parent-options.uvue","code":"```vue\n<template>\n <view class=\"page\">\n <child ref='child' />\n </view>\n</template>\n\n<script lang='uts'>\nimport child from './child-options.uvue'\n\nexport default {\n components: {\n child\n },\n data() {\n return {\n str: \"parent str\",\n num: 1\n }\n },\n methods: {\n getNum() : number {\n return this.num\n },\n callMethodByChild(): number {\n const child = this.$refs['child'] as ComponentPublicInstance\n // #ifdef APP-ANDROID\n return child.$parent!.$callMethod('getNum') as number\n // #endif\n // #ifndef APP-ANDROID\n return child.$parent!['getNum']()\n // #endif\n }\n }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/parent/parent-options"},"props_array-literal-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/props/array-literal-composition.uvue","code":"```vue\n<template>\r\n <view>\r\n <text class=\"mb-10 bold\">array literal</text>\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>str: </text>\r\n <text id=\"array-literal-str\">{{ str }}</text>\r\n </view>\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>num: </text>\r\n <text id=\"array-literal-num\">{{ num }}</text>\r\n </view>\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>bool: </text>\r\n <text id=\"array-literal-bool\">{{ bool }}</text>\r\n </view>\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>obj: </text>\r\n <text id=\"array-literal-obj\">{{ JSON.stringify(obj) }}</text>\r\n </view>\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>arr: </text>\r\n <text id=\"array-literal-arr\">{{ JSON.stringify(arr) }}</text>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst props = defineProps(['str', 'num', 'bool', 'obj', 'arr'])\n\nconsole.log('props.str: ',props.str);\nconsole.log('props.num: ',props.num);\nconsole.log('props.obj: ',props.obj);\nconsole.log('props.bool: ',props.bool);\nconsole.log('props.arr: ',props.arr);\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/props/array-literal-composition"},"props_array-literal-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/props/array-literal-options.uvue","code":"```vue\n<template>\r\n <view>\r\n <text class=\"mb-10 bold\">array literal</text>\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>str: </text>\r\n <text id=\"array-literal-str\">{{ str }}</text>\r\n </view>\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>num: </text>\r\n <text id=\"array-literal-num\">{{ num }}</text>\r\n </view>\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>bool: </text>\r\n <text id=\"array-literal-bool\">{{ bool }}</text>\r\n </view>\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>obj: </text>\r\n <text id=\"array-literal-obj\">{{ JSON.stringify(obj) }}</text>\r\n </view>\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>arr: </text>\r\n <text id=\"array-literal-arr\">{{ JSON.stringify(arr) }}</text>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nexport default {\r\n props: ['str', 'num', 'bool', 'obj', 'arr'],\r\n mounted() {\r\n console.log('this.$props.str: ',this.$props['str']);\r\n console.log('this.$props.num: ',this.$props['num']);\r\n console.log('this.$props.bool: ',this.$props['bool']);\r\n console.log('this.$props.arr: ',this.$props['arr']);\r\n console.log('this.$props.obj: ',this.$props['obj']);\r\n }\r\n};\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/props/array-literal-options"},"props_object-type-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/props/object-type-composition.uvue","code":"```vue\n<template>\r\n <view>\r\n <text class=\"mb-10 bold\">object type</text>\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>str: </text>\r\n <text id=\"object-type-str\">{{ str }}</text>\r\n </view>\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>num: </text>\r\n <text id=\"object-type-num\">{{ num }}</text>\r\n </view>\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>bool: </text>\r\n <text id=\"object-type-bool\">{{ bool }}</text>\r\n </view>\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>obj: </text>\r\n <text id=\"object-type-obj\">{{ JSON.stringify(obj) }}</text>\r\n </view>\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>arr: </text>\r\n <text id=\"object-type-arr\">{{ JSON.stringify(arr) }}</text>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\ndefineProps({\r\n\tstr: {\r\n\t\ttype: String,\r\n\t\tdefault: 'default str'\r\n\t},\r\n\tnum: {\r\n\t\ttype: Number,\r\n\t\tdefault: 0\r\n\t},\r\n\tbool: {\r\n\t\ttype: Boolean,\r\n\t\tdefault: false\r\n\t},\r\n\tobj: {\r\n\t\ttype: Object as PropType<UTSJSONObject>,\r\n\t\tdefault: (): UTSJSONObject => ({})\r\n\t},\r\n\tarr: {\r\n\t\ttype: Array as PropType<string[]>,\r\n\t\tdefault: () : Array<string> => {\r\n\t\t\treturn []\r\n\t\t}\r\n\t}\r\n})\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/props/object-type-composition"},"props_object-type-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/props/object-type-options.uvue","code":"```vue\n<template>\r\n\t<view>\r\n <text class=\"mb-10 bold\">object type</text>\r\n\t\t<view class=\"mb-10 flex justify-between flex-row\">\r\n <text>str: </text>\r\n <text id=\"object-type-str\">{{ str }}</text>\r\n </view>\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>num: </text>\r\n <text id=\"object-type-num\">{{ num }}</text>\r\n </view>\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>bool: </text>\r\n <text id=\"object-type-bool\">{{ bool }}</text>\r\n </view>\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>obj: </text>\r\n <text id=\"object-type-obj\">{{ JSON.stringify(obj) }}</text>\r\n </view>\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>arr: </text>\r\n <text id=\"object-type-arr\">{{ JSON.stringify(arr) }}</text>\r\n </view>\r\n\t</view>\r\n</template>\r\n\r\n<script lang='uts'>\r\n\texport default {\r\n\t\tprops: {\r\n\t\t\tstr: {\r\n\t\t\t\ttype: String,\r\n\t\t\t\tdefault: 'default str'\r\n\t\t\t},\r\n\t\t\tnum: {\r\n\t\t\t\ttype: Number,\r\n\t\t\t\tdefault: 0\r\n\t\t\t},\r\n\t\t\tbool: {\r\n\t\t\t\ttype: Boolean,\r\n\t\t\t\tdefault: false\r\n\t\t\t},\r\n\t\t\tobj: {\r\n\t\t\t\ttype: Object as PropType<UTSJSONObject>,\r\n\t\t\t\tdefault: (): UTSJSONObject => ({})\r\n\t\t\t},\r\n\t\t\tarr: {\r\n\t\t\t\ttype: Array as PropType<string[]>,\r\n\t\t\t\tdefault: () : Array<string> => {\r\n\t\t\t\t\treturn []\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/props/object-type-options"},"props_props-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/props/props-composition.uvue","code":"```vue\n<template>\n <view class=\"page\">\n <array-literal :str=\"str\" :num=\"num\" :bool=\"bool\" :obj=\"obj\" :arr=\"arr\" />\n <object-type str=\"str\" :num=\"num\" :bool=\"bool\" :obj=\"obj\" :arr=\"arr\" />\n <same-name-prop-default-value />\n <props-with-defaults />\n </view>\n</template>\n\n<script setup lang=\"uts\">\nimport ArrayLiteral from './array-literal-composition.uvue'\nimport ObjectType from \"./object-type-composition.uvue\";\nimport SameNamePropDefaultValue from \"./same-name-prop-default-value-composition.uvue\";\nimport PropsWithDefaults from \"./props-with-defaults.uvue\";\n\nconst str = 'str'\nconst num = 10\nconst bool = true\nconst obj = {age: 18}\nconst arr = ['a','b','c']\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/props/props-composition"},"props_props-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/props/props-options.uvue","code":"```vue\n<template>\n <view class=\"page\">\n <array-literal :str=\"str\" :num=\"num\" :bool=\"bool\" :obj=\"obj\" :arr=\"arr\" />\n <object-type str=\"str\" :num=\"num\" :bool=\"bool\" :obj=\"obj\" :arr=\"arr\" />\n <same-name-prop-default-value />\n <props-with-defaults />\n </view>\n</template>\n\n<script lang=\"uts\">\nimport ArrayLiteral from './array-literal-options.uvue'\nimport ObjectType from \"./object-type-options.uvue\";\nimport SameNamePropDefaultValue from \"./same-name-prop-default-value-options.uvue\";\nimport PropsWithDefaults from \"./props-with-defaults.uvue\";\n\nexport default {\n components: {\n ArrayLiteral,\n ObjectType,\n SameNamePropDefaultValue,\n PropsWithDefaults\n },\n data() {\n return {\n str: 'str',\n num: 10,\n bool: true,\n obj: {age: 18},\n arr: ['a','b','c']\n }\n },\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/props/props-options"},"props_props-with-defaults":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/props/props-with-defaults.uvue","code":"```vue\n<template>\n <view class='mt-10'>\n <text class=\"mb-10 bold\">withDefaults</text>\n <view class=\"mb-10 flex flex-row justify-between\">\n <text>msg</text>\n <text>{{ props.msg }}</text>\n </view>\n <view class=\"mb-10 flex flex-row justify-between\">\n <text>labels</text>\n <text>{{ JSON.stringify(props.labels) }}</text>\n </view>\n </view>\n</template>\n\n<script setup lang=\"uts\">\ninterface CustomProps {\n msg: string\n labels : string[]\n}\n\nconst props = withDefaults(defineProps<CustomProps>(), {\n msg: 'hello',\n labels: ():string[] => ['a', 'b']\n})\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/props/props-with-defaults"},"props_same-name-prop-default-value-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/props/same-name-prop-default-value-composition.uvue","code":"```vue\n<template>\r\n <view>\r\n <text class=\"mb-10 bold\">same name prop with default value</text>\r\n <view class=\"flex justify-between flex-row\">\r\n <text>arr: </text>\r\n <text id=\"same-name-prop-default-value-arr\">{{\r\n JSON.stringify(arr)\r\n }}</text>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nimport type { PropType } from 'vue'\r\n\r\ndefineProps({\r\n arr: {\r\n type: Array as PropType<number[]>,\r\n default: () : Array<number> => {\r\n return [1, 2, 3]\r\n }\r\n }\r\n})\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/props/same-name-prop-default-value-composition"},"props_same-name-prop-default-value-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/props/same-name-prop-default-value-options.uvue","code":"```vue\n<template>\r\n <view>\r\n <text class=\"mb-10 bold\">same name prop with default value</text>\r\n <view class=\"flex justify-between flex-row\">\r\n <text>arr: </text>\r\n <text id=\"same-name-prop-default-value-arr\">{{ JSON.stringify(arr) }}</text>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\n export default {\r\n props: {\r\n arr: {\r\n type: Array as PropType<number[]>,\r\n default: () : Array<number> => {\r\n return [1, 2, 3]\r\n }\r\n }\r\n }\r\n }\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/props/same-name-prop-default-value-options"},"provide_provide-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/provide/provide-composition.uvue","code":"```vue\n<template>\n <view class=\"page\">\n <inject-comp />\n </view>\n</template>\n\n<script setup lang=\"uts\">\nimport InjectComp from '../inject/inject-composition.uvue';\n\nprovide('msg', 'hello');\nprovide('num', 0);\nprovide('obj', { a: 1 });\nprovide('arr', [1, 2, 3]);\nprovide('fn', () : string => 'hello');\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/provide/provide-composition"},"provide_provide-options-1":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/provide/provide-options-1.uvue","code":"```vue\n<template>\n <!-- #ifdef APP -->\n <scroll-view style=\"flex: 1\">\n <!-- #endif -->\n <view class=\"page\">\n <text>provide page</text>\n <button class=\"mt-10\" @click=\"goProvidePage2\">\n 跳转函数方式定义 provide 示例\n </button>\n <ComponentForInject />\n </view>\n <!-- #ifdef APP -->\n </scroll-view>\n <!-- #endif -->\n</template>\n\n<script lang=\"uts\">\nimport ComponentForInject from '../inject/inject-options-1.uvue'\n\nexport default {\n components: {\n ComponentForInject\n },\n data(){\n return {\n title: '字面量方式定义 provide page title',\n obj: {\n title: 'data obj.title',\n content: 'data obj.content'\n },\n }\n },\n provide: {\n providePageStr: '字面量方式定义 provide page str',\n providePageNum: 1,\n providePageBool: true,\n providePageObject: {\n title: '字面量方式定义 provide page object title',\n content: '字面量方式定义 provide page object content'\n },\n providePageArr: ['字面量方式定义 provide page arr'],\n providePageMap: new Map<string, string>([['key', '字面量方式定义 provide page map']]),\n providePageSet: new Set<string>(['字面量方式定义 provide page set']),\n },\n methods: {\n goProvidePage2(){\n uni.navigateTo({\n url: '/pages/composition/provide/provide-page2'\n })\n }\n },\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/provide/provide-options-1"},"provide_provide-options-2":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/provide/provide-options-2.uvue","code":"```vue\n<template>\n <!-- #ifdef APP -->\n <scroll-view style=\"flex: 1\">\n <!-- #endif -->\n <view class=\"page\">\n <text>provide page 2</text>\n <ComponentForInject />\n </view>\n <!-- #ifdef APP -->\n </scroll-view>\n <!-- #endif -->\n</template>\n\n<script lang=\"uts\">\nimport ComponentForInject from '../inject/inject-options-2.uvue'\n\nexport default {\n components: {\n ComponentForInject\n },\n data(){\n return {\n title: '函数方式定义 provide page title'\n }\n },\n provide(){\n return {\n providePageTitle: this.title,\n providePageStr: '函数方式定义 provide page str',\n providePageNum: 2,\n providePageBool: true,\n providePageObject: {\n title: '函数方式定义 provide page object title',\n content: '函数方式定义 provide page object content'\n },\n providePageArr: ['函数方式定义 provide page arr'],\n providePageMap: new Map<string, string>([['key', '函数方式定义 provide page map']]),\n providePageSet: new Set<string>(['函数方式定义 provide page set']),\n }\n }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/provide/provide-options-2"},"refs_child-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/refs/child-composition.uvue","code":"```vue\n<script setup lang=\"uts\">\nconst value = ref<string>('child value')\n</script>\n\n<template>\n <text>{{ value }}</text>\n</template>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/refs/child-composition"},"refs_child-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/refs/child-options.uvue","code":"```vue\n<script>\nexport default {\n data() {\n return {\n value: 'child value'\n }\n }\n}\n</script>\n\n<template>\n <text>{{ value }}</text>\n</template>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/refs/child-options"},"refs_refs-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/refs/refs-composition.uvue","code":"```vue\n<template>\n <view class=\"page\">\n <view class=\"row\">\n <text>NodeRef: </text>\n <text ref=\"nodeRef\">{{ dataInfo.existRef }}</text>\n </view>\n <view class=\"row\">\n <text>childRef:</text>\n <text>{{ dataInfo.existChildRef }}</text>\n </view>\n <view class=\"row\">\n <text>existTextItems:</text>\n <text>{{ dataInfo.existTextItems }}</text>\n </view>\n <view>\n <text v-for=\"item in dataInfo.textItemsExpectNum\" ref=\"textItems\" :key=\"item\">{{\n item\n }}</text>\n </view>\n <child class=\"mt-10\" ref=\"childRef\">ComponentRef</child>\n </view>\n</template>\n\n<script setup lang=\"uts\">\nimport Child from './child-composition.uvue'\n\ntype DataInfo = {\n existRef: boolean\n existChildRef: boolean\n textItemsExpectNum: number\n existTextItems: boolean\n}\n\nconst dataInfo = reactive<DataInfo>({\n existRef: false,\n existChildRef: false,\n textItemsExpectNum: 3,\n existTextItems: false\n})\n\nconst nodeRef = ref<UniElement | null>(null)\nconst childRef = ref<UniElement | null>(null)\nconst textItems = ref<UniElement[] | null>(null)\n\nonReady(() => {\n dataInfo.existRef = nodeRef.value !== null\n dataInfo.existChildRef = childRef.value !== null\n dataInfo.existTextItems = textItems.value?.length === dataInfo.textItemsExpectNum\n})\n\ndefineExpose({\n dataInfo\n})\n</script>\n\n<style>\n.row {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n margin-bottom: 10px;\n}\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/refs/refs-composition"},"refs_refs-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/refs/refs-options.uvue","code":"```vue\n<template>\n <view class=\"page\">\n <view class=\"row\">\n <text>NodeRef: </text>\n <text ref=\"node\">{{ dataInfo.existRef }}</text>\n </view>\n <view class=\"row\">\n <text>childRef:</text>\n <text>{{ dataInfo.existChildRef }}</text>\n </view>\n <view class=\"row\">\n <text>existTextItems:</text>\n <text>{{ dataInfo.existTextItems }}</text>\n </view>\n <view>\n <text v-for=\"item in dataInfo.textItemsExpectNum\" ref=\"textItems\" :key=\"item\">{{\n item\n }}</text>\n </view>\n <child class=\"mt-10\" ref=\"childRef\">ComponentRef</child>\n </view>\n</template>\n\n<script lang=\"uts\">\nimport child from './child-options.uvue'\n\ntype DataInfo = {\n existRef: boolean\n existChildRef: boolean\n textItemsExpectNum: number\n existTextItems: boolean\n}\nexport default {\n components: {\n child\n },\n data() {\n return {\n dataInfo: {\n existRef: false,\n existChildRef: false,\n textItemsExpectNum: 3,\n existTextItems: false\n } as DataInfo\n }\n },\n onReady() {\n this.dataInfo.existRef = this.$refs['node'] !== null\n this.dataInfo.existChildRef = this.$refs['childRef'] !== null\n const textItems = this.$refs['textItems'] as Array<UniElement>\n this.dataInfo.existTextItems = textItems.length === this.dataInfo.textItemsExpectNum\n }\n}\n</script>\n\n<style>\n.row {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n margin-bottom: 10px;\n}\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/refs/refs-options"},"root_child-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/root/child-composition.uvue","code":"```vue\n<template>\n <view class=\"flex justify-between flex-row\">\n <text>root str in parent component: </text>\n <text id=\"root-str-child\">{{ rootStr }}</text>\n </view>\n</template>\n\n<script setup lang=\"uts\">\nconst str = ref('child component str')\nconst rootStr = ref('')\n\nonMounted(() => {\n const instance = getCurrentInstance()!.proxy!\n // #ifdef APP-ANDROID\n rootStr.value = (instance.$root!.$exposed['str'] as Ref<string>).value as string\n // #endif\n // #ifndef APP-ANDROID\n rootStr.value = instance.$root!['str'] as string\n // #endif\n})\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/root/child-composition"},"root_child-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/root/child-options.uvue","code":"```vue\n<template>\n <view class=\"flex justify-between flex-row\">\n <text>root str in parent component: </text>\n <text id=\"root-str-child\">{{ rootStr }}</text>\n </view>\n</template>\n\n<script lang=\"uts\">\nexport default {\n data () {\n return {\n str: 'child component str',\n rootStr: ''\n }\n },\n mounted() {\n this.rootStr = this.$root!.$data['str'] as string\n }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/root/child-options"},"root_root-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/root/root-composition.uvue","code":"```vue\n<template>\r\n <view class=\"page\">\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>root str in parent component: </text>\r\n <text id=\"root-str-parent\">{{ rootStr }}</text>\r\n </view>\r\n <Child />\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n import Child from './child-composition.uvue'\r\n\r\n const str = ref('root component str')\r\n const rootStr = ref('')\r\n\r\n onReady(() => {\r\n const instance = getCurrentInstance()!.proxy!\n // TODO: 确认 android 与 ios 的差异， ios 与标准 vue 相同\n // #ifdef APP-ANDROID\r\n rootStr.value = (instance.$root!.$exposed['str'] as Ref<string>).value as string\r\n // #endif\r\n // #ifndef APP-ANDROID\r\n rootStr.value = instance.$root!['str'] as string\r\n // #endif\r\n })\r\n\r\n defineExpose({\r\n str\r\n })\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/root/root-composition"},"root_root-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/root/root-options.uvue","code":"```vue\n<template>\n <view class=\"page\">\n <view class=\"mb-10 flex justify-between flex-row\">\n <text>root str in parent component: </text>\n <text id=\"root-str-parent\">{{ rootStr }}</text>\n </view>\n <child />\n </view>\n</template>\n\n<script lang=\"uts\">\nimport Child from './child-options.uvue'\n\nexport default {\n components: {Child},\n data () {\n return {\n str: 'root component str',\n rootStr: ''\n }\n },\n onReady() {\n this.rootStr = this.$root!.$data['str'] as string\n }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/root/root-options"},"setup-function_Foo":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/setup-function/Foo.uvue","code":"```vue\n<template>\r\n <view>\r\n <text class=\"mt-10\">this is component Foo for setup function</text>\r\n <slot></slot>\r\n <view class=\"flex justify-between flex-row mt-10\">\r\n <text>hasDefaultSlot:</text>\r\n <text id=\"has-default-slot\">{{ hasDefaultSlot }}</text>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nexport default {\r\n\tsetup(_, context) {\r\n\t\tconst hasDefaultSlot = context.slots['default'] !== null\r\n\t\treturn {\r\n\t\t\thasDefaultSlot\r\n\t\t}\r\n\t}\r\n}\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/setup-function/Foo"},"setup-function_RenderFunction":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/setup-function/RenderFunction.uvue","code":"```vue\n<template>\r\n\t<view class=\"mt-10\">\r\n\t\t<text>this is Render Function component</text>\r\n\t</view>\r\n</template>\r\n\r\n<script lang='uts'>\r\n\texport default {\r\n\t\tprops: {\r\n\t\t\tstr: {\r\n\t\t\t\ttype: String,\r\n\t\t\t},\r\n\t\t\tcount: {\r\n\t\t\t\ttype: Number,\r\n\t\t\t},\r\n\t\t\tobj: {\r\n\t\t\t\ttype: Object as PropType<UTSJSONObject>,\r\n\t\t\t}\r\n\t\t},\r\n\t\temits: ['compUpdateObj'],\r\n\t\tsetup(props, context) {\r\n\t\t\tconst compUpdateObj = () => {\r\n\t\t\t\tcontext.emit('compUpdateObj')\r\n\t\t\t}\r\n\t\t\t// TODO: 待支持 expose 后补充示例\r\n\t\t\t// const compCount = ref(0)\r\n\t\t\t// const compIncrement = () => {\r\n\t\t\t// \tcompCount.value++\r\n\t\t\t// }\r\n\t\t\t// context.expose({compCount, compIncrement})\r\n\t\t\treturn () : VNode => h('view', { class: 'mt-10' }, [\r\n\t\t\t\th('text', { class: 'mt-10' }, 'this is render function component text with h function'),\r\n\t\t\t\t// h('text', { class: 'mt-10' }, `compCount: ${compCount.value}`),\r\n\t\t\t\th('text', { id: 'props-str', class: 'mt-10' }, `props.str: ${props.str}`),\r\n\t\t\t\th('text', { id: 'props-count', class: 'mt-10' }, `props.count: ${props.count}`),\r\n\t\t\t\th('text', { id: 'props-obj-str', class: 'mt-10' }, `props.obj['str']: ${props.obj!['str']}`),\r\n\t\t\t\th('text', { id: 'props-obj-num', class: 'mt-10' }, `props.obj['num']: ${props.obj!['num']}`),\r\n\t\t\t\th('text', { id: 'props-obj-bool', class: 'mt-10' }, `props.obj['bool']: ${props.obj!['bool']}`),\r\n\t\t\t\th('button', { id: 'comp-update-obj-btn', class: 'mt-10', onClick: compUpdateObj }, 'comp update obj'),\r\n\t\t\t\th('text', { id: 'context-attrs-is-show', class: 'mt-10' }, `context.attrs.isShow: ${context.attrs['isShow']}`),\r\n\t\t\t])\r\n\t\t}\r\n\t}\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/setup-function/RenderFunction"},"setup-function_setup-function":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/setup-function/setup-function.uvue","code":"```vue\n<template>\n <!-- #ifdef APP -->\n <scroll-view style=\"flex: 1\">\n <!-- #endif -->\n <view class=\"page\">\n <view class=\"flex justify-between flex-row mt-10\">\n <text>str:</text>\n <text id=\"str\">{{ str }}</text>\n </view>\n <view class=\"flex justify-between flex-row mt-10\">\n <text>num:</text>\n <text id=\"num\">{{ num }}</text>\n </view>\n <view class=\"flex justify-between flex-row mt-10\">\n <text>bool:</text>\n <text id=\"bool\">{{ bool }}</text>\n </view>\n <view class=\"flex justify-between flex-row mt-10\">\n <text>count:</text>\n <text id=\"count\">{{ count }}</text>\n </view>\n <button class=\"mt-10\" id=\"increment-btn\" @click=\"increment\">\n increment count\n </button>\n <view class=\"flex justify-between flex-row mt-10\">\n <text>obj.str:</text>\n <text id=\"obj-str\">{{ obj['str'] }}</text>\n </view>\n <view class=\"flex justify-between flex-row mt-10\">\n <text>obj.num:</text>\n <text id=\"obj-num\">{{ obj['num'] }}</text>\n </view>\n <view class=\"flex justify-between flex-row mt-10\">\n <text>obj.bool:</text>\n <text id=\"obj-bool\">{{ obj['bool'] }}</text>\n </view>\n <button class=\"mt-10\" id=\"update-obj-btn\" @click=\"updateObj\">\n update obj\n </button>\n <!-- #ifdef APP -->\n <RenderFunction\n :str=\"str\"\n :count=\"count\"\n :obj=\"obj\"\n @compUpdateObj=\"compUpdateObj\"\n :isShow=\"true\" />\n <!-- #endif -->\n <Foo>\n <text class=\"mt-10\" id=\"default-slot-in-foo\">default slot in Foo</text>\n </Foo>\n </view>\n <!-- #ifdef APP -->\n </scroll-view>\n <!-- #endif -->\n</template>\n\n<script lang=\"uts\">\n// #ifdef APP\nimport RenderFunction from './RenderFunction.uvue'\n// #endif\nimport Foo from './Foo.uvue'\nexport default {\n components: {\n // #ifdef APP\n RenderFunction,\n // #endif\n Foo\n },\n setup() {\n const count = ref(0)\n // 函数只能通过声明变量,赋值函数的方式,不支持 function xxx(){}\n const increment = () => { count.value++ }\n const obj = reactive({\n str: 'obj default str',\n num: 0,\n bool: false,\n })\n const updateObj = () => {\n obj['str'] = 'obj new str'\n obj['num'] = 100\n obj['bool'] = true\n }\n const compUpdateObj = () => {\n obj['str'] = 'obj new str by comp update'\n obj['num'] = 200\n obj['bool'] = true\n }\n return {\n str: 'default str',\n num: 0,\n bool: false,\n count,\n increment,\n obj,\n updateObj,\n compUpdateObj\n }\n }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/setup-function/setup-function"},"slots_slot-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/slots/slot-composition.uvue","code":"```vue\n<template>\n <view>\n <slot name=\"header\"></slot>\n <slot name=\"footer\"></slot>\n <slot></slot>\n </view>\n</template>\n\n<script setup lang=\"uts\">\nconst slots = useSlots()\n\nconst hasSlots = (): boolean => {\n const header = slots['header']\n const footer = slots['footer']\n const def = slots['default']\n\n return header !== null && footer !== null && def !== null\n}\n\ndefineExpose({\n hasSlots\n})\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/slots/slot-composition"},"slots_slot-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/slots/slot-options.uvue","code":"```vue\n<template>\n <view>\n <slot name=\"header\"></slot>\n <slot name=\"footer\"></slot>\n <slot></slot>\n </view>\n</template>\n\n<script lang=\"uts\">\nexport default {\n mounted() {\n console.log(this.hasSlots())\n },\n methods: {\n hasSlots() : boolean {\n const header = this.$slots['header']\n const footer = this.$slots['footer']\n const def = this.$slots['default']\n\n return header !== null && footer !== null && def !== null\n }\n }\n}\n</script>\n\n<style scoped></style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/slots/slot-options"},"slots_slots-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/slots/slots-composition.uvue","code":"```vue\n<template>\n <view class=\"page\">\n <SlotComp class=\"slot-comp\">\n <template v-slot:header>header</template>\n <template v-slot:default>default</template>\n <template v-slot:footer>footer</template>\n </SlotComp>\n </view>\n</template>\n\n<script setup lang=\"uts\">\n import SlotComp from './slot-composition.uvue'\n</script>\n\n<style>\n .row {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n margin-bottom: 10px;\n }\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/slots/slots-composition"},"slots_slots-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/slots/slots-options.uvue","code":"```vue\n<template>\n <view class=\"page\">\n <slot-comp class=\"slot-comp\">\n <template v-slot:header>header</template>\n <template v-slot:default>default</template>\n <template v-slot:footer>footer</template>\n </slot-comp>\n </view>\n</template>\n\n<script lang=\"uts\">\n import slot from './slot-options.uvue'\n\n export default {\n components: {\n slotComp: slot\n }\n }\n</script>\n\n<style>\n .row {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n margin-bottom: 10px;\n }\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/slots/slots-options"},"mixins_components_ChildMixinComp1":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/mixins/components/ChildMixinComp1.uvue","code":"```vue\n<template>\n <text class=\"mt-10 child-mixin-component-1\">{{ title }}</text>\n</template>\n\n<script lang=\"uts\">\nexport default {\n data(){\n return {\n title: 'child mixin component 1'\n }\n }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/mixins/components/ChildMixinComp1"},"mixins_components_ChildMixinComp2":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/mixins/components/ChildMixinComp2.uvue","code":"```vue\n<template>\n <text class=\"mt-10 child-mixin-component-2\">{{ title }}</text>\n</template>\n\n<script lang=\"uts\">\nexport default {\n data(){\n return {\n title: 'child mixin component 2'\n }\n }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/mixins/components/ChildMixinComp2"},"mixins_components_Comp1":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/mixins/components/Comp1.uvue","code":"```vue\n<template>\n <view class=\"mt-10\" ref=\"mixin-comp-root\">\n <text class=\"bold\">Comp1: inheritAttrs: false</text>\n <text class=\"mt-10\" style=\"color:#ccc;\"\n >rootElementTitle should be null</text\n >\n <text class=\"mt-10 root-element-title-1\">rootElementTitle: {{ rootElementTitle }}</text>\n <!-- #ifdef APP -->\n <text class=\"mt-10 bold\">trigger emitter:</text>\n <button class=\"mt-10 global-mixin-emit-1\" @click=\"triggerEmitter('globalMixinEmit1')\">\n trigger globalMixinEmit1\n </button>\n <button\n class=\"mt-10 global-child-mixin-emit-1\"\n @click=\"triggerEmitter('globalChildMixinEmit1')\">\n trigger globalChildMixinEmit1\n </button>\n <button class=\"mt-10 global-mixin-emit-2\" @click=\"triggerEmitter('globalMixinEmit2')\">\n trigger globalMixinEmit2\n </button>\n <button\n class=\"mt-10 global-child-mixin-emit-2\"\n @click=\"triggerEmitter('globalChildMixinEmit2')\">\n trigger globalChildMixinEmit2\n </button>\n <button class=\"mt-10 mixin-emit\" @click=\"triggerEmitter('mixinEmit')\">\n trigger mixinEmit\n </button>\n <button class=\"mt-10 child-mixin-emit\" @click=\"triggerEmitter('childMixinEmit')\">\n trigger childMixinEmit\n </button>\n <MixinComp />\n <!-- #endif -->\n </view>\n</template>\n\n<script lang=\"uts\">\nexport default {\n mixins:[{\n mixins: [{\n emits: ['childMixinEmit']\n }],\n inheritAttrs: false,\n emits:['mixinEmit']\n }],\n data(){\n return {\n rootElementTitle: '' as string | null\n }\n },\n mounted(){\n const rootElement = this.$refs['mixin-comp-root'] as UniElement\n this.rootElementTitle = JSON.stringify(rootElement.getAttribute('title'))\n },\n methods: {\n triggerEmitter(emit: string){\n this.$emit(emit, emit)\n },\n }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/mixins/components/Comp1"},"mixins_components_Comp2":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/mixins/components/Comp2.uvue","code":"```vue\n<template>\r\n <view class=\"mt-10\" ref=\"mixin-comp-root\">\r\n <text class=\"bold\">Comp2: inheritAttrs: true</text>\r\n <text class=\"mt-10\" style=\"color:#ccc;\">rootElementTitle should not be null</text>\r\n <text class=\"mt-10 root-element-title-2\">rootElementTitle: {{ rootElementTitle }}</text>\r\n <text class=\"mt-10\">{{ namesakeMixinProp }}</text>\r\n <text class=\"mt-10\">{{ namesakeMixinDataMsg }}</text>\r\n <text class=\"mt-10\">{{ namesakeMixinComputed }}</text>\r\n <text class=\"mt-10 mixin-watch-msg\">{{ mixinWatchMsg }}</text>\r\n <text class=\"mt-10\">{{ namesakeMixinMethod() }}</text>\r\n <button class=\"mt-10\" @click=\"changeGlobalMixinOnloadMsg1\">\r\n change globalMixinOnloadMsg1\r\n </button>\r\n <MixinComp />\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\n import CompForComp from './CompForComp.uvue'\r\n\r\n export default {\r\n mixins: [{\r\n inheritAttrs: true,\r\n }],\r\n components: { MixinComp: CompForComp },\r\n props: {\r\n namesakeMixinProp: {\r\n type: String,\r\n default: '组件内部的同名 props'\r\n }\r\n },\r\n data() {\r\n return {\r\n namesakeMixinDataMsg: '组件内部的同名 data',\r\n mixinWatchMsg: '',\r\n rootElementTitle: '' as string | null\r\n }\r\n },\r\n computed: {\r\n namesakeMixinComputed() : string {\r\n const res = '组件内部的同名 computed'\r\n console.log(res)\r\n return res\r\n }\r\n },\r\n mounted() {\r\n const rootElement = this.$refs['mixin-comp-root'] as UniElement\r\n this.rootElementTitle = rootElement.getAttribute('title')\r\n },\r\n watch: {\r\n globalMixinOnloadMsg1(newVal : string) {\r\n this.mixinWatchMsg = `组件内部定义的 watch, 更新后的 globalMixinOnloadMsg1: ${newVal}`\r\n console.log(this.mixinWatchMsg)\r\n },\r\n },\r\n methods: {\r\n namesakeMixinMethod() : string {\r\n const res = '组件内部的同名 method'\r\n console.log(res)\r\n return res\r\n },\r\n changeGlobalMixinOnloadMsg1() {\r\n // #ifdef WEB\r\n (this.globalMixinOnloadMsg1 as string) = 'new globalMixinOnloadMsg1 changed in comp2'\r\n // #endif\r\n // #ifndef WEB\r\n this.globalMixinOnloadMsg1 = 'new globalMixinOnloadMsg1 changed in comp2'\r\n // #endif\r\n }\r\n }\r\n }\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/mixins/components/Comp2"},"mixins_components_CompForComp":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/mixins/components/CompForComp.uvue","code":"```vue\n<template>\n <text class=\"mt-10 component-for-component\">{{ title }}</text>\n</template>\n\n<script lang=\"uts\">\nexport default {\n data(){\n return {\n title: 'component for component'\n }\n }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/mixins/components/CompForComp"},"mixins_components_CompForPage":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/mixins/components/CompForPage.uvue","code":"```vue\n<template>\n <text class=\"mt-10 component-for-page\">{{ title }}</text>\n</template>\n\n<script lang=\"uts\">\nexport default {\n data(){\n return {\n title: 'component for page'\n }\n }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/mixins/components/CompForPage"},"mixins_components_GlobalChildMixinComp1":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/mixins/components/GlobalChildMixinComp1.uvue","code":"```vue\n<template>\n <text class=\"mt-10 global-child-mixin-component-1\">{{ title }}</text>\n</template>\n\n<script lang=\"uts\">\nexport default {\n data(){\n return {\n title: 'global child mixin component 1'\n }\n }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/mixins/components/GlobalChildMixinComp1"},"mixins_components_GlobalChildMixinComp2":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/mixins/components/GlobalChildMixinComp2.uvue","code":"```vue\n<template>\n <text class=\"mt-10 global-child-mixin-component-2\">{{ title }}</text>\n</template>\n\n<script lang=\"uts\">\nexport default {\n data(){\n return {\n title: 'global child mixin component 2'\n }\n }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/mixins/components/GlobalChildMixinComp2"},"mixins_components_GlobalMixinComp1":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/mixins/components/GlobalMixinComp1.uvue","code":"```vue\n<template>\n <text class=\"mt-10 global-mixin-component-1\">{{ title }}</text>\n</template>\n\n<script lang=\"uts\">\nexport default {\n data(){\n return {\n title: 'global mixin component 1'\n }\n }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/mixins/components/GlobalMixinComp1"},"mixins_components_GlobalMixinComp2":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/mixins/components/GlobalMixinComp2.uvue","code":"```vue\n<template>\n <text class=\"mt-10 global-mixin-component-2\">{{ title }}</text>\n</template>\n\n<script lang=\"uts\">\nexport default {\n data(){\n return {\n title: 'global mixin component 2'\n }\n }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/mixins/components/GlobalMixinComp2"},"mixins_components_MixinComp1":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/mixins/components/MixinComp1.uvue","code":"```vue\n<template>\n <text class=\"mt-10 mixin-component-1\">{{ title }}</text>\n</template>\n\n<script lang=\"uts\">\nexport default {\n data(){\n return {\n title: 'mixin component 1'\n }\n }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/mixins/components/MixinComp1"},"mixins_components_MixinComp2":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/mixins/components/MixinComp2.uvue","code":"```vue\n<template>\n <text class=\"mt-10 mixin-component-2\">{{ title }}</text>\n</template>\n\n<script lang=\"uts\">\nexport default {\n data(){\n return {\n title: 'mixin component 2'\n }\n }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/mixins/components/MixinComp2"},"mixins_components_MixinCompForChildMixin":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/mixins/components/MixinCompForChildMixin.uvue","code":"```vue\n<template>\n <text class=\"mt-10 mixin-component-for-child-mixin\">{{ title }}</text>\n</template>\n\n<script lang=\"uts\">\nexport default {\n data(){\n return {\n title: 'mixin component for child mixin'\n }\n }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/mixins/components/MixinCompForChildMixin"},"mixins_components_MixinCompForGlobalChildMixin":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/mixins/components/MixinCompForGlobalChildMixin.uvue","code":"```vue\n<template>\n <text class=\"mt-10 mixin-component-for-global-child-mixin\">{{ title }}</text>\n</template>\n\n<script lang=\"uts\">\nexport default {\n data(){\n return {\n title: 'mixin component for global child mixin'\n }\n }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/mixins/components/MixinCompForGlobalChildMixin"},"mixins_components_MixinCompForGlobalMixin":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/mixins/components/MixinCompForGlobalMixin.uvue","code":"```vue\n<template>\n <text class=\"mt-10 mixin-component-for-global-mixin\">{{ title }}</text>\n</template>\n\n<script lang=\"uts\">\nexport default {\n data(){\n return {\n title: 'mixin component for global mixin'\n }\n }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/mixins/components/MixinCompForGlobalMixin"},"mixins_components_MixinCompForMixin":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/mixins/components/MixinCompForMixin.uvue","code":"```vue\n<template>\n <text class=\"mt-10 mixin-component-for-mixin\">{{ title }}</text>\n</template>\n\n<script lang=\"uts\">\nexport default {\n data(){\n return {\n title: 'mixin component for mixin'\n }\n }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/mixins/components/MixinCompForMixin"}},"E_directive":{"v-bind_Foo-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-bind/Foo-composition.uvue","code":"```vue\n<template>\r\n <view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>props title:</text>\r\n <text id=\"foo-props-title\">{{ title }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>props num:</text>\r\n <text id=\"foo-props-num\">{{ num }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>props obj['name']:</text>\r\n <text id=\"foo-props-obj-name\">{{ obj['name'] }}</text>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\ndefineProps({\r\n title: {\r\n type: String,\r\n default: ''\r\n },\r\n num: {\r\n type: Number,\r\n default: 0\r\n },\r\n obj: {\r\n // #ifdef APP-ANDROID\r\n // TODO: 确认类型是否合理\r\n type: FooPropsObj1ReactiveObject,\r\n // #endif\r\n // #ifdef APP-IOS || WEB\r\n type: Object,\r\n // #endif\r\n required: true\r\n }\r\n})\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-bind/Foo-composition"},"v-bind_Foo-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-bind/Foo-options.uvue","code":"```vue\n<template>\r\n <view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>props title:</text>\r\n <text id='foo-props-title'>{{ title }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>props num:</text>\r\n <text id='foo-props-num'>{{ num }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>props obj['name']:</text>\r\n <text id='foo-props-obj-name'>{{ obj['name'] }}</text>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\n export default {\r\n props: {\r\n title: {\r\n type: String,\r\n default: ''\r\n },\r\n num: {\r\n type: Number,\r\n default: 0\r\n },\r\n obj: {\r\n // #ifdef APP-ANDROID\r\n type: FooPropsObjReactiveObject,\r\n // #endif\r\n // #ifdef APP-IOS || WEB\r\n type: Object,\r\n // #endif\r\n required: true\r\n }\r\n }\r\n }\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-bind/Foo-options"},"v-bind_v-bind-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-bind/v-bind-composition.uvue","code":"```vue\n<template>\n <view class=\"page\">\n <!-- v-bind attribute -->\n <button id=\"disabled-btn\" class=\"mb-10\" :disabled=\"true\">\n :disabled true\n </button>\n <button id=\"v-bind-disabled-btn\" class=\"mb-10\" v-bind:disabled=\"false\">\n v-bind:disabled false\n </button>\n\n <!-- v-bind style -->\n <view class=\"flex justify-between flex-row mb-10\">\n <text>bind object style fontSize:</text>\n <text id=\"bind-object-style\" :style=\"{ fontSize: dataInfo.fontSize }\">\n {{ dataInfo.fontSize }}\n </text>\n </view>\n <view\n id=\"bind-array-style\"\n class=\"mb-10 p-10\"\n :style=\"[dataInfo.backgroundColor, dataInfo.border]\">\n <view>bind arr style</view>\n <view class=\"my-10\">{{ dataInfo.backgroundColor }}</view>\n <view>{{ dataInfo.border }}</view>\n </view>\n\n <!-- v-bind props -->\n <Foo\n :title=\"dataInfo.fooProps.title\"\n :num=\"dataInfo.fooProps.num\"\n :obj=\"dataInfo.fooProps.obj\" />\n\n <!-- v-bind in style -->\n <!-- #ifdef WEB -->\n <view class=\"mb-10 v-bind-css\"></view>\n <!-- #endif -->\n </view>\n</template>\n\n<script setup lang=\"uts\">\nimport Foo from './Foo-composition.uvue'\n\ntype FooPropsObj = {\n name : string\n}\ntype FooProps = {\n title : string\n num : number\n obj : FooPropsObj\n}\ntype DataInfo = {\n fontSize : string\n backgroundColor : string\n border : string\n fooProps : FooProps\n vBindClassBackgroundColor : string,\n vBindClassRpxHeight : string,\n}\n\nconst dataInfo = reactive({\n fontSize: '20px',\n backgroundColor: 'background-color: green',\n border: 'border: 2px solid red',\n fooProps: {\n title: 'foo title',\n num: 1,\n obj: {\n name: 'foo obj name',\n }\n },\n vBindClassBackgroundColor: 'red',\n vBindClassRpxHeight: '300rpx'\n} as DataInfo)\n\ndefineExpose({\n dataInfo\n})\n</script>\n\n<style>\n/* #ifdef WEB */\n.v-bind-css {\n background-color: v-bind(dataInfo.vBindClassBackgroundColor);\n height: v-bind(dataInfo.vBindClassRpxHeight);\n}\n/* #endif */\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-bind/v-bind-composition"},"v-bind_v-bind-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-bind/v-bind-options.uvue","code":"```vue\n<template>\n <view class=\"page\">\n <!-- v-bind attribute -->\n <button id=\"disabled-btn\" class=\"mb-10\" :disabled=\"true\">:disabled true</button>\n <button id=\"v-bind-disabled-btn\" class=\"mb-10\" v-bind:disabled=\"false\">v-bind:disabled false</button>\n\n <!-- v-bind style -->\n <view class=\"flex justify-between flex-row mb-10\">\n <text>bind object style fontSize:</text>\n <text id=\"bind-object-style\" :style=\"{ fontSize: dataInfo.fontSize }\">\n {{ dataInfo.fontSize }}\n </text>\n </view>\n <view id=\"bind-array-style\" class=\"mb-10 p-10\" :style=\"[dataInfo.backgroundColor, dataInfo.border]\">\n <view>bind arr style</view>\n <view class=\"my-10\">{{ dataInfo.backgroundColor }}</view>\n <view>{{ dataInfo.border }}</view>\n </view>\n\n <!-- v-bind props -->\n <Foo :title=\"dataInfo.fooProps.title\" :num=\"dataInfo.fooProps.num\" :obj=\"dataInfo.fooProps.obj\" />\n\n <!-- v-bind in style -->\n <!-- #ifdef WEB -->\n <view class=\"mb-10 v-bind-css\"></view>\n <!-- #endif -->\n </view>\n</template>\n\n<script lang=\"uts\">\nimport Foo from './Foo-options.uvue'\n\ntype FooPropsObj = {\n name: string\n}\ntype FooProps = {\n title: string\n num: number\n obj: FooPropsObj\n}\ntype DataInfo = {\n fontSize: string\n backgroundColor: string\n border: string\n fooProps: FooProps\n vBindClassBackgroundColor: string\n vBindClassRpxHeight: string\n}\n\nexport default {\n components: { Foo },\n data() {\n return {\n dataInfo: {\n fontSize: '20px',\n backgroundColor: 'background-color: green',\n border: 'border: 2px solid red',\n fooProps: {\n title: 'foo title',\n num: 1,\n obj: {\n name: 'foo obj name'\n }\n },\n vBindClassBackgroundColor: 'red',\n vBindClassRpxHeight: '300rpx'\n } as DataInfo\n }\n }\n}\n</script>\n\n<style>\n/* #ifdef WEB */\n.v-bind-css {\n background-color: v-bind(dataInfo.vBindClassBackgroundColor);\n height: v-bind(dataInfo.vBindClassRpxHeight);\n}\n/* #endif */\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-bind/v-bind-options"},"v-for_v-for-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-for/v-for-composition.uvue","code":"```vue\n<template>\r\n <!-- #ifdef APP -->\r\n <scroll-view style=\"flex: 1\">\r\n <!-- #endif -->\r\n <view class=\"page\">\r\n <text class=\"bold mb-10\">v-for number</text>\r\n <view class=\"mb-10\" v-for=\"item in 3\" :key=\"item\">\r\n <text :id=\"`number-${item}`\">{{ item }}</text>\r\n </view>\r\n\r\n <view class=\"bold mb-10\">v-for object</view>\r\n <view\r\n v-for=\"(value, key) in object\"\r\n :key=\"key\"\r\n class=\"mb-10 flex justify-between flex-row\">\r\n <text :id=\"key\">{{ key }}</text>\r\n <text :id=\"value\">{{ value }}</text>\r\n </view>\r\n\r\n <view class=\"bold mb-10\">v-for & v-if list items</view>\r\n <view\r\n id=\"v-for-v-if-list-items\"\r\n v-for=\"item in listItems\"\r\n :key=\"item.name\">\r\n <template v-if=\"item.show\">\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text :id=\"item.name\">{{ item.name }}</text>\r\n <text @click=\"item.count++\" :id=\"`v-if-${item.name}-count`\">{{\r\n item.count\r\n }}</text>\r\n </view>\r\n <template v-for=\"child in item.items\">\r\n <view\r\n v-if=\"child.show\"\r\n :key=\"child.name\"\r\n class=\"mb-10 flex justify-between flex-row\">\r\n <text :id=\"child.name\">{{ child.name }}</text>\r\n <text @click=\"child.count++\" :id=\"`v-if-${child.name}-count`\">{{\r\n child.count\r\n }}</text>\r\n </view>\r\n </template>\r\n </template>\r\n </view>\r\n\r\n <view class=\"bold mb-10\">v-for & v-show list items</view>\r\n <view\r\n id=\"v-for-v-if-list-items\"\r\n v-for=\"item in listItems\"\r\n :key=\"item.name\"\r\n v-show=\"item.show\">\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text :id=\"item.name\">{{ item.name }}</text>\r\n <text @click=\"item.count++\" :id=\"`v-show-${item.name}-count`\">{{\r\n item.count\r\n }}</text>\r\n </view>\r\n <view\r\n v-for=\"child in item.items\"\r\n v-show=\"child.show\"\r\n :key=\"child.name\"\r\n class=\"mb-10 flex justify-between flex-row\">\r\n <text :id=\"child.name\">{{ child.name }}</text>\r\n <text @click=\"child.count++\" :id=\"`v-show-${child.name}-count`\">{{\r\n child.count\r\n }}</text>\r\n </view>\r\n </view>\r\n\r\n <view\r\n class=\"mb-10 flex justify-between flex-row\"\r\n v-for=\"item in mapList\"\r\n :key=\"item[0]\">\r\n <text>{{ item[0] }}</text>\r\n <text :id=\"item[0]\">{{ item[1] }}</text>\r\n </view>\r\n\r\n <view class=\"mb-10\" v-for=\"(item, index) in setList\" :key=\"index\">\r\n <text :id=\"`set-value-${index + 1}`\">{{ item }}</text>\r\n </view>\r\n\r\n <view class=\"bold mb-10\">v-for UTSJSONObject</view>\r\n <view\r\n v-for=\"(value, key) in utsJSONObject\"\r\n :key=\"key\"\r\n class=\"mb-10 flex justify-between flex-row\">\r\n <text :id=\"key\">{{ key }}</text>\r\n <text :id=\"value\">{{ value }}</text>\r\n </view>\r\n </view>\r\n <!-- #ifdef APP -->\r\n </scroll-view>\r\n <!-- #endif -->\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\ntype VForObject = {\r\n key1 : string\r\n key2 : string\r\n key3 : string\r\n}\r\n\r\ntype ListItem = {\r\n name: string\r\n count : number\r\n show: boolean\r\n items?: ListItem[]\r\n}\r\n\r\n// 可通过泛型指定类型\r\nconst object = reactive<VForObject>({ key1: 'value1', key2: 'value2', key3: 'value3' })\r\nconst listItems = ref<ListItem[]>([\r\n { name: '1',\r\n count: 0,\r\n show: true,\r\n items:[\r\n { name: '1-1', count: 0, show: false },\r\n { name: '1-2', count: 0, show: true },\r\n ]\r\n },\r\n { name: '2',\r\n count: 0,\r\n show: true,\r\n items:[\r\n { name: '2-1', count: 0, show: true },\r\n { name: '2-2', count: 0, show: false },\r\n ]\r\n },\r\n { name: '3',\r\n count: 0,\r\n show: false,\r\n items:[\r\n { name: '3-1', count: 0, show: true },\r\n { name: '3-2', count: 0, show: true },\r\n ]\r\n },\r\n])\r\n\r\nconst mapList = new Map<string, string>([\r\n ['map-key-1', 'map value 1'],\r\n ['map-key-2', 'map value 2'],\r\n ['map-key-3', 'map value 3'],\r\n])\r\n\r\nconst setList = new Set<string>(['set value 1', 'set value 2', 'set value 3'])\r\n\r\nconst utsJSONObject = reactive({ utsKey1: 'UTSJSONObject-value1', utsKey2: 'UTSJSONObject-value2', utsKey3: 'UTSJSONObject-value3' })\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-for/v-for-composition"},"v-for_v-for-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-for/v-for-options.uvue","code":"```vue\n<template>\r\n <!-- #ifdef APP -->\r\n <scroll-view style=\"flex: 1\">\r\n <!-- #endif -->\r\n <view class=\"page\">\r\n <text class=\"bold mb-10\">v-for number</text>\r\n <view class=\"mb-10\" v-for=\"item in 3\" :key=\"item\">\r\n <text :id=\"`number-${item}`\">{{ item }}</text>\r\n </view>\r\n\r\n <view class=\"bold mb-10\">v-for object</view>\r\n <view\r\n v-for=\"(value, key) in object\"\r\n :key=\"key\"\r\n class=\"mb-10 flex justify-between flex-row\">\r\n <text :id=\"key\">{{ key }}</text>\r\n <text :id=\"value\">{{ value }}</text>\r\n </view>\r\n\r\n <view class=\"bold mb-10\">v-for & v-if list items</view>\r\n <view\r\n id=\"v-for-v-if-list-items\"\r\n v-for=\"item in listItems\"\r\n :key=\"item.name\">\r\n <template v-if=\"item.show\">\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text :id=\"item.name\">{{ item.name }}</text>\r\n <text @click=\"item.count++\" :id=\"`v-if-${item.name}-count`\">{{\r\n item.count\r\n }}</text>\r\n </view>\r\n <template v-for=\"child in item.items\">\r\n <view\r\n v-if=\"child.show\"\r\n :key=\"child.name\"\r\n class=\"mb-10 flex justify-between flex-row\">\r\n <text :id=\"child.name\">{{ child.name }}</text>\r\n <text @click=\"child.count++\" :id=\"`v-if-${child.name}-count`\">{{\r\n child.count\r\n }}</text>\r\n </view>\r\n </template>\r\n </template>\r\n </view>\r\n\r\n <view class=\"bold mb-10\">v-for & v-show list items</view>\r\n <view\r\n id=\"v-for-v-show-list-items\"\r\n v-for=\"item in listItems\"\r\n v-show=\"item.show\"\r\n :key=\"item.name\">\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text :id=\"item.name\">{{ item.name }}</text>\r\n <text @click=\"item.count++\" :id=\"`v-show-${item.name}-count`\">{{\r\n item.count\r\n }}</text>\r\n </view>\r\n <view\r\n v-for=\"child in item.items\"\r\n v-show=\"child.show\"\r\n :key=\"child.name\"\r\n class=\"mb-10 flex justify-between flex-row\">\r\n <text :id=\"child.name\">{{ child.name }}</text>\r\n <text @click=\"child.count++\" :id=\"`v-show-${child.name}-count`\">{{\r\n child.count\r\n }}</text>\r\n </view>\r\n </view>\r\n\r\n <view\r\n class=\"mb-10 flex justify-between flex-row\"\r\n v-for=\"item in mapList\"\r\n :key=\"item[0]\">\r\n <text>{{ item[0] }}</text>\r\n <text :id=\"item[0]\">{{ item[1] }}</text>\r\n </view>\r\n\r\n <view class=\"mb-10\" v-for=\"(item, index) in setList\" :key=\"index\">\r\n <text :id=\"`set-value-${index + 1}`\">{{ item }}</text>\r\n </view>\n\n <view class=\"bold mb-10\">v-for UTSJSONObject</view>\n <view\n v-for=\"(value, key) in utsJSONObject\"\n :key=\"key\"\n class=\"mb-10 flex justify-between flex-row\">\n <text :id=\"key\">{{ key }}</text>\n <text :id=\"value\">{{ value }}</text>\n </view>\r\n </view>\r\n <!-- #ifdef APP -->\r\n </scroll-view>\r\n <!-- #endif -->\r\n</template>\r\n\r\n<script lang=\"uts\">\r\ntype VForObject = {\r\n key1 : string\r\n key2 : string\r\n key3 : string\r\n}\r\n\r\ntype ListItem = {\r\n name: string\r\n count : number\r\n show: boolean\r\n items?: ListItem[]\r\n}\r\n\r\n// TODO: v-for map set deep array 动态增加删除\r\nexport default {\r\n data() {\r\n return {\r\n object: { key1: 'value1', key2: 'value2', key3: 'value3' } as VForObject,\r\n listItems: [\r\n { name: '1',\r\n count: 0,\r\n show: true,\r\n items:[\r\n { name: '1-1', count: 0, show: false },\r\n { name: '1-2', count: 0, show: true },\r\n ]\r\n },\r\n { name: '2',\r\n count: 0,\r\n show: true,\r\n items:[\r\n { name: '2-1', count: 0, show: true },\r\n { name: '2-2', count: 0, show: false },\r\n ]\r\n },\r\n { name: '3',\r\n count: 0,\r\n show: false,\r\n items:[\r\n { name: '3-1', count: 0, show: true },\r\n { name: '3-2', count: 0, show: true },\r\n ]\r\n },\r\n ] as ListItem[],\r\n mapList: new Map<string, string>([\r\n ['map-key-1', 'map value 1'],\r\n ['map-key-2', 'map value 2'],\r\n ['map-key-3', 'map value 3'],\r\n ]),\r\n setList: new Set<string>(['set value 1', 'set value 2', 'set value 3']),\n utsJSONObject: { utsKey1: 'UTSJSONObject-value1', utsKey2: 'UTSJSONObject-value2', utsKey3: 'UTSJSONObject-value3' }\r\n }\r\n }\r\n}\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-for/v-for-options"},"v-html_v-html-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-html/v-html-composition.uvue","code":"```vue\n<template>\n <view v-html=\"html\" />\n</template>\n\n<script setup lang=\"uts\">\nconst html = '<p class=\"p\" style=\"color: red;\">hello world for composition API!</p>'\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-html/v-html-composition"},"v-html_v-html-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-html/v-html-options.uvue","code":"```vue\n<template>\n <view v-html=\"html\" />\n</template>\n\n<script lang=\"uts\">\nexport default {\n data() {\n return {\n html: '<p class=\"p\" style=\"color: red;\">hello world for options API!</p>'\n }\n }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-html/v-html-options"},"v-if_v-if-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-if/v-if-composition.uvue","code":"```vue\n<template>\n <view class=\"page\">\n <view class=\"mb-10 flex justify-between flex-row\">\n <text>v-if</text>\n <text id=\"v-if-show\" v-if=\"show\">show</text>\n </view>\n <button id=\"switch-v-if-btn\" @click=\"show = !show\">switch v-if</button>\n\n <view class=\"mt-10 mb-10 flex justify-between flex-row\">\n <text>num:</text>\n <text id=\"num\">{{ num }}</text>\n </view>\n <view class=\"mb-10 flex justify-between flex-row\">\n <text>v-if v-else-if v-else</text>\n <text id=\"num-v-if\" v-if=\"num == 1\">v-if num = 1</text>\n <text id=\"num-v-else-if\" v-else-if=\"num == 2\">v-else-if num = 2</text>\n <text id=\"num-v-else\" v-else>v-else</text>\n </view>\n <button id=\"change-num-btn\" @click=\"changeNum\">change num</button>\n </view>\n</template>\n\n<script setup lang=\"uts\">\nconst show = ref(true)\nconst num = ref(1)\n\nconst changeNum = () => {\n if(num.value<3) {\n num.value++\n } else {\n num.value = 1\n }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-if/v-if-composition"},"v-if_v-if-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-if/v-if-options.uvue","code":"```vue\n<template>\n <view class=\"page\">\n <view class=\"mb-10 flex justify-between flex-row\">\n <text>v-if</text>\n <text id=\"v-if-show\" v-if=\"show\">show</text>\n </view>\n <button id=\"switch-v-if-btn\" @click=\"show = !show\">switch v-if</button>\n\n <view class=\"mt-10 mb-10 flex justify-between flex-row\">\n <text>num:</text>\n <text id=\"num\">{{ num }}</text>\n </view>\n <view class=\"mb-10 flex justify-between flex-row\">\n <text>v-if v-else-if v-else</text>\n <text id=\"num-v-if\" v-if=\"num == 1\">v-if num = 1</text>\n <text id=\"num-v-else-if\" v-else-if=\"num == 2\">v-else-if num = 2</text>\n <text id=\"num-v-else\" v-else>v-else</text>\n </view>\n <button id=\"change-num-btn\" @click=\"changeNum\">change num</button>\n </view>\n</template>\n\n<script lang=\"uts\">\nexport default {\n data() {\n return {\n show: true,\n num: 1\n }\n },\n methods: {\n changeNum() {\n if(this.num<3) {\n this.num++\n } else {\n this.num = 1\n }\n },\n }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-if/v-if-options"},"v-memo_v-memo-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-memo/v-memo-composition.uvue","code":"```vue\n<template>\n <view class=\"page\">\n <view class=\"flex flex-row justify-between mb-10\" v-memo=\"[]\">\n <text>msg will never change:</text>\n <text id=\"v-memo-never-change-msg\">{{ msg }}</text>\n </view>\n <view class=\"flex flex-row justify-between mb-10\">\n <text>msg:</text>\n <text id=\"msg\">{{ msg }}</text>\n </view>\n <view class=\"flex flex-row justify-between mb-10\" v-memo=\"[num]\">\n <text>msg will change when num chang:</text>\n <text id=\"v-memo-num-change-msg\">{{ msg }}</text>\n </view>\n <view class=\"flex flex-row justify-between mb-10\">\n <text>num:</text>\n <text id=\"num\">{{ num }}</text>\n </view>\n <button\n id=\"change-message-btn\"\n class=\"mb-10\"\n type=\"primary\"\n @click=\"changeMessage\">\n change message\n </button>\n <button\n id=\"increment-num-btn\"\n class=\"mb-10\"\n type=\"primary\"\n @click=\"incrementNum\">\n increment num\n </button>\n </view>\n</template>\n\n<script setup lang=\"uts\">\nconst msg = ref('hello world')\n\nconst num = ref(0)\n\nconst changeMessage = () => {\n msg.value = 'msg changed'\n}\n\nconst incrementNum = () =>{\n num.value++\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-memo/v-memo-composition"},"v-memo_v-memo-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-memo/v-memo-options.uvue","code":"```vue\n<template>\n <view class=\"page\">\n <view class=\"flex flex-row justify-between mb-10\" v-memo=\"[]\">\n <text>msg will never change:</text>\n <text id=\"v-memo-never-change-msg\">{{ msg }}</text>\n </view>\n <view class=\"flex flex-row justify-between mb-10\">\n <text>msg:</text>\n <text id=\"msg\">{{ msg }}</text>\n </view>\n <view class=\"flex flex-row justify-between mb-10\" v-memo=\"[num]\">\n <text>msg will change when num chang:</text>\n <text id=\"v-memo-num-change-msg\">{{ msg }}</text>\n </view>\n <view class=\"flex flex-row justify-between mb-10\">\n <text>num:</text>\n <text id=\"num\">{{ num }}</text>\n </view>\n <button\n id=\"change-message-btn\"\n class=\"mb-10\"\n type=\"primary\"\n @click=\"changeMessage\">\n change message\n </button>\n <button\n id=\"increment-num-btn\"\n class=\"mb-10\"\n type=\"primary\"\n @click=\"incrementNum\">\n increment num\n </button>\n </view>\n</template>\n\n<script lang=\"uts\">\nexport default {\n data() {\n return {\n msg: 'hello world',\n num: 0\n }\n },\n methods: {\n changeMessage() {\n this.msg = 'msg changed'\n },\n incrementNum(){\n this.num++\n }\n }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-memo/v-memo-options"},"v-model_Foo-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-model/Foo-composition.uvue","code":"```vue\n<template>\n <view>\n <view class=\"mb-10 flex justify-between flex-row\">\n <text>v-model in Foo:</text>\n <text id=\"model-value-text\">{{ modelValue }}</text>\n </view>\n <view class=\"mb-10 flex justify-between flex-row\">\n <text>v-model:msg in Foo:</text>\n <text id=\"model-msg-text\">{{ msg }}</text>\n </view>\n\n <view class=\"mb-10 flex justify-between flex-row\">\n <text>defineModel num:</text>\n <text id=\"model-num-text\">{{ num }}</text>\n </view>\n <button class=\"mb-10\" id=\"update-value-btn\" @click=\"updateValue\">\n update value\n </button>\n </view>\n</template>\n\n<script setup lang=\"uts\">\n// 在被修改时，触发 \"update:modelValue\" 事件\nconst modelValue = defineModel({ type: String })\n\n// 在被修改时，触发 \"update:msg\" 事件\nconst msg = defineModel('msg', { type: String, default: 'default msg' })\n\nconst num = defineModel('num', { type: Number, default: 1 })\n\nconst updateValue = () => {\n modelValue.value += '1'\n msg.value += '2'\n num.value++\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-model/Foo-composition"},"v-model_v-model-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-model/v-model-composition.uvue","code":"```vue\n<template>\n <view class=\"page\">\n <Foo\n v-model=\"str\"\n v-model:msg=\"msg\"\n @update:modelValue=\"handleModelValueUpdate\"\n @update:msg=\"handleModelMsgUpdate\" />\n <input class=\"mb-10 input\" id=\"model-value-input\" v-model=\"str\" />\n <input class=\"mb-10 input\" id=\"model-msg-input\" v-model=\"msg\" />\n <view class=\"mb-10 flex justify-between flex-row\">\n <text>handle modelValue update res:</text>\n <text id=\"handle-model-value-update-res\">{{ handleModelValueUpdateRes }}</text>\n </view>\n <view class=\"mb-10 flex justify-between flex-row\">\n <text>handle model msg update res:</text>\n <text id=\"handle-model-msg-update-res\">{{ handleModelMsgUpdateRes }}</text>\n </view>\n </view>\n</template>\n\n<script setup lang=\"uts\">\nimport Foo from './Foo-composition.uvue'\n\nconst str = ref('str')\nconst msg = ref('msg')\n\nconst handleModelValueUpdateRes = ref('')\nconst handleModelValueUpdate = (val : string) => {\n handleModelValueUpdateRes.value = val\n}\nconst handleModelMsgUpdateRes = ref('')\nconst handleModelMsgUpdate = (val : string) => {\n handleModelMsgUpdateRes.value = val\n}\n</script>\n\n<style>\n.input {\n padding: 8px 10px;\n border: 1px solid #ccc;\n border-radius: 4px;\n}\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-model/v-model-composition"},"v-model_v-model-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-model/v-model-options.uvue","code":"```vue\n<template>\n <view class=\"page\">\n <view class=\"mb-10 flex justify-between flex-row\">\n <text>str:</text>\n <text id=\"str\">{{ str }}</text>\n </view>\n <input class=\"mb-10 input\" id=\"model-str\" v-model=\"str\" />\n <input class=\"mb-10 input\" id=\"model-num\" v-model.number=\"num\" type=\"text\" />\n <input class=\"mb-10 input\" id=\"model-str-trim\" v-model.trim=\"strForTrim\" />\n <input class=\"mb-10 input\" id=\"model-str-lazy\" v-model.lazy=\"str\" type=\"text\" />\n <view class=\"mb-10 flex justify-between flex-row\">\n <text>typeof num:</text>\n <text id=\"typeof-num\">{{ typeof num }}</text>\n </view>\n <view class=\"mb-10 flex justify-between flex-row\">\n <text>str for trim length:</text>\n <text id=\"str-length\">{{ strForTrim.length }}</text>\n </view>\n </view>\n</template>\n\n<script lang=\"uts\">\nexport default {\n data(){\n return {\n str: 'str',\n num: 1,\n strForTrim: ' abc ',\n }\n },\n}\n</script>\n\n<style>\n.input {\n padding: 8px 10px;\n border: 1px solid #ccc;\n border-radius: 4px;\n}\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-model/v-model-options"},"v-on_v-on-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-on/v-on-composition.uvue","code":"```vue\n<template>\r\n <view class=\"page\">\r\n <text class=\"bold mb-10\">下方按钮点击累加 count</text>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>count:</text>\r\n <text id=\"count\">{{ count }}</text>\r\n </view>\r\n <button class=\"mb-10 btn\" @click=\"handleClick\">\r\n @click=\"handleClick\" 缩写\r\n </button>\r\n <button class=\"mb-10 btn\" v-on:click=\"handleClick\">\r\n v-on:click=\"handleClick\" 方法处理函数\r\n </button>\r\n <button class=\"mb-10 btn\" v-on:click=\"count++\">\r\n v-on:click=\"count++\" 内联事件\r\n </button>\r\n <button class=\"mb-10 btn\" v-on:click=\"handleClick($event as MouseEvent)\">\r\n v-on:click=\"handleClick($event as MouseEvent)\"\r\n 内联声明，注意要显式声明$event的类型\r\n </button>\r\n <button class=\"mb-10 btn\" v-on:[event]=\"handleClick\">\r\n v-on:[event]=\"handleClick\" 动态事件\r\n </button>\r\n <button class=\"mb-10 btn\" v-on=\"{ click: handleClick }\">\r\n v-on=\"{ click: handleClick }\" 对象语法\r\n </button>\r\n <!-- TODO: ios 不支持 -->\r\n <!-- #ifndef APP-IOS -->\r\n <button class=\"mb-10 btn\" id=\"btn-once\" @click.once=\"handleClick\">@click once</button>\r\n <!-- #endif -->\r\n <view @click=\"handleClick\">\r\n <button class=\"mb-10 btn\" id=\"btn-stop\" @click.stop=\"handleClick\">@click stop</button>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst count = ref(0)\r\n\r\nconst event = ref('click')\r\n\r\nconst handleClick = (e : MouseEvent) => {\r\n count.value++\r\n console.log('handleClick', e)\r\n}\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-on/v-on-composition"},"v-on_v-on-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-on/v-on-options.uvue","code":"```vue\n<template>\r\n <view class=\"page\">\r\n <text class=\"bold mb-10\">下方按钮点击累加 count</text>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>count:</text>\r\n <text id=\"count\">{{ count }}</text>\r\n </view>\r\n <button class=\"mb-10 btn\" @click=\"handleClick\">@click=\"handleClick\" 缩写</button>\r\n <button class=\"mb-10 btn\" v-on:click=\"handleClick\">\r\n v-on:click=\"handleClick\" 方法处理函数\r\n </button>\r\n <button class=\"mb-10 btn\" v-on:click=\"count++\">\r\n v-on:click=\"count++\" 内联事件\r\n </button>\r\n <button class=\"mb-10 btn\" v-on:click=\"handleClick($event as MouseEvent)\">\r\n v-on:click=\"handleClick($event as MouseEvent)\"\r\n 内联声明，注意要显式声明$event的类型\r\n </button>\r\n <button class=\"mb-10 btn\" v-on:[event]=\"handleClick\">\r\n v-on:[event]=\"handleClick\" 动态事件\r\n </button>\r\n <button class=\"mb-10 btn\" v-on=\"{ click: handleClick }\">\r\n v-on=\"{ click: handleClick }\" 对象语法\r\n </button>\r\n <!-- TODO: ios 不支持 -->\r\n <!-- #ifndef APP-IOS -->\r\n <button class=\"mb-10 btn\" id=\"btn-once\" @click.once=\"handleClick\">@click once</button>\r\n <!-- #endif -->\r\n <view @click=\"handleClick\">\r\n <button class=\"mb-10 btn\" id=\"btn-stop\" @click.stop=\"handleClick\">@click stop</button>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nexport default {\r\n data() {\r\n return {\r\n count: 0,\r\n event: 'click'\r\n }\r\n },\r\n methods: {\r\n handleClick(e : MouseEvent) {\r\n this.count++\r\n console.log('handleClick', e)\r\n }\r\n }\r\n}\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-on/v-on-options"},"v-once_v-once-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-once/v-once-composition.uvue","code":"```vue\n<template>\n <view class=\"page\">\n <view class=\"flex flex-row justify-between mb-10\" v-once>\n <text>This msg will never change:</text>\n <text id='v-once-msg'>{{ msg }}</text>\n </view>\n <view class=\"flex flex-row justify-between mb-10\">\n <text>msg:</text>\n <text id=\"msg\">{{ msg }}</text>\n </view>\n <button id=\"btn\" class=\"mb-10\" type=\"primary\" @click=\"changeMessage\">\n change message\n </button>\n </view>\n</template>\n\n<script setup lang=\"uts\">\n const msg = ref('hello world')\n const changeMessage = () => {\n msg.value = 'msg changed'\n }\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-once/v-once-composition"},"v-once_v-once-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-once/v-once-options.uvue","code":"```vue\n<template>\n <view class=\"page\">\n <view class=\"flex flex-row justify-between mb-10\" v-once>\n <text>This msg will never change:</text>\n <text id='v-once-msg'>{{ msg }}</text>\n </view>\n <view class=\"flex flex-row justify-between mb-10\">\n <text>msg:</text>\n <text id=\"msg\">{{ msg }}</text>\n </view>\n <button id=\"btn\" class=\"mb-10\" type=\"primary\" @click=\"changeMessage\">\n change message\n </button>\n </view>\n</template>\n\n<script lang=\"uts\">\nexport default {\n data() {\n return {\n msg: 'hello world'\n }\n },\n methods: {\n changeMessage() {\n this.msg = 'msg changed'\n }\n }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-once/v-once-options"},"v-pre_v-pre":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-pre/v-pre.uvue","code":"```vue\n<template>\n <view class=\"page\">\n <text class=\"bold mb-10\">v-pre 跳过该元素及其所有子元素的编译</text>\n <text class=\"mb-10 v-pre-text\" v-pre>{{ this will not be compiled }}</text>\n </view>\n</template>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-pre/v-pre"},"v-show_v-show-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-show/v-show-composition.uvue","code":"```vue\n<template>\n <view class=\"page\">\n <button id=\"toggle-btn\" @click=\"toggleShow\">toggle show/hide</button>\n <view class=\"mt-10\" id=\"v-show-element\" v-show=\"dataInfo.show\">\n 点击上方按钮，切换显示/隐藏\n </view>\n </view>\n</template>\n\n<script setup lang=\"uts\">\ntype DataInfo = {\n show: boolean\n}\n\nconst dataInfo = reactive({\n show: true\n} as DataInfo)\n\nconst toggleShow = () => {\n dataInfo.show = !dataInfo.show\n}\n\ndefineExpose({\n dataInfo\n})\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-show/v-show-composition"},"v-show_v-show-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-show/v-show-options.uvue","code":"```vue\n<template>\n <view class=\"page\">\n <button id=\"toggle-btn\" @click=\"toggleShow\">toggle show/hide</button>\n <view class=\"mt-10\" id=\"v-show-element\" v-show=\"dataInfo.show\">\n 点击上方按钮，切换显示/隐藏\n </view>\n </view>\n</template>\n\n<script lang=\"uts\">\ntype DataInfo = {\n show: boolean\n}\n\nexport default {\n data() {\n return {\n dataInfo: {\n show: true\n } as DataInfo\n }\n },\n methods: {\n toggleShow() {\n this.dataInfo.show = !this.dataInfo.show\n }\n }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-show/v-show-options"},"v-slot_Foo-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-slot/Foo-composition.uvue","code":"```vue\n<template>\n <view>\n <slot name=\"header\" :msg=\"msg\"></slot>\n <slot :num=\"num\"></slot>\n <slot name=\"footer\" :arr=\"arr\"></slot>\n </view>\n</template>\n\n<script setup lang='uts'>\n const msg = ref('foo msg')\n const num = ref<number>(0)\n const arr = ref<string[]>(['a', 'b', 'c'])\n\n defineSlots<{\n header(props : { msg : string }) : any,\n default(props : { num : number }) : any,\n footer(props : { arr : string[] }) : any\n }>()\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-slot/Foo-composition"},"v-slot_Foo-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-slot/Foo-options.uvue","code":"```vue\n<template>\n <view>\n <slot name=\"header\" :msg=\"msg\"></slot>\n <slot :num=\"num\"></slot>\n <slot name=\"footer\" :arr=\"arr\"></slot>\n </view>\n</template>\n\n<script lang=\"uts\">\n export default {\n slots: Object as SlotsType<{\n header: { msg: string }\n default: { num: number }\n footer: { arr: string[] }\n }>,\n data(){\n return {\n msg: 'foo msg',\n num: 0,\n arr: ['a','b', 'c']\n }\n }\n }\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-slot/Foo-options"},"v-slot_v-slot-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-slot/v-slot-composition.uvue","code":"```vue\n<template>\n <view class=\"page\">\n <Foo>\n <template #header=\"{ msg }\">\n <view class=\"mb-10 flex justify-between flex-row\">\n <text>header slot msg:</text>\n <text id=\"slot-header\">{{ msg }}</text>\n </view>\n </template>\n <template #default=\"{ num }\">\n <view class=\"mb-10 flex justify-between flex-row\">\n <text>default slot num:</text>\n <text id=\"slot-default\">{{ num }}</text>\n </view>\n </template>\n <template #footer=\"{ arr }\">\n <view class=\"mb-10 flex justify-between flex-row\">\n <text>footer slot arr:</text>\n <text id=\"slot-footer\">{{ JSON.stringify(arr) }}</text>\n </view>\n </template>\n </Foo>\n </view>\n</template>\n\n<script setup lang=\"uts\">\nimport Foo from './Foo-composition.uvue'\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-slot/v-slot-composition"},"v-slot_v-slot-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-slot/v-slot-options.uvue","code":"```vue\n<template>\n <view class=\"page\">\n <Foo>\n <template #header=\"{ msg }\">\n <view class=\"mb-10 flex justify-between flex-row\">\n <text>header slot msg:</text>\n <text id=\"slot-header\">{{ msg }}</text>\n </view>\n </template>\n <template #default=\"{ num }\">\n <view class=\"mb-10 flex justify-between flex-row\">\n <text>default slot num:</text>\n <text id=\"slot-default\">{{ num }}</text>\n </view>\n </template>\n <template #footer=\"{ arr }\">\n <view class=\"mb-10 flex justify-between flex-row\">\n <text>footer slot arr:</text>\n <text id=\"slot-footer\">{{ JSON.stringify(arr) }}</text>\n </view>\n </template>\n </Foo>\n </view>\n</template>\n\n<script lang=\"uts\">\nimport Foo from './Foo-options.uvue'\nexport default {\n components: {Foo}\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-slot/v-slot-options"},"v-text_v-text-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-text/v-text-composition.uvue","code":"```vue\n<template>\n <view class=\"page\">\n <view class=\"flex flex-row justify-between mb-10\">\n <text>v-txt for text:</text>\n <text id=\"v-text-text\" v-text=\"vTextForText\"></text>\n </view>\n <view class=\"flex flex-row justify-between mb-10\">\n <text>v-txt for view:</text>\n <view id=\"v-text-view\" v-text=\"vTextForView\"></view>\n </view>\n </view>\n</template>\n\n<script setup lang=\"uts\">\nconst vTextForText = ref('v-text for text')\nconst vTextForView = ref('v-text for view')\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-text/v-text-composition"},"v-text_v-text-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-text/v-text-options.uvue","code":"```vue\n<template>\n <view class=\"page\">\n <view class=\"flex flex-row justify-between mb-10\">\n <text>v-txt for text:</text>\n <text id=\"v-text-text\" v-text=\"vTextForText\"></text>\n </view>\n <view class=\"flex flex-row justify-between mb-10\">\n <text>v-txt for view:</text>\n <view id=\"v-text-view\" v-text=\"vTextForView\"></view>\n </view>\n </view>\n</template>\n\n<script lang=\"uts\">\nexport default {\n data() {\n return {\n vTextForText: 'v-text for text',\n vTextForView: 'v-text for view',\n }\n }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-text/v-text-options"}},"E_error":{"runtime-error_runtime-error-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/error/runtime-error/runtime-error-composition.uvue","code":"```vue\n<template>\n <view class=\"page\">\n <text>{{ arr[1] }}</text>\n </view>\n</template>\n\n<script setup lang=\"uts\">\nconst arr = [0]\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/error/runtime-error/runtime-error-composition"},"runtime-error_runtime-error-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/error/runtime-error/runtime-error-options.uvue","code":"```vue\n<template>\n <view class=\"page\">\n <text>{{ arr[1] }}</text>\n </view>\n</template>\n\n<script lang=\"uts\">\n export default {\n data(){\n return {\n arr: [0]\n }\n }\n }\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/error/runtime-error/runtime-error-options"}},"E_examples":{"nested-component-communication_nested-component-communication-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/examples/nested-component-communication/nested-component-communication-composition.uvue","code":"```vue\n<template>\n <view class=\"page\">\n <view class=\"flex-row\">\n 父组件:\n <text class=\"parent-msg\">{{ msg }}</text>\n </view>\n <button class=\"parent-btn\" @click=\"change\">父组件改变数据</button>\n <child />\n </view>\n</template>\n\n<script setup lang=\"uts\">\nimport child from './components/child.uvue'\nimport { setComponentMsg, state } from '@/store/index.uts'\n\nconst msg = computed<number>((): number => state.componentMsg)\n\nconst change = () => {\n setComponentMsg(state.componentMsg + 1)\n}\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/examples/nested-component-communication/nested-component-communication-composition"},"nested-component-communication_nested-component-communication-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/examples/nested-component-communication/nested-component-communication-options.uvue","code":"```vue\n<template>\n <view class=\"page\">\n <view class=\"flex-row\">\n 父组件:\n <text class=\"parent-msg\">{{ msg }}</text>\n </view>\n <button class=\"parent-btn\" @click=\"change\">父组件改变数据</button>\n <child></child>\n </view>\n</template>\n\n<script>\nimport child from './components/child.uvue'\nimport { setComponentMsg, state } from '@/store/index.uts'\nexport default {\n components: {\n child\n },\n computed: {\n msg(): number {\n return state.componentMsg\n }\n },\n methods: {\n change() {\n setComponentMsg(state.componentMsg + 1)\n }\n }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/examples/nested-component-communication/nested-component-communication-options"},"set-custom-child-component-root-node-class_child":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/examples/set-custom-child-component-root-node-class/child.uvue","code":"```vue\n<template>\n <view>\n <button class=\"btn-child bg-orange\">button in child page</button>\n </view>\n</template>\n\n<style>\n.btn-child {\n width: 300px;\n color: rgb(83, 156, 234);\n}\n.bg-orange{\n background-color: rgb(214, 154, 50);\n}\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/examples/set-custom-child-component-root-node-class/child"},"set-custom-child-component-root-node-class_set-custom-child-component-root-node-class-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/examples/set-custom-child-component-root-node-class/set-custom-child-component-root-node-class-composition.uvue","code":"```vue\n<template>\n <view>\n <button class=\"btn-page bg-green\">button in parent page</button>\n <Child />\n </view>\n</template>\n\n<script setup lang=\"uts\">\nimport Child from './child.uvue'\n</script>\n\n<style>\n.btn-page {\n width: 280px;\n color: rgb(209, 51, 51);\n}\n.bg-green {\n background-color: rgb(105, 154, 105);\n}\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/examples/set-custom-child-component-root-node-class/set-custom-child-component-root-node-class-composition"},"set-custom-child-component-root-node-class_set-custom-child-component-root-node-class-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/examples/set-custom-child-component-root-node-class/set-custom-child-component-root-node-class-options.uvue","code":"```vue\n<template>\n <view>\n <button class=\"btn-page bg-green\">button in parent page</button>\n <Child />\n </view>\n</template>\n\n<script lang='uts'>\nimport Child from \"./child.uvue\";\nexport default {\n components: {\n Child\n }\n}\n</script>\n\n<style>\n.btn-page {\n width: 280px;\n color: rgb(209, 51, 51);\n}\n.bg-green{\n background-color: rgb(105, 154, 105);\n}\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/examples/set-custom-child-component-root-node-class/set-custom-child-component-root-node-class-options"},"unrecognized-component_unrecognized-component":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/examples/unrecognized-component/unrecognized-component.uvue","code":"```vue\n<template>\r\n\t<Abc><text>text in unrecognized component</text></Abc>\r\n</template>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/examples/unrecognized-component/unrecognized-component"},"nested-component-communication_components_child":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/examples/nested-component-communication/components/child.uvue","code":"```vue\n<template>\n <view class=\"child\">\n <view class=\"flex-row\">\n 子组件:\n <text class=\"child-msg\">{{ msg }}</text>\n </view>\n <grand-child></grand-child>\n </view>\n</template>\n\n<script>\nimport grandChild from './grandChild.uvue'\nimport { state } from '@/store/index.uts'\nexport default {\n components: {\n grandChild\n },\n computed: {\n msg(): number {\n return state.componentMsg\n }\n }\n}\n</script>\n<style>\n.child {\n margin-top: 10px;\n}\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/examples/nested-component-communication/components/child"},"nested-component-communication_components_grandChild":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/examples/nested-component-communication/components/grandChild.uvue","code":"```vue\n<template>\n <view class=\"child\">\n <view class=\"flex-row\">\n 孙组件:\n <text class=\"grandchild-msg\">{{ msg }}</text>\n </view>\n <button class=\"grandchild-btn\" @click=\"change\">孙组件清空数据</button>\n </view>\n</template>\n\n<script>\nimport { state, setComponentMsg } from '@/store/index.uts'\nexport default {\n computed: {\n msg(): number {\n return state.componentMsg\n }\n },\n methods: {\n change() {\n setComponentMsg(0)\n }\n }\n}\n</script>\n\n<style>\n.child {\n margin-top: 10px;\n}\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/examples/nested-component-communication/components/grandChild"}},"E_lifecycle":{"component_ChildComponentComposition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/lifecycle/component/ChildComponentComposition.uvue","code":"```vue\n<template>\r\n title: {{ title }}\r\n <button class=\"component-lifecycle-btn mt-10\" @click=\"updateTitle\">\r\n updateTitle\r\n </button>\r\n</template>\r\n\r\n<script setup lang='uts'>\r\nimport { state, setLifeCycleNum } from '@/store/index.uts'\r\n\r\nconst title = ref('component for composition API lifecycle test')\r\n\r\nconst emit = defineEmits<{\r\n (e : 'updateIsScroll', val : boolean) : void\r\n}>()\r\n\r\nonLoad((_ : OnLoadOptions) => {\r\n // 自动化测试\r\n setLifeCycleNum(state.lifeCycleNum + 100)\r\n})\r\nonPageShow(() => {\r\n // 自动化测试\r\n setLifeCycleNum(state.lifeCycleNum + 10)\r\n})\r\nonReady(() => {\r\n // 自动化测试\r\n // TODO: onReady 未触发\r\n setLifeCycleNum(state.lifeCycleNum + 10)\r\n})\r\n\r\nonPullDownRefresh(() => {\r\n // 自动化测试\r\n setLifeCycleNum(state.lifeCycleNum + 10)\r\n})\r\nonPageScroll((_) => {\r\n // 自动化测试\r\n emit('updateIsScroll', true)\r\n})\r\nonReachBottom(() => {\r\n // 自动化测试\r\n setLifeCycleNum(state.lifeCycleNum + 10)\r\n})\r\nonBackPress((_ : OnBackPressOptions) : boolean | null => {\r\n // 自动化测试\r\n setLifeCycleNum(state.lifeCycleNum - 10)\r\n return null\r\n})\r\nonPageHide(() => {\r\n // 自动化测试\r\n setLifeCycleNum(state.lifeCycleNum - 10)\r\n})\r\nonUnload(() => {\r\n // 自动化测试\r\n setLifeCycleNum(state.lifeCycleNum - 100)\r\n})\r\n\r\nonBeforeMount(() => {\r\n // 自动化测试\r\n setLifeCycleNum(state.lifeCycleNum + 1)\r\n console.log('component for lifecycle test mounted')\r\n})\r\n\r\nonMounted(() => {\r\n // 自动化测试\r\n setLifeCycleNum(state.lifeCycleNum + 1)\r\n console.log('component for lifecycle test mounted')\r\n})\r\n\r\nonBeforeUpdate(() => {\r\n // 自动化测试\r\n setLifeCycleNum(state.lifeCycleNum + 1)\r\n console.log('component for lifecycle test beforeUpdate')\r\n})\r\n\r\nonUpdated(() => {\r\n // 自动化测试\r\n setLifeCycleNum(state.lifeCycleNum + 1)\r\n console.log('component for lifecycle test updated')\r\n})\r\n\r\nonBeforeUnmount(() => {\r\n // 自动化测试\r\n setLifeCycleNum(state.lifeCycleNum - 1)\r\n console.log('component for lifecycle test beforeUnmount')\r\n})\r\n\r\nonUnmounted(() => {\r\n // 自动化测试\r\n setLifeCycleNum(state.lifeCycleNum - 1)\r\n console.log('component for lifecycle test unmounted')\r\n})\r\n\r\n// TODO: app-android 不触发\r\nonActivated(() => { })\r\n// TODO: app-android 不触发\r\nonDeactivated(() => { })\r\n\r\nconst updateTitle = () => {\r\n title.value = 'component for lifecycle test updated'\r\n}\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/lifecycle/component/ChildComponentComposition"},"component_ChildComponentOptions":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/lifecycle/component/ChildComponentOptions.uvue","code":"```vue\n<template>\r\n title: {{ title }}\r\n <button class=\"component-lifecycle-btn mt-10\" @click=\"updateTitle\">\r\n updateTitle\r\n </button>\r\n</template>\r\n\r\n<script lang='uts'>\r\n import { state, setLifeCycleNum } from '@/store/index.uts';\r\n export default {\r\n name: 'OptionsAPIComponentLifecycle',\r\n data() {\r\n return {\r\n title: 'component for options API lifecycle test',\r\n };\r\n },\r\n beforeCreate() {\r\n // 自动化测试\r\n setLifeCycleNum(state.lifeCycleNum + 1);\r\n console.log('component for lifecycle test beforeCreate');\r\n },\r\n created() {\r\n // 自动化测试\r\n setLifeCycleNum(state.lifeCycleNum + 1);\r\n console.log('component for lifecycle test created');\r\n },\r\n beforeMount() {\r\n // 自动化测试\r\n setLifeCycleNum(state.lifeCycleNum + 1);\r\n console.log('component for lifecycle test beforeMount');\r\n },\r\n mounted() {\r\n // 自动化测试\r\n setLifeCycleNum(state.lifeCycleNum + 1);\r\n console.log('component for lifecycle test mounted');\r\n },\r\n beforeUpdate() {\r\n // 自动化测试\r\n setLifeCycleNum(state.lifeCycleNum + 1);\r\n console.log('component for lifecycle test beforeUpdate');\r\n },\r\n updated() {\r\n // 自动化测试\r\n setLifeCycleNum(state.lifeCycleNum + 1);\r\n console.log('component for lifecycle test updated');\r\n },\r\n beforeUnmount() {\r\n // 自动化测试\r\n setLifeCycleNum(state.lifeCycleNum - 1);\r\n console.log('component for lifecycle test beforeUnmount');\r\n },\r\n unmounted() {\r\n // 自动化测试\r\n setLifeCycleNum(state.lifeCycleNum - 1);\r\n console.log('component for lifecycle test unmounted');\r\n },\r\n methods: {\r\n updateTitle() {\r\n this.title = 'component for lifecycle test updated';\r\n },\r\n },\r\n };\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/lifecycle/component/ChildComponentOptions"},"component_component-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/lifecycle/component/component-composition.uvue","code":"```vue\n<template>\r\n <!-- #ifdef APP -->\r\n <scroll-view style=\"flex:1\">\r\n <!-- #endif -->\r\n <view class=\"page container\">\r\n <text class=\"mb-10\">component lifecycle 组合式 API</text>\r\n <child-component @updateIsScroll=\"updateIsScroll\" />\r\n <button class=\"mt-10\" @click=\"scrollToBottom\">scrollToBottom</button>\r\n </view>\r\n <!-- #ifdef APP -->\r\n </scroll-view>\r\n <!-- #endif -->\r\n</template>\r\n\r\n<script setup lang='uts'>\r\n import ChildComponent from './ChildComponentComposition.uvue'\r\n import { state, setLifeCycleNum } from '@/store/index.uts'\r\n\r\n const isScrolled = ref(false)\r\n\r\n // 自动化测试\r\n const pageGetLifeCycleNum = () : number => {\r\n return state.lifeCycleNum\r\n }\r\n\r\n // 自动化测试\r\n const pageSetLifeCycleNum = (num : number) => {\r\n setLifeCycleNum(num)\r\n }\r\n\r\n // 自动化测试\r\n const pullDownRefresh = () => {\r\n uni.startPullDownRefresh({\r\n success() {\r\n setTimeout(() => {\r\n uni.stopPullDownRefresh()\r\n }, 1500)\r\n },\r\n })\r\n }\r\n\r\n const scrollToBottom = () => {\r\n uni.pageScrollTo({\r\n scrollTop: 3000,\r\n })\r\n }\r\n\r\n const updateIsScroll = (val : boolean) => {\r\n isScrolled.value = val\r\n }\r\n\r\n // 自动化测试\r\n const getIsScrolled = () : boolean => {\r\n return isScrolled.value\r\n }\r\n\r\n defineExpose({\r\n pageGetLifeCycleNum,\r\n pageSetLifeCycleNum,\r\n pullDownRefresh,\r\n scrollToBottom,\r\n getIsScrolled\r\n })\r\n</script>\r\n\r\n<style>\r\n .container {\r\n height: 1200px;\r\n }\r\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/lifecycle/component/component-composition"},"component_component-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/lifecycle/component/component-options.uvue","code":"```vue\n<template>\r\n <view class=\"page\">\r\n <text class=\"mb-10\">component lifecycle 选项式 API</text>\r\n <child-component />\r\n </view>\r\n</template>\r\n\r\n<script lang='uts'>\r\nimport ChildComponent from './ChildComponentOptions.uvue'\r\nimport { state } from '@/store/index.uts'\r\n\r\nexport default {\r\n components: { ChildComponent },\r\n methods: {\r\n // 自动化测试\r\n getLifeCycleNum(): number {\r\n return state.lifeCycleNum\r\n },\r\n },\r\n}\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/lifecycle/component/component-options"},"page_monitor-page-lifecycle-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/lifecycle/page/monitor-page-lifecycle-composition.uvue","code":"```vue\n<script lang=\"uts\" setup>\n// #ifdef APP-ANDROID\nonAppHide(() => {\n\tconsole.log('组件监听应用生命周期 => onAppHide')\n})\nonAppShow((onShowOptions: OnShowOptions) => {\n\tconsole.log('组件监听应用生命周期 => onAppShow => onShowOptions', onShowOptions)\n})\n// #endif\n\nonPageShow(() => {\n\tconsole.log('组件监听页面生命周期 => onPageShow')\n})\nonPageHide(() => {\n\tconsole.log('组件监听页面生命周期 => onPageHide')\n})\n</script>\n\n<template>组件监听页面、应用生命周期（组合式 API）</template>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/lifecycle/page/monitor-page-lifecycle-composition"},"page_monitor-page-lifecycle-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/lifecycle/page/monitor-page-lifecycle-options.uvue","code":"```vue\n<script lang=\"uts\">\nexport default {\n\tsetup() {\n\t\t// #ifdef APP-ANDROID\n\t\tonAppHide(() => {\n\t\t\tconsole.log('组件监听应用生命周期 => onAppHide')\n\t\t})\n\t\tonAppShow((onShowOptions: OnShowOptions) => {\n\t\t\tconsole.log('组件监听应用生命周期 => onAppShow => onShowOptions', onShowOptions)\n\t\t})\n\t\t// #endif\n\n\t\tonPageShow(() => {\n\t\t\tconsole.log('组件监听页面生命周期 => onPageShow')\n\t\t})\n\t\tonPageHide(() => {\n\t\t\tconsole.log('组件监听页面生命周期 => onPageHide')\n\t\t})\n\t}\n}\n</script>\n\n<template>组件监听页面、应用生命周期（选项式 API）</template>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/lifecycle/page/monitor-page-lifecycle-options"},"page_page-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/lifecycle/page/page-composition.uvue","code":"```vue\n<template>\r\n <!-- #ifdef APP -->\r\n <scroll-view style=\"flex: 1\" :bounces=\"false\">\r\n <!-- #endif -->\r\n <view class=\"page container\">\r\n <text>page lifecycle 组合式 API</text>\r\n <view class=\"flex flex-row justify-between mt-10\">\r\n <text>onLoad 触发：</text>\r\n <text>{{ isOnloadTriggered }}</text>\r\n </view>\r\n <view class=\"flex flex-row justify-between mt-10\">\r\n <text>onPageShow 触发：</text>\r\n <text>{{ isOnPageShowTriggered }}</text>\r\n </view>\r\n <view class=\"flex flex-row justify-between mt-10\">\r\n <text>onReady 触发：</text>\r\n <text>{{ isOnReadyTriggered }}</text>\r\n </view>\r\n <view class=\"flex flex-row justify-between mt-10\">\r\n <text>onPullDownRefresh 触发：</text>\r\n <text>{{ isOnPullDownRefreshTriggered }}</text>\r\n </view>\r\n <view class=\"flex flex-row justify-between mt-10\">\r\n <text>onReachBottom 触发：</text>\r\n <text>{{ isOnReachBottomTriggered }}</text>\r\n </view>\r\n <view class=\"flex flex-row justify-between mt-10\">\r\n <text>onBackPress 触发：</text>\r\n <text>{{ isOnBackPressTriggered }}</text>\r\n </view>\r\n <view class=\"flex flex-row justify-between mt-10\">\r\n <text>onPageHide 触发：</text>\r\n <text>{{ isOnPageHideTriggered }}</text>\r\n </view>\r\n <view class=\"flex flex-row justify-between mt-10\">\r\n <text>onResize 触发：</text>\r\n <text>{{ isOnResizeTriggered }}</text>\r\n </view>\n\t\t\t<view class=\"flex flex-row justify-between mt-10\">\n\t\t\t\t<MonitorPageLifecycleComposition />\r\n </view>\r\n <button class=\"mt-10\" @click=\"scrollToBottom\">scrollToBottom</button>\r\n <button class=\"mt-10\" @click=\"pullDownRefresh\">\r\n trigger pullDownRefresh\r\n </button>\r\n </view>\r\n <!-- #ifdef APP -->\r\n </scroll-view>\r\n <!-- #endif -->\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nimport { state, setLifeCycleNum } from '@/store/index.uts'\nimport MonitorPageLifecycleComposition from './monitor-page-lifecycle-composition.uvue'\r\n\r\nconst isOnloadTriggered = ref(false)\r\nconst isOnPageShowTriggered = ref(false)\r\nconst isOnReadyTriggered = ref(false)\r\nconst isOnPullDownRefreshTriggered = ref(false)\r\nconst isOnPageScrollTriggered = ref(false)\r\nconst isOnReachBottomTriggered = ref(false)\r\nconst isOnBackPressTriggered = ref(false)\r\nconst isOnPageHideTriggered = ref(false)\r\nconst isOnResizeTriggered = ref(false)\r\n\r\ntype DataInfo = {\r\n isScrolled : boolean\r\n}\r\nconst dataInfo = reactive({\r\n isScrolled: false,\r\n} as DataInfo)\r\n\r\nonLoad((options : OnLoadOptions) => {\r\n console.log('onLoad', options)\r\n isOnloadTriggered.value = true\r\n // 自动化测试\r\n setLifeCycleNum(state.lifeCycleNum + 100)\r\n})\r\nonPageShow(() => {\r\n isOnPageShowTriggered.value = true\r\n // 自动化测试\r\n setLifeCycleNum(state.lifeCycleNum + 10)\r\n})\r\nonReady(() => {\r\n isOnReadyTriggered.value = true\r\n // 自动化测试\r\n setLifeCycleNum(state.lifeCycleNum + 10)\r\n})\r\nonPullDownRefresh(() => {\r\n isOnPullDownRefreshTriggered.value = true\r\n // 自动化测试\r\n setLifeCycleNum(state.lifeCycleNum + 10)\r\n})\r\nonPageScroll((e: OnPageScrollOptions) => {\r\n console.log('onPageScroll', e)\r\n isOnPageScrollTriggered.value = true\r\n // 自动化测试\r\n dataInfo.isScrolled = true\r\n})\r\nonReachBottom(() => {\r\n isOnReachBottomTriggered.value = true\r\n // 自动化测试\r\n setLifeCycleNum(state.lifeCycleNum + 10)\r\n})\r\nonBackPress((options : OnBackPressOptions) : boolean | null => {\r\n console.log('onBackPress', options)\r\n isOnBackPressTriggered.value = true\r\n // 自动化测试\r\n setLifeCycleNum(state.lifeCycleNum - 10)\r\n return null\r\n})\r\nonPageHide(() => {\r\n isOnPageHideTriggered.value = true\r\n // 自动化测试\r\n setLifeCycleNum(state.lifeCycleNum - 10)\r\n})\r\nonUnload(() => {\r\n // 自动化测试\r\n setLifeCycleNum(state.lifeCycleNum - 100)\r\n})\r\nonResize((options: OnResizeOptions) => {\r\n console.log('onBackPress', options)\r\n isOnResizeTriggered.value = true\r\n // 自动化测试\r\n setLifeCycleNum(state.lifeCycleNum + 10)\r\n})\r\n\r\n// 自动化测试\r\nconst pageGetLifeCycleNum = () : number => {\r\n return state.lifeCycleNum\r\n}\r\n// 自动化测试\r\nconst pageSetLifeCycleNum = (num : number) => {\r\n setLifeCycleNum(num)\r\n}\r\n\r\n// 自动化测试\r\nconst pullDownRefresh = () => {\r\n uni.startPullDownRefresh({\r\n success() {\r\n setTimeout(() => {\r\n uni.stopPullDownRefresh()\r\n }, 1500)\r\n },\r\n })\r\n}\r\n\r\nconst scrollToBottom = () => {\r\n uni.pageScrollTo({\r\n scrollTop: 2000,\r\n })\r\n}\r\n\r\ndefineExpose({\r\n dataInfo,\r\n pageGetLifeCycleNum,\r\n pageSetLifeCycleNum,\r\n pullDownRefresh,\r\n scrollToBottom,\r\n})\r\n</script>\r\n\r\n<style>\r\n.container {\r\n height: 1200px;\r\n}\r\n</style>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/lifecycle/page/page-composition"},"page_page-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/lifecycle/page/page-options.uvue","code":"```vue\n<template>\n <!-- #ifdef APP -->\n <scroll-view style=\"flex: 1\" :bounces=\"false\">\n <!-- #endif -->\n <view class=\"page container\">\n <text>page lifecycle 选项式 API</text>\n <view class=\"flex flex-row justify-between mt-10\">\n <text>onLoad 触发：</text>\n <text>{{ isOnloadTriggered }}</text>\n </view>\n <view class=\"flex flex-row justify-between mt-10\">\n <text>onShow 触发：</text>\n <text>{{ isOnShowTriggered }}</text>\n </view>\n <view class=\"flex flex-row justify-between mt-10\">\n <text>onReady 触发：</text>\n <text>{{ isOnReadyTriggered }}</text>\n </view>\n <view class=\"flex flex-row justify-between mt-10\">\n <text>onPullDownRefresh 触发：</text>\n <text>{{ isOnPullDownRefreshTriggered }}</text>\n </view>\n <view class=\"flex flex-row justify-between mt-10\">\n <text>onReachBottom 触发：</text>\n <text>{{ isOnReachBottomTriggered }}</text>\n </view>\n <view class=\"flex flex-row justify-between mt-10\">\n <text>onBackPress 触发：</text>\n <text>{{ isOnBackPressTriggered }}</text>\n </view>\n <view class=\"flex flex-row justify-between mt-10\">\n <text>onHide 触发：</text>\n <text>{{ isOnHideTriggered }}</text>\n </view>\n <view class=\"flex flex-row justify-between mt-10\">\n <text>onResize 触发：</text>\n <text>{{ isOnResizeTriggered }}</text>\n </view>\n\t\t\t<MonitorPageLifecycleOptions />\n <button class=\"mt-10\" @click=\"scrollToBottom\">scrollToBottom</button>\n <button class=\"mt-10\" @click=\"pullDownRefresh\">\n trigger pullDownRefresh\n </button>\n </view>\n <!-- #ifdef APP -->\n </scroll-view>\n <!-- #endif -->\n</template>\n\n<script lang=\"uts\">\nimport { state, setLifeCycleNum } from '@/store/index.uts'\nimport MonitorPageLifecycleOptions from './monitor-page-lifecycle-options.uvue'\n type DataInfo = {\n \tisScrolled: boolean\n }\nexport default {\n\tcomponents: { MonitorPageLifecycleOptions },\n\tdata() {\n\t\treturn {\n\t\t\tisOnloadTriggered: false,\n\t\t\tisOnShowTriggered: false,\n\t\t\tisOnReadyTriggered: false,\n\t\t\tisOnPullDownRefreshTriggered: false,\n\t\t\tisOnPageScrollTriggered: false,\n\t\t\tisOnReachBottomTriggered: false,\n\t\t\tisOnBackPressTriggered: false,\n\t\t\tisOnHideTriggered: false,\n\t\t\tisOnResizeTriggered: false,\n\t\t\tdataInfo: {\n isScrolled: false,\n } as DataInfo\n\t\t}\n\t},\n\tonLoad(options : OnLoadOptions) {\n\t\tconsole.log('onLoad', options)\n\t\tthis.isOnloadTriggered = true\n\t\t// 自动化测试\n\t\tsetLifeCycleNum(state.lifeCycleNum + 100)\n\t},\n\tonShow() {\n\t\tthis.isOnShowTriggered = true\n\t\t// 自动化测试\n\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\n\t},\n\tonReady() {\n\t\tthis.isOnReadyTriggered = true\n\t\t// 自动化测试\n\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\n\t},\n\tonPullDownRefresh() {\n\t\tthis.isOnPullDownRefreshTriggered = true\n\t\t// 自动化测试\n\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\n\t},\n\tonPageScroll(e: OnPageScrollOptions) {\n\t\tconsole.log('onPageScroll', e)\n \tthis.isOnPageScrollTriggered = true\n\t\t// 自动化测试\n\t\tthis.dataInfo.isScrolled = true\n\t},\n\tonReachBottom() {\n\t\tthis.isOnReachBottomTriggered = true\n\t\t// 自动化测试\n\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\n\t},\n\tonBackPress(options : OnBackPressOptions) : boolean | null {\n\t\tconsole.log('onBackPress', options)\n\t\tthis.isOnBackPressTriggered = true\n\t\t// 自动化测试\n\t\tsetLifeCycleNum(state.lifeCycleNum - 10)\n\t\treturn null\n\t},\n\tonHide() {\n\t\tthis.isOnHideTriggered = true\n\t\t// 自动化测试\n\t\tsetLifeCycleNum(state.lifeCycleNum - 10)\n\t},\n\tonUnload() {\n\t\t// 自动化测试\n\t\tsetLifeCycleNum(state.lifeCycleNum - 100)\n\t},\n\tonResize(options: OnResizeOptions) {\n\t\tconsole.log('onBackPress', options)\n\t\tthis.isOnResizeTriggered = true\n\t\t// 自动化测试\n\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\n\t},\n\tmethods: {\n\t\t// 自动化测试\n\t\tpageGetLifeCycleNum() : number {\n\t\t\treturn state.lifeCycleNum\n\t\t},\n\t\t// 自动化测试\n\t\tpageSetLifeCycleNum(num : number) {\n\t\t\tsetLifeCycleNum(num)\n\t\t},\n\t\t// 自动化测试\n\t\tpullDownRefresh() {\n\t\t\tuni.startPullDownRefresh({\n\t\t\t\tsuccess() {\n\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\tuni.stopPullDownRefresh()\n\t\t\t\t\t\t// 一秒后立即停止下拉刷新不会触发 onPullDownRefresh，因为下拉动画时间大概需要1.1～1.2秒\n\t\t\t\t\t}, 1500)\n\t\t\t\t},\n\t\t\t})\n\t\t},\n\t\tscrollToBottom() {\n\t\t\tuni.pageScrollTo({\n\t\t\t\tscrollTop: 2000,\n\t\t\t})\n\t\t},\n\t},\n}\n</script>\n\n<style>\n.container {\n height: 1200px;\n}\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/lifecycle/page/page-options"}},"E_render-function":{"cloneVNode_cloneVNode-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/render-function/cloneVNode/cloneVNode-composition.uvue","code":"```vue\n<script setup lang=\"uts\">\r\n defineOptions({\r\n render() : VNode {\r\n const originalVNode = h('view', { class: 'original' }, [\r\n h('text', {}, 'Hello World'),\r\n ])\r\n // #ifdef APP\r\n const clonedVNode = cloneVNode(originalVNode, new Map<string, any | null>([['class', 'cloned']]))\r\n // #endif\r\n // #ifdef WEB\r\n const clonedVNode = cloneVNode(originalVNode, { class: 'cloned'})\r\n // #endif\r\n\r\n return h('view', { class: 'flex flex-col' }, [originalVNode, clonedVNode])\r\n }\r\n })\r\n</script>\r\n\r\n<style>\r\n .original {\r\n background-color: #ff0000;\r\n }\r\n\r\n .cloned {\r\n background-color: #00ff00;\r\n }\r\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/render-function/cloneVNode/cloneVNode-composition"},"cloneVNode_cloneVNode-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/render-function/cloneVNode/cloneVNode-options.uvue","code":"```vue\n<script lang=\"uts\">\r\n export default {\r\n render() : VNode {\r\n const originalVNode = h('view', { class: 'original' }, [\r\n h('text', {}, 'Hello World'),\r\n ])\r\n // #ifdef APP\r\n const clonedVNode = cloneVNode(originalVNode, new Map<string, any | null>([['class', 'cloned']]))\r\n // #endif\r\n // #ifdef WEB\r\n const clonedVNode = cloneVNode(originalVNode, { class: 'cloned'})\r\n // #endif\r\n\r\n return h('view', { class: 'flex flex-col' }, [originalVNode, clonedVNode])\r\n }\r\n }\r\n</script>\r\n\r\n<style>\r\n .original {\r\n background-color: #ff0000;\r\n }\r\n\r\n .cloned {\r\n background-color: #00ff00;\r\n }\r\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/render-function/cloneVNode/cloneVNode-options"},"isVNode_isVNode-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/render-function/isVNode/isVNode-composition.uvue","code":"```vue\n<template>\r\n <view class=\"page\">\r\n <view class=\"mb-10 flex flex-row justify-between\">\r\n <text>isVNode VNode:</text>\r\n <text id=\"is-vnode-vnode\">{{ isVNodeVNode }}</text>\r\n </view>\r\n <view class=\"mb-10 flex flex-row justify-between\">\r\n <text>isVNode string:</text>\r\n <text id=\"is-vnode-string\">{{ isVNodeString }}</text>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n const isVNodeVNode = ref(false)\r\n const isVNodeString = ref(false)\r\n // #ifdef APP-ANDROID\r\n const vnode = h('text', new Map<string, any | null>(), 'Hello World')\r\n // #endif\r\n // #ifndef APP-ANDROID\r\n const vnode = h('text', {}, 'Hello World')\r\n // #endif\r\n isVNodeVNode.value = isVNode(vnode)\r\n isVNodeString.value = isVNode('abc')\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/render-function/isVNode/isVNode-composition"},"isVNode_isVNode-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/render-function/isVNode/isVNode-options.uvue","code":"```vue\n<template>\r\n <view class=\"page\">\r\n <view class=\"mb-10 flex flex-row justify-between\">\r\n <text>isVNode VNode:</text>\r\n <text id=\"is-vnode-vnode\">{{ isVNodeVNode }}</text>\r\n </view>\r\n <view class=\"mb-10 flex flex-row justify-between\">\r\n <text>isVNode string:</text>\r\n <text id=\"is-vnode-string\">{{ isVNodeString }}</text>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nexport default {\r\n data(){\r\n return {\r\n isVNodeVNode: false,\r\n isVNodeString: false\r\n }\r\n },\r\n onLoad(){\r\n // TODO: 确认 android 端与其他端差异\r\n // #ifdef APP-ANDROID\r\n const vnode = h('text', new Map<string, any | null>(), 'Hello World')\r\n // #endif\r\n // #ifndef APP-ANDROID\r\n const vnode = h('text', {}, 'Hello World')\r\n // #endif\r\n this.isVNodeVNode = isVNode(vnode)\r\n this.isVNodeString = isVNode('abc')\r\n }\r\n}\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/render-function/isVNode/isVNode-options"},"mergeProps_mergeProps-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/render-function/mergeProps/mergeProps-composition.uvue","code":"```vue\n<template>\r\n <view class=\"page\">\r\n <view class=\"mb-10 flex flex-row justify-between\">\r\n <text>merged class</text>\r\n <text id=\"merged-class\">{{mergedProps['class']}}</text>\r\n </view>\r\n <button class=\"mb-10\" id=\"trigger-merged-click\" @click=\"triggerMergedClick\">trigger merged onClick</button>\r\n <view>\r\n <text class=\"mb-10\">prop function result list</text>\r\n <text class=\"click-res\" v-for=\"(item, index) in propFnResList\" :key=\"index\">{{item}}</text>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n type PropFn = () => string\r\n\r\n // TODO: 确认 android 与 web & ios 差异\r\n // #ifdef APP-ANDROID\r\n const propA = new Map<string, any | null>([['class', 'foo'], ['onClick', () : string => 'propA click res']])\r\n const propB = new Map<string, any | null>([['class', { bar: true }], ['onClick', () : string => 'propB click res']])\r\n const mergedProps = ref(new Map<string, any | null>())\r\n // #endif\r\n // #ifndef APP-ANDROID\r\n const propA = {\r\n class: 'foo',\r\n onClick: () : string => 'propA click res'\r\n }\r\n const propB = {\r\n class: { bar: true },\r\n onClick: () : string => 'propB click res'\r\n }\r\n const mergedProps = ref({})\r\n // #endif\r\n const propFnResList = ref<string[]>([])\r\n\r\n mergedProps.value = mergeProps(propA, propB)\r\n \r\n const triggerMergedClick = () => {\r\n (mergedProps.value['onClick'] as PropFn[]).forEach(fn => { propFnResList.value.push(fn()) })\r\n }\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/render-function/mergeProps/mergeProps-composition"},"mergeProps_mergeProps-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/render-function/mergeProps/mergeProps-options.uvue","code":"```vue\n<template>\r\n <view class=\"page\">\r\n <view class=\"mb-10 flex flex-row justify-between\">\r\n <text>merged class</text>\r\n <text id=\"merged-class\">{{mergedProps['class']}}</text>\r\n </view>\r\n <button class=\"mb-10\" id=\"trigger-merged-click\" @click=\"triggerMergedClick\">trigger merged onClick</button>\r\n <view>\r\n <text class=\"mb-10\">prop function result list</text>\r\n <text class=\"click-res\" v-for=\"(item, index) in propFnResList\" :key=\"index\">{{item}}</text>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\n type PropFn = () => string\r\n export default {\r\n data() {\r\n return {\r\n // TODO: 确认 android 与 web & ios 差异\r\n // #ifdef APP-ANDROID\r\n propA: new Map<string, any | null>([['class', 'foo'], ['onClick', () : string => 'propA click res']]),\r\n propB: new Map<string, any | null>([['class', { bar: true }], ['onClick', () : string => 'propB click res']]),\r\n mergedProps: new Map<string, any | null>(),\r\n // #endif\r\n // #ifndef APP-ANDROID\r\n propA: {\r\n class: 'foo',\r\n onClick: () : string => 'propA click res'\r\n },\r\n propB: {\r\n class: { bar: true },\r\n onClick: () : string => 'propB click res'\r\n },\r\n mergedProps: {},\r\n // #endif\r\n propFnResList: [] as string[],\r\n }\r\n },\r\n onLoad() {\r\n this.mergedProps = mergeProps(this.propA, this.propB)\r\n },\r\n methods: {\r\n triggerMergedClick() {\r\n (this.mergedProps['onClick'] as PropFn[]).forEach(fn => { this.propFnResList.push(fn()) })\r\n }\r\n }\r\n }\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/render-function/mergeProps/mergeProps-options"},"render_render-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/render-function/render/render-composition.uvue","code":"```vue\n<script setup lang=\"uts\">\nimport CompForHFunction from '@/components/CompForHFunction.uvue'\n\ndefineOptions({\n data() {\n return {\n msg: 'default msg'\n }\n },\n render(): VNode {\n const instance = getCurrentInstance()!.proxy!\n \n return h('view', { class: 'page' }, [\n h(CompForHFunction, {}, (): VNode[] => [h('text', { class: 'comp-slot' }, 'component slot')]),\n h('text', { class: 'uni-common-mt msg', style: { color: 'blue' } }, instance.$data['msg']),\n h(\n 'button',\n {\n class: 'uni-common-mt btn',\n type: 'primary',\n onClick: () => {\n instance.$data['msg'] = 'new msg'\n }\n },\n 'click'\n )\n ])\n }\n})\n</script>\n\n<style>\n.btn {\n color: red;\n}\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/render-function/render/render-composition"},"render_render-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/render-function/render/render-options.uvue","code":"```vue\n<script lang=\"uts\">\nimport CompForHFunction from '@/components/CompForHFunction.uvue'\nexport default {\n data() {\n return {\n msg: 'default msg'\n }\n },\n render(): VNode {\n return h('view', { class: 'page' }, [\n h(CompForHFunction, {}, (): VNode[] => [h('text', { class: 'comp-slot' }, 'component slot')]),\n h('text', { class: 'uni-common-mt msg', style: { color: 'blue' } }, this.msg),\n h(\n 'button',\n {\n class: 'uni-common-mt btn',\n type: 'primary',\n onClick: () => {\n this.msg = 'new msg'\n }\n },\n 'click'\n )\n ])\n }\n}\n</script>\n\n<style>\n.btn {\n color: red;\n}\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/render-function/render/render-options"},"resolveComponent_resolveComponent-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/render-function/resolveComponent/resolveComponent-composition.uvue","code":"```vue\n<script setup lang=\"uts\">\r\n defineOptions({\r\n render() : VNode {\r\n const CompForAppComponent = resolveComponent('CompForAppComponent')\r\n return h(CompForAppComponent)\r\n }\r\n })\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/render-function/resolveComponent/resolveComponent-composition"},"resolveComponent_resolveComponent-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/render-function/resolveComponent/resolveComponent-options.uvue","code":"```vue\n<script lang=\"uts\">\r\n export default {\r\n setup() {\r\n const CompForAppComponent = resolveComponent('CompForAppComponent')\r\n\r\n return ():VNode => {\r\n return h(CompForAppComponent)\r\n }\r\n }\r\n }\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/render-function/resolveComponent/resolveComponent-options"},"withDirectives_withDirectives-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/render-function/withDirectives/withDirectives-composition.uvue","code":"```vue\n<script setup lang=\"ts\">\r\n defineOptions({\r\n data() {\r\n return {\r\n isMounted: false\r\n }\r\n },\r\n render() : VNode {\r\n const instance = getCurrentInstance()!.proxy!\r\n \r\n const customDirective = {\r\n mounted(el : UniElement, binding : DirectiveBinding, vnode : VNode, prevVNode: VNode | null) {\r\n console.log(el, binding, vnode, prevVNode)\r\n instance.$data['isMounted'] = true\r\n }\r\n } as Directive\r\n return h('view', { class: 'page' }, [\r\n withDirectives(h('text', 'Hello World'), [[customDirective]]),\r\n h('view', { class: 'mt-10 flex flex-row justify-between' }, [\r\n h('text', {}, `isMounted:`),\r\n h('text', { id: 'is-mounted' }, `${instance.$data['isMounted']}`),\r\n ])\r\n ])\r\n }\r\n })\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/render-function/withDirectives/withDirectives-composition"},"withDirectives_withDirectives-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/render-function/withDirectives/withDirectives-options.uvue","code":"```vue\n<script lang=\"uts\">\r\n export default {\r\n data() {\r\n return {\r\n isMounted: false\r\n }\r\n },\r\n render() : VNode {\r\n const instance = this\r\n\r\n const customDirective = {\r\n mounted(el : UniElement, binding : DirectiveBinding, vnode : VNode, prevVNode : VNode | null) {\r\n console.log(el, binding, vnode, prevVNode)\r\n instance.$data['isMounted'] = true\r\n }\r\n } as Directive\r\n return h('view', { class: 'page' }, [\r\n withDirectives(h('text', 'Hello World'), [[customDirective]]),\r\n h('view', { class: 'mt-10 flex flex-row justify-between' }, [\r\n h('text', {}, `isMounted:`),\r\n h('text', { id: 'is-mounted' }, `${instance.$data['isMounted']}`),\r\n ])\r\n ])\r\n }\r\n }\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/render-function/withDirectives/withDirectives-options"},"withModifiers_withModifiers-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/render-function/withModifiers/withModifiers-composition.uvue","code":"```vue\n<script setup lang=\"uts\">\r\n defineOptions({\r\n data() {\r\n return {\r\n parentClickedNum: 0,\r\n childClickedNum: 0\r\n }\r\n },\r\n render() : VNode {\r\n const instance = getCurrentInstance()!.proxy!\r\n\r\n return h('view', { class: 'page' }, [\r\n h('view', {\r\n onClick: () => { instance.$data['childClickedNum'] = (instance.$data['parentClickedNum'] as number) + 1 }\r\n }, [\r\n h('button', {\r\n id: 'stop-btn',\r\n onClick: withModifiers(() => { instance.$data['childClickedNum'] = (instance.$data['childClickedNum'] as number) + 1 }, ['stop'])\r\n }, 'click stop')\r\n ]),\r\n h('view', { class: 'mt-10 flex flex-row justify-between' }, [\n h('text', {}, `parentCickedNum:`),\n h('text', { id: 'parent-num' }, `${instance.$data['parentClickedNum']}`),\n ]),\n h('view', { class: 'mt-10 flex flex-row justify-between' }, [\n h('text', {}, `childClickedNum:`),\n h('text', { id: 'child-num' }, `${instance.$data['childClickedNum']}`),\n ])\r\n ])\r\n }\r\n })\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/render-function/withModifiers/withModifiers-composition"},"withModifiers_withModifiers-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/render-function/withModifiers/withModifiers-options.uvue","code":"```vue\n<script lang=\"uts\">\r\n export default {\r\n data() {\r\n return {\r\n parentClickedNum: 0,\r\n childClickedNum: 0\r\n }\r\n },\r\n render() : VNode {\r\n const instance = this\r\n\r\n return h('view', { class: 'page' }, [\r\n h('view', {\r\n onClick: () => { instance.$data['childClickedNum'] = (instance.$data['parentClickedNum'] as number) + 1 }\r\n }, [\r\n h('button', {\r\n id: 'stop-btn',\r\n onClick: withModifiers(() => { instance.$data['childClickedNum'] = (instance.$data['childClickedNum'] as number) + 1 }, ['stop'])\r\n }, 'click stop')\r\n ]),\r\n h('view', { class: 'mt-10 flex flex-row justify-between' }, [\r\n h('text', {}, `parentCickedNum:`),\r\n h('text', { id: 'parent-num' }, `${instance.$data['parentClickedNum']}`),\r\n ]),\r\n h('view', { class: 'mt-10 flex flex-row justify-between' }, [\r\n h('text', {}, `childClickedNum:`),\r\n h('text', { id: 'child-num' }, `${instance.$data['childClickedNum']}`),\r\n ])\r\n ])\r\n }\r\n }\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/render-function/withModifiers/withModifiers-options"}},"E_built-in":{"component_keep-alive_keep-alive-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/component/keep-alive/keep-alive-composition.uvue","code":"```vue\n<template>\n <!-- #ifdef APP -->\n <scroll-view style=\"flex: 1\">\n <!-- #endif -->\n <view class=\"page\">\n <text class=\"bold mb-10\">include=\"Counter,Message\"</text>\n <KeepAlive include=\"Counter,Message\">\n <component :is=\"currentComponent\"></component>\n </KeepAlive>\n <view class=\"hr\"></view>\n <text class=\"bold mt-10 mb-10\">:include=\"/Counter|Message/\"</text>\n <KeepAlive :include=\"/Counter|Message/\">\n <component :is=\"currentComponent\"></component>\n </KeepAlive>\n <view class=\"hr\"></view>\n <text class=\"bold mb-10 mb-10\">:include=\"['Counter', 'Message']\"</text>\n <KeepAlive :include=\"['Counter', 'Message']\">\n <component :is=\"currentComponent\"></component>\n </KeepAlive>\n <view class=\"hr\"></view>\n <text class=\"bold mt-10 mb-10\">exclude=\"ShouldExclude\"</text>\n <KeepAlive exclude=\"ShouldExclude\">\n <component :is=\"currentComponent\"></component>\n </KeepAlive>\n <view class=\"hr\"></view>\n <text class=\"bold mt-10 mb-10\">:max=\"2\"</text>\n <KeepAlive :max=\"2\">\n <component :is=\"currentComponent\"></component>\n </KeepAlive>\n <view class=\"hr\"></view>\n <button class=\"mt-10 show-counter\" @click=\"changeComponent('Counter')\">show Counter</button>\n <button class=\"mt-10 show-message\" @click=\"changeComponent('Message')\">show Message</button>\n <button class=\"mt-10 show-should-exclude\" @click=\"changeComponent('ShouldExclude')\">show ShouldExclude</button>\n </view>\n <!-- #ifdef APP -->\n </scroll-view>\n <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\nimport Counter from '@/components/keep-alive/Counter.uvue'\nimport Message from '@/components/keep-alive/Message.uvue'\nimport ShouldExclude from '@/components/keep-alive/ShouldExclude.uvue'\n\ndefineOptions({\n components: {\n Counter,\n Message,\n ShouldExclude\n }\n})\n\nconst currentComponent = ref<string>('ShouldExclude')\n\nconst changeComponent = (componentName: string) => {\n currentComponent.value = componentName\n}\n</script>\n\n<style>\n.hr {\n margin: 30rpx 0;\n border-bottom: 1px solid #ccc;\n}\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/built-in/component/keep-alive/keep-alive-composition"},"component_keep-alive_keep-alive-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/component/keep-alive/keep-alive-options.uvue","code":"```vue\n<template>\n <!-- #ifdef APP -->\n <scroll-view style=\"flex: 1\">\n <!-- #endif -->\n <view class=\"page\">\n <text class=\"bold mb-10\">include \"Counter,Message\"</text>\n <KeepAlive include=\"Counter,Message\">\n <component :is=\"currentComponent\"></component>\n </KeepAlive>\n <view class=\"hr\"></view>\n <text class=\"bold mt-10 mb-10\">include \"/Counter|Message/\"</text>\n <KeepAlive :include=\"/Counter|Message/\">\n <component :is=\"currentComponent\"></component>\n </KeepAlive>\n <view class=\"hr\"></view>\n <text class=\"bold mt-10 mb-10\">include \"['Counter', 'Message']\"</text>\n <KeepAlive :include=\"['Counter', 'Message']\">\n <component :is=\"currentComponent\"></component>\n </KeepAlive>\n <view class=\"hr\"></view>\n <text class=\"bold mt-10 mb-10\">exclude \"ShouldExclude\"</text>\n <KeepAlive exclude=\"ShouldExclude\">\n <component :is=\"currentComponent\"></component>\n </KeepAlive>\n <view class=\"hr\"></view>\n <text class=\"bold mt-10 mb-10\">max 2</text>\n <KeepAlive :max=\"2\">\n <component :is=\"currentComponent\"></component>\n </KeepAlive>\n <view class=\"hr\"></view>\n <button class=\"mt-10 show-counter\" @click=\"changeComponent('Counter')\">show Counter</button>\n <button class=\"mt-10 show-message\" @click=\"changeComponent('Message')\">show Message</button>\n <button class=\"mt-10 show-should-exclude\" @click=\"changeComponent('ShouldExclude')\">show ShouldExclude</button>\n </view>\n <!-- #ifdef APP -->\n </scroll-view>\n <!-- #endif -->\n</template>\n\n<script lang=\"uts\">\nimport Counter from '@/components/keep-alive/Counter.uvue'\nimport Message from '@/components/keep-alive/Message.uvue'\nimport ShouldExclude from '@/components/keep-alive/ShouldExclude.uvue'\nexport default {\n components: {\n Counter,\n Message,\n ShouldExclude\n },\n data() {\n return {\n currentComponent: 'ShouldExclude'\n }\n },\n methods: {\n changeComponent(componentName: string) {\n this.currentComponent = componentName\n }\n }\n}\n</script>\n\n<style>\n.hr {\n margin-top: 30rpx;\n border-bottom: 1px solid #ccc;\n}\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/built-in/component/keep-alive/keep-alive-options"},"component_teleport_teleport-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/component/teleport/teleport-composition.uvue","code":"```vue\n<template>\n <!-- #ifdef APP -->\n <scroll-view style=\"flex: 1\">\n <!-- #endif -->\n <view id=\"container\" class=\"container\">\n <text class=\"text\">.container 区域</text>\n <view id=\"content1\" class=\"content content-1\">\n <text class=\"text\">content1 区域</text>\n </view>\n <view id=\"content2\" class=\"content content-2\">\n <text class=\"text\">content2 区域</text>\n </view>\n <teleport v-if=\"show\" to=\"#content1\" :disabled=\"disabled\">\n <view class=\"send-content\">\n <text class=\"send-content-text\">内容在.container中，使用teleport在#content1元素中展示</text>\n </view>\n </teleport>\n </view>\n <!-- #ifdef APP -->\n </scroll-view>\n <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\nconst to = ref<string>('content1')\nconst showingString = ref<string>('穿梭内容在 body 中')\nconst disabled = ref<boolean>(false)\nconst show = ref<boolean>(false)\n\nonReady(() => {\n // 需要等内容挂载后，teleport才生效\n show.value = true\n})\nconst changePosition = () => {\n to.value = '#content1'\n}\n\ndefineExpose({\n changePosition\n})\n</script>\n\n<style>\n.container {\n background-color: #f5f5f5;\n border: 1px #ccc solid;\n margin: 5px;\n padding: 10px;\n}\n\n.text {\n margin: 5px 0;\n}\n\n.content {\n height: 120px;\n border: 1px #ccc solid;\n margin: 5px;\n padding: 10px;\n}\n\n.send-content {\n padding: 5px;\n background-color: #ff5a5f;\n height: 50px;\n}\n\n.send-content-text {\n color: #fff;\n font-size: 12px;\n}\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/built-in/component/teleport/teleport-composition"},"component_teleport_teleport-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/component/teleport/teleport-options.uvue","code":"```vue\n<template>\n <!-- #ifdef APP -->\n <scroll-view style=\"flex: 1\">\n <!-- #endif -->\n <view id=\"container\" class=\"container\">\n <text class=\"text\">.container 区域</text>\n <view id=\"content1\" class=\"content content-1\">\n <text class=\"text\">content1 区域</text>\n </view>\n <view id=\"content2\" class=\"content content-2\">\n <text class=\"text\">content2 区域</text>\n </view>\n <teleport v-if=\"show\" to=\"#content1\" :disabled=\"disabled\">\n <view class=\"send-content\">\n <text class=\"send-content-text\">内容在.container中，使用teleport在#content1元素中展示</text>\n </view>\n </teleport>\n </view>\n <!-- #ifdef APP -->\n </scroll-view>\n <!-- #endif -->\n</template>\n\n<script>\nexport default {\n data() {\n return {\n to: 'content1',\n disabled: false,\n showingString: '穿梭内容在 body 中',\n show: false\n }\n },\n onReady() {\n // 需要等内容挂载后，teleport才生效\n this.show = true\n },\n methods: {\n changePosition() {\n this.to = '#content1'\n }\n }\n}\n</script>\n\n<style>\n.container {\n background-color: #f5f5f5;\n border: 1px #ccc solid;\n margin: 5px;\n padding: 10px;\n}\n.text {\n margin: 5px 0;\n}\n\n.content {\n height: 120px;\n border: 1px #ccc solid;\n margin: 5px;\n padding: 10px;\n}\n\n.send-content {\n padding: 5px;\n background-color: #ff5a5f;\n height: 50px;\n}\n\n.send-content-text {\n color: #fff;\n font-size: 12px;\n}\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/built-in/component/teleport/teleport-options"},"special-elements_component_component-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/special-elements/component/component-composition.uvue","code":"```vue\n<template>\n <view class=\"container\">\n <component :is=\"currentComponentStr\" />\n <component :is=\"currentComponentInstance\" />\n <button @click=\"changeCurrentComponent\">change current component</button>\n </view>\n</template>\n\n<script lang=\"uts\">\nimport Foo from '../../../../components/Foo.uvue'\nimport Bar from '../../../../components/Bar.uvue'\nexport default {\n components: {\n Foo,\n Bar\n },\n data() {\n return {\n currentComponentStr: 'Foo',\n currentComponentInstance: Foo\n }\n },\n methods: {\n changeCurrentComponent() {\n if (this.currentComponentStr === 'Foo') {\n this.currentComponentStr = 'Bar'\n this.currentComponentInstance = Bar\n } else {\n this.currentComponentStr = 'Foo'\n this.currentComponentInstance = Foo\n }\n }\n }\n}\n</script>\n\n<style>\n.item {\n display: flex;\n flex-direction: row;\n margin: 15px;\n border: #eee solid 1px;\n}\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/built-in/special-elements/component/component-composition"},"special-elements_component_component-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/special-elements/component/component-options.uvue","code":"```vue\n<template>\n <view class=\"container\">\n <component :is=\"currentComponentStr\" />\n <component :is=\"currentComponentInstance\" />\n <button @click=\"changeCurrentComponent\">change current component</button>\n </view>\n</template>\n\n<script lang=\"uts\">\nimport Foo from '../../../../components/Foo.uvue'\nimport Bar from '../../../../components/Bar.uvue'\nexport default {\n components: {\n Foo,\n Bar\n },\n data() {\n return {\n currentComponentStr: 'Foo',\n currentComponentInstance: Foo\n }\n },\n methods: {\n changeCurrentComponent() {\n if (this.currentComponentStr === 'Foo') {\n this.currentComponentStr = 'Bar'\n this.currentComponentInstance = Bar\n } else {\n this.currentComponentStr = 'Foo'\n this.currentComponentInstance = Foo\n }\n }\n }\n}\n</script>\n\n<style>\n.item {\n display: flex;\n flex-direction: row;\n margin: 15px;\n border: #eee solid 1px;\n}\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/built-in/special-elements/component/component-options"},"special-elements_slots_child-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/special-elements/slots/child-composition.uvue","code":"```vue\n<template>\n <view class=\"container\">\n <view>\n <slot name=\"header\" msg=\"Here might be a page title\"></slot>\n </view>\n <view>\n <slot msg=\"A paragraph for the main content.\"></slot>\n </view>\n <view>\n <slot name=\"footer\" msg=\"Here's some contact info\"></slot>\n </view>\n </view>\n</template>\n\n<script setup lang=\"uts\">\ndefineOptions({\n name: 'child'\n})\n\ndefineSlots<{\n default(props: { msg: string }): any\n header(props: { msg: string }): any\n footer(props: { msg: string }): any\n}>()\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/built-in/special-elements/slots/child-composition"},"special-elements_slots_child-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/special-elements/slots/child-options.uvue","code":"```vue\n<template>\n <view class=\"container\">\n <view>\n <slot name=\"header\" msg=\"Here might be a page title\"></slot>\n </view>\n <view>\n <slot msg=\"A paragraph for the main content.\"></slot>\n </view>\n <view>\n <slot name=\"footer\" msg=\"Here's some contact info\"></slot>\n </view>\n </view>\n</template>\n\n<script lang=\"uts\">\nexport default {\n name: 'child',\n slots: Object as SlotsType<{\n header: { msg: string }\n default: { msg: string }\n footer: { msg: string }\n }>\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/built-in/special-elements/slots/child-options"},"special-elements_slots_slots-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/special-elements/slots/slots-composition.uvue","code":"```vue\n<template>\n <view class=\"content\">\n <child>\n <template v-slot:header=\"slotProps\">\n <view class=\"header\">{{ slotProps.msg }}</view>\n </template>\n <template v-slot:default=\"{ msg }\">\n <view class=\"main\">{{ msg }}</view>\n </template>\n <template #footer=\"{ msg: text }\">\n <view class=\"footer\">{{ text }}</view>\n </template>\n </child>\n </view>\n</template>\n\n<script setup lang=\"uts\">\nimport child from './child-composition.uvue'\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/built-in/special-elements/slots/slots-composition"},"special-elements_slots_slots-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/special-elements/slots/slots-options.uvue","code":"```vue\n<template>\n <view class=\"content\">\n <child>\n <template v-slot:header=\"slotProps\">\n <view class=\"header\">{{ slotProps.msg }}</view>\n </template>\n <template v-slot:default=\"{ msg }\">\n <view class=\"main\">{{ msg }}</view>\n </template>\n <template #footer=\"{ msg: text }\">\n <view class=\"footer\">{{ text }}</view>\n </template>\n </child>\n </view>\n</template>\n\n<script lang=\"uts\">\nimport child from './child-options.uvue'\nexport default {\n components: { child }\n}\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/built-in/special-elements/slots/slots-options"},"special-elements_template_template-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/special-elements/template/template-composition.uvue","code":"```vue\n<template>\n <view class=\"page\">\n <template v-if=\"dataInfo.isShow\">\n <text id=\"title\">{{ title }}</text>\n </template>\n <template v-else>\n <text>隐藏标题时显示</text>\n </template>\n <button id=\"show-botton\" @click=\"handleShow\">{{ dataInfo.isShow ? '点击隐藏' : '点击显示' }}</button>\n <template v-for=\"(item, index) in list\" :key=\"index\">\n <text :class=\"'item'\">{{ index + 1 }}.{{ item.name }}</text>\n </template>\n <button @click=\"goMapStyle\">跳转绑定 Map 类型 style 页面</button>\n </view>\n</template>\n\n<script setup lang=\"uts\">\ntype DataInfo = {\n isShow: boolean\n}\ntype ListItem = {\n name: string\n}\n\nconst dataInfo = reactive({\n isShow: false\n} as DataInfo)\n\nconst title = ref<string>('hello')\nconst list = ref<ListItem[]>([\n {\n name: 'foo1'\n },\n {\n name: 'foo2'\n }\n])\n\nconst handleShow = () => {\n dataInfo.isShow = !dataInfo.isShow\n}\n\nconst goMapStyle = () => {\n uni.navigateTo({ url: '/pages/built-in/special-elements/template/template-map-style-composition' })\n}\n\ndefineExpose({\n dataInfo,\n goMapStyle\n})\n</script>\n\n<style>\n.item {\n margin: 15px;\n padding: 4px 8px;\n border: #eee solid 1px;\n}\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/built-in/special-elements/template/template-composition"},"special-elements_template_template-map-style-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/special-elements/template/template-map-style-composition.uvue","code":"```vue\n<template>\n <view class=\"page\">\n <view :style=\"[styleW200, styleRounded, styleBorder]\" :class=\"[classPadding10, classBgRed]\">\n <text>width:200px;</text>\n <text>padding:10px;</text>\n <text>border-radius:8px;</text>\n <text>border:1px solid #ccc;</text>\n <text>background-color: red;</text>\n <text class=\"text-white\">this text color: #fff;</text>\n </view>\n <view :style=\"[stylePadding10, styleBgGreen, styleMargin10]\" :class=\"[classH200, classRounded, classBorder, classBorderRed]\">\n <text>height:200px;</text>\n <text>margin:10px;</text>\n <text>padding:10px;</text>\n <text>border-radius:8px;</text>\n <text>border:1px solid #ccc;</text>\n <text>border-color:red;</text>\n <text>background-color: green;</text>\n <text class=\"text-blue\">this text color: blue;</text>\n </view>\n <view :style=\"styleBgBlue\" :class=\"classPadding10\">\n <text>padding:10px;</text>\n <text>background-color: blue;</text>\n <text class=\"text-red\">this text color: red;</text>\n </view>\n <button class=\"mt-10\" id=\"btn\" @click=\"toggleIsClassValid\">toggle isClassValid</button>\n </view>\n</template>\n\n<script setup lang=\"uts\">\nconst styleW200 = ref(new Map<string, string>([['width', '200px']]))\nconst styleH200 = ref(new Map<string, string>([['height', '200px']]))\nconst stylePadding10 = ref(new Map<string, string>([['padding', '10px']]))\nconst styleMargin10 = ref(new Map<string, string>([['margin', '10px']]))\nconst styleRounded = ref(new Map<string, string>([['border-radius', '8px']]))\nconst styleBorder = ref(new Map<string, string>([['border', '1px solid #ccc']]))\nconst styleBorderRed = ref(new Map<string, string>([['border-color', 'red']]))\nconst styleBorderBlue = ref(new Map<string, string>([['border-color', 'blue']]))\nconst styleBorderGreen = ref(new Map<string, string>([['border-color', 'green']]))\nconst styleBgGreen = ref(new Map<string, string>([['background-color', 'green']]))\nconst styleBgBlue = ref(new Map<string, string>([['background-color', 'blue']]))\nconst styleBgRed = ref(new Map<string, string>([['background-color', 'red']]))\nconst styleTextWhite = ref(new Map<string, string>([['color', '#fff']]))\nconst styleTextBlack = ref(new Map<string, string>([['color', '#000']]))\nconst styleTextRed = ref(new Map<string, string>([['color', 'red']]))\nconst styleTextBlue = ref(new Map<string, string>([['color', 'blue']]))\nconst styleTextGreen = ref(new Map<string, string>([['color', 'green']]))\nconst isClassValid = ref(true)\nconst classW200 = ref(new Map<string, boolean>([['w-200', true]]))\nconst classH200 = ref(new Map<string, boolean>([['h-200', true]]))\nconst classPadding10 = ref(new Map<string, boolean>([['padding-10', true]]))\nconst classMargin10 = ref(new Map<string, boolean>([['margin-10', true]]))\nconst classRounded = ref(new Map<string, boolean>([['rounded', true]]))\nconst classBorder = ref(new Map<string, boolean>([['border', true]]))\nconst classBorderRed = ref(new Map<string, boolean>([['border-red', true]]))\nconst classBorderBlue = ref(new Map<string, boolean>([['border-blue', true]]))\nconst classBorderGreen = ref(new Map<string, boolean>([['border-green', true]]))\nconst classBgGreen = ref(new Map<string, boolean>([['bg-green', true]]))\nconst classBgBlue = ref(new Map<string, boolean>([['bg-blue', true]]))\nconst classBgRed = ref(new Map<string, boolean>([['bg-red', true]]))\nconst classTextWhite = ref(new Map<string, boolean>([['text-white', true]]))\nconst classTextBlack = ref(new Map<string, boolean>([['text-black', true]]))\nconst classTextRed = ref(new Map<string, boolean>([['text-red', true]]))\nconst classTextBlue = ref(new Map<string, boolean>([['text-blue', true]]))\nconst classTextGreen = ref(new Map<string, boolean>([['text-green', true]]))\nconst toggleIsClassValid = () => {\n isClassValid.value = !isClassValid.value\n classW200.value = new Map<string, boolean>([['w-200', isClassValid.value]])\n classH200.value = new Map<string, boolean>([['h-200', isClassValid.value]])\n classPadding10.value = new Map<string, boolean>([['padding-10', isClassValid.value]])\n classMargin10.value = new Map<string, boolean>([['margin-10', isClassValid.value]])\n classRounded.value = new Map<string, boolean>([['rounded', isClassValid.value]])\n classBorder.value = new Map<string, boolean>([['border', isClassValid.value]])\n classBorderRed.value = new Map<string, boolean>([['border-red', isClassValid.value]])\n classBorderBlue.value = new Map<string, boolean>([['border-blue', isClassValid.value]])\n classBorderGreen.value = new Map<string, boolean>([['border-green', isClassValid.value]])\n classBgGreen.value = new Map<string, boolean>([['bg-green', isClassValid.value]])\n classBgBlue.value = new Map<string, boolean>([['bg-blue', isClassValid.value]])\n classBgRed.value = new Map<string, boolean>([['bg-red', isClassValid.value]])\n classTextWhite.value = new Map<string, boolean>([['text-white', isClassValid.value]])\n classTextBlack.value = new Map<string, boolean>([['text-black', isClassValid.value]])\n classTextRed.value = new Map<string, boolean>([['text-red', isClassValid.value]])\n classTextBlue.value = new Map<string, boolean>([['text-blue', isClassValid.value]])\n classTextGreen.value = new Map<string, boolean>([['text-green', isClassValid.value]])\n}\n</script>\n\n<style>\n.w-200 {\n width: 200px;\n}\n\n.h-200 {\n height: 200px;\n}\n\n.padding-10 {\n padding: 10px;\n}\n\n.margin-10 {\n margin: 10px;\n}\n\n.rounded {\n border-radius: 8px;\n}\n\n.border {\n border: 1px solid #ccc;\n}\n\n.border-red {\n border-color: red;\n}\n\n.border-green {\n border-color: green;\n}\n\n.border-blue {\n border-color: blue;\n}\n\n.bg-green {\n background-color: green;\n}\n\n.bg-red {\n background-color: red;\n}\n\n.bg-blue {\n background-color: blue;\n}\n\n.text-white {\n color: #fff;\n}\n\n.text-black {\n color: #000;\n}\n\n.text-green {\n color: green;\n}\n\n.text-red {\n color: red;\n}\n\n.text-blue {\n color: blue;\n}\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/built-in/special-elements/template/template-map-style-composition"},"special-elements_template_template-map-style-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/special-elements/template/template-map-style-options.uvue","code":"```vue\n<template>\n <view class=\"page\">\n <view :style=\"[styleW200, styleRounded, styleBorder]\" :class=\"[classPadding10, classBgRed]\">\n <text>width:200px;</text>\n <text>padding:10px;</text>\n <text>border-radius:8px;</text>\n <text>border:1px solid #ccc;</text>\n <text>background-color: red;</text>\n <text class=\"text-white\">this text color: #fff;</text>\n </view>\n <view :style=\"[stylePadding10, styleBgGreen, styleMargin10]\" :class=\"[classH200, classRounded, classBorder, classBorderRed]\">\n <text>height:200px;</text>\n <text>margin:10px;</text>\n <text>padding:10px;</text>\n <text>border-radius:8px;</text>\n <text>border:1px solid #ccc;</text>\n <text>border-color:red;</text>\n <text>background-color: green;</text>\n <text class=\"text-blue\">this text color: blue;</text>\n </view>\n <view :style=\"styleBgBlue\" :class=\"classPadding10\">\n <text>padding:10px;</text>\n <text>background-color: blue;</text>\n <text class=\"text-red\">this text color: red;</text>\n </view>\n <button class=\"mt-10\" id=\"btn\" @click=\"toggleIsClassValid\">toggle isClassValid</button>\n </view>\n</template>\n\n<script lang=\"uts\">\nexport default {\n data() {\n return {\n styleW200: new Map<string, string>([['width', '200px']]),\n styleH200: new Map<string, string>([['height', '200px']]),\n stylePadding10: new Map<string, string>([['padding', '10px']]),\n styleMargin10: new Map<string, string>([['margin', '10px']]),\n styleRounded: new Map<string, string>([['border-radius', '8px']]),\n styleBorder: new Map<string, string>([['border', '1px solid #ccc']]),\n styleBorderRed: new Map<string, string>([['border-color', 'red']]),\n styleBorderBlue: new Map<string, string>([['border-color', 'blue']]),\n styleBorderGreen: new Map<string, string>([['border-color', 'green']]),\n styleBgGreen: new Map<string, string>([['background-color', 'green']]),\n styleBgBlue: new Map<string, string>([['background-color', 'blue']]),\n styleBgRed: new Map<string, string>([['background-color', 'red']]),\n styleTextWhite: new Map<string, string>([['color', '#fff']]),\n styleTextBlack: new Map<string, string>([['color', '#000']]),\n styleTextRed: new Map<string, string>([['color', 'red']]),\n styleTextBlue: new Map<string, string>([['color', 'blue']]),\n styleTextGreen: new Map<string, string>([['color', 'green']]),\n isClassValid: true,\n classW200: new Map<string, boolean>([['w-200', true]]),\n classH200: new Map<string, boolean>([['h-200', true]]),\n classPadding10: new Map<string, boolean>([['padding-10', true]]),\n classMargin10: new Map<string, boolean>([['margin-10', true]]),\n classRounded: new Map<string, boolean>([['rounded', true]]),\n classBorder: new Map<string, boolean>([['border', true]]),\n classBorderRed: new Map<string, boolean>([['border-red', true]]),\n classBorderBlue: new Map<string, boolean>([['border-blue', true]]),\n classBorderGreen: new Map<string, boolean>([['border-green', true]]),\n classBgGreen: new Map<string, boolean>([['bg-green', true]]),\n classBgBlue: new Map<string, boolean>([['bg-blue', true]]),\n classBgRed: new Map<string, boolean>([['bg-red', true]]),\n classTextWhite: new Map<string, boolean>([['text-white', true]]),\n classTextBlack: new Map<string, boolean>([['text-black', true]]),\n classTextRed: new Map<string, boolean>([['text-red', true]]),\n classTextBlue: new Map<string, boolean>([['text-blue', true]]),\n classTextGreen: new Map<string, boolean>([['text-green', true]])\n }\n },\n methods: {\n toggleIsClassValid() {\n this.isClassValid = !this.isClassValid\n this.classW200 = new Map<string, boolean>([['w-200', this.isClassValid]])\n this.classH200 = new Map<string, boolean>([['h-200', this.isClassValid]])\n this.classPadding10 = new Map<string, boolean>([['padding-10', this.isClassValid]])\n this.classMargin10 = new Map<string, boolean>([['margin-10', this.isClassValid]])\n this.classRounded = new Map<string, boolean>([['rounded', this.isClassValid]])\n this.classBorder = new Map<string, boolean>([['border', this.isClassValid]])\n this.classBorderRed = new Map<string, boolean>([['border-red', this.isClassValid]])\n this.classBorderBlue = new Map<string, boolean>([['border-blue', this.isClassValid]])\n this.classBorderGreen = new Map<string, boolean>([['border-green', this.isClassValid]])\n this.classBgGreen = new Map<string, boolean>([['bg-green', this.isClassValid]])\n this.classBgBlue = new Map<string, boolean>([['bg-blue', this.isClassValid]])\n this.classBgRed = new Map<string, boolean>([['bg-red', this.isClassValid]])\n this.classTextWhite = new Map<string, boolean>([['text-white', this.isClassValid]])\n this.classTextBlack = new Map<string, boolean>([['text-black', this.isClassValid]])\n this.classTextRed = new Map<string, boolean>([['text-red', this.isClassValid]])\n this.classTextBlue = new Map<string, boolean>([['text-blue', this.isClassValid]])\n this.classTextGreen = new Map<string, boolean>([['text-green', this.isClassValid]])\n }\n }\n}\n</script>\n\n<style>\n.w-200 {\n width: 200px;\n}\n\n.h-200 {\n height: 200px;\n}\n\n.padding-10 {\n padding: 10px;\n}\n\n.margin-10 {\n margin: 10px;\n}\n\n.rounded {\n border-radius: 8px;\n}\n\n.border {\n border: 1px solid #ccc;\n}\n\n.border-red {\n border-color: red;\n}\n\n.border-green {\n border-color: green;\n}\n\n.border-blue {\n border-color: blue;\n}\n\n.bg-green {\n background-color: green;\n}\n\n.bg-red {\n background-color: red;\n}\n\n.bg-blue {\n background-color: blue;\n}\n\n.text-white {\n color: #fff;\n}\n\n.text-black {\n color: #000;\n}\n\n.text-green {\n color: green;\n}\n\n.text-red {\n color: red;\n}\n\n.text-blue {\n color: blue;\n}\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/built-in/special-elements/template/template-map-style-options"},"special-elements_template_template-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/special-elements/template/template-options.uvue","code":"```vue\n<template>\n <view class=\"page\">\n <template v-if=\"dataInfo.isShow\">\n <text id=\"title\">{{ title }}</text>\n </template>\n <template v-else>\n <text>隐藏标题时显示</text>\n </template>\n <button id=\"show-botton\" @click=\"handleShow\">{{ dataInfo.isShow ? '点击隐藏' : '点击显示' }}</button>\n <template v-for=\"(item, index) in list\" :key=\"index\">\n <text :class=\"'item'\">{{ index + 1 }}.{{ item.name }}</text>\n </template>\n <button @click=\"goMapStyle\">跳转绑定 Map 类型 style 页面</button>\n </view>\n</template>\n\n<script lang='uts'>\ntype DataInfo = {\n isShow: boolean\n}\ntype objType = {\n name : string\n}\nexport default {\n data() {\n return {\n title: \"hello\",\n dataInfo: {\n isShow: false,\n } as DataInfo,\n list: [{\n name: 'foo1'\n },\n {\n name: 'foo2'\n }\n ] as objType[]\n }\n },\n methods: {\n handleShow() {\n this.dataInfo.isShow = !this.dataInfo.isShow\n },\n goMapStyle() {\n uni.navigateTo({ url: '/pages/built-in/special-elements/template/template-map-style-options' })\n }\n }\n}\n</script>\n\n<style>\n.item {\n margin: 15px;\n padding: 4px 8px;\n border: #eee solid 1px;\n}\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/built-in/special-elements/template/template-options"}},"E_reactivity":{"advanced_custom-ref_custom-ref":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/advanced/custom-ref/custom-ref.uvue","code":"```vue\n<template>\r\n <view class=\"page\">\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>state.count:</text>\r\n <text id=\"state-count\">{{ state['count'] }}</text>\r\n </view>\r\n <button class=\"mb-10 increment-btn\" @click=\"increment\">\r\n increment state.count\r\n </button>\r\n <button class=\"mb-10 trigger-ref-btn\" @click=\"triggerRefState\">\r\n triggerRef state\r\n </button>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst useCustomRef = (value : UTSJSONObject) : Ref<UTSJSONObject> => {\r\n // @ts-ignore\r\n return customRef<UTSJSONObject>((track, trigger) : UTSJSONObject => {\r\n return {\r\n get() : UTSJSONObject {\r\n track()\r\n return value\r\n },\r\n set(newValue : UTSJSONObject) {\r\n value = newValue\r\n trigger()\r\n }\r\n } as UTSJSONObject\r\n })\r\n}\r\n\r\nconst state = useCustomRef({ count: 0 } as UTSJSONObject)\r\n\r\nconst increment = () => {\r\n (state.value as UTSJSONObject)['count'] = ((state.value as UTSJSONObject)['count'] as number) + 1\r\n}\r\nconst triggerRefState = () => {\r\n triggerRef(state)\r\n}\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/advanced/custom-ref/custom-ref"},"advanced_effect-scope_effect-scope":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/advanced/effect-scope/effect-scope.uvue","code":"```vue\n<template>\r\n <view class=\"page\">\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>counter:</text>\r\n <text id=\"counter\">{{ counter }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>watch counter result:</text>\r\n <text id=\"watch-counter-res\">{{ watchCounterRes }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>watchEffect counter result:</text>\r\n <text id=\"watch-effect-counter-res\">{{ watchEffectCounterRes }}</text>\r\n </view>\r\n <button\r\n id=\"increment-counter-btn\"\r\n class=\"mt-10\"\r\n @click=\"\r\n () => {\r\n counter++;\r\n }\r\n \">\r\n increment counter\r\n </button>\r\n <button id=\"stop-effect-scope-btn\" class=\"mt-10\" @click=\"stopEffectScope\">\r\n stop effect scope\r\n </button>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst scope = effectScope()\r\n\r\nconst counter = ref(0)\r\n\r\nconst watchCounterRes = ref('')\r\n\r\nconst watchEffectCounterRes = ref('')\r\n\r\nscope.run(() => {\r\n watch(counter, (newVal : number, oldVal : number) => {\r\n watchCounterRes.value = `newVal: ${newVal}, oldVal: ${oldVal}`\r\n })\r\n\r\n watchEffect(() => {\r\n watchEffectCounterRes.value = `counter: ${counter.value}`\r\n })\r\n})\r\n\r\nconst stopEffectScope = () => scope.stop()\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/advanced/effect-scope/effect-scope"},"advanced_get-current-scope_get-current-scope":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/advanced/get-current-scope/get-current-scope.uvue","code":"```vue\n<template>\n <view class=\"page\">\n <view class=\"flex justify-between flex-row mb-10\">\n <text>hasCurrentScope:</text>\n <text id=\"has-current-scope\">{{ hasCurrentScope }}</text>\n </view>\n <button id=\"create-scope-btn\" class=\"mt-10\" @click=\"createScope\">\n create scope\n </button>\n </view>\n</template>\n\n<script setup lang=\"uts\">\nconst hasCurrentScope = ref(false);\n\nconst createScope = () => {\n const scope = effectScope();\n scope.run(() => {\n hasCurrentScope.value = getCurrentScope() !== null;\n });\n};\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/advanced/get-current-scope/get-current-scope"},"advanced_mark-raw_mark-raw":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/advanced/mark-raw/mark-raw.uvue","code":"```vue\n <template><view class=\"page\">markRaw 暂不支持</view></template>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/advanced/mark-raw/mark-raw"},"advanced_on-scope-dispose_on-scope-dispose":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/advanced/on-scope-dispose/on-scope-dispose.uvue","code":"```vue\n<template>\r\n <view class=\"page\">\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>hasCurrentScope:</text>\r\n <text id=\"has-current-scope\">{{ hasCurrentScope }}</text>\r\n </view>\r\n <button id=\"create-scope-btn\" class=\"mt-10\" @click=\"createScope\">\r\n create scope\r\n </button>\r\n <button id=\"stop-scope-btn\" class=\"mt-10\" @click=\"stopScope\">\r\n stop scope\r\n </button>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst hasCurrentScope = ref(false)\r\n\r\nlet scope = null as EffectScope | null\r\n\r\nconst createScope = () => {\r\n scope = effectScope();\r\n (scope as EffectScope).run(() => {\r\n hasCurrentScope.value = getCurrentScope() != null\r\n onScopeDispose(() => {\r\n hasCurrentScope.value = getCurrentScope() != null\r\n })\r\n })\r\n}\r\n\r\nconst stopScope = () => {\r\n if (scope !== null) {\r\n (scope as EffectScope).stop()\r\n }\r\n}\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/advanced/on-scope-dispose/on-scope-dispose"},"advanced_shallow-reactive_shallow-reactive":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/advanced/shallow-reactive/shallow-reactive.uvue","code":"```vue\n<template>\r\n <view class=\"page\">\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>state.count:</text>\r\n <text id=\"state-count\" :data-count=\"state.count\">{{ state.count }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>state.nested.count:</text>\r\n <text id=\"state-nested-count\">{{ state.nested.count }}</text>\r\n </view>\r\n <button\n id=\"increment-state-count-btn\"\r\n class=\"mb-10\"\r\n @click=\"incrementStateCount\">\r\n increment state.count\r\n </button>\r\n <button\r\n id=\"increment-state-nested-count-btn\"\r\n @click=\"incrementStateNestedCount\">\r\n increment state.nested.count\r\n </button>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\ntype StateNested = {\r\n count : number\r\n}\r\ntype State = {\r\n count : number,\r\n nested : StateNested\r\n}\n// 可通过泛型指定类型\r\nconst state = shallowReactive<State>({\r\n count: 0,\r\n nested: {\r\n count: 0\r\n }\r\n})\r\n\r\nconst incrementStateCount = () => {\r\n state.count++\r\n}\r\n\r\nconst incrementStateNestedCount = () => {\r\n state.nested.count++\r\n}\r\n\r\ndefineExpose({\r\n state\r\n})\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/advanced/shallow-reactive/shallow-reactive"},"advanced_shallow-readonly_shallow-readonly":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/advanced/shallow-readonly/shallow-readonly.uvue","code":"```vue\n<template>\r\n <view :key=\"pageKey\" class=\"page\">\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>state.count:</text>\r\n <text id=\"state-count\">{{ state.count }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>state.nested.count:</text>\r\n <text id=\"state-nested-count\">{{ state.nested.count }}</text>\r\n </view>\r\n <button\r\n id=\"increment-state-count-btn\"\r\n class=\"mb-10\"\r\n @click=\"incrementStateCount\">\r\n increment state.count\r\n </button>\r\n <button\r\n id=\"increment-state-nested-count-btn\"\r\n class=\"mb-10\"\r\n @click=\"incrementStateNestedCount\">\r\n increment state.nested.count\r\n </button>\r\n <button id=\"update-page-render-btn\" @click=\"updatePageRender\">\r\n update page render\r\n </button>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nlet pageKey = ref<number>(0)\r\n\r\ntype StateNested = {\r\n count : number\r\n}\r\ntype State = {\r\n count : number,\r\n nested : StateNested\r\n}\n// 可通过泛型指定类型\r\nconst state = shallowReadonly<State>({\r\n count: 0,\r\n nested: {\r\n count: 0\r\n }\r\n})\r\n\r\n// #ifdef APP\r\nconst incrementStateCount = () => {\r\n state.count++\r\n}\r\n\r\nconst incrementStateNestedCount = () => {\r\n state.nested.count++\r\n}\r\n// #endif\r\n\r\nconst updatePageRender = () => {\r\n pageKey.value = Date.now()\r\n}\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/advanced/shallow-readonly/shallow-readonly"},"advanced_shallow-ref_shallow-ref":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/advanced/shallow-ref/shallow-ref.uvue","code":"```vue\n<template>\r\n <view class=\"page\">\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>state.count:</text>\r\n <text id=\"state-count\">{{ state.count }}</text>\r\n </view>\r\n <button\n id=\"increment-state-count-btn\"\r\n class=\"mb-10\"\r\n @click=\"incrementStateCount\">\r\n increment state.count\r\n </button>\r\n <button id=\"update-state-btn\" @click=\"updateState\">update state</button>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\ntype State = {\r\n count: number\r\n}\r\n// 可通过泛型指定类型\r\nconst state = shallowRef<State>({\r\n count: 0\r\n})\r\n\r\nconst incrementStateCount = () => {\r\n state.value.count++\r\n}\r\n\r\nconst updateState = () => {\r\n state.value = { count: state.value.count } as State\r\n}\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/advanced/shallow-ref/shallow-ref"},"advanced_to-raw_to-raw":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/advanced/to-raw/to-raw.uvue","code":"```vue\n<template>\r\n <view class=\"page\">\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>check toRaw ref:</text>\r\n <text id=\"check-to-raw-ref\">{{ checkToRawRef }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>check toRaw reactive:</text>\r\n <text id=\"check-to-raw-reactive\">{{ checkToRawReactive }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>check toRaw readonly:</text>\r\n <text id=\"check-to-raw-readonly\">{{ checkToRawReadonly }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>check toRaw shallowReactive:</text>\r\n <text id=\"check-to-raw-shallow-reactive\">{{\r\n checkToRawShallowReactive\r\n }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>check toRaw shallowReadonly:</text>\r\n <text id=\"check-to-raw-shallow-readonly\">{{\r\n checkToRawShallowReadonly\r\n }}</text>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst obj = {}\r\n\r\nconst refObj = ref(obj);\r\nconst checkToRawRef = toRaw<UTSJSONObject>(refObj) === obj;\r\n\r\nconst reactiveObj = reactive(obj);\r\nconst checkToRawReactive = toRaw<UTSJSONObject>(reactiveObj) === obj;\r\n\r\nconst readonlyObj = readonly(obj);\r\nconst checkToRawReadonly = toRaw<UTSJSONObject>(readonlyObj) === obj;\r\n\r\nconst shallowReactiveObj = shallowReactive(obj);\r\nconst checkToRawShallowReactive = toRaw<UTSJSONObject>(shallowReactiveObj) === obj;\r\n\r\nconst shallowReadonlyObj = shallowReadonly(obj);\r\nconst checkToRawShallowReadonly = toRaw<UTSJSONObject>(shallowReadonlyObj) === obj;\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/advanced/to-raw/to-raw"},"advanced_trigger-ref_trigger-ref":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/advanced/trigger-ref/trigger-ref.uvue","code":"```vue\n<template>\r\n <view class=\"page\">\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>state.count:</text>\r\n <text id=\"state-count\">{{ state.count }}</text>\r\n </view>\r\n <button\r\n id=\"increment-state-count-btn\"\r\n class=\"mb-10\"\r\n @click=\"incrementStateCount\">\r\n increment state.count\r\n </button>\r\n <button id=\"trigger-ref-state-btn\" @click=\"triggerRefState\">\r\n trigger state\r\n </button>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\ntype State = {\r\n count: number\r\n}\r\nconst state = shallowRef({\r\n count: 0\r\n} as State)\r\n\r\nconst incrementStateCount = () => {\r\n state.value.count++\r\n}\r\n\r\nconst triggerRefState = () => {\r\n triggerRef(state)\r\n}\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/advanced/trigger-ref/trigger-ref"},"core_computed_computed-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/core/computed/computed-composition.uvue","code":"```vue\n<template>\r\n <view class=\"page\">\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>count:</text>\r\n <text id=\"count\">{{ count }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>computed double count:</text>\r\n <text id=\"double-count\">{{ doubleCount }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>obj.arr:</text>\r\n <text id=\"obj-arr\">{{ JSON.stringify(obj.arr) }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>computed obj.arr.length:</text>\r\n <text id=\"obj-arr-len\">{{ objArrLen }}</text>\r\n </view>\r\n <button id=\"update-btn\" @click=\"update\">update</button>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst count = ref(0)\r\n\r\nconst doubleCount = computed(() : number => {\r\n return count.value * 2\r\n})\r\n\r\ntype Obj = {\r\n arr : number[]\r\n}\r\n\r\nconst obj = reactive({\r\n arr: [1, 2, 3]\r\n} as Obj)\r\n\r\n\r\nconst objArrLen = computed<number>(() : number => {\r\n return obj.arr.length\r\n})\r\n\r\nconst update = () => {\r\n count.value++\r\n obj.arr.push(obj.arr.length + 1)\r\n}\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/core/computed/computed-composition"},"core_computed_computed-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/core/computed/computed-options.uvue","code":"```vue\n<template>\r\n <view class=\"page\">\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>count:</text>\r\n <text id=\"count\">{{ count }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>computed double count:</text>\r\n <text id=\"double-count\">{{ doubleCount }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>obj.arr:</text>\r\n <text id=\"obj-arr\">{{ JSON.stringify(obj.arr) }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>computed obj.arr.length:</text>\r\n <text id=\"obj-arr-len\">{{ objArrLen }}</text>\r\n </view>\r\n <button id=\"update-btn\" @click=\"update\">update</button>\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\ntype Obj = {\r\n arr : number[]\r\n}\r\n\r\nexport default {\r\n data(){\r\n return {\r\n count: 0,\r\n obj:{\r\n arr: [1,2,3]\r\n } as Obj\r\n }\r\n },\r\n computed: {\r\n doubleCount(): number {\r\n return this.count * 2\r\n },\r\n objArrLen(): number {\r\n return this.obj.arr.length\r\n }\r\n },\r\n methods: {\r\n update(){\r\n this.count++\r\n this.obj.arr.push(this.obj.arr.length + 1)\r\n }\r\n }\r\n}\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/core/computed/computed-options"},"core_reactive_reactive":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/core/reactive/reactive.uvue","code":"```vue\n<template>\r\n <view class=\"page\">\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>count:</text>\r\n <text id=\"count\">{{ count }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>obj.str:</text>\r\n <text id=\"obj-str\">{{ obj['str'] }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>obj.num:</text>\r\n <text id=\"obj-num\">{{ obj['num'] }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>obj.arr:</text>\r\n <text id=\"obj-arr\">{{ JSON.stringify(obj['arr']) }}</text>\r\n </view>\r\n <button id=\"update-btn\" @click=\"update\">update</button>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst count = ref(0)\r\n\r\n// TODO: 待支持后补充泛型示例\r\nconst obj = reactive({\r\n str: 'default str',\r\n num: count,\r\n arr: ['a', 'b', 'c']\r\n})\r\n\r\nconst update = () => {\r\n obj['str'] = 'new str';\r\n obj['num'] = (obj['num'] as number) + 1\r\n count.value++\r\n (obj['arr'] as string[]).push('d')\r\n}\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/core/reactive/reactive"},"core_readonly_readonly":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/core/readonly/readonly.uvue","code":"```vue\n<template>\r\n <view class=\"page\">\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>data.str:</text>\r\n <text id=\"data-str\">{{ data.str }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>data.num:</text>\r\n <text id=\"data-num\">{{ data.num }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>data.arr:</text>\r\n <text id=\"data-arr\">{{ JSON.stringify(data.arr) }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>readonly data.str:</text>\r\n <text id=\"readonly-data-str\">{{ readonlyData.str }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>readonly data.num:</text>\r\n <text id=\"readonly-data-num\">{{ readonlyData.num }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>readonly data.arr:</text>\r\n <text id=\"readonly-data-arr\">{{ JSON.stringify(readonlyData.arr) }}</text>\r\n </view>\r\n\r\n <button id=\"update-data-btn\" class=\"mb-10\" @click=\"updateData\">\r\n update data\r\n </button>\r\n <button id=\"update-readonly-data-btn\" @click=\"updateReadonlyData\">\r\n update readonly data\r\n </button>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\ntype Data = {\r\n str : string,\r\n num : number,\r\n arr : string[]\r\n}\r\n// 可通过泛型指定类型\r\nconst data = reactive<Data>({\r\n str: 'default str',\r\n num: 0,\r\n arr: ['a', 'b', 'c']\r\n})\r\n// 可通过泛型指定类型\r\nconst readonlyData = readonly<Data>(data)\r\n\r\nconst updateData = () => {\r\n data.str = 'new str'\r\n data.num++\r\n data.arr.push('d')\r\n}\r\n\r\nconst updateReadonlyData = () => {\r\n readonlyData.str = 'new readonly str'\r\n readonlyData.num++\r\n readonlyData.arr.push('e')\r\n}\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/core/readonly/readonly"},"core_ref_ref":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/core/ref/ref.uvue","code":"```vue\n<template>\r\n <view class=\"page\">\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>count:</text>\r\n <text id=\"count\">{{ count }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>str:</text>\r\n <text id=\"str\">{{ str }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>bool:</text>\r\n <text id=\"bool\">{{ bool }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>arr:</text>\r\n <text id=\"arr\">{{ JSON.stringify(arr) }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>counter.count:</text>\r\n <text id=\"counter-count\">{{ counter.count }}</text>\r\n </view>\r\n <button id=\"change-data-btn\" @click=\"changeData\">change data</button>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n// 基础数据类型可自动推导类型\r\nconst count = ref(0)\r\nconst str = ref('default str')\r\nconst bool = ref(false)\r\n\r\n// 可通过泛型指定类型\r\nconst arr = ref<number[]>([1, 2, 3])\r\ntype Counter = {\r\n count : number\r\n}\r\n// 可通过泛型指定类型\r\nconst counter = ref<Counter>({\r\n count: 0\r\n})\r\n\r\nconst changeData = () => {\r\n count.value++\r\n str.value = 'new str'\r\n bool.value = !bool.value\r\n arr.value.push(arr.value.length + 1)\r\n counter.value.count++\r\n}\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/core/ref/ref"},"core_watch_watch-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/core/watch/watch-composition.uvue","code":"```vue\n<template>\r\n <!-- #ifdef APP -->\r\n <scroll-view style=\"flex: 1; padding-bottom: 20px\">\r\n <!-- #endif -->\r\n <view class=\"page\">\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>count:</text>\r\n <text id=\"count\" ref=\"countRef\">{{ count }}</text>\r\n </view>\r\n <view class=\"flex justify-between mb-10\">\r\n <text>watch count result:</text>\r\n <text id=\"watch-count-res\">{{ watchCountRes }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>watch count track number:</text>\r\n <text id=\"watch-count-track-num\">{{ watchCountTrackNum }}</text>\r\n </view>\r\n <view class=\"flex justify-between mb-10\">\r\n <text>watch count cleanup number:</text>\r\n <text id=\"watch-count-cleanup-res\">{{ watchCountCleanupRes }}</text>\r\n </view>\r\n\r\n <button class=\"increment-btn mb-10\" @click=\"increment\">increment</button>\r\n <button class=\"stop-watch-count-btn mb-10\" @click=\"triggerStopWatchCount\">\r\n stop watch count\r\n </button>\r\n\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>obj.str:</text>\r\n <text id=\"obj-str\" ref=\"objStrRef\">{{ obj.str }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>watch obj.str trigger number:</text>\r\n <text id=\"watch-obj-str-trigger-num\">{{ watchObjStrTriggerNum }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>obj.num:</text>\r\n <text id=\"obj-num\">{{ obj.num }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>obj.bool:</text>\r\n <text id=\"obj-bool\" ref=\"objBoolRef\">{{ obj.bool }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>obj.arr:</text>\r\n <text id=\"obj-arr\" ref=\"objArrRef\">{{ JSON.stringify(obj.arr) }}</text>\r\n </view>\r\n <view class=\"flex justify-between mb-10\">\r\n <text>watch obj result:</text>\r\n <text id=\"watch-obj-res\">{{ watchObjRes }}</text>\r\n </view>\r\n <view class=\"flex justify-between mb-10\">\r\n <text>watch obj.str result:</text>\r\n <text id=\"watch-obj-str-res\">{{ watchObjStrRes }}</text>\r\n </view>\r\n <view class=\"flex justify-between mb-10\">\r\n <text>watch obj.bool result:</text>\r\n <text id=\"watch-obj-bool-res\">{{ watchObjBoolRes }}</text>\r\n </view>\r\n <view class=\"flex justify-between mb-10\">\r\n <text>watch obj.arr result:</text>\r\n <text id=\"watch-obj-arr-res\">{{ watchObjArrRes }}</text>\r\n </view>\r\n\r\n <button class=\"update-obj-btn mb-10\" @click=\"updateObj\">\r\n update obj\r\n </button>\r\n\r\n <view class=\"flex justify-between mb-10\">\r\n <text>watch count and obj.num result:</text>\r\n <text id=\"watch-count-obj-num-res\">{{ watchCountAndObjNumRes }}</text>\r\n </view>\r\n </view>\r\n <!-- #ifdef APP -->\r\n </scroll-view>\r\n <!-- #endif -->\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\ntype Obj = {\r\n num : number,\r\n str : string,\r\n bool : boolean,\r\n arr : number[]\r\n}\r\n\r\nconst countRef = ref<UniTextElement | null>(null)\r\nconst count = ref(0)\r\nconst watchCountRes = ref('')\r\nconst watchCountCleanupRes = ref('')\r\nconst watchCountTrackNum = ref(0)\r\n\r\nconst stopWatchCount = watch(count, (count : number, prevCount : number, onCleanup : OnCleanup) => {\r\n // #ifdef APP\r\n watchCountRes.value = `count: ${count}, prevCount: ${prevCount}, count ref text (flush sync): ${countRef.value!.value}`\r\n // #endif\r\n // #ifdef WEB\r\n watchCountRes.value = `count: ${count}, prevCount: ${prevCount}, count ref text (flush sync): ${(countRef.value!.childNodes[0] as HTMLElement).innerText}`\r\n // #endif\r\n const cancel = () => {\r\n watchCountCleanupRes.value = `watch count cleanup: ${count}`\r\n }\r\n onCleanup(cancel)\r\n}, {\r\n // 侦听器在响应式依赖改变时立即触发\r\n flush: 'sync',\r\n // 响应属性或引用作为依赖项被跟踪时调用\r\n onTrack(event : DebuggerEvent) {\r\n if (event.type === 'get') {\r\n watchCountTrackNum.value++\r\n }\r\n }\r\n // TODO: vue>3.4.15 开始 监听函数、onTrack、onTrigger 同时存在修改响应式数据时,会报错 Maximum call stack size exceeded\r\n // 所以将 onTrack 与 onTrigger 调整到两个 watch 里\r\n})\r\n\r\nconst triggerStopWatchCount = () => stopWatchCount()\r\n\r\nconst increment = () => {\r\n count.value++\r\n}\r\n\r\nconst obj = reactive({\r\n num: 0,\r\n str: 'num: 0',\r\n bool: false,\r\n arr: [0]\r\n} as Obj)\r\n\r\n// immediate: true 第一次触发, 旧值应该是 undefined, 现在 app 是初始值\r\nconst watchObjRes = ref('')\r\nwatch(obj, (obj : Obj, prevObj ?: Obj) => {\r\n watchObjRes.value = `obj: ${JSON.stringify(obj)}, prevObj: ${JSON.stringify(prevObj)}`\r\n}, { immediate: true })\r\n\r\nconst objStrRef = ref<UniTextElement | null>(null)\r\nconst watchObjStrRes = ref('')\r\nconst watchObjStrTriggerNum = ref(0)\r\nwatch(() : string => obj.str, (str : string, prevStr : string) => {\r\n // #ifdef APP\r\n watchObjStrRes.value = `str: ${str}, prevStr: ${prevStr}, obj.str ref text (flush pre): ${objStrRef.value!.value}`\r\n // #endif\r\n // #ifdef WEB\r\n watchObjStrRes.value = `str: ${str}, prevStr: ${prevStr}, obj.str ref text (flush pre): ${(objStrRef.value!.childNodes[0] as HTMLElement).innerText}`\r\n // #endif\r\n}, {\r\n // 侦听器在组件渲染之前触发\r\n flush: 'pre',\r\n // 侦听器回调被依赖项的变更触发时调用\r\n onTrigger(event : DebuggerEvent) {\r\n if (event.type === 'set') {\r\n watchObjStrTriggerNum.value++\r\n }\r\n }\r\n})\r\n\r\nconst objBoolRef = ref<UniTextElement | null>(null)\r\nconst watchObjBoolRes = ref('')\r\nwatch(() : boolean => obj.bool, (bool : boolean, prevBool : boolean) => {\r\n // #ifdef APP\r\n watchObjBoolRes.value = `bool: ${bool}, prevBool: ${prevBool}, obj.bool ref text (flush post): ${objBoolRef.value!.value}`\r\n // #endif\r\n // #ifdef WEB\r\n watchObjBoolRes.value = `bool: ${bool}, prevBool: ${prevBool}, obj.bool ref text (flush post): ${(objBoolRef.value!.childNodes[0] as HTMLElement).innerText}`\r\n // #endif\r\n}, {\r\n // 侦听器延迟到组件渲染之后触发\r\n flush: 'post'\r\n})\r\n\r\n\r\nconst watchObjArrRes = ref('')\r\nwatch(() : number[] => obj.arr, (arr : number[], prevArr : number[]) => {\r\n watchObjArrRes.value = `arr: ${JSON.stringify(arr)}, prevArr: ${JSON.stringify(prevArr)}`\r\n}, { deep: true })\r\n\r\nconst watchCountAndObjNumRes = ref('')\r\nwatch([count, () : number => obj.num], (state : number[], preState : number[]) => {\r\n watchCountAndObjNumRes.value = `state: ${JSON.stringify(state)}, preState: ${JSON.stringify(preState)}`\r\n})\r\n\r\nconst updateObj = () => {\r\n obj.num++\r\n obj.str = `num: ${obj.num}`\r\n obj.bool = !obj.bool\r\n obj.arr.push(obj.num)\r\n}\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/core/watch/watch-composition"},"core_watch_watch-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/core/watch/watch-options.uvue","code":"```vue\n<template>\r\n <!-- #ifdef APP -->\r\n <scroll-view style=\"flex: 1; padding-bottom: 20px\">\r\n <!-- #endif -->\r\n <view class=\"page\">\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>count:</text>\r\n <text id=\"count\" ref=\"countRef\">{{ count }}</text>\r\n </view>\r\n <view class=\"flex justify-between mb-10\">\r\n <text>watch count result:</text>\r\n <text id=\"watch-count-res\">{{ watchCountRes }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>watch count track number:</text>\r\n <text id=\"watch-count-track-num\">{{ watchCountTrackNum }}</text>\r\n </view>\r\n <view class=\"flex justify-between mb-10\">\r\n <text>watch count cleanup number:</text>\r\n <text id=\"watch-count-cleanup-res\">{{ watchCountCleanupRes }}</text>\r\n </view>\r\n\r\n <button class=\"increment-btn mb-10\" @click=\"increment\">increment</button>\r\n <button class=\"stop-watch-count-btn mb-10\" @click=\"triggerStopWatchCount\">\r\n stop watch count\r\n </button>\r\n\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>obj.str:</text>\r\n <text id=\"obj-str\" ref=\"objStrRef\">{{ obj.str }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>watch obj.str trigger number:</text>\r\n <text id=\"watch-obj-str-trigger-num\">{{ watchObjStrTriggerNum }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>obj.num:</text>\r\n <text id=\"obj-num\">{{ obj.num }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>obj.bool:</text>\r\n <text id=\"obj-bool\" ref=\"objBoolRef\">{{ obj.bool }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>obj.arr:</text>\r\n <text id=\"obj-arr\" ref=\"objArrRef\">{{ JSON.stringify(obj.arr) }}</text>\r\n </view>\r\n <view class=\"flex justify-between mb-10\">\r\n <text>watch obj result:</text>\r\n <text id=\"watch-obj-res\">{{ watchObjRes }}</text>\r\n </view>\r\n <view class=\"flex justify-between mb-10\">\r\n <text>watch obj.str result:</text>\r\n <text id=\"watch-obj-str-res\">{{ watchObjStrRes }}</text>\r\n </view>\r\n <view class=\"flex justify-between mb-10\">\r\n <text>watch obj.bool result:</text>\r\n <text id=\"watch-obj-bool-res\">{{ watchObjBoolRes }}</text>\r\n </view>\r\n <view class=\"flex justify-between mb-10\">\r\n <text>watch obj.arr result:</text>\r\n <text id=\"watch-obj-arr-res\">{{ watchObjArrRes }}</text>\r\n </view>\r\n\r\n <button class=\"update-obj-btn mb-10\" @click=\"updateObj\">\r\n update obj\r\n </button>\r\n </view>\r\n <!-- #ifdef APP -->\r\n </scroll-view>\r\n <!-- #endif -->\r\n</template>\r\n\r\n<script lang=\"uts\">\r\n type Obj = {\r\n num : number,\r\n str : string,\r\n bool : boolean,\r\n arr : number[]\r\n }\r\n\r\n export default {\r\n data() {\r\n return {\r\n countRef: null as UniTextElement | null,\r\n count: 0,\r\n watchCountRes: '',\r\n watchCountCleanupRes: '',\r\n watchCountTrackNum: 0,\r\n stopWatchCount: () => { },\r\n obj: {\r\n num: 0,\r\n str: 'num: 0',\r\n bool: false,\r\n arr: [0]\r\n } as Obj,\r\n watchObjRes: '',\r\n objStrRef: null as UniTextElement | null,\r\n watchObjStrRes: '',\r\n watchObjStrTriggerNum: 0,\r\n objBoolRef: null as UniTextElement | null,\r\n watchObjBoolRes: '',\r\n watchObjArrRes: '',\r\n }\r\n },\r\n onReady() {\r\n // TODO: app-android this.$watch 返回类型不对\r\n // watchCountTrackNum 各端表现也不一致\r\n const self = this\r\n // #ifdef APP\r\n this.$watch('count',\r\n (count : number, prevCount : number, onCleanup : OnCleanup) => {\r\n this.watchCountRes = `count: ${count}, prevCount: ${prevCount}, count ref text (flush sync): ${(this.$refs['countRef'] as UniTextElement).value}`\r\n const cancel = () => {\r\n this.watchCountCleanupRes = `watch count cleanup: ${count}`\r\n }\r\n onCleanup(cancel)\r\n },\r\n {\r\n // 侦听器在响应式依赖改变时立即触发\r\n flush: 'sync',\r\n // 响应属性或引用作为依赖项被跟踪时调用\r\n onTrack(event : DebuggerEvent) {\r\n if (event.type === 'get') {\r\n self.watchCountTrackNum++\r\n }\r\n }\r\n // TODO: vue>3.4.15 开始 监听函数、onTrack、onTrigger 同时存在修改响应式数据时,会报错 Maximum call stack size exceeded\r\n // 所以将 onTrack 与 onTrigger 调整到两个 watch 里\r\n })\r\n // #endif\r\n // #ifdef WEB\r\n this.stopWatchCount = this.$watch(\r\n 'count',\r\n (count : number, prevCount : number, onCleanup : OnCleanup) => {\r\n this.watchCountRes = `count: ${count}, prevCount: ${prevCount}, count ref text (flush sync): ${(this.$refs['countRef'] as UniTextElement).childNodes[0].getAttribute('value')}`\r\n const cancel = () => {\r\n this.watchCountCleanupRes = `watch count cleanup: ${count}`\r\n }\r\n onCleanup(cancel)\r\n },\r\n {\r\n // 侦听器在响应式依赖改变时立即触发\r\n flush: 'sync',\r\n // 响应属性或引用作为依赖项被跟踪时调用\r\n onTrack(event : DebuggerEvent) {\r\n if (event.type === 'get') {\r\n self.watchCountTrackNum++\r\n }\r\n }\r\n // TODO: vue>3.4.15 开始 监听函数、onTrack、onTrigger 同时存在修改响应式数据时,会报错 Maximum call stack size exceeded\r\n // 所以将 onTrack 与 onTrigger 调整到两个 watch 里\r\n })\r\n // #endif\r\n },\r\n watch: {\r\n obj: {\r\n handler(obj : Obj, prevObj ?: Obj) {\r\n if (prevObj === null) {\r\n this.watchObjRes = `obj: {\"num\":${obj.num},\"str\":\"${obj.str}\",\"bool\":${obj.bool},\"arr\":${JSON.stringify(obj.arr)}}, prevObj: ${JSON.stringify(prevObj)}`\r\n } else {\n this.watchObjRes = `obj: {\"num\":${obj.num},\"str\":\"${obj.str}\",\"bool\":${obj.bool},\"arr\":${JSON.stringify(obj.arr)}}, prevObj: {\"num\":${prevObj?.num},\"str\":\"${prevObj?.str}\",\"bool\":${prevObj?.bool},\"arr\":${JSON.stringify(prevObj?.arr)}}`\r\n }\r\n },\r\n // immediate: true 第一次触发, 旧值应该是 undefined, 现在 app 是初始值\r\n immediate: true,\r\n deep: true\r\n },\r\n 'obj.str': function (str : string, prevStr : string) {\r\n // #ifdef APP\r\n this.watchObjStrRes = `str: ${str}, prevStr: ${prevStr}, obj.str ref text (flush pre): ${(this.$refs['objStrRef'] as UniTextElement).value}`\r\n // #endif\r\n // #ifdef WEB\r\n this.watchObjStrRes = `str: ${str}, prevStr: ${prevStr}, obj.str ref text (flush pre): ${(this.$refs.objStrRef as UniTextElement).childNodes[0].getAttribute('value')}`\r\n // #endif\r\n },\r\n 'obj.bool': {\r\n handler: function (bool : boolean, prevBool : boolean) {\r\n // #ifdef APP\r\n this.watchObjBoolRes = `bool: ${bool}, prevBool: ${prevBool}, obj.bool ref text (flush post): ${(this.$refs['objBoolRef'] as UniTextElement).value}`\r\n // #endif\r\n // #ifdef WEB\r\n this.watchObjBoolRes = `bool: ${bool}, prevBool: ${prevBool}, obj.bool ref text (flush post): ${(this.$refs.objBoolRef as UniTextElement).childNodes[0].getAttribute('value')}`\r\n // #endif\r\n },\r\n // 侦听器延迟到组件渲染之后触发\r\n flush: 'post',\r\n deep: true\r\n },\r\n 'obj.arr': {\r\n handler: function (arr : number[], prevArr : number[]) {\r\n this.watchObjArrRes = `arr: ${JSON.stringify(arr)}, prevArr: ${JSON.stringify(prevArr)}`\r\n },\r\n deep: true\r\n }\r\n },\r\n methods: {\r\n triggerStopWatchCount() {\r\n // #ifdef WEB\r\n this.stopWatchCount()\r\n // #endif\r\n },\r\n increment() {\r\n this.count++\r\n },\r\n updateObj() {\r\n this.obj.num++\r\n this.obj.str = `num: ${this.obj.num}`\r\n this.obj.bool = !this.obj.bool\r\n this.obj.arr.push(this.obj.num)\r\n }\r\n }\r\n }\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/core/watch/watch-options"},"core_watch-effect_watch-effect":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/core/watch-effect/watch-effect.uvue","code":"```vue\n<template>\r\n <!-- #ifdef APP -->\r\n <scroll-view style=\"flex: 1; padding-bottom: 20px\">\r\n <!-- #endif -->\r\n <view class=\"page\">\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>count:</text>\r\n <text id=\"count\" ref=\"countRef\">{{ count }}</text>\r\n </view>\r\n <view class=\"flex justify-between mb-10\">\r\n <text>watch count result:</text>\r\n <text id=\"watch-count-res\">{{ watchCountRes }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>watch count track number:</text>\r\n <text id=\"watch-count-track-num\">{{ watchCountTrackNum }}</text>\r\n </view>\r\n <view class=\"flex justify-between mb-10\">\r\n <text>watch count cleanup number:</text>\r\n <text id=\"watch-count-cleanup-res\">{{ watchCountCleanupRes }}</text>\r\n </view>\r\n\r\n <button class=\"increment-btn mb-10\" @click=\"increment\">increment</button>\r\n <button class=\"stop-watch-count-btn mb-10\" @click=\"triggerStopWatchCount\">\r\n stop watch count\r\n </button>\r\n\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>obj.str:</text>\r\n <text id=\"obj-str\" ref=\"objStrRef\">{{ obj.str }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>watch obj.str trigger number:</text>\r\n <text id=\"watch-obj-str-trigger-num\">{{ watchObjStrTriggerNum }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>obj.num:</text>\r\n <text id=\"obj-num\">{{ obj.num }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>obj.bool:</text>\r\n <text id=\"obj-bool\" ref=\"objBoolRef\">{{ obj.bool }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>obj.arr:</text>\r\n <text id=\"obj-arr\" ref=\"objArrRef\">{{ JSON.stringify(obj.arr) }}</text>\r\n </view>\r\n <view class=\"flex justify-between mb-10\">\r\n <text>watch obj result:</text>\r\n <text id=\"watch-obj-res\">{{ watchObjRes }}</text>\r\n </view>\r\n <view class=\"flex justify-between mb-10\">\r\n <text>watch obj.str result:</text>\r\n <text id=\"watch-obj-str-res\">{{ watchObjStrRes }}</text>\r\n </view>\r\n <view class=\"flex justify-between mb-10\">\r\n <text>watch obj.bool result:</text>\r\n <text id=\"watch-obj-bool-res\">{{ watchObjBoolRes }}</text>\r\n </view>\r\n <view class=\"flex justify-between mb-10\">\r\n <text>watch obj.arr result:</text>\r\n <text id=\"watch-obj-arr-res\">{{ watchObjArrRes }}</text>\r\n </view>\r\n\r\n <button class=\"update-obj-btn mb-10\" @click=\"updateObj\">\r\n update obj\r\n </button>\r\n\r\n <view class=\"flex justify-between mb-10\">\r\n <text>watch count and obj.num result:</text>\r\n <text id=\"watch-count-obj-num-res\">{{ watchCountAndObjNumRes }}</text>\r\n </view>\r\n </view>\r\n <!-- #ifdef APP -->\r\n </scroll-view>\r\n <!-- #endif -->\r\n</template>\r\n\r\n<script setup lang='uts'>\r\n type Obj = {\r\n num : number,\r\n str : string,\r\n bool : boolean,\r\n arr : number[]\r\n }\r\n\r\n const countRef = ref<UniTextElement | null>(null)\r\n const count = ref(0)\r\n const watchCountRes = ref('')\r\n const watchCountCleanupRes = ref('')\r\n const watchCountTrackNum = ref(0)\r\n\r\n const stopWatchCount = watchEffect((onCleanup : OnCleanup) => {\r\n if (countRef.value !== null) {\r\n // #ifdef APP\r\n watchCountRes.value = `count: ${count.value}, count ref text (flush sync): ${countRef.value!.value}`\r\n // #endif\r\n // #ifdef WEB\r\n watchCountRes.value = `count: ${count.value}, count ref text (flush sync): ${(countRef.value!.childNodes[0] as HTMLElement).innerText}`\r\n // #endif \r\n } else {\r\n watchCountRes.value = `count: ${count.value}, count ref text (flush sync): `\r\n }\r\n const cancel = () => {\r\n watchCountCleanupRes.value = `watch count cleanup: ${count.value}`\r\n }\r\n onCleanup(cancel)\r\n }, {\r\n // 侦听器在响应式依赖改变时立即触发\r\n flush: 'sync',\r\n // 响应属性或引用作为依赖项被跟踪时调用\r\n onTrack(event : DebuggerEvent) {\r\n if (event.type === 'get') {\r\n watchCountTrackNum.value++\r\n }\r\n },\r\n })\r\n\r\n const triggerStopWatchCount = () => stopWatchCount()\r\n\r\n const increment = () => {\r\n count.value++\r\n }\r\n\r\n const obj = reactive({\r\n num: 0,\r\n str: 'num: 0',\r\n bool: false,\r\n arr: [0]\r\n } as Obj)\r\n\r\n const watchObjRes = ref('')\r\n watchEffect(() => {\r\n watchObjRes.value = `obj: ${JSON.stringify(obj)}`\r\n })\r\n\r\n const objStrRef = ref<UniTextElement | null>(null)\r\n const watchObjStrRes = ref('')\r\n const watchObjStrTriggerNum = ref(0)\r\n \r\n watchEffect(() => {\r\n if (objStrRef.value !== null) {\r\n // #ifdef APP\r\n watchObjStrRes.value = `str: ${obj.str}, obj.str ref text (flush pre): ${objStrRef.value!.value}`\r\n // #endif\r\n // #ifdef WEB\r\n watchObjStrRes.value = `str: ${obj.str}, obj.str ref text (flush pre): ${(objStrRef.value!.childNodes[0] as HTMLElement).innerText}`\r\n // #endif \r\n } else {\r\n watchObjStrRes.value = `str: ${obj.str}, obj.str ref text (flush pre): `\r\n }\r\n }, {\r\n // 侦听器在组件渲染之前触发\r\n flush: 'pre',\r\n // 侦听器回调被依赖项的变更触发时调用\r\n onTrigger(event : DebuggerEvent) {\r\n if (event.type === 'set') {\r\n watchObjStrTriggerNum.value++\r\n }\r\n }\r\n })\r\n\r\n const objBoolRef = ref<UniTextElement | null>(null)\r\n const watchObjBoolRes = ref('')\r\n watchEffect(() => {\r\n if (objBoolRef.value !== null) {\r\n // #ifdef APP\r\n watchObjBoolRes.value = `bool: ${obj.bool}, obj.bool ref text (flush post): ${objBoolRef.value!.value}`\r\n // #endif\r\n // #ifdef WEB\r\n watchObjBoolRes.value = `bool: ${obj.bool}, obj.bool ref text (flush post): ${(objBoolRef.value!.childNodes[0] as HTMLElement).innerText}`\r\n // #endif \r\n } else {\r\n watchObjBoolRes.value = `bool: ${obj.bool}, obj.bool ref text (flush post): `\r\n }\r\n }, {\r\n // 侦听器延迟到组件渲染之后触发\r\n flush: 'post'\r\n })\r\n\r\n\r\n const watchObjArrRes = ref('')\r\n watchEffect(() => {\r\n watchObjArrRes.value = `arr: ${JSON.stringify(obj.arr)}`\r\n })\r\n\r\n const watchCountAndObjNumRes = ref('')\r\n watchEffect(() => {\r\n watchCountAndObjNumRes.value = `count: ${count.value}, obj.num: ${obj.num}`\r\n })\r\n\r\n const updateObj = () => {\r\n obj.num++\r\n obj.str = `num: ${obj.num}`\r\n obj.bool = !obj.bool\r\n obj.arr.push(obj.num)\r\n }\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/core/watch-effect/watch-effect"},"core_watch-post-effect_watch-post-effect":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/core/watch-post-effect/watch-post-effect.uvue","code":"```vue\n<template>\r\n <!-- #ifdef APP -->\r\n <scroll-view style=\"flex: 1; padding-bottom: 20px\">\r\n <!-- #endif -->\r\n <view class=\"page\">\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>count:</text>\r\n <text id=\"count\" ref=\"countRef\">{{ count }}</text>\r\n </view>\r\n <view class=\"flex justify-between mb-10\">\r\n <text>watch count result:</text>\r\n <text id=\"watch-count-res\">{{ watchCountRes }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>watch count track number:</text>\r\n <text id=\"watch-count-track-num\">{{ watchCountTrackNum }}</text>\r\n </view>\r\n <view class=\"flex justify-between mb-10\">\r\n <text>watch count cleanup number:</text>\r\n <text id=\"watch-count-cleanup-res\">{{ watchCountCleanupRes }}</text>\r\n </view>\r\n\r\n <button class=\"increment-btn mb-10\" @click=\"increment\">increment</button>\r\n <button class=\"stop-watch-count-btn mb-10\" @click=\"triggerStopWatchCount\">\r\n stop watch count\r\n </button>\r\n\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>obj.str:</text>\r\n <text id=\"obj-str\" ref=\"objStrRef\">{{ obj.str }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>watch obj.str trigger number:</text>\r\n <text id=\"watch-obj-str-trigger-num\">{{ watchObjStrTriggerNum }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>obj.num:</text>\r\n <text id=\"obj-num\">{{ obj.num }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>obj.bool:</text>\r\n <text id=\"obj-bool\" ref=\"objBoolRef\">{{ obj.bool }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>obj.arr:</text>\r\n <text id=\"obj-arr\" ref=\"objArrRef\">{{ JSON.stringify(obj.arr) }}</text>\r\n </view>\r\n <view class=\"flex justify-between mb-10\">\r\n <text>watch obj result:</text>\r\n <text id=\"watch-obj-res\">{{ watchObjRes }}</text>\r\n </view>\r\n <view class=\"flex justify-between mb-10\">\r\n <text>watch obj.str result:</text>\r\n <text id=\"watch-obj-str-res\">{{ watchObjStrRes }}</text>\r\n </view>\r\n <view class=\"flex justify-between mb-10\">\r\n <text>watch obj.arr result:</text>\r\n <text id=\"watch-obj-arr-res\">{{ watchObjArrRes }}</text>\r\n </view>\r\n\r\n <button class=\"update-obj-btn mb-10\" @click=\"updateObj\">\r\n update obj\r\n </button>\r\n\r\n <view class=\"flex justify-between mb-10\">\r\n <text>watch count and obj.num result:</text>\r\n <text id=\"watch-count-obj-num-res\">{{ watchCountAndObjNumRes }}</text>\r\n </view>\r\n </view>\r\n <!-- #ifdef APP -->\r\n </scroll-view>\r\n <!-- #endif -->\r\n</template>\r\n\r\n<script setup lang='uts'>\r\n type Obj = {\r\n num : number,\r\n str : string,\r\n bool : boolean,\r\n arr : number[]\r\n }\r\n\r\n const countRef = ref<UniTextElement | null>(null)\r\n const count = ref<number>(0)\r\n const watchCountRes = ref('')\r\n const watchCountCleanupRes = ref('')\r\n const watchCountTrackNum = ref(0)\r\n\r\n const stopWatchCount = watchPostEffect((onCleanup : OnCleanup) => {\r\n if (countRef.value !== null) {\r\n // #ifdef APP\r\n watchCountRes.value = `count: ${count.value}, count ref text: ${countRef.value!.value}`\r\n // #endif\r\n // #ifdef WEB\r\n watchCountRes.value = `count: ${count.value}, count ref text: ${(countRef.value!.childNodes[0] as HTMLElement).innerText}`\r\n // #endif \r\n } else {\r\n watchCountRes.value = `count: ${count.value}, count ref text: `\r\n }\r\n const cancel = () => {\r\n watchCountCleanupRes.value = `watch count cleanup: ${count.value}`\r\n }\r\n onCleanup(cancel)\r\n },\r\n {\r\n // 响应属性或引用作为依赖项被跟踪时调用\r\n onTrack(event : DebuggerEvent) {\r\n if (event.type === 'get') {\r\n watchCountTrackNum.value++\r\n }\r\n }\r\n },\r\n )\r\n\r\n const triggerStopWatchCount = () => stopWatchCount()\r\n\r\n const increment = () => {\r\n count.value++\r\n }\r\n\r\n const obj = reactive({\r\n num: 0,\r\n str: 'num: 0',\r\n bool: false,\r\n arr: [0]\r\n } as Obj)\r\n\r\n const watchObjRes = ref('')\r\n watchPostEffect(() => {\r\n watchObjRes.value = `obj: {\"num\":${obj.num},\"str\":\"${obj.str}\",\"bool\":${obj.bool},\"arr\":${JSON.stringify(obj.arr)}}`\r\n })\r\n\r\n const objStrRef = ref<UniTextElement | null>(null)\r\n const watchObjStrRes = ref('')\r\n const watchObjStrTriggerNum = ref(0)\r\n \r\n watchPostEffect(() => {\r\n if (objStrRef.value !== null) {\r\n // #ifdef APP\r\n watchObjStrRes.value = `str: ${obj.str}, obj.str ref text: ${objStrRef.value!.value}`\r\n // #endif\r\n // #ifdef WEB\r\n watchObjStrRes.value = `str: ${obj.str}, obj.str ref text: ${(objStrRef.value!.childNodes[0] as HTMLElement).innerText}`\r\n // #endif \r\n } else {\r\n watchObjStrRes.value = `str: ${obj.str}, obj.str ref text: `\r\n }\r\n },{\r\n // 侦听器回调被依赖项的变更触发时调用\r\n onTrigger(event : DebuggerEvent) {\r\n if (event.type === 'set') {\r\n watchObjStrTriggerNum.value++\r\n }\r\n }\r\n })\r\n\r\n const watchObjArrRes = ref('')\r\n watchPostEffect(() => {\r\n watchObjArrRes.value = `arr: ${JSON.stringify(obj.arr)}`\r\n })\r\n\r\n const watchCountAndObjNumRes = ref('')\r\n watchPostEffect(() => {\r\n watchCountAndObjNumRes.value = `count: ${count.value}, obj.num: ${obj.num}`\r\n })\r\n\r\n const updateObj = () => {\r\n obj.num++\r\n obj.str = `num: ${obj.num}`\r\n obj.bool = !obj.bool\r\n obj.arr.push(obj.num)\r\n }\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/core/watch-post-effect/watch-post-effect"},"core_watch-sync-effect_watch-sync-effect":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/core/watch-sync-effect/watch-sync-effect.uvue","code":"```vue\n<template>\r\n <!-- #ifdef APP -->\r\n <scroll-view style=\"flex: 1; padding-bottom: 20px\">\r\n <!-- #endif -->\r\n <view class=\"page\">\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>count:</text>\r\n <text id=\"count\" ref=\"countRef\">{{ count }}</text>\r\n </view>\r\n <view class=\"flex justify-between mb-10\">\r\n <text>watch count result:</text>\r\n <text id=\"watch-count-res\">{{ watchCountRes }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>watch count track number:</text>\r\n <text id=\"watch-count-track-num\">{{ watchCountTrackNum }}</text>\r\n </view>\r\n <view class=\"flex justify-between mb-10\">\r\n <text>watch count cleanup number:</text>\r\n <text id=\"watch-count-cleanup-res\">{{ watchCountCleanupRes }}</text>\r\n </view>\r\n\r\n <button class=\"increment-btn mb-10\" @click=\"increment\">increment</button>\r\n <button class=\"stop-watch-count-btn mb-10\" @click=\"triggerStopWatchCount\">\r\n stop watch count\r\n </button>\r\n\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>obj.str:</text>\r\n <text id=\"obj-str\" ref=\"objStrRef\">{{ obj.str }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>watch obj.str trigger number:</text>\r\n <text id=\"watch-obj-str-trigger-num\">{{ watchObjStrTriggerNum }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>obj.num:</text>\r\n <text id=\"obj-num\">{{ obj.num }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>obj.bool:</text>\r\n <text id=\"obj-bool\" ref=\"objBoolRef\">{{ obj.bool }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>obj.arr:</text>\r\n <text id=\"obj-arr\" ref=\"objArrRef\">{{ JSON.stringify(obj.arr) }}</text>\r\n </view>\r\n <view class=\"flex justify-between mb-10\">\r\n <text>watch obj result:</text>\r\n <text id=\"watch-obj-res\">{{ watchObjRes }}</text>\r\n </view>\r\n <view class=\"flex justify-between mb-10\">\r\n <text>watch obj.str result:</text>\r\n <text id=\"watch-obj-str-res\">{{ watchObjStrRes }}</text>\r\n </view>\r\n <view class=\"flex justify-between mb-10\">\r\n <text>watch obj.arr result:</text>\r\n <text id=\"watch-obj-arr-res\">{{ watchObjArrRes }}</text>\r\n </view>\r\n\r\n <button class=\"update-obj-btn mb-10\" @click=\"updateObj\">\r\n update obj\r\n </button>\r\n\r\n <view class=\"flex justify-between mb-10\">\r\n <text>watch count and obj.num result:</text>\r\n <text id=\"watch-count-obj-num-res\">{{ watchCountAndObjNumRes }}</text>\r\n </view>\r\n </view>\r\n <!-- #ifdef APP -->\r\n </scroll-view>\r\n <!-- #endif -->\r\n</template>\r\n\r\n<script setup lang='uts'>\r\n type Obj = {\r\n num : number,\r\n str : string,\r\n bool : boolean,\r\n arr : number[]\r\n }\r\n\r\n const countRef = ref<UniTextElement | null>(null)\r\n const count = ref(0)\r\n const watchCountRes = ref('')\r\n const watchCountCleanupRes = ref('')\r\n const watchCountTrackNum = ref(0)\r\n\r\n const stopWatchCount = watchSyncEffect((onCleanup : OnCleanup) => {\r\n if (countRef.value !== null) {\r\n // #ifdef APP\r\n watchCountRes.value = `count: ${count.value}, count ref text: ${countRef.value!.value}`\r\n // #endif\r\n // #ifdef WEB\r\n watchCountRes.value = `count: ${count.value}, count ref text: ${(countRef.value!.childNodes[0] as HTMLElement).innerText}`\r\n // #endif \r\n } else {\r\n watchCountRes.value = `count: ${count.value}, count ref text: `\r\n }\r\n const cancel = () => {\r\n watchCountCleanupRes.value = `watch count cleanup: ${count.value}`\r\n }\r\n onCleanup(cancel)\r\n },\r\n {\r\n // 响应属性或引用作为依赖项被跟踪时调用\r\n onTrack(event : DebuggerEvent) {\r\n if (event.type === 'get') {\r\n watchCountTrackNum.value++\r\n }\r\n }\r\n },\r\n )\r\n\r\n const triggerStopWatchCount = () => stopWatchCount()\r\n\r\n const increment = () => {\r\n count.value++\r\n }\r\n\r\n const obj = reactive({\r\n num: 0,\r\n str: 'num: 0',\r\n bool: false,\r\n arr: [0]\r\n } as Obj)\r\n\r\n const watchObjRes = ref('')\r\n watchSyncEffect(() => {\r\n watchObjRes.value = `obj: {\"num\":${obj.num},\"str\":\"${obj.str}\",\"bool\":${obj.bool},\"arr\":${JSON.stringify(obj.arr)}}`\r\n })\r\n\r\n const objStrRef = ref<UniTextElement | null>(null)\r\n const watchObjStrRes = ref('')\r\n const watchObjStrTriggerNum = ref(0)\r\n \r\n watchSyncEffect(() => {\r\n if (objStrRef.value !== null) {\r\n // #ifdef APP\r\n watchObjStrRes.value = `str: ${obj.str}, obj.str ref text: ${objStrRef.value!.value}`\r\n // #endif\r\n // #ifdef WEB\r\n watchObjStrRes.value = `str: ${obj.str}, obj.str ref text: ${(objStrRef.value!.childNodes[0] as HTMLElement).innerText}`\r\n // #endif \r\n } else {\r\n watchObjStrRes.value = `str: ${obj.str}, obj.str ref text: `\r\n }\r\n }, {\r\n // 侦听器回调被依赖项的变更触发时调用\r\n onTrigger(event : DebuggerEvent) {\r\n if (event.type === 'set') {\r\n watchObjStrTriggerNum.value++\r\n }\r\n }\r\n })\r\n\r\n const watchObjArrRes = ref('')\r\n watchSyncEffect(() => {\r\n watchObjArrRes.value = `arr: ${JSON.stringify(obj.arr)}`\r\n })\r\n\r\n const watchCountAndObjNumRes = ref('')\r\n watchSyncEffect(() => {\r\n watchCountAndObjNumRes.value = `count: ${count.value}, obj.num: ${obj.num}`\r\n })\r\n\r\n const updateObj = () => {\r\n obj.num++\r\n obj.str = `num: ${obj.num}`\r\n obj.bool = !obj.bool\r\n obj.arr.push(obj.num)\r\n }\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/core/watch-sync-effect/watch-sync-effect"},"utilities_is-proxy_is-proxy":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/utilities/is-proxy/is-proxy.uvue","code":"```vue\n<template>\r\n <view class=\"page\">\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>isProxy(count):</text>\r\n <text id=\"is-proxy-count\">{{ isProxyCount }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>isProxy(refCount):</text>\r\n <text id=\"is-proxy-ref-count\">{{ isProxyRefCount }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>isProxy(reactiveCount):</text>\r\n <text id=\"is-proxy-reactive-count\">{{ isProxyReactiveCount }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>isProxy(readonlyCount):</text>\r\n <text id=\"is-proxy-readonly-count\">{{ isProxyReadonlyCount }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>isProxy(shallowReactiveCount):</text>\r\n <text id=\"is-proxy-shallow-reactive-count\">{{\r\n isProxyShallowReactiveCount\r\n }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>isProxy(shallowReadonlyCount):</text>\r\n <text id=\"is-proxy-shallow-readonly-count\">{{\r\n isProxyShallowReadonlyCount\r\n }}</text>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst count = 0;\r\nconst isProxyCount = isProxy(count);\r\n\r\nconst refCount = ref(0);\r\nconst isProxyRefCount = isProxy(refCount);\r\n\r\nconst reactiveCount = reactive({ count: 0 });\r\nconst isProxyReactiveCount = isProxy(reactiveCount);\r\n\r\nconst readonlyCount = readonly({ count: 0 });\r\nconst isProxyReadonlyCount = isProxy(readonlyCount);\r\n\r\nconst shallowReactiveCount = shallowReactive({ count: 0 });\r\nconst isProxyShallowReactiveCount = isProxy(shallowReactiveCount);\r\n\r\nconst shallowReadonlyCount = shallowReadonly({ count: 0 });\r\nconst isProxyShallowReadonlyCount = isProxy(shallowReadonlyCount);\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/utilities/is-proxy/is-proxy"},"utilities_is-reactive_is-reactive":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/utilities/is-reactive/is-reactive.uvue","code":"```vue\n<template>\r\n <view class=\"page\">\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>isReactive(count):</text>\r\n <text id=\"is-reactive-count\">{{ isReactiveCount }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>isReactive(count):</text>\r\n <text id=\"is-reactive-count\">{{ isReactiveCount }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>isReactive(refCount):</text>\r\n <text id=\"is-reactive-ref-count\">{{ isReactiveRefCount }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>isReactive(reactiveCount):</text>\r\n <text id=\"is-reactive-reactive-count\">{{ isReactiveReactiveCount }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>isReactive(readonlyCount):</text>\r\n <text id=\"is-reactive-readonly-count\">{{ isReactiveReadonlyCount }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>isReactive(shallowReactiveCount):</text>\r\n <text id=\"is-reactive-shallow-reactive-count\">{{\r\n isReactiveShallowReactiveCount\r\n }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>isReactive(shallowReadonlyCount):</text>\r\n <text id=\"is-reactive-shallow-readonly-count\">{{\r\n isReactiveShallowReadonlyCount\r\n }}</text>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst count = 0;\r\nconst isReactiveCount = isReactive(count);\r\n\r\nconst refCount = ref(0);\r\nconst isReactiveRefCount = isReactive(refCount);\r\n\r\nconst reactiveCount = reactive({ count: 0 });\r\nconst isReactiveReactiveCount = isReactive(reactiveCount);\r\n\r\nconst readonlyCount = readonly({ count: 0 });\r\nconst isReactiveReadonlyCount = isReactive(readonlyCount);\r\n\r\nconst shallowReactiveCount = shallowReactive({ count: 0 });\r\nconst isReactiveShallowReactiveCount = isReactive(shallowReactiveCount);\r\n\r\nconst shallowReadonlyCount = shallowReadonly({ count: 0 });\r\nconst isReactiveShallowReadonlyCount = isReactive(shallowReadonlyCount);\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/utilities/is-reactive/is-reactive"},"utilities_is-readonly_is-readonly":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/utilities/is-readonly/is-readonly.uvue","code":"```vue\n<template>\r\n <view class=\"page\">\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>isReadonly(count):</text>\r\n <text id=\"is-readonly-count\">{{ isReadonlyCount }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>isReadonly(refCount):</text>\r\n <text id=\"is-readonly-ref-count\">{{ isReadonlyRefCount }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>isReadonly(reactiveCount):</text>\r\n <text id=\"is-readonly-reactive-count\">{{ isReadonlyReactiveCount }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>isReadonly(readonlyCount):</text>\r\n <text id=\"is-readonly-readonly-count\">{{ isReadonlyReadonlyCount }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>isReadonly(shallowReactiveCount):</text>\r\n <text id=\"is-readonly-shallow-reactive-count\">{{\r\n isReadonlyShallowReactiveCount\r\n }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>isReadonly(shallowReadonlyCount):</text>\r\n <text id=\"is-readonly-shallow-readonly-count\">{{\r\n isReadonlyShallowReadonlyCount\r\n }}</text>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<script setup lang='uts'>\r\n const count = 0;\r\n const isReadonlyCount = isReadonly(count);\r\n\r\n const refCount = ref(0);\r\n const isReadonlyRefCount = isReadonly(refCount);\r\n\r\n const reactiveCount = reactive({ count: 0 });\r\n const isReadonlyReactiveCount = isReadonly(reactiveCount);\r\n\r\n const readonlyCount = readonly({ count: 0 });\r\n const isReadonlyReadonlyCount = isReadonly(readonlyCount);\r\n\r\n const shallowReactiveCount = shallowReactive({ count: 0 });\r\n const isReadonlyShallowReactiveCount = isReadonly(shallowReactiveCount);\r\n\r\n const shallowReadonlyCount = shallowReadonly({ count: 0 });\r\n const isReadonlyShallowReadonlyCount = isReadonly(shallowReadonlyCount);\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/utilities/is-readonly/is-readonly"},"utilities_is-ref_is-ref":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/utilities/is-ref/is-ref.uvue","code":"```vue\n<template>\r\n <view class=\"page\">\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>ref count:</text>\r\n <text id=\"ref-count\">{{ refCount }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>isRef ref count:</text>\r\n <text id=\"is-ref-ref-count\">{{ isRefRefCount }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>count:</text>\r\n <text id=\"count\">{{ count }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>isRef count:</text>\r\n <text id=\"is-ref-count\">{{ isRefCount }}</text>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst refCount = ref(0);\r\nconst count = 0;\r\nconst isRefRefCount = isRef(refCount);\r\nconst isRefCount = isRef(count);\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/utilities/is-ref/is-ref"},"utilities_to-ref_to-ref":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/utilities/to-ref/to-ref.uvue","code":"```vue\n<template>\r\n <view class=\"page\">\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>count:</text>\r\n <text id=\"count\">{{ count }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>isRef count:</text>\r\n <text id=\"is-ref-count\">{{ isRefCount }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>ref count:</text>\r\n <text id=\"ref-count\">{{ refCount }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>isRef ref count:</text>\r\n <text id=\"is-ref-ref-count\">{{ isRefRefCount }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>obj.num:</text>\r\n <text id=\"obj-num\">{{ obj.num }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>toRef(obj, \"num\"):</text>\r\n <text id=\"to-ref-obj-num\">{{ objNum }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>toRef(() => obj.num):</text>\r\n <text id=\"to-ref-fn-obj-num\">{{ readonlyObjNum }}</text>\r\n </view>\r\n\r\n <button class=\"mt-10\" id=\"increment-btn\" @click=\"increment\">\r\n increment obj.num\r\n </button>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst count = 0;\r\nconst isRefCount = isRef(count);\r\nconst refCount = toRef<number>(count);\r\nconst isRefRefCount = isRef(refCount);\r\n\r\ntype Obj = {\r\n num : number\r\n}\r\nconst obj = reactive({\r\n num: 0\r\n} as Obj)\r\n\r\nconst objNum = toRef<number>(obj, 'num')\r\n\r\nconst readonlyObjNum = toRef<number>(() : number => obj.num)\r\n\r\nconst increment = () => {\r\n obj.num++;\r\n objNum.value++;\r\n readonlyObjNum.value++;\r\n}\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/utilities/to-ref/to-ref"},"utilities_to-refs_to-refs":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/utilities/to-refs/to-refs.uvue","code":"```vue\n<template>\r\n <view class=\"page\">\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>state.num:</text>\r\n <text id=\"state-num\">{{ state['num'] }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>state.str:</text>\r\n <text id=\"state-str\">{{ state['str'] }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>stateAsRefs.num:</text>\r\n <text id=\"state-as-refs-num\">{{ (stateAsRefs['num'] as Ref<number>).value }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>stateAsRefs.str:</text>\r\n <text id=\"state-as-refs-str\">{{ (stateAsRefs['str'] as Ref<string>).value }}</text>\r\n </view>\r\n <button class=\"mt-10\" id=\"update-state-btn\" @click=\"updateState\">update state</button>\r\n </view>\r\n</template>\r\n\r\n<script setup lang='uts'>\r\n // toRefs 仅支持 array 和 UTSJSONObject, 不支持自定义类型\r\n const state = reactive({\r\n num: 0,\r\n str: 'str-0'\r\n })\r\n\r\n const stateAsRefs = toRefs(state)\r\n\r\n const updateState = () => {\r\n state['num'] = (state['num'] as number) + 1;\r\n (stateAsRefs['str'] as Ref<string>).value = `str-${(stateAsRefs['num'] as Ref<number>).value}`\r\n }\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/utilities/to-refs/to-refs"},"utilities_to-value_to-value":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/utilities/to-value/to-value.uvue","code":"```vue\n<template>\r\n <view class=\"page\">\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>ref count:</text>\r\n <text id=\"ref-count\">{{ refCount }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>isRef ref count:</text>\r\n <text id=\"is-ref-ref-count\">{{ isRefRefCount }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>count:</text>\r\n <text id=\"count\">{{ count }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>isRef count:</text>\r\n <text id=\"is-ref-count\">{{ isRefCount }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>obj.num:</text>\r\n <text id=\"obj-num\">{{ obj.num }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>toValue(() => obj.num):</text>\r\n <text id=\"to-value-obj-num\">{{ toValueObjNum }}</text>\r\n </view>\r\n <button class=\"mt-10\" id=\"increment-btn\" @click=\"increment\">\r\n increment obj.num\r\n </button>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst refCount = ref<number>(0);;\r\nconst isRefRefCount = isRef(refCount);\r\nconst count = toValue(refCount);\r\nconst isRefCount = isRef(count);\r\n\r\ntype Obj = {\r\n num : number\r\n}\r\nconst obj = reactive({\r\n num: 0\r\n} as Obj)\r\n\r\nlet toValueObjNum = toValue(() : number => 0)\r\n\r\nconst increment = () => {\r\n obj.num++;\r\n toValueObjNum++;\r\n}\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/utilities/to-value/to-value"},"utilities_un-ref_un-ref":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/utilities/un-ref/un-ref.uvue","code":"```vue\n<template>\r\n <view class=\"page\">\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>ref count:</text>\r\n <text id=\"ref-count\">{{ refCount }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>ref count type:</text>\r\n <text id=\"ref-count-type\">{{ refCountType }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>count:</text>\r\n <text id=\"count\">{{ count }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>count type:</text>\r\n <text id=\"count-type\">{{ countType }}</text>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst refCount = ref<number>(0);\r\nconst refCountType = typeof refCount;\r\nconst count = unref(refCount);\r\nconst countType = typeof count;\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/utilities/un-ref/un-ref"}},"E_components":{"Bar":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/hello-uvue/components/Bar.uvue","code":"```vue\n<template>\n\t<text class=\"component-bar\">this is component Bar</text>\n</template>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/hello-uvue/components/Bar"},"CompForAppComponent":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/hello-uvue/components/CompForAppComponent.uvue","code":"```vue\n<template>\n <text class=\"uni-common-mt bold\">component for app.component</text>\n</template>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/hello-uvue/components/CompForAppComponent"},"CompForAppUse":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/hello-uvue/components/CompForAppUse.uvue","code":"```vue\n<template>\n <view>\n <text class=\"uni-common-mt bold\">component for app.use</text>\n <text class=\"uni-common-mt plugin1\">plugin1: {{ plugin1 }}</text>\n <text class=\"uni-common-mt plugin2\">plugin2: {{ plugin2 }}</text>\n <text class=\"uni-common-mt plugin3\">plugin3: {{ plugin3 }}</text>\n <text class=\"uni-common-mt plugin4\">plugin4: {{ plugin4 }}</text>\n <CompForPlugin />\n </view>\n</template>\n\n<script lang=\"uts\">\nexport default {\n inject: ['plugin3', 'plugin4'],\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/hello-uvue/components/CompForAppUse"},"CompForHFunction":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/hello-uvue/components/CompForHFunction.uvue","code":"```vue\n<template>\n <view>\n <text class=\"uni-common-mt bold component-for-h-function\">component for h()</text>\n <slot />\n </view>\n</template>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/hello-uvue/components/CompForHFunction"},"CompForPlugin":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/hello-uvue/components/CompForPlugin.uvue","code":"```vue\n<template>\n <text class=\"uni-common-mt component-for-plugin\">component for plugin</text>\n</template>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/hello-uvue/components/CompForPlugin"},"Foo":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/hello-uvue/components/Foo.uvue","code":"```vue\n<template>\r\n\t<text class=\"component-foo\">this is component Foo</text>\r\n</template>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/hello-uvue/components/Foo"},"define-expose-foo_define-expose-foo":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/hello-uvue/components/define-expose-foo/define-expose-foo.uvue","code":"```vue\n<script setup lang='uts'>\n const str = 'foo str'\n const num = ref(0)\n const increment = () => {\n num.value++\n }\n \n defineExpose({\n str,\n num,\n increment\n })\n \n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/hello-uvue/components/define-expose-foo/define-expose-foo"},"keep-alive_Counter":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/hello-uvue/components/keep-alive/Counter.uvue","code":"```vue\n<template>\r\n\t<view>\r\n\t\t<text class=\"counter-text\">count: {{ count }}</text>\r\n\t\t<button class=\"uni-common-mt counter-btn\" @click=\"increment\">+</button>\n\t\t<text class=\"uni-common-mt\" id=\"activated-num\">activated num: {{ activatedNum }}</text>\n\t\t<text class=\"uni-common-mt\" id=\"deactivated-num\">deactivated num: {{ deactivatedNum }}</text>\r\n\t</view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\n\texport default {\r\n\t\tname: 'Counter',\r\n\t\tdata() {\r\n\t\t\treturn {\r\n\t\t\t\tcount: 0,\r\n\t\t\t\tactivatedNum: 0,\r\n\t\t\t\tdeactivatedNum: 0,\r\n\t\t\t}\r\n\t\t},\r\n\t\tactivated() { this.activatedNum++ },\r\n\t\tdeactivated() { this.deactivatedNum++ },\r\n\t\tmethods: {\r\n\t\t\tincrement() {\n\t\t\t\tconsole.log('this.count: ',this.count);\r\n\t\t\t\tthis.count++\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n</script>\r\n\r\n<style>\r\n\t.counter-btn {\r\n\t\theight: 40px;\r\n\t\tline-height: 40px;\r\n\t\tborder: 1px solid #ccc;\r\n\t\tborder-radius: 4px;\r\n\t\ttext-align: center;\r\n\t}\r\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/hello-uvue/components/keep-alive/Counter"},"keep-alive_Message":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/hello-uvue/components/keep-alive/Message.uvue","code":"```vue\n<template>\r\n\t<view>\r\n\t\t<text class=\"uni-common-mt message-text\">msg: {{msg}}</text>\r\n\t\t<text class=\"uni-common-mt change-message\" @click=\"changeMessage\">change message</text>\r\n\t</view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\n\texport default {\r\n\t\tname: 'Message',\r\n\t\tdata() {\r\n\t\t\treturn {\r\n\t\t\t\tmsg: 'default message'\r\n\t\t\t}\r\n\t\t},\r\n\t\tmethods: {\r\n\t\t\tchangeMessage() {\r\n\t\t\t\tthis.msg = 'message changed'\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n</script>\r\n\r\n<style>\r\n\t.change-message {\r\n\t\theight: 40px;\r\n\t\tline-height: 40px;\r\n\t\tborder: 1px solid #ccc;\r\n\t\tborder-radius: 4px;\r\n\t\ttext-align: center;\r\n\t}\r\n</style>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/hello-uvue/components/keep-alive/Message"},"keep-alive_ShouldExclude":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/hello-uvue/components/keep-alive/ShouldExclude.uvue","code":"```vue\n<template>\r\n\t<view>\n\t\t<text>should not be keep-alive</text>\r\n\t\t<text class=\"uni-common-mt should-exclude-text\">count: {{ count }}</text>\r\n\t\t<button class=\"uni-common-mt should-exclude-btn\" @click=\"increment\">+</button>\r\n\t</view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\n\texport default {\n\t\tname: 'ShouldExclude',\r\n\t\tdata() {\r\n\t\t\treturn {\r\n\t\t\t\tcount: 0\r\n\t\t\t}\r\n\t\t},\r\n\t\tmethods: {\r\n\t\t\tincrement() {\r\n\t\t\t\tthis.count++\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n</script>\n\n<style>\n\t.should-exclude-btn{\n\t\theight: 40px;\n\t\tline-height: 40px;\n\t\tborder: 1px solid #ccc;\n\t\tborder-radius: 4px;\n\t\ttext-align: center;\n\t}\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/hello-uvue/components/keep-alive/ShouldExclude"},"test-type_test-type":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/hello-uvue/components/test-type/test-type.uvue","code":"```vue\n<template>\n\t<view>\n\t\ttest-type\n\t</view>\n</template>\n\n<script>\n\texport default {\n\t\tname:\"test-type\",\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\t\n\t\t\t};\n\t\t}\n\t}\n</script>\n\n<style>\n\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/hello-uvue/components/test-type/test-type"},"test-type1_test-type1":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/hello-uvue/components/test-type1/test-type1.uvue","code":"```vue\n<template>\n\t<view>\n\t\ttest-type1\n\t</view>\n</template>\n\n<script>\n\texport default {\n\t\tname:\"test-type1\",\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\t\n\t\t\t};\n\t\t}\n\t}\n</script>\n\n<style>\n\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/hello-uvue/components/test-type1/test-type1"}}}
