{"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 |\n| onUpdated() | 4.0 | 4.11 | 4.0 |\n| onUnmounted() | 4.0 | 4.11 | 4.0 |\n| onBeforeMount() | 4.0 | 4.11 | 4.0 |\n| onBeforeUpdate() | 4.0 | 4.11 | 4.0 |\n| onBeforeUnmount() | 4.0 | 4.11 | 4.0 |\n| onErrorCaptured() | - | - | - |\n| onRenderTracked() | - | - | - |\n| onRenderTriggered() | - | - | - |\n| onActivated() | x | x | 4.0 |\n| onDeactivated() | x | x | 4.0 |\n| onServerPrefetch() | - | - | - |","example":""},"composition_injection":{"compatibility":"| | Android | iOS | web |\n| :- | :- | :- | :- |\n| provide() | 4.0 | 4.11 | 4.0 |\n| inject() | 4.0 | 4.11 | 4.0 |\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 |\n| created | 3.9 | 4.11 | 4.0 |\n| beforeMount | 3.9 | 4.11 | 4.0 |\n| mounted | 3.9 | 4.11 | 4.0 |\n| beforeUpdate | 3.9 | 4.11 | 4.0 |\n| updated | 3.9 | 4.11 | 4.0 |\n| beforeUnmount | 3.9 | 4.11 | 4.0 |\n| unmounted | 3.9 | 4.11 | 4.0 |\n| errorCaptured | x | x | 4.0 |\n| renderTracked | x | x | 4.0 |\n| renderTriggered | x | x | 4.0 |\n| activated | 4.0 | 4.11 | 4.0 |\n| deactivated | 4.0 | 4.11 | 4.0 |\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 | 4.11 | 4.0 |\n| isVNode() | √ | 4.11 | 4.0 |\n| resolveComponent() | √ | 4.11 | 4.0 |\n| resolveDirective() | - | - | - |\n| withDirectives() | √ | 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 // #endif\r\n onExit() {\r\n console.log('App Exit')\r\n },\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=\"uni-common-mt\"\r\n >globalProperties string: {{ globalPropertiesStr }}</text\r\n >\r\n <text class=\"uni-common-mt\"\r\n >globalProperties number: {{ globalPropertiesNum }}</text\r\n >\r\n <text class=\"uni-common-mt\"\r\n >globalProperties boolean: {{ globalPropertiesBool }}</text\r\n >\r\n <text class=\"uni-common-mt\"\r\n >globalProperties object: {{ globalPropertiesObj }}</text\r\n >\r\n <text class=\"uni-common-mt\"\r\n >globalProperties null: {{ globalPropertiesNull }}</text\r\n >\r\n <text class=\"uni-common-mt\"\r\n >globalProperties array: {{ globalPropertiesArr }}</text\r\n >\r\n <text class=\"uni-common-mt\"\r\n >globalProperties set: {{ globalPropertiesSet }}</text\r\n >\r\n <text class=\"uni-common-mt\"\r\n >globalProperties map: {{ globalPropertiesMap }}</text\r\n >\r\n <text class=\"uni-common-mt\"\r\n >globalProperties reactiveObj.str:\r\n {{ globalPropertiesReactiveObj['str'] }}</text\r\n >\r\n <text class=\"uni-common-mt\"\r\n >globalProperties reactiveObj.num:\r\n {{ globalPropertiesReactiveObj['num'] }}</text\r\n >\r\n <text class=\"uni-common-mt\"\r\n >globalProperties reactiveObj.boolean:\r\n {{ globalPropertiesReactiveObj['bool'] }}</text\r\n >\r\n <text class=\"uni-common-mt\"\r\n >globalProperties fun 返回值: {{ globalPropertiesFn() }}</text\r\n >\r\n <button @click=\"updateGlobalProperties\" class=\"uni-common-mt\">\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\n\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=\"uni-common-mt\"\r\n >globalProperties string: {{ globalPropertiesStr }}</text\r\n >\r\n <text class=\"uni-common-mt\"\r\n >globalProperties number: {{ globalPropertiesNum }}</text\r\n >\r\n <text class=\"uni-common-mt\"\r\n >globalProperties boolean: {{ globalPropertiesBool }}</text\r\n >\r\n <text class=\"uni-common-mt\"\r\n >globalProperties object: {{ globalPropertiesObj }}</text\r\n >\r\n <text class=\"uni-common-mt\"\r\n >globalProperties null: {{ globalPropertiesNull }}</text\r\n >\r\n <text class=\"uni-common-mt\"\r\n >globalProperties array: {{ globalPropertiesArr }}</text\r\n >\r\n <text class=\"uni-common-mt\"\r\n >globalProperties set: {{ globalPropertiesSet }}</text\r\n >\r\n <text class=\"uni-common-mt\"\r\n >globalProperties map: {{ globalPropertiesMap }}</text\r\n >\r\n <text class=\"uni-common-mt\"\r\n >globalProperties reactiveObj.str:\r\n {{ globalPropertiesReactiveObj['str'] }}</text\r\n >\r\n <text class=\"uni-common-mt\"\r\n >globalProperties reactiveObj.num:\r\n {{ globalPropertiesReactiveObj['num'] }}</text\r\n >\r\n <text class=\"uni-common-mt\"\r\n >globalProperties reactiveObj.boolean:\r\n {{ globalPropertiesReactiveObj['bool'] }}</text\r\n >\r\n <text class=\"uni-common-mt\"\r\n >globalProperties fun 返回值: {{ globalPropertiesFn() }}</text\r\n >\r\n <button @click=\"updateGlobalProperties\" class=\"uni-common-mt\">\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>\r\n <view class=\"page\">\r\n <child\r\n class=\"child-class\"\r\n str=\"str from parent\"\r\n @childClick=\"() => {}\" />\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nimport child from './child-composition.uvue'\r\n</script>\r\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>\r\n <view class=\"page\">\r\n <child\r\n class=\"child-class\"\r\n str=\"str from parent\"\r\n @childClick=\"() => {}\" />\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nimport child from './child-options.uvue'\r\n\r\nexport default {\r\n components: {\r\n child,\r\n },\r\n}\r\n</script>\r\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>\r\n <view>\r\n <view class=\"mb-10 flex flex-row justify-between\">\r\n <text>hasPropsAttr</text>\r\n <text id=\"has-props-attr\">{{ hasPropsAttr }}</text>\r\n </view>\r\n <view class=\"mb-10 flex flex-row justify-between\">\r\n <text>hasEmitsAttr</text>\r\n <text id=\"has-emits-attr\">{{ hasEmitsAttr }}</text>\r\n </view>\r\n <view class=\"mb-10 flex flex-row justify-between\">\r\n <text>hasClassAttr</text>\r\n <text id=\"has-class-attr\">{{ hasClassAttr }}</text>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\ndefineEmits(['childClick'])\r\n\r\ndefineProps({\r\n str: {\r\n type: String,\r\n required: true\r\n }\r\n})\r\n\r\nconst attrs = useAttrs()\r\n\r\nconst hasPropsAttr = computed(():boolean => {\r\n // #ifdef APP-ANDROID\r\n return attrs.has('val')\r\n // #endif\r\n // #ifndef APP-ANDROID\r\n return !!attrs['val']\r\n // #endif\r\n})\r\n\r\nconst hasEmitsAttr = computed(():boolean => {\r\n // #ifdef APP-ANDROID\r\n return attrs.has('childClick')\r\n // #endif\r\n // #ifndef APP-ANDROID\r\n return !!attrs['childClick']\r\n // #endif\r\n})\r\n\r\nconst hasClassAttr = computed(():boolean => {\r\n // #ifdef APP-ANDROID\r\n return attrs.has('class')\r\n // #endif\r\n // #ifndef APP-ANDROID\r\n return !!attrs['class']\r\n // #endif\r\n})\r\n</script>\r\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>\r\n <view>\r\n <view class=\"mb-10 flex flex-row justify-between\">\r\n <text>hasPropsAttr</text>\r\n <text id=\"has-props-attr\">{{ hasPropsAttr }}</text>\r\n </view>\r\n <view class=\"mb-10 flex flex-row justify-between\">\r\n <text>hasEmitsAttr</text>\r\n <text id=\"has-emits-attr\">{{ hasEmitsAttr }}</text>\r\n </view>\r\n <view class=\"mb-10 flex flex-row justify-between\">\r\n <text>hasClassAttr</text>\r\n <text id=\"has-class-attr\">{{ hasClassAttr }}</text>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nexport default {\r\n emits: ['childClick'],\r\n props: {\r\n str: {\r\n type: String,\r\n required: true\r\n }\r\n },\r\n computed: {\r\n hasPropsAttr(): boolean {\r\n // #ifdef APP-ANDROID\r\n return this.$attrs.has('val')\r\n // #endif\r\n // #ifndef APP-ANDROID\r\n return !!this.$attrs['val']\r\n // #endif\r\n },\r\n hasEmitsAttr(): boolean {\r\n // #ifdef APP-ANDROID\r\n return this.$attrs.has('childClick')\r\n // #endif\r\n // #ifndef APP-ANDROID\r\n return !!this.$attrs['childClick']\r\n // #endif\r\n },\r\n hasClassAttr(): boolean {\r\n // #ifdef APP-ANDROID\r\n return this.$attrs.has('class')\r\n // #endif\r\n // #ifndef APP-ANDROID\r\n return !!this.$attrs['class']\r\n // #endif\r\n }\r\n }\r\n}\r\n</script>\r\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>\r\n <view class=\"child-b\">\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>child B limit:</text>\r\n <text>{{ limit }}</text>\r\n </view>\r\n <child-a v-if=\"limit > 1\" :limit=\"limit - 1\" />\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n import ChildA from './childA-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/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>\r\n <view class=\"child-b\">\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>child B limit:</text>\r\n <text>{{limit}}</text>\r\n </view>\r\n <child-a v-if=\"limit>1\" :limit=\"limit-1\" />\r\n </view>\r\n</template>\r\n\r\n<script lang='uts'>\r\n import ChildA from './childA-options.uvue'\r\n\r\n export default {\r\n components: {\r\n ChildA\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/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>\r\n <view class=\"page\">\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>num: </text>\r\n <text id=\"num\">{{ num }}</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\">{{ arr.join(',') }}</text>\r\n </view>\r\n <button type=\"primary\" @click=\"updateData\">update data</button>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst str = ref('default str')\r\nconst num = ref(0)\r\nconst arr = ref([1, 2, 3])\r\n\r\nconst updateData = () => {\r\n str.value = 'new str'\r\n num.value = 1\r\n arr.value = [4, 5, 6]\r\n}\r\n\r\ndefineExpose({\r\n updateData\r\n})\r\n</script>\r\n\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>\r\n <view class=\"page\">\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>num: </text>\r\n <text id=\"num\">{{ num }}</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\">{{ arr.join(',') }}</text>\r\n </view>\r\n <button type=\"primary\" @click=\"updateData\">update data</button>\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nexport default {\r\n data() {\r\n return {\r\n str: 'default str',\r\n num: 0,\r\n arr: [1, 2, 3],\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 },\r\n}\r\n</script>\r\n\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>\r\n <view class=\"page\">\r\n <define-expose-foo ref=\"fooRef\" />\r\n <view class=\"flex justify-between flex-row mt-10\">\r\n <text>str from component Foo: </text>\r\n <text id=\"foo-str\">{{ fooStr }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mt-10\">\r\n <text>num from component Foo: </text>\r\n <text id=\"foo-num\">{{ fooNum }}</text>\r\n </view>\r\n <button class=\"increment-btn mt-10\" @click=\"increment\">\r\n trigger Foo increment\r\n </button>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst fooRef = ref<DefineExposeFooComponentPublicInstance | null>(null)\r\nconst fooStr = ref('')\r\nconst fooNum = ref<number>(0)\r\n\r\nonMounted(() => {\r\n fooStr.value = fooRef.value!.str\r\n fooNum.value = fooRef.value!.num\r\n})\r\n\r\nconst increment = () => {\r\n fooRef.value!.increment()\r\n fooNum.value = fooRef.value!.num\r\n}\r\n</script>\r\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\r\n<template>\r\n <view class=\"page flex justify-between flex-row\">\r\n <text class=\"child\">root node tagName：</text>\r\n <text class=\"tag-name\">{{ el }}</text>\r\n </view>\r\n</template>\r\n\r\n<script setup lang='uts'>\r\nconst el = ref('')\r\nconst instance = getCurrentInstance()!.proxy!\r\nonMounted(() => {el.value = instance.$el?.nodeName ?? ''})\r\n</script>\r\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>\r\n <view class=\"page flex justify-between flex-row\">\r\n <text class=\"child\">root node tagName：</text>\r\n <text class=\"tag-name\">{{ el }}</text>\r\n </view>\r\n</template>\r\n\r\n<script lang='uts'>\r\nexport default {\r\n data() {\r\n return {\r\n el: '',\r\n }\r\n },\r\n mounted() {\r\n this.el = this.$el?.nodeName ?? ''\r\n },\r\n}\r\n</script>\r\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>\r\n <view>\r\n <button @click=\"click\" class=\"call-parent-btn\">调用父组件事件</button>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst emit = defineEmits(['callback'])\r\n\r\nconst click = () => {\r\n emit('callback', `${Date.now()}`)\r\n}\r\n\r\ndefineExpose({\r\n click\r\n})\r\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>\r\n <view>\r\n <button @click=\"click\" class=\"call-parent-btn\">调用父组件事件</button>\r\n </view>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n emits: ['callback'],\r\n methods: {\r\n click () {\r\n this.$emit('callback', `${Date.now()}`)\r\n }\r\n }\r\n}\r\n</script>\r\n\r\n<style scoped>\r\n\r\n</style>\r\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>\r\n <view class=\"page\">\r\n <view class=\"row\">\r\n <text>子组件传的参数</text>\r\n <text>\r\n {{ value }}\r\n </text>\r\n </view>\r\n <child @callback=\"callback\"></child>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nimport child from './child-composition.uvue'\r\n\r\ndefineOptions({\r\n data() {\r\n return {\r\n value: ''\r\n }\r\n },\r\n methods: {\r\n callback(str: string) {\r\n this.value = str\r\n }\r\n }\r\n})\r\n</script>\r\n\r\n<style>\r\n.row {\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: space-between;\r\n margin-bottom: 10px;\r\n}\r\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>\r\n <view class=\"page\">\r\n <view class=\"row\">\r\n <text>子组件传的参数</text>\r\n <text>\r\n {{ value }}\r\n </text>\r\n </view>\r\n <child @callback=\"callback\"></child>\r\n </view>\r\n</template>\r\n\r\n<script>\r\nimport child from './child-options.uvue'\r\n\r\nexport default {\r\n components: {\r\n child\r\n },\r\n data () {\r\n return {\r\n value: \"\"\r\n }\r\n },\r\n methods: {\r\n callback (str: string) {\r\n this.value = str\r\n }\r\n }\r\n}\r\n</script>\r\n\r\n<style>\r\n.row {\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: space-between;\r\n margin-bottom: 10px;\r\n}\r\n</style>\r\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>\r\n <view class=\"page\">\r\n <view class=\"split-title\">$forceUpdate</view>\r\n <text class=\"mt-10 time\">Date.now(): {{ Date.now() }}</text>\r\n <button class=\"mt-10 trigger-force-update-btn\" type=\"primary\" @click=\"triggerForceUpdate\">trigger $forceUpdate</button>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst instance = getCurrentInstance()\r\n\r\nconst triggerForceUpdate = () => {\r\n instance?.proxy?.$forceUpdate()\r\n}\r\n\r\ndefineExpose({\r\n triggerForceUpdate\r\n})\r\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>\r\n <view class=\"page\">\r\n <view class=\"split-title\">$forceUpdate</view>\r\n <text class=\"uni-common-mt time\">Date.now(): {{ Date.now() }}</text>\r\n <button\r\n class=\"uni-common-mt trigger-force-update-btn\"\r\n type=\"primary\"\r\n @click=\"triggerForceUpdate\">\r\n trigger $forceUpdate\r\n </button>\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nexport default {\r\n methods: {\r\n triggerForceUpdate(){\r\n this.$forceUpdate()\r\n }\r\n }\r\n}\r\n</script>\r\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>\r\n <view>\r\n <text class=\"mt-10 bold\">component for inject 1</text>\r\n <text class=\"mt-10 alias-provide-page-title\"\r\n >aliasProvidePageTitle: {{ aliasProvidePageTitle }}</text\r\n >\r\n <text class=\"mt-10 provide-page-str\"\r\n >providePageStr: {{ providePageStr }}</text\r\n >\r\n <text class=\"mt-10 provide-page-num\"\r\n >providePageNum: {{ providePageNum }}</text\r\n >\r\n <text class=\"mt-10 provide-page-bool\"\r\n >providePageBool: {{ providePageBool }}</text\r\n >\r\n <text class=\"mt-10 provide-page-object-title\"\r\n >providePageObject.title: {{ providePageObject['title'] }}</text\r\n >\r\n <text class=\"mt-10 provide-page-object-content\"\r\n >providePageObject.content: {{ providePageObject['content'] }}</text\r\n >\r\n <text class=\"mt-10 provide-page-arr\"\r\n >providePageArr: {{ JSON.stringify(providePageArr) }}</text\r\n >\r\n <text class=\"mt-10 provide-page-map\"\r\n >providePageMap: {{ JSON.stringify(providePageMapObj) }}</text\r\n >\r\n <text class=\"mt-10 provide-page-set\"\r\n >providePageSet: {{ JSON.stringify(providePageSetArr) }}</text\r\n >\r\n <text class=\"mt-10 test-inject-string-default-value\"\r\n >testInjectStringDefaultValue: {{ testInjectStringDefaultValue }}</text\r\n >\r\n <text class=\"mt-10 test-inject-object-default-value-title\"\r\n >testInjectObjectDefaultValue.title:\r\n {{ testInjectObjectDefaultValue['title'] }}</text\r\n >\r\n <text class=\"mt-10 test-inject-object-default-value-content\"\r\n >testInjectObjectDefaultValue.content:\r\n {{ testInjectObjectDefaultValue['content'] }}</text\r\n >\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nexport default {\r\n inject: {\r\n aliasProvidePageTitle: {\r\n type: String,\r\n from: 'providePageTitle',\r\n default: 'default alias provide page title'\r\n },\r\n providePageStr: {\r\n type: String,\r\n default: 'default provide page str'\r\n },\r\n providePageNum: {\r\n type: Number,\r\n default: 0\r\n },\r\n providePageBool: {\r\n type: Boolean,\r\n default: false\r\n },\r\n providePageObject: {\r\n type: Object as PropType<UTSJSONObject>,\r\n default: (): UTSJSONObject => {\r\n return {\r\n title: 'default provide page object title',\r\n content: 'default provide page object content'\r\n }\r\n }\r\n },\r\n providePageArr: {\r\n type: Array as PropType<String[]>,\r\n default: (): String[] => {\r\n return ['default provide page arr']\r\n }\r\n },\r\n providePageMap: {\r\n type: Object as PropType<Map<string, string>>,\r\n default: (): Map<string, string> => {\r\n return new Map<string, string>([['key', 'default provide page map']])\r\n }\r\n },\r\n providePageSet: {\r\n type: Object as PropType<Set<string>>,\r\n default: (): Set<string> => {\r\n return new Set<string>(['default provide page set'])\r\n }\r\n },\r\n testInjectStringDefaultValue: {\r\n type: String,\r\n default: 'test inject string default value'\r\n },\r\n testInjectObjectDefaultValue: {\r\n type: Object as PropType<UTSJSONObject>,\r\n default(): UTSJSONObject {\r\n return {\r\n title: 'test inject object default value title',\r\n content: 'test inject object default value content'\r\n }\r\n }\r\n }\r\n },\r\n\tcomputed: {\r\n\t\tprovidePageMapObj(): UTSJSONObject {\r\n\t\t\tconst obj: UTSJSONObject = {}\r\n\t\t\tthis.providePageMap.forEach((value, key) => {\r\n\t\t\t\tobj[key] = value\r\n\t\t\t})\r\n\t\t\treturn obj\r\n\t\t},\r\n\t\tprovidePageSetArr(): string[] {\r\n\t\t\tconst arr: string[] = []\r\n\t\t\tthis.providePageSet.forEach((value) => {\r\n\t\t\t\tarr.push(value)\r\n\t\t\t})\r\n\t\t\treturn arr\r\n\t\t}\r\n\t}\r\n}\r\n</script>\r\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>\r\n <view>\r\n <text class=\"mt-10 bold\">component for inject 2</text>\r\n <text class=\"mt-10 provide-page-title\"\r\n >providePageTitle: {{ providePageTitle }}</text\r\n >\r\n <text class=\"mt-10 provide-page-str\">providePageStr: {{ providePageStr }}</text>\r\n <text class=\"mt-10 provide-page-num\">providePageNum: {{ providePageNum }}</text>\r\n <text class=\"mt-10 provide-page-bool\">providePageBool: {{ providePageBool }}</text>\r\n <text class=\"mt-10 provide-page-object-title\"\r\n >providePageObject.title: {{ providePageObject['title'] }}</text\r\n >\r\n <text class=\"mt-10 provide-page-object-content\"\r\n >providePageObject.content: {{ providePageObject['content'] }}</text\r\n >\r\n <text class=\"mt-10 provide-page-arr\">providePageArr: {{ JSON.stringify(providePageArr) }}</text>\r\n <text class=\"mt-10 provide-page-map\">providePageMap: {{ JSON.stringify(providePageMapObj) }}</text>\r\n <text class=\"mt-10 provide-page-set\">providePageSet: {{ JSON.stringify(providePageSetArr) }}</text>\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nexport default {\r\n inject: {\r\n providePageTitle: {\r\n type: String,\r\n default: 'default provide page title'\r\n },\r\n providePageStr: {\r\n type: String,\r\n default: 'default provide page str'\r\n },\r\n providePageNum: {\r\n type: Number,\r\n default: 0\r\n },\r\n providePageBool: {\r\n type: Boolean,\r\n default: false\r\n },\r\n providePageObject: {\r\n type: Object as PropType<UTSJSONObject>,\r\n default: (): UTSJSONObject => {\r\n return {\r\n title: 'default provide page object title',\r\n content: 'default provide page object content'\r\n }\r\n }\r\n },\r\n providePageArr: {\r\n type: Array as PropType<String[]>,\r\n default: (): String[] => {\r\n return ['default provide page arr']\r\n }\r\n },\r\n providePageMap: {\r\n type: Object as PropType<Map<string, string>>,\r\n default: (): Map<string, string> => {\r\n return new Map<string, string>([['key', 'default provide page map']])\r\n }\r\n },\r\n providePageSet: {\r\n type: Object as PropType<Set<string>>,\r\n default: (): Set<string> => {\r\n return new Set<string>(['default provide page set'])\r\n }\r\n },\r\n },\r\n\tcomputed: {\r\n\t\tprovidePageMapObj(): UTSJSONObject {\r\n\t\t\tconst obj: UTSJSONObject = {}\r\n\t\t\tthis.providePageMap.forEach((value, key) => {\r\n\t\t\t\tobj[key] = value\r\n\t\t\t})\r\n\t\t\treturn obj\r\n\t\t},\r\n\t\tprovidePageSetArr(): string[] {\r\n\t\t\tconst arr: string[] = []\r\n\t\t\tthis.providePageSet.forEach((value) => {\r\n\t\t\t\tarr.push(value)\r\n\t\t\t})\r\n\t\t\treturn arr\r\n\t\t}\r\n\t}\r\n}\r\n</script>\r\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>\r\n <view>\r\n <component-define-expose ref=\"component\"></component-define-expose>\r\n <button @click='callMethod'>callMethod</button>\r\n <view class=\"mt-10 flex\">\r\n <text>调用子组件 difineExpose 暴露方法结果: </text>\r\n <text class='mt-10'>{{ callMethodRes }}</text>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nimport ComponentDefineExpose from './component-define-expose.uvue'\r\n\r\nconst component = ref<ComponentPublicInstance | null>(null)\r\nconst callMethodRes = ref('')\r\n\r\nconst callMethod = () : string => {\r\n callMethodRes.value = component.value?.$callMethod('test', 'call defineExpose method res') as string\r\n return callMethodRes.value\r\n}\r\n\r\ndefineExpose({\r\n callMethod\r\n})\r\n</script>\r\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>\r\n <view>\r\n <call-easy-method ref=\"callEasyMethod1\"></call-easy-method>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst callEasyMethod1 = ref<CallEasyMethodComponentPublicInstance | null>(null)\r\n\r\nconst callMethod1 = () => {\r\n // 调用组件的 foo1 方法\r\n callEasyMethod1.value?.foo1?.()\r\n}\r\n\r\nconst callMethod2 = () => {\r\n // 调用组件的 foo2 方法并传递 1个参数\r\n callEasyMethod1.value?.foo2?.(Date.now())\r\n}\r\n\r\nconst callMethod3 = () => {\r\n // 调用组件的 foo3 方法并传递 2个参数\r\n callEasyMethod1.value?.foo3?.(Date.now(), Date.now())\r\n}\r\n\r\nconst callMethod4 = () => {\r\n // 调用组件的 foo4 方法并传递 callback\r\n callEasyMethod1.value?.foo4?.(() => {\r\n console.log('callback')\r\n })\r\n}\r\n\r\nconst callMethod5 = () => {\r\n // 注意： 返回值可能为 null，当前例子一定不为空，所以加了 !\r\n const result = callEasyMethod1.value?.foo5?.('string1') as string\r\n console.log(result) // string1\r\n}\r\n\r\nconst callMethodTest = (text: string): string | null => {\r\n const result = callEasyMethod1.value?.foo5?.(text) as string\r\n return result\r\n}\r\n\r\nconst delay = (): Promise<string> =>\r\n new Promise((resolve, _) => {\r\n setTimeout(() => {\r\n resolve('')\r\n }, 1000)\r\n })\r\n\r\nconst call = async (): Promise<void> => {\r\n callMethod1()\r\n await delay()\r\n callMethod2()\r\n await delay()\r\n callMethod3()\r\n await delay()\r\n callMethod4()\r\n await delay()\r\n callMethod5()\r\n}\r\n\r\nonReady(() => {\r\n call()\r\n})\r\n\r\ndefineExpose({\r\n callMethodTest\r\n})\r\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>\r\n <view>\r\n <call-easy-method ref=\"callEasyMethod1\"></call-easy-method>\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nconst delay = (): Promise<string> =>\r\n new Promise((resolve, _) => {\r\n setTimeout(() => {\r\n resolve('')\r\n }, 1000)\r\n })\r\n\r\nexport default {\r\n data() {\r\n return {\r\n callEasyMethod1: null as CallEasyMethodComponentPublicInstance | null\r\n }\r\n },\r\n onReady() {\r\n // 通过组件 ref 属性获取组件实例, 组件标签名首字母大写，驼峰+ComponentPublicInstance\r\n this.callEasyMethod1 = this.$refs['callEasyMethod1'] as CallEasyMethodComponentPublicInstance\r\n },\r\n methods: {\r\n call: async (): Promise<void> => {\r\n this.callMethod1()\r\n await delay()\r\n this.callMethod2()\r\n await delay()\r\n this.callMethod3()\r\n await delay()\r\n this.callMethod4()\r\n await delay()\r\n this.callMethod5()\r\n },\r\n callMethod1() {\r\n // 调用组件的 foo1 方法\r\n this.callEasyMethod1?.foo1?.()\r\n },\r\n callMethod2() {\r\n // 调用组件的 foo2 方法并传递 1个参数\r\n this.callEasyMethod1?.foo2?.(Date.now())\r\n },\r\n callMethod3() {\r\n // 调用组件的 foo3 方法并传递 2个参数\r\n this.callEasyMethod1?.foo3?.(Date.now(), Date.now())\r\n },\r\n callMethod4() {\r\n // 调用组件的 foo4 方法并传递 callback\r\n this.callEasyMethod1?.foo4?.(() => {\r\n console.log('callback')\r\n })\r\n },\r\n callMethod5() {\r\n // 注意： 返回值可能为 null，当前例子一定不为空，所以加了 !\r\n const result = this.callEasyMethod1?.foo5?.('string1') as string\r\n console.log(result) // string1\r\n },\r\n callMethodTest(text: string): string | null {\r\n const result = this.callEasyMethod1?.foo5?.(text) as string\r\n return result\r\n }\r\n }\r\n}\r\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>\r\n <view>\r\n <call-easy-method-uni-modules ref=\"callEasyMethod1\"></call-easy-method-uni-modules>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nimport { testInOtherFile } from './call-method-easycom-uni-modules'\r\n\r\nconst delay = (): Promise<string> =>\r\n new Promise((resolve, _) => {\r\n setTimeout(() => {\r\n resolve('')\r\n }, 1000)\r\n })\r\n\r\nconst callEasyMethod1 = ref<CallEasyMethodUniModulesComponentPublicInstance | null>(null)\r\n\r\nconst callMethod1 = () => {\r\n // 调用组件的 foo1 方法\r\n callEasyMethod1.value?.foo1?.()\r\n}\r\nconst callMethod2 = () => {\r\n // 调用组件的 foo2 方法并传递 1个参数\r\n callEasyMethod1.value?.foo2?.(Date.now())\r\n}\r\nconst callMethod3 = () => {\r\n // 调用组件的 foo3 方法并传递 2个参数\r\n callEasyMethod1.value?.foo3?.(Date.now(), Date.now())\r\n}\r\nconst callMethod4 = () => {\r\n // 调用组件的 foo4 方法并传递 callback\r\n callEasyMethod1.value?.foo4?.(() => {\r\n console.log('callback')\r\n })\r\n}\r\nconst callMethod5 = () => {\r\n // 注意： 返回值可能为 null，当前例子一定不为空，所以加了 !\r\n const result = callEasyMethod1.value?.foo5?.('string5') as string\r\n console.log(result) // string1\r\n}\r\nconst callMethodTest = (text: string): string | null => {\r\n const result = callEasyMethod1.value?.foo5?.(text) as string\r\n return result\r\n}\r\nconst callMethodInOtherFile = (text: string): string => {\r\n return testInOtherFile(callEasyMethod1.value!, text)\r\n}\r\n\r\nconst call = async (): Promise<void> => {\r\n callMethod1()\r\n await delay()\r\n callMethod2()\r\n await delay()\r\n callMethod3()\r\n await delay()\r\n callMethod4()\r\n await delay()\r\n callMethod5()\r\n}\r\n\r\nonReady(() => {\r\n call()\r\n})\r\n\r\ndefineExpose({\r\n callMethodTest,\r\n callMethodInOtherFile\r\n})\r\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>\r\n <view>\r\n <call-easy-method-uni-modules ref=\"callEasyMethod1\"></call-easy-method-uni-modules>\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nimport { testInOtherFile } from './call-method-easycom-uni-modules'\r\n\r\nconst delay = (): Promise<string> =>\r\n new Promise((resolve, _) => {\r\n setTimeout(() => {\r\n resolve('')\r\n }, 1000)\r\n })\r\n\r\nexport default {\r\n data() {\r\n return {\r\n callEasyMethod1: null as CallEasyMethodUniModulesComponentPublicInstance | null\r\n }\r\n },\r\n onReady() {\r\n // 通过组件 ref 属性获取组件实例, 组件标签名首字母大写，驼峰+ComponentPublicInstance\r\n this.callEasyMethod1 = this.$refs['callEasyMethod1'] as CallEasyMethodUniModulesComponentPublicInstance\r\n\r\n this.call()\r\n },\r\n methods: {\r\n async call(): Promise<void> {\r\n this.callMethod1()\r\n await delay()\r\n this.callMethod2()\r\n await delay()\r\n this.callMethod3()\r\n await delay()\r\n this.callMethod4()\r\n await delay()\r\n this.callMethod5()\r\n },\r\n callMethod1() {\r\n // 调用组件的 foo1 方法\r\n this.callEasyMethod1?.foo1?.()\r\n },\r\n callMethod2() {\r\n // 调用组件的 foo2 方法并传递 1个参数\r\n this.callEasyMethod1?.foo2?.(Date.now())\r\n },\r\n callMethod3() {\r\n // 调用组件的 foo3 方法并传递 2个参数\r\n this.callEasyMethod1?.foo3?.(Date.now(), Date.now())\r\n },\r\n callMethod4() {\r\n // 调用组件的 foo4 方法并传递 callback\r\n this.callEasyMethod1?.foo4?.(() => {\r\n console.log('callback')\r\n })\r\n },\r\n callMethod5() {\r\n // 注意： 返回值可能为 null，当前例子一定不为空，所以加了 !\r\n const result = this.callEasyMethod1?.foo5?.('string5') as string\r\n console.log(result) // string1\r\n },\r\n callMethodTest(text: string): string | null {\r\n const result = this.callEasyMethod1?.foo5?.(text) as string\r\n return result\r\n },\r\n callMethodInOtherFile(text: string): string {\r\n return testInOtherFile(this.callEasyMethod1!, text)\r\n }\r\n }\r\n}\r\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>\r\n <view>\r\n <component1 ref=\"componentRef\"></component1>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n// 非easycom组件需import引用组件 componentRef-composition.uvue\r\nimport component1 from './component1-composition.uvue'\r\n\r\nconst componentRef = ref<ComponentPublicInstance | null>(null)\r\n\r\nconst callMethod1 = () => {\r\n // 通过 $callMethod 调用组件的 foo1 方法\r\n componentRef.value?.$callMethod('foo1')\r\n}\r\n\r\nconst callMethod2 = () => {\r\n // 通过 $callMethod 调用组件的 foo2 方法并传递 1个参数\r\n componentRef.value?.$callMethod('foo2', Date.now())\r\n}\r\n\r\nconst callMethod3 = () => {\r\n // 通过 $callMethod 调用组件的 foo3 方法并传递 2个参数\r\n componentRef.value?.$callMethod('foo3', Date.now(), Date.now())\r\n}\r\n\r\nconst callMethod4 = () => {\r\n // 通过 $callMethod 调用组件的 foo4 方法并传递 callback\r\n componentRef.value?.$callMethod('foo4', () => {\r\n console.log('callback')\r\n })\r\n}\r\n\r\nconst callMethod5 = () => {\r\n // 通过 $callMethod 调用组件的 foo5 方法并接收返回值\r\n // 注意： 返回值可能为 null，当前例子一定不为空，所以加了 !\r\n const result = componentRef.value?.$callMethod('foo5', 'string1') as string\r\n console.log(result) // string1\r\n}\r\n\r\nconst callMethodTest = (text: string): string | null => {\r\n const result = componentRef.value?.$callMethod('foo5', text) as string\r\n return result\r\n}\r\n\r\nconst delay = (): Promise<string> =>\r\n new Promise((resolve, _) => {\r\n setTimeout(() => {\r\n resolve('')\r\n }, 1000)\r\n })\r\n\r\nconst call = async (): Promise<void> => {\r\n callMethod1()\r\n await delay()\r\n callMethod2()\r\n await delay()\r\n callMethod3()\r\n await delay()\r\n callMethod4()\r\n await delay()\r\n callMethod5()\r\n}\r\n\r\nonReady(() => {\r\n call()\r\n})\r\n\r\ndefineExpose({\r\n callMethodTest\r\n})\r\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>\r\n <view>\r\n <component1 ref=\"component1\"></component1>\r\n </view>\r\n</template>\r\n\r\n<script>\r\n// 非easycom组件需import引用组件 component1.uvue\r\nimport component1 from './component1.uvue'\r\n\r\nconst delay = (): Promise<string> =>\r\n new Promise((resolve, _) => {\r\n setTimeout(() => {\r\n resolve('')\r\n }, 1000)\r\n })\r\n\r\nexport default {\r\n components: {\r\n component1\r\n },\r\n data() {\r\n return {\r\n component1: null as ComponentPublicInstance | null\r\n }\r\n },\r\n onReady() {\r\n // 通过组件 ref 属性获取组件实例\r\n this.component1 = this.$refs['component1'] as ComponentPublicInstance;\r\n this.call()\r\n },\r\n methods: {\r\n call: async (): Promise<void> => {\r\n this.callMethod1()\r\n await delay()\r\n this.callMethod2()\r\n await delay()\r\n this.callMethod3()\r\n await delay()\r\n this.callMethod4()\r\n await delay()\r\n this.callMethod5()\r\n },\r\n callMethod1() {\r\n // 通过 $callMethod 调用组件的 foo1 方法\r\n this.component1?.$callMethod('foo1');\r\n },\r\n callMethod2() {\r\n // 通过 $callMethod 调用组件的 foo2 方法并传递 1个参数\r\n this.component1?.$callMethod('foo2', Date.now());\r\n },\r\n callMethod3() {\r\n // 通过 $callMethod 调用组件的 foo3 方法并传递 2个参数\r\n this.component1?.$callMethod('foo3', Date.now(), Date.now());\r\n },\r\n callMethod4() {\r\n // 通过 $callMethod 调用组件的 foo4 方法并传递 callback\r\n this.component1?.$callMethod('foo4', () => {\r\n console.log('callback')\r\n });\r\n },\r\n callMethod5() {\r\n // 通过 $callMethod 调用组件的 foo5 方法并接收返回值\r\n // 注意： 返回值可能为 null，当前例子一定不为空，所以加了 !\r\n const result = this.component1?.$callMethod('foo5', 'string1') as string;\r\n console.log(result); // string1\r\n },\r\n callMethodTest(text: string): string | null {\r\n const result = this.component1?.$callMethod('foo5', text) as string;\r\n return result;\r\n },\r\n }\r\n}\r\n</script>\r\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>\r\n <view>\r\n <slider :show-value=\"true\" ref=\"sliderRef\"></slider>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst sliderRef = ref<UniSliderElement | null>(null)\r\n\r\nonReady(() => {\r\n sliderRef.value!.value = 80\r\n})\r\n\r\nconst callMethodTest = (text: string): string | null => {\r\n sliderRef.value?.setAttribute('str', text)\r\n const result = sliderRef.value?.getAttribute('str') as string\r\n return result\r\n}\r\n\r\ndefineExpose({\r\n callMethodTest\r\n})\r\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>\r\n <view>\r\n <slider :show-value=\"true\" ref=\"slider1\"></slider>\r\n </view>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n data() {\r\n return {\r\n slider1: null as UniSliderElement | null\r\n }\r\n },\r\n onReady() {\r\n // 通过组件 ref 属性获取组件实例, Uni组件名(驼峰)UniElement\r\n this.slider1 = this.$refs['slider1'] as UniSliderElement;\r\n this.setValue()\r\n },\r\n methods: {\r\n setValue() {\r\n this.slider1!.value = 80\r\n },\r\n callMethodTest(text: string): string | null {\r\n this.slider1?.setAttribute('str', text);\r\n const result = this.slider1?.getAttribute('str') as string;\r\n return result;\r\n },\r\n }\r\n}\r\n</script>\r\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>\r\n <view>{{ result }}</view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst result = ref<string>('')\r\n\r\nconst foo1 = () => {\r\n result.value = 'foo1'\r\n}\r\n\r\nconst foo2 = (date1: number) => {\r\n result.value = 'foo2=' + date1\r\n}\r\n\r\nconst foo3 = (date1: number, date2: number) => {\r\n result.value = 'foo3=' + date1 + ' ' + date2\r\n}\r\n\r\nconst foo4 = (callback: () => void) => {\r\n callback()\r\n}\r\n\r\nconst foo5 = (text: string): string => {\r\n result.value = text\r\n return text\r\n}\r\n\r\ndefineExpose({\r\n foo1,\r\n foo2,\r\n foo3,\r\n foo4,\r\n foo5\r\n})\r\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>\r\n <view>{{result}}</view>\r\n</template>\r\n\r\n<script>\r\n export default {\r\n data() {\r\n return {\r\n result: ''\r\n }\r\n },\r\n methods: {\r\n foo1() {\r\n this.result = \"foo1\"\r\n },\r\n foo2(date1 : number) {\r\n this.result = \"foo2=\" + date1\r\n },\r\n foo3(date1 : number, date2 : number) {\r\n this.result = \"foo3=\" + date1 + \" \" + date2\r\n },\r\n foo4(callback : (() => void)) {\r\n callback()\r\n },\r\n foo5(text1 : string) : string | null {\r\n this.result = text1\r\n return text1\r\n }\r\n }\r\n }\r\n</script>\r\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>\r\n <!-- #ifdef APP -->\r\n <scroll-view style=\"flex: 1\">\r\n <!-- #endif -->\r\n <view class=\"page\">\r\n <text class=\"bold\">props:</text>\r\n <text class=\"mt-10 namesake-mixin-prop\">{{ namesakeMixinProp }}</text>\r\n <text class=\"mt-10 namesake-child-mixin-prop\">{{ namesakeChildMixinProp }}</text>\r\n\r\n <text class=\"bold mt-10\">data:</text>\r\n <text class=\"mt-10 namesake-mixin-data-msg\">{{ namesakeMixinDataMsg }}</text>\r\n <text class=\"mt-10 namesake-child-mixin-data-msg\">{{ namesakeChildMixinDataMsg }}</text>\r\n\r\n <text class=\"bold mt-10\">computed:</text>\r\n <text class=\"mt-10 namesake-mixin-computed\">{{ namesakeMixinComputed }}</text>\r\n <text class=\"mt-10 namesake-child-mixin-computed\">{{ namesakeChildMixinComputed }}</text>\r\n\r\n <text class=\"mt-10 bold\">method:</text>\r\n <text class=\"mt-10 namesake-mixin-method\">{{ namesakeMixinMethod() }}</text>\r\n <text class=\"mt-10 namesake-child-mixin-method\">{{ namesakeChildMixinMethod() }}</text>\r\n\r\n <text class=\"mt-10 bold\">mixin component:</text>\r\n <GlobalMixinComp1 />\r\n <GlobalChildMixinComp1 />\r\n <GlobalMixinComp2 />\r\n <GlobalChildMixinComp2 />\r\n <MixinComp1 />\r\n <ChildMixinComp1 />\r\n <MixinComp2 />\r\n <ChildMixinComp2 />\r\n <MixinComp />\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\nimport MixinComp2 from './components/MixinComp2.uvue'\r\nimport ChildMixinComp2 from './components/ChildMixinComp2.uvue'\r\nimport CompForPage from './components/CompForPage.uvue'\r\nimport { pageMixin } from './mixins'\r\n\r\nexport default {\r\n components: {\r\n MixinComp: CompForPage\r\n },\r\n mixins: [\r\n pageMixin,\r\n {\r\n mixins: [{\r\n components: {ChildMixinComp2},\r\n props: {\r\n childMixinProp2: {\r\n type: String,\r\n default: '通过字面量定义非全局 child mixin props'\r\n },\r\n namesakeChildMixinProp: {\r\n type: String,\r\n default: '通过字面量定义非全局同名 child mixin props'\r\n }\r\n },\r\n data() {\r\n return {\r\n childMixinDataMsg2: '通过字面量定义非全局 child mixin data',\r\n namesakeChildMixinDataMsg: '通过字面量定义非全局同名 child mixin data',\r\n childMixinOnLoadMsg2: '',\r\n childMixinWatchMsg2: ''\r\n }\r\n },\r\n computed: {\r\n childMixinComputed2(): string {\r\n const res = `通过字面量定义非全局 child mixin computed, 更新后的 childMixinOnLoadMsg2: ${this.childMixinOnLoadMsg2}`\r\n console.log(res)\r\n return res\r\n },\r\n namesakeChildMixinComputed(): string {\r\n const res = '通过字面量定义非全局同名 child mixin computed'\r\n console.log(res)\r\n return res\r\n }\r\n },\r\n watch: {\r\n globalMixinOnloadMsg1(newVal: string) {\r\n this.childMixinWatchMsg2 = `通过字面量定义非全局 child mixin watch, 更新后的 globalMixinOnloadMsg1: ${newVal}`\r\n console.log(this.childMixinWatchMsg2)\r\n },\r\n },\r\n onLoad() {\r\n const res = '通过字面量定义非全局 child mixin onLoad'\r\n console.log(res)\r\n this.childMixinOnLoadMsg2 = res\r\n },\r\n methods: {\r\n childMixinMethod2(): string {\r\n const res = '通过字面量定义非全局 child mixin method'\r\n console.log(res)\r\n return res\r\n },\r\n namesakeChildMixinMethod(): string {\r\n const res = '通过字面量定义非全局同名 child mixin method'\r\n console.log(res)\r\n return res\r\n },\r\n },\r\n }],\r\n components: {MixinComp2},\r\n props: {\r\n mixinProp2: {\r\n type: String,\r\n default: '通过字面量定义非全局 mixin props'\r\n },\r\n namesakeMixinProp: {\r\n type: String,\r\n default: '通过字面量定义非全局同名 mixin props'\r\n }\r\n },\r\n data() {\r\n return {\r\n mixinDataMsg2: '通过字面量定义非全局 mixin data',\r\n namesakeMixinDataMsg: '通过字面量定义非全局同名 mixin data',\r\n mixinOnloadMsg2: '',\r\n mixinWatchMsg2: ''\r\n }\r\n },\r\n computed: {\r\n mixinComputed2(): string {\r\n const res = `通过字面量定义非全局 mixin computed, 更新后的 mixinOnloadMsg2: ${this.mixinOnloadMsg2}`\r\n console.log(res)\r\n return res\r\n },\r\n namesakeMixinComputed(): string {\r\n const res = '通过字面量定义非全局同名 mixin computed'\r\n console.log(res)\r\n return res\r\n }\r\n },\r\n watch: {\r\n globalMixinOnloadMsg1(newVal: string) {\r\n this.mixinWatchMsg2 = `通过 defineMixin 定义非全局 child mixin watch, 更新后的 globalMixinOnloadMsg1: ${newVal}`\r\n console.log(this.mixinWatchMsg2)\r\n },\r\n },\r\n onLoad() {\r\n const res = '通过字面量定义非全局 mixin onLoad'\r\n console.log(res)\r\n this.mixinOnloadMsg2 = res\r\n },\r\n methods: {\r\n mixinMethod2(): string {\r\n const res = '通过字面量定义非全局 mixin method'\r\n console.log(res)\r\n return res\r\n },\r\n namesakeMixinMethod(): string {\r\n const res = '通过字面量定义非全局同名 mixin method'\r\n console.log(res)\r\n return res\r\n }\r\n },\r\n },\r\n ],\r\n props: {\r\n namesakeMixinProp: {\r\n type: String,\r\n default: '页面内的同名 props'\r\n },\r\n namesakeChildMixinProp: {\r\n type: String,\r\n default: '页面内的同名 child props'\r\n },\r\n },\r\n data(){\r\n return {\r\n namesakeMixinDataMsg: '页面内的同名 data',\r\n namesakeChildMixinDataMsg: '页面内的同名 child data',\r\n mixinWatchMsg: ''\r\n }\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 computed: {\r\n namesakeMixinComputed(): string {\r\n const res = '页面内的同名 computed'\r\n console.log(res)\r\n return res\r\n },\r\n namesakeChildMixinComputed(): string {\r\n const res = '页面内的同名 child computed'\r\n console.log(res)\r\n return res\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 namesakeChildMixinMethod(): string {\r\n const res = '页面内的同名 child method'\r\n console.log(res)\r\n return res\r\n },\r\n }\r\n}\r\n</script>\r\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>\r\n <!-- #ifdef APP -->\r\n <scroll-view style=\"flex: 1\">\r\n <!-- #endif -->\r\n <view class=\"page\">\r\n <button type=\"primary\" @click=\"goMixinPageNamesake\">go mixin page namesake</button>\r\n <text class=\"mt-10 bold\">props:</text>\r\n <text class=\"mt-10 global-mixin-prop-1\">{{ globalMixinProp1 }}</text>\r\n <text class=\"mt-10 global-child-mixin-prop-1\">{{ globalChildMixinProp1 }}</text>\r\n <text class=\"mt-10 global-mixin-prop-2\">{{ globalMixinProp2 }}</text>\r\n <text class=\"mt-10 global-child-mixin-prop-2\">{{ globalChildMixinProp2 }}</text>\r\n <text class=\"mt-10 mixin-prop-1\">{{ mixinProp1 }}</text>\r\n <text class=\"mt-10 child-mixin-prop-1\">{{ childMixinProp1 }}</text>\r\n <text class=\"mt-10 mixin-prop-2\">{{ mixinProp2 }}</text>\r\n <text class=\"mt-10 child-mixin-prop-2\">{{ childMixinProp2 }}</text>\r\n <text class=\"mt-10 namesake-mixin-prop\">{{ namesakeMixinProp }}</text>\r\n <text class=\"mt-10 namesake-child-mixin-prop\">{{ namesakeChildMixinProp }}</text>\r\n\r\n <text class=\"bold mt-10\">data:</text>\r\n <text class=\"mt-10 global-mixin-data-msg-1\">{{ globalMixinDataMsg1 }}</text>\r\n <text class=\"mt-10 global-child-mixin-data-msg-1\">{{ globalChildMixinDataMsg1 }}</text>\r\n <text class=\"mt-10 global-mixin-data-msg-2\">{{ globalMixinDataMsg2 }}</text>\r\n <text class=\"mt-10 global-child-mixin-data-msg-2\">{{ globalChildMixinDataMsg2 }}</text>\r\n <text class=\"mt-10 mixin-data-msg-1\">{{ mixinDataMsg1 }}</text>\r\n <text class=\"mt-10 child-mixin-data-msg-1\">{{ childMixinDataMsg1 }}</text>\r\n <text class=\"mt-10 mixin-data-msg-2\">{{ mixinDataMsg2 }}</text>\r\n <text class=\"mt-10 child-mixin-data-msg-2\">{{ childMixinDataMsg2 }}</text>\r\n <text class=\"mt-10 namesake-mixin-data-msg\">{{ namesakeMixinDataMsg }}</text>\r\n <text class=\"mt-10 namesake-child-mixin-data-msg\">{{ namesakeChildMixinDataMsg }}</text>\r\n\r\n <text class=\"bold mt-10\">computed:</text>\r\n <text class=\"mt-10 global-mixin-computed-1\">{{ globalMixinComputed1 }}</text>\r\n <text class=\"mt-10 global-child-mixin-computed-1\">{{ globalChildMixinComputed1 }}</text>\r\n <text class=\"mt-10 global-mixin-computed-2\">{{ globalMixinComputed2 }}</text>\r\n <text class=\"mt-10 global-child-mixin-computed-2\">{{ globalChildMixinComputed2 }}</text>\r\n <text class=\"mt-10 mixin-computed-1\">{{ mixinComputed1 }}</text>\r\n <text class=\"mt-10 child-mixin-computed-1\">{{ childMixinComputed1 }}</text>\r\n <text class=\"mt-10 mixin-computed-2\">{{ mixinComputed2 }}</text>\r\n <text class=\"mt-10 child-mixin-computed-2\">{{ childMixinComputed2 }}</text>\r\n <text class=\"mt-10 namesake-mixin-computed\">{{ namesakeMixinComputed }}</text>\r\n <text class=\"mt-10 namesake-child-mixin-computed\">{{ namesakeChildMixinComputed }}</text>\r\n\r\n <text class=\"bold mt-10\">watch:</text>\r\n <text class=\"mt-10 global-mixin-watch-1\">{{ globalMixinWatchMsg1 }}</text>\r\n <text class=\"mt-10 global-child-mixin-watch-1\">{{ globalChildMixinWatchMsg1 }}</text>\r\n <text class=\"mt-10 global-mixin-watch-2\">{{ globalMixinWatchMsg2 }}</text>\r\n <text class=\"mt-10 global-child-mixin-watch-2\">{{ globalChildMixinWatchMsg2 }}</text>\r\n <text class=\"mt-10 mixin-watch-1\">{{ mixinWatchMsg1 }}</text>\r\n <text class=\"mt-10 child-mixin-watch-1\">{{ childMixinWatchMsg1 }}</text>\r\n <text class=\"mt-10 mixin-watch-2\">{{ mixinWatchMsg2 }}</text>\r\n <text class=\"mt-10 child-mixin-watch-2\">{{ childMixinWatchMsg2 }}</text>\r\n <text class=\"mt-10 mixin-watch\">{{ mixinWatchMsg }}</text>\r\n\r\n <text class=\"bold mt-10\">lifecycle:</text>\r\n <text class=\"mt-10\">{{ globalMixinOnloadMsg1 }}</text>\r\n <text class=\"mt-10\">{{ globalMixinOnloadMsg2 }}</text>\r\n <text class=\"mt-10\">{{ globalChildMixinOnloadMsg1 }}</text>\r\n <text class=\"mt-10\">{{ globalChildMixinOnloadMsg2 }}</text>\r\n <text class=\"mt-10\">{{ mixinOnloadMsg1 }}</text>\r\n <text class=\"mt-10\">{{ mixinOnloadMsg2 }}</text>\r\n <text class=\"mt-10\">{{ childMixinOnloadMsg1 }}</text>\r\n <text class=\"mt-10\">{{ childMixinOnloadMsg2 }}</text>\r\n <text class=\"mt-10\">{{ onloadMsg }}</text>\r\n\r\n <text class=\"mt-10 bold\">method:</text>\r\n <text class=\"mt-10 global-mixin-method-1\">{{ globalMixinMethod1() }}</text>\r\n <text class=\"mt-10 global-child-mixin-method-1\">{{ globalChildMixinMethod1() }}</text>\r\n <text class=\"mt-10 global-mixin-method-2\">{{ globalMixinMethod2() }}</text>\r\n <text class=\"mt-10 global-child-mixin-method-2\">{{ globalChildMixinMethod2() }}</text>\r\n <text class=\"mt-10 mixin-method-1\">{{ mixinMethod1() }}</text>\r\n <text class=\"mt-10 child-mixin-method-1\">{{ childMixinMethod1() }}</text>\r\n <text class=\"mt-10 mixin-method-2\">{{ mixinMethod2() }}</text>\r\n <text class=\"mt-10 child-mixin-method-2\">{{ childMixinMethod2() }}</text>\r\n <text class=\"mt-10 namesake-mixin-method\">{{ namesakeMixinMethod() }}</text>\r\n <text class=\"mt-10 namesake-child-mixin-method\">{{ namesakeChildMixinMethod() }}</text>\r\n\r\n <text class=\"mt-10 bold\">component:</text>\r\n <Comp1\r\n title=\"title\"\r\n @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 }}</text\r\n >\r\n <Comp2 class='comp2' title=\"title\" />\r\n <text class=\"mt-10 bold\">mixin component:</text>\r\n <GlobalMixinComp1 />\r\n <GlobalChildMixinComp1 />\r\n <GlobalMixinComp2 />\r\n <GlobalChildMixinComp2 />\r\n <MixinComp1 />\r\n <ChildMixinComp1 />\r\n <MixinComp2 />\r\n <ChildMixinComp2 />\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\nimport Comp1 from './components/Comp1.uvue'\r\nimport Comp2 from './components/Comp2.uvue'\r\nimport MixinComp2 from './components/MixinComp2.uvue'\r\nimport ChildMixinComp2 from './components/ChildMixinComp2.uvue'\r\nimport { pageMixin } from './mixins'\r\n\r\nexport default {\r\n components: {\r\n Comp1,\r\n Comp2,\r\n },\r\n mixins: [\r\n pageMixin,\r\n {\r\n mixins: [{\r\n components: {ChildMixinComp2},\r\n props: {\r\n childMixinProp2: {\r\n type: String,\r\n default: '通过字面量定义非全局 child mixin props'\r\n },\r\n namesakeChildMixinProp: {\r\n type: String,\r\n default: '通过字面量定义非全局同名 child mixin props'\r\n }\r\n },\r\n data() {\r\n return {\r\n childMixinDataMsg2: '通过字面量定义非全局 child mixin data',\r\n namesakeChildMixinDataMsg: '通过字面量定义非全局同名 child mixin data',\r\n childMixinOnloadMsg2: '',\r\n childMixinOnloadTime2: 0,\r\n childMixinWatchMsg2: ''\r\n }\r\n },\r\n computed: {\r\n childMixinComputed2(): string {\r\n const res = `通过字面量定义非全局 child mixin computed, 更新后的 childMixinOnloadMsg2: ${this.childMixinOnloadMsg2}`\r\n console.log(res)\r\n return res\r\n },\r\n namesakeChildMixinComputed(): string {\r\n const res = '通过字面量定义非全局同名 child mixin computed'\r\n console.log(res)\r\n return res\r\n }\r\n },\r\n watch: {\r\n globalMixinOnloadMsg1(newVal: string) {\r\n this.childMixinWatchMsg2 = `通过字面量定义非全局 child mixin watch, 更新后的 globalMixinOnloadMsg1: ${newVal}`\r\n console.log(this.childMixinWatchMsg2)\r\n },\r\n },\r\n onLoad() {\r\n this.childMixinOnloadTime2 = Date.now()\r\n const res = '通过字面量定义非全局 child mixin onLoad'\r\n console.log(res)\r\n this.childMixinOnloadMsg2 = res\r\n },\r\n methods: {\r\n childMixinMethod2(): string {\r\n const res = '通过字面量定义非全局 child mixin method'\r\n console.log(res)\r\n return res\r\n },\r\n namesakeChildMixinMethod(): string {\r\n const res = '通过字面量定义非全局同名 child mixin method'\r\n console.log(res)\r\n return res\r\n },\r\n },\r\n }],\r\n components: {MixinComp2},\r\n props: {\r\n mixinProp2: {\r\n type: String,\r\n default: '通过字面量定义非全局 mixin props'\r\n },\r\n namesakeMixinProp: {\r\n type: String,\r\n default: '通过字面量定义非全局同名 mixin props'\r\n }\r\n },\r\n data() {\r\n return {\r\n mixinDataMsg2: '通过字面量定义非全局 mixin data',\r\n namesakeMixinDataMsg: '通过字面量定义非全局同名 mixin data',\r\n mixinOnloadMsg2: '',\r\n mixinOnloadTime2: 0,\r\n mixinWatchMsg2: ''\r\n }\r\n },\r\n computed: {\r\n mixinComputed2(): string {\r\n const res = `通过字面量定义非全局 mixin computed, 更新后的 mixinOnloadMsg2: ${this.mixinOnloadMsg2}`\r\n console.log(res)\r\n return res\r\n },\r\n namesakeMixinComputed(): string {\r\n const res = '通过字面量定义非全局同名 mixin computed'\r\n console.log(res)\r\n return res\r\n }\r\n },\r\n watch: {\r\n globalMixinOnloadMsg1(newVal: string) {\r\n this.mixinWatchMsg2 = `通过字面量定义非全局 mixin watch, 更新后的 globalMixinOnloadMsg1: ${newVal}`\r\n console.log(this.mixinWatchMsg2)\r\n },\r\n },\r\n onLoad() {\r\n this.mixinOnloadTime2 = Date.now()\r\n const res = '通过字面量定义非全局 mixin onLoad'\r\n console.log(res)\r\n this.mixinOnloadMsg2 = res\r\n },\r\n methods: {\r\n mixinMethod2(): string {\r\n const res = '通过字面量定义非全局 mixin method'\r\n console.log(res)\r\n return res\r\n },\r\n namesakeMixinMethod(): string {\r\n const res = '通过字面量定义非全局同名 mixin method'\r\n console.log(res)\r\n return res\r\n }\r\n },\r\n },\r\n ],\r\n data(){\r\n return {\r\n handleMixinEmitterMsg: '',\r\n mixinWatchMsg: '',\r\n mixinOnloadTime: 0,\r\n onloadMsg: ''\r\n }\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 onLoad(){\r\n this.mixinOnloadTime = Date.now()\r\n const res = '页面内的 onLoad'\r\n console.log(res)\r\n this.onloadMsg = res\r\n },\r\n methods: {\r\n goMixinPageNamesake(){\r\n uni.navigateTo({url: './mixins-app-page-namesake'})\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</script>\r\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>\r\n <view class=\"page\">\r\n <child ref='child' />\r\n </view>\r\n</template>\r\n\r\n<script lang='uts'>\r\nimport child from './child-options.uvue'\r\n\r\nexport default {\r\n components: {\r\n child\r\n },\r\n data() {\r\n return {\r\n str: \"parent str\",\r\n num: 1\r\n }\r\n },\r\n methods: {\r\n getNum() : number {\r\n return this.num\r\n },\r\n callMethodByChild(): number {\r\n const child = this.$refs['child'] as ComponentPublicInstance\r\n // #ifdef APP-ANDROID\r\n return child.$parent!.$callMethod('getNum') as number\r\n // #endif\r\n // #ifndef APP-ANDROID\r\n return child.$parent!['getNum']()\r\n // #endif\r\n }\r\n }\r\n}\r\n</script>\r\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\nimport { type PropType } from 'vue'\r\n\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>\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\timport { type PropType } from 'vue'\r\n\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>\r\n <view class=\"page\">\r\n <array-literal :str=\"str\" :num=\"num\" :bool=\"bool\" :obj=\"obj\" :arr=\"arr\" />\r\n <object-type str=\"str\" :num=\"num\" :bool=\"bool\" :obj=\"obj\" :arr=\"arr\" />\r\n <same-name-prop-default-value />\r\n <props-with-defaults />\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nimport ArrayLiteral from './array-literal-composition.uvue'\r\nimport ObjectType from \"./object-type-composition.uvue\";\r\nimport SameNamePropDefaultValue from \"./same-name-prop-default-value-composition.uvue\";\r\nimport PropsWithDefaults from \"./props-with-defaults.uvue\";\r\n\r\nconst str = 'str'\r\nconst num = 10\r\nconst bool = true\r\nconst obj = {age: 18}\r\nconst arr = ['a','b','c']\r\n</script>\r\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>\r\n <view class=\"page\">\r\n <array-literal :str=\"str\" :num=\"num\" :bool=\"bool\" :obj=\"obj\" :arr=\"arr\" />\r\n <object-type str=\"str\" :num=\"num\" :bool=\"bool\" :obj=\"obj\" :arr=\"arr\" />\r\n <same-name-prop-default-value />\r\n <props-with-defaults />\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nimport ArrayLiteral from './array-literal-options.uvue'\r\nimport ObjectType from \"./object-type-options.uvue\";\r\nimport SameNamePropDefaultValue from \"./same-name-prop-default-value-options.uvue\";\r\nimport PropsWithDefaults from \"./props-with-defaults.uvue\";\r\n\r\nexport default {\r\n components: {\r\n ArrayLiteral,\r\n ObjectType,\r\n SameNamePropDefaultValue,\r\n PropsWithDefaults\r\n },\r\n data() {\r\n return {\r\n str: 'str',\r\n num: 10,\r\n bool: true,\r\n obj: {age: 18},\r\n arr: ['a','b','c']\r\n }\r\n },\r\n}\r\n</script>\r\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>\r\n <view class='mt-10'>\r\n <text class=\"mb-10 bold\">withDefaults</text>\r\n <view class=\"mb-10 flex flex-row justify-between\">\r\n <text>msg</text>\r\n <text>{{ props.msg }}</text>\r\n </view>\r\n <view class=\"mb-10 flex flex-row justify-between\">\r\n <text>labels</text>\r\n <text>{{ JSON.stringify(props.labels) }}</text>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\ninterface CustomProps {\r\n msg: string\r\n labels : string[]\r\n}\r\n\r\nconst props = withDefaults(defineProps<CustomProps>(), {\r\n msg: 'hello',\r\n labels: ():string[] => ['a', 'b']\r\n})\r\n</script>\r\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>\r\n <view class=\"page\">\r\n <inject-comp />\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nimport InjectComp from '../inject/inject-composition.uvue';\r\n\r\nprovide('msg', 'hello');\r\nprovide('num', 0);\r\nprovide('obj', { a: 1 });\r\nprovide('arr', [1, 2, 3]);\r\nprovide('fn', () : string => 'hello');\r\n</script>\r\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>\r\n <!-- #ifdef APP -->\r\n <scroll-view style=\"flex: 1\">\r\n <!-- #endif -->\r\n <view class=\"page\">\r\n <text>provide page</text>\r\n <button class=\"mt-10\" @click=\"goProvidePage2\">\r\n 跳转函数方式定义 provide 示例\r\n </button>\r\n <ComponentForInject />\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\nimport ComponentForInject from '../inject/inject-options-1.uvue'\r\n\r\nexport default {\r\n components: {\r\n ComponentForInject\r\n },\r\n data(){\r\n return {\r\n title: '字面量方式定义 provide page title',\r\n obj: {\r\n title: 'data obj.title',\r\n content: 'data obj.content'\r\n },\r\n }\r\n },\r\n provide: {\r\n providePageStr: '字面量方式定义 provide page str',\r\n providePageNum: 1,\r\n providePageBool: true,\r\n providePageObject: {\r\n title: '字面量方式定义 provide page object title',\r\n content: '字面量方式定义 provide page object content'\r\n },\r\n providePageArr: ['字面量方式定义 provide page arr'],\r\n providePageMap: new Map<string, string>([['key', '字面量方式定义 provide page map']]),\r\n providePageSet: new Set<string>(['字面量方式定义 provide page set']),\r\n },\r\n methods: {\r\n goProvidePage2(){\r\n uni.navigateTo({\r\n url: '/pages/composition/provide/provide-page2'\r\n })\r\n }\r\n },\r\n}\r\n</script>\r\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>\r\n <!-- #ifdef APP -->\r\n <scroll-view style=\"flex: 1\">\r\n <!-- #endif -->\r\n <view class=\"page\">\r\n <text>provide page 2</text>\r\n <ComponentForInject />\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\nimport ComponentForInject from '../inject/inject-options-2.uvue'\r\n\r\nexport default {\r\n components: {\r\n ComponentForInject\r\n },\r\n data(){\r\n return {\r\n title: '函数方式定义 provide page title'\r\n }\r\n },\r\n provide(){\r\n return {\r\n providePageTitle: this.title,\r\n providePageStr: '函数方式定义 provide page str',\r\n providePageNum: 2,\r\n providePageBool: true,\r\n providePageObject: {\r\n title: '函数方式定义 provide page object title',\r\n content: '函数方式定义 provide page object content'\r\n },\r\n providePageArr: ['函数方式定义 provide page arr'],\r\n providePageMap: new Map<string, string>([['key', '函数方式定义 provide page map']]),\r\n providePageSet: new Set<string>(['函数方式定义 provide page set']),\r\n }\r\n }\r\n}\r\n</script>\r\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\">\r\nconst value = ref<string>('child value')\r\n</script>\r\n\r\n<template>\r\n {{ value }}\r\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>\r\nexport default {\r\n data() {\r\n return {\r\n value: 'child value'\r\n }\r\n }\r\n}\r\n</script>\r\n\r\n<template>\r\n {{ value }}\r\n</template>\r\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>\r\n <view class=\"page\">\r\n <view ref=\"nodeRef\">NodeRef: {{ refObject.existRef }}</view>\r\n <view ref=\"nodeRef\">childRef: {{ refObject.exisChildRef }}</view>\r\n <Child ref=\"childRef\">ComponentRef</Child>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nimport Child from './child-composition.uvue'\r\n\r\ntype RefObject = { existRef: boolean; exisChildRef: boolean }\r\n\r\n// NOTE 由于自动化测试读不到 ref，composition 改为使用 reactive\r\nconst refObject = reactive<RefObject>({\r\n existRef: false,\r\n exisChildRef: false\r\n} as RefObject)\r\n\r\nconst nodeRef = ref<ComponentPublicInstance | null>(null)\r\nconst childRef = ref<ComponentPublicInstance | null>(null)\r\n\r\nonReady(() => {\r\n refObject.existRef = nodeRef.value !== null\r\n refObject.exisChildRef = childRef.value !== null\r\n})\r\n\r\ndefineExpose({\r\n refObject\r\n})\r\n</script>\r\n\r\n<style>\r\n.row {\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: space-between;\r\n margin-bottom: 10px;\r\n}\r\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>\r\n <view class=\"page\">\r\n <view ref=\"node\">NodeRef: {{ existRef }}</view>\r\n <view ref=\"nodeRef\">childRef: {{ exisChildRef }}</view>\r\n <child ref=\"childRef\">ComponentRef</child>\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nimport child from './child-options.uvue'\r\n\r\nexport default {\r\n components: {\r\n child\r\n },\r\n data() {\r\n return {\r\n existRef: false,\r\n exisChildRef: false\r\n }\r\n },\r\n onReady() {\r\n this.existRef = this.$refs['node'] !== null\r\n this.exisChildRef = this.$refs['childRef'] !== null\r\n }\r\n}\r\n</script>\r\n\r\n<style>\r\n.row {\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: space-between;\r\n margin-bottom: 10px;\r\n}\r\n</style>\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>\r\n <view class=\"flex justify-between flex-row\">\r\n <text>root str in parent component: </text>\r\n <text id=\"root-str-child\">{{ rootStr }}</text>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst str = ref('child component str')\r\nconst rootStr = ref('')\r\n\r\nonMounted(() => {\r\n const instance = getCurrentInstance()!.proxy!\r\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</script>\r\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>\r\n <view class=\"flex justify-between flex-row\">\r\n <text>root str in parent component: </text>\r\n <text id=\"root-str-child\">{{ rootStr }}</text>\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nexport default {\r\n data () {\r\n return {\r\n str: 'child component str',\r\n rootStr: ''\r\n }\r\n },\r\n mounted() {\r\n this.rootStr = this.$root!.$data['str'] as string\r\n }\r\n}\r\n</script>\r\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>\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 lang=\"uts\">\r\nimport Child from './child-options.uvue'\r\n\r\nexport default {\r\n components: {Child},\r\n data () {\r\n return {\r\n str: 'root component str',\r\n rootStr: ''\r\n }\r\n },\r\n onReady() {\r\n this.rootStr = this.$root!.$data['str'] as string\r\n }\r\n}\r\n</script>\r\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>\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 mt-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 mt-10\">\r\n <text>num:</text>\r\n <text id=\"num\">{{ num }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mt-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 mt-10\">\r\n <text>count:</text>\r\n <text id=\"count\">{{ count }}</text>\r\n </view>\r\n <button class=\"mt-10\" id=\"increment-btn\" @click=\"increment\">\r\n increment count\r\n </button>\r\n <view class=\"flex justify-between flex-row mt-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 mt-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 mt-10\">\r\n <text>obj.bool:</text>\r\n <text id=\"obj-bool\">{{ obj['bool'] }}</text>\r\n </view>\r\n <button class=\"mt-10\" id=\"update-obj-btn\" @click=\"updateObj\">\r\n update obj\r\n </button>\r\n <!-- #ifdef APP -->\r\n <RenderFunction\r\n :str=\"str\"\r\n :count=\"count\"\r\n :obj=\"obj\"\r\n @compUpdateObj=\"compUpdateObj\"\r\n :isShow=\"true\" />\r\n <!-- #endif -->\r\n <Foo>\r\n <text class=\"mt-10\" id=\"default-slot-in-foo\">default slot in Foo</text>\r\n </Foo>\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// #ifdef APP\r\nimport RenderFunction from './RenderFunction.uvue'\r\n// #endif\r\nimport Foo from './Foo.uvue'\r\nexport default {\r\n components: {\r\n // #ifdef APP\r\n RenderFunction,\r\n // #endif\r\n Foo\r\n },\r\n setup() {\r\n const count = ref(0)\r\n // 函数只能通过声明变量,赋值函数的方式,不支持 function xxx(){}\r\n const increment = () => { count.value++ }\r\n const obj = reactive({\r\n str: 'obj default str',\r\n num: 0,\r\n bool: false,\r\n })\r\n const updateObj = () => {\r\n obj['str'] = 'obj new str'\r\n obj['num'] = 100\r\n obj['bool'] = true\r\n }\r\n const compUpdateObj = () => {\r\n obj['str'] = 'obj new str by comp update'\r\n obj['num'] = 200\r\n obj['bool'] = true\r\n }\r\n return {\r\n str: 'default str',\r\n num: 0,\r\n bool: false,\r\n count,\r\n increment,\r\n obj,\r\n updateObj,\r\n compUpdateObj\r\n }\r\n }\r\n}\r\n</script>\r\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>\r\n <view>\r\n <slot name=\"header\"></slot>\r\n <slot name=\"footer\"></slot>\r\n <slot></slot>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst slots = useSlots()\r\n\r\nconst hasSlots = (): boolean => {\r\n const header = slots['header']\r\n const footer = slots['footer']\r\n const def = slots['default']\r\n\r\n return header !== null && footer !== null && def !== null\r\n}\r\n\r\ndefineExpose({\r\n hasSlots\r\n})\r\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>\r\n <view>\r\n <slot name=\"header\"></slot>\r\n <slot name=\"footer\"></slot>\r\n <slot></slot>\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nexport default {\r\n mounted() {\r\n console.log(this.hasSlots())\r\n },\r\n methods: {\r\n hasSlots() : boolean {\r\n const header = this.$slots['header']\r\n const footer = this.$slots['footer']\r\n const def = this.$slots['default']\r\n\r\n return header !== null && footer !== null && def !== null\r\n }\r\n }\r\n}\r\n</script>\r\n\r\n<style scoped></style>\r\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>\r\n <view class=\"page\">\r\n <SlotComp class=\"slot-comp\">\r\n <template v-slot:header>header</template>\r\n <template v-slot:default>default</template>\r\n <template v-slot:footer>footer</template>\r\n </SlotComp>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n import SlotComp from './slot-composition.uvue'\r\n</script>\r\n\r\n<style>\r\n .row {\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: space-between;\r\n margin-bottom: 10px;\r\n }\r\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>\r\n <view class=\"page\">\r\n <slot-comp class=\"slot-comp\">\r\n <template v-slot:header>header</template>\r\n <template v-slot:default>default</template>\r\n <template v-slot:footer>footer</template>\r\n </slot-comp>\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\n import slot from './slot-options.uvue'\r\n\r\n export default {\r\n components: {\r\n slotComp: slot\r\n }\r\n }\r\n</script>\r\n\r\n<style>\r\n .row {\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: space-between;\r\n margin-bottom: 10px;\r\n }\r\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>\r\n <text class=\"mt-10 child-mixin-component-1\">{{ title }}</text>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nexport default {\r\n data(){\r\n return {\r\n title: 'child mixin component 1'\r\n }\r\n }\r\n}\r\n</script>\r\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>\r\n <text class=\"mt-10 child-mixin-component-2\">{{ title }}</text>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nexport default {\r\n data(){\r\n return {\r\n title: 'child mixin component 2'\r\n }\r\n }\r\n}\r\n</script>\r\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>\r\n <view class=\"mt-10\" ref=\"mixin-comp-root\">\r\n <text class=\"bold\">Comp1: inheritAttrs: false</text>\r\n <text class=\"mt-10\" style=\"color:#ccc;\"\r\n >rootElementTitle should be null</text\r\n >\r\n <text class=\"mt-10 root-element-title-1\">rootElementTitle: {{ rootElementTitle }}</text>\r\n <!-- #ifdef APP -->\r\n <text class=\"mt-10 bold\">trigger emitter:</text>\r\n <button class=\"mt-10 global-mixin-emit-1\" @click=\"triggerEmitter('globalMixinEmit1')\">\r\n trigger globalMixinEmit1\r\n </button>\r\n <button\r\n class=\"mt-10 global-child-mixin-emit-1\"\r\n @click=\"triggerEmitter('globalChildMixinEmit1')\">\r\n trigger globalChildMixinEmit1\r\n </button>\r\n <button class=\"mt-10 global-mixin-emit-2\" @click=\"triggerEmitter('globalMixinEmit2')\">\r\n trigger globalMixinEmit2\r\n </button>\r\n <button\r\n class=\"mt-10 global-child-mixin-emit-2\"\r\n @click=\"triggerEmitter('globalChildMixinEmit2')\">\r\n trigger globalChildMixinEmit2\r\n </button>\r\n <button class=\"mt-10 mixin-emit\" @click=\"triggerEmitter('mixinEmit')\">\r\n trigger mixinEmit\r\n </button>\r\n <button class=\"mt-10 child-mixin-emit\" @click=\"triggerEmitter('childMixinEmit')\">\r\n trigger childMixinEmit\r\n </button>\r\n <MixinComp />\r\n <!-- #endif -->\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nexport default {\r\n mixins:[{\r\n mixins: [{\r\n emits: ['childMixinEmit']\r\n }],\r\n inheritAttrs: false,\r\n emits:['mixinEmit']\r\n }],\r\n data(){\r\n return {\r\n rootElementTitle: '' as string | null\r\n }\r\n },\r\n mounted(){\r\n const rootElement = this.$refs['mixin-comp-root'] as UniElement\r\n this.rootElementTitle = JSON.stringify(rootElement.getAttribute('title'))\r\n },\r\n methods: {\r\n triggerEmitter(emit: string){\r\n this.$emit(emit, emit)\r\n },\r\n }\r\n}\r\n</script>\r\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\"\r\n >rootElementTitle: {{ rootElementTitle }}</text\r\n >\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\nimport CompForComp from './CompForComp.uvue'\r\n\r\nexport 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 this.globalMixinOnloadMsg1 = 'new globalMixinOnloadMsg1 changed in comp2'\r\n }\r\n }\r\n}\r\n</script>\r\n\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>\r\n <text class=\"mt-10 component-for-component\">{{ title }}</text>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nexport default {\r\n data(){\r\n return {\r\n title: 'component for component'\r\n }\r\n }\r\n}\r\n</script>\r\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>\r\n <text class=\"mt-10 component-for-page\">{{ title }}</text>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nexport default {\r\n data(){\r\n return {\r\n title: 'component for page'\r\n }\r\n }\r\n}\r\n</script>\r\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>\r\n <text class=\"mt-10 global-child-mixin-component-1\">{{ title }}</text>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nexport default {\r\n data(){\r\n return {\r\n title: 'global child mixin component 1'\r\n }\r\n }\r\n}\r\n</script>\r\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>\r\n <text class=\"mt-10 global-child-mixin-component-2\">{{ title }}</text>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nexport default {\r\n data(){\r\n return {\r\n title: 'global child mixin component 2'\r\n }\r\n }\r\n}\r\n</script>\r\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>\r\n <text class=\"mt-10 global-mixin-component-1\">{{ title }}</text>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nexport default {\r\n data(){\r\n return {\r\n title: 'global mixin component 1'\r\n }\r\n }\r\n}\r\n</script>\r\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>\r\n <text class=\"mt-10 global-mixin-component-2\">{{ title }}</text>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nexport default {\r\n data(){\r\n return {\r\n title: 'global mixin component 2'\r\n }\r\n }\r\n}\r\n</script>\r\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>\r\n <text class=\"mt-10 mixin-component-1\">{{ title }}</text>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nexport default {\r\n data(){\r\n return {\r\n title: 'mixin component 1'\r\n }\r\n }\r\n}\r\n</script>\r\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>\r\n <text class=\"mt-10 mixin-component-2\">{{ title }}</text>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nexport default {\r\n data(){\r\n return {\r\n title: 'mixin component 2'\r\n }\r\n }\r\n}\r\n</script>\r\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>\r\n <text class=\"mt-10 mixin-component-for-child-mixin\">{{ title }}</text>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nexport default {\r\n data(){\r\n return {\r\n title: 'mixin component for child mixin'\r\n }\r\n }\r\n}\r\n</script>\r\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>\r\n <text class=\"mt-10 mixin-component-for-global-child-mixin\">{{ title }}</text>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nexport default {\r\n data(){\r\n return {\r\n title: 'mixin component for global child mixin'\r\n }\r\n }\r\n}\r\n</script>\r\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>\r\n <text class=\"mt-10 mixin-component-for-global-mixin\">{{ title }}</text>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nexport default {\r\n data(){\r\n return {\r\n title: 'mixin component for global mixin'\r\n }\r\n }\r\n}\r\n</script>\r\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>\r\n <text class=\"mt-10 mixin-component-for-mixin\">{{ title }}</text>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nexport default {\r\n data(){\r\n return {\r\n title: 'mixin component for mixin'\r\n }\r\n }\r\n}\r\n</script>\r\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>\r\n <view class=\"page\">\r\n <!-- v-bind attribute -->\r\n <button id=\"disabled-btn\" class=\"mb-10\" :disabled=\"true\">\r\n :disabled true\r\n </button>\r\n <button id=\"v-bind-disabled-btn\" class=\"mb-10\" v-bind:disabled=\"false\">\r\n v-bind:disabled false\r\n </button>\r\n\r\n <!-- v-bind style -->\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>bind object style fontSize:</text>\r\n <text id=\"bind-object-style\" :style=\"{ fontSize: dataInfo.fontSize }\">\r\n {{ dataInfo.fontSize }}\r\n </text>\r\n </view>\r\n <view\r\n id=\"bind-array-style\"\r\n class=\"mb-10 p-10\"\r\n :style=\"[dataInfo.backgroundColor, dataInfo.border]\">\r\n <view>bind arr style</view>\r\n <view class=\"my-10\">{{ dataInfo.backgroundColor }}</view>\r\n <view>{{ dataInfo.border }}</view>\r\n </view>\r\n\r\n <!-- v-bind props -->\r\n <Foo\r\n :title=\"dataInfo.fooProps.title\"\r\n :num=\"dataInfo.fooProps.num\"\r\n :obj=\"dataInfo.fooProps.obj\" />\r\n\r\n <!-- v-bind in style -->\r\n <!-- #ifdef WEB -->\r\n <view class=\"mb-10 v-bind-css\"></view>\r\n <!-- #endif -->\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nimport Foo from './Foo-composition.uvue'\r\n\r\ntype FooPropsObj = {\r\n name : string\r\n}\r\ntype FooProps = {\r\n title : string\r\n num : number\r\n obj : FooPropsObj\r\n}\r\ntype DataInfo = {\r\n fontSize : string\r\n backgroundColor : string\r\n border : string\r\n fooProps : FooProps\r\n vBindClassBackgroundColor : string,\r\n vBindClassRpxHeight : string,\r\n}\r\n\r\nconst dataInfo = reactive({\r\n fontSize: '20px',\r\n backgroundColor: 'background-color: green',\r\n border: 'border: 2px solid red',\r\n fooProps: {\r\n title: 'foo title',\r\n num: 1,\r\n obj: {\r\n name: 'foo obj name',\r\n }\r\n },\r\n vBindClassBackgroundColor: 'red',\r\n vBindClassRpxHeight: '300rpx'\r\n} as DataInfo)\r\n\r\ndefineExpose({\r\n dataInfo\r\n})\r\n</script>\r\n\r\n<style>\r\n/* #ifdef WEB */\r\n.v-bind-css {\r\n background-color: v-bind(dataInfo.vBindClassBackgroundColor);\r\n height: v-bind(dataInfo.vBindClassRpxHeight);\r\n}\r\n/* #endif */\r\n</style>\r\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>\r\n <view class=\"page\">\r\n <!-- v-bind attribute -->\r\n <button id=\"disabled-btn\" class=\"mb-10\" :disabled=\"true\">:disabled true</button>\r\n <button id=\"v-bind-disabled-btn\" class=\"mb-10\" v-bind:disabled=\"false\">v-bind:disabled false</button>\r\n\r\n <!-- v-bind style -->\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>bind object style fontSize:</text>\r\n <text id=\"bind-object-style\" :style=\"{ fontSize: dataInfo.fontSize }\">\r\n {{ dataInfo.fontSize }}\r\n </text>\r\n </view>\r\n <view id=\"bind-array-style\" class=\"mb-10 p-10\" :style=\"[dataInfo.backgroundColor, dataInfo.border]\">\r\n <view>bind arr style</view>\r\n <view class=\"my-10\">{{ dataInfo.backgroundColor }}</view>\r\n <view>{{ dataInfo.border }}</view>\r\n </view>\r\n\r\n <!-- v-bind props -->\r\n <Foo :title=\"dataInfo.fooProps.title\" :num=\"dataInfo.fooProps.num\" :obj=\"dataInfo.fooProps.obj\" />\r\n\r\n <!-- v-bind in style -->\r\n <!-- #ifdef WEB -->\r\n <view class=\"mb-10 v-bind-css\"></view>\r\n <!-- #endif -->\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nimport Foo from './Foo-options.uvue'\r\n\r\ntype FooPropsObj = {\r\n name: string\r\n}\r\ntype FooProps = {\r\n title: string\r\n num: number\r\n obj: FooPropsObj\r\n}\r\ntype DataInfo = {\r\n fontSize: string\r\n backgroundColor: string\r\n border: string\r\n fooProps: FooProps\r\n vBindClassBackgroundColor: string\r\n vBindClassRpxHeight: string\r\n}\r\n\r\nexport default {\r\n components: { Foo },\r\n data() {\r\n return {\r\n dataInfo: {\r\n fontSize: '20px',\r\n backgroundColor: 'background-color: green',\r\n border: 'border: 2px solid red',\r\n fooProps: {\r\n title: 'foo title',\r\n num: 1,\r\n obj: {\r\n name: 'foo obj name'\r\n }\r\n },\r\n vBindClassBackgroundColor: 'red',\r\n vBindClassRpxHeight: '300rpx'\r\n } as DataInfo\r\n }\r\n }\r\n}\r\n</script>\r\n\r\n<style>\r\n/* #ifdef WEB */\r\n.v-bind-css {\r\n background-color: v-bind(dataInfo.vBindClassBackgroundColor);\r\n height: v-bind(dataInfo.vBindClassRpxHeight);\r\n}\r\n/* #endif */\r\n</style>\r\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>\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 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({ key1: 'value1', key2: 'value2', key3: 'value3' } as VForObject)\r\nconst listItems = ref([\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\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'])\n\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>\r\n <view v-html=\"html\" />\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst html = '<p class=\"p\" style=\"color: red;\">hello world for composition API!</p>'\r\n</script>\r\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>\r\n <view v-html=\"html\" />\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nexport default {\r\n data() {\r\n return {\r\n html: '<p class=\"p\" style=\"color: red;\">hello world for options API!</p>'\r\n }\r\n }\r\n}\r\n</script>\r\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>\r\n <view class=\"page\">\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>v-if</text>\r\n <text id=\"v-if-show\" v-if=\"show\">show</text>\r\n </view>\r\n <button id=\"switch-v-if-btn\" @click=\"show = !show\">switch v-if</button>\r\n\r\n <view class=\"mt-10 mb-10 flex justify-between flex-row\">\r\n <text>num:</text>\r\n <text id=\"num\">{{ num }}</text>\r\n </view>\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>v-if v-else-if v-else</text>\r\n <text id=\"num-v-if\" v-if=\"num == 1\">v-if num = 1</text>\r\n <text id=\"num-v-else-if\" v-else-if=\"num == 2\">v-else-if num = 2</text>\r\n <text id=\"num-v-else\" v-else>v-else</text>\r\n </view>\r\n <button id=\"change-num-btn\" @click=\"changeNum\">change num</button>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst show = ref(true)\r\nconst num = ref(1)\r\n\r\nconst changeNum = () => {\r\n if(num.value<3) {\r\n num.value++\r\n } else {\r\n num.value = 1\r\n }\r\n}\r\n</script>\r\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>\r\n <view class=\"page\">\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>v-if</text>\r\n <text id=\"v-if-show\" v-if=\"show\">show</text>\r\n </view>\r\n <button id=\"switch-v-if-btn\" @click=\"show = !show\">switch v-if</button>\r\n\r\n <view class=\"mt-10 mb-10 flex justify-between flex-row\">\r\n <text>num:</text>\r\n <text id=\"num\">{{ num }}</text>\r\n </view>\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>v-if v-else-if v-else</text>\r\n <text id=\"num-v-if\" v-if=\"num == 1\">v-if num = 1</text>\r\n <text id=\"num-v-else-if\" v-else-if=\"num == 2\">v-else-if num = 2</text>\r\n <text id=\"num-v-else\" v-else>v-else</text>\r\n </view>\r\n <button id=\"change-num-btn\" @click=\"changeNum\">change num</button>\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nexport default {\r\n data() {\r\n return {\r\n show: true,\r\n num: 1\r\n }\r\n },\r\n methods: {\r\n changeNum() {\r\n if(this.num<3) {\r\n this.num++\r\n } else {\r\n this.num = 1\r\n }\r\n },\r\n }\r\n}\r\n</script>\r\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>\r\n <view class=\"page\">\r\n <view class=\"flex flex-row justify-between mb-10\" v-memo=\"[]\">\r\n <text>msg will never change:</text>\r\n <text id=\"v-memo-never-change-msg\">{{ msg }}</text>\r\n </view>\r\n <view class=\"flex flex-row justify-between mb-10\">\r\n <text>msg:</text>\r\n <text id=\"msg\">{{ msg }}</text>\r\n </view>\r\n <view class=\"flex flex-row justify-between mb-10\" v-memo=\"[num]\">\r\n <text>msg will change when num chang:</text>\r\n <text id=\"v-memo-num-change-msg\">{{ msg }}</text>\r\n </view>\r\n <view class=\"flex flex-row justify-between mb-10\">\r\n <text>num:</text>\r\n <text id=\"num\">{{ num }}</text>\r\n </view>\r\n <button\r\n id=\"change-message-btn\"\r\n class=\"mb-10\"\r\n type=\"primary\"\r\n @click=\"changeMessage\">\r\n change message\r\n </button>\r\n <button\r\n id=\"increment-num-btn\"\r\n class=\"mb-10\"\r\n type=\"primary\"\r\n @click=\"incrementNum\">\r\n increment num\r\n </button>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst msg = ref('hello world')\r\n\r\nconst num = ref(0)\r\n\r\nconst changeMessage = () => {\r\n msg.value = 'msg changed'\r\n}\r\n\r\nconst incrementNum = () =>{\r\n num.value++\r\n}\r\n</script>\r\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>\r\n <view class=\"page\">\r\n <view class=\"flex flex-row justify-between mb-10\" v-memo=\"[]\">\r\n <text>msg will never change:</text>\r\n <text id=\"v-memo-never-change-msg\">{{ msg }}</text>\r\n </view>\r\n <view class=\"flex flex-row justify-between mb-10\">\r\n <text>msg:</text>\r\n <text id=\"msg\">{{ msg }}</text>\r\n </view>\r\n <view class=\"flex flex-row justify-between mb-10\" v-memo=\"[num]\">\r\n <text>msg will change when num chang:</text>\r\n <text id=\"v-memo-num-change-msg\">{{ msg }}</text>\r\n </view>\r\n <view class=\"flex flex-row justify-between mb-10\">\r\n <text>num:</text>\r\n <text id=\"num\">{{ num }}</text>\r\n </view>\r\n <button\r\n id=\"change-message-btn\"\r\n class=\"mb-10\"\r\n type=\"primary\"\r\n @click=\"changeMessage\">\r\n change message\r\n </button>\r\n <button\r\n id=\"increment-num-btn\"\r\n class=\"mb-10\"\r\n type=\"primary\"\r\n @click=\"incrementNum\">\r\n increment num\r\n </button>\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nexport default {\r\n data() {\r\n return {\r\n msg: 'hello world',\r\n num: 0\r\n }\r\n },\r\n methods: {\r\n changeMessage() {\r\n this.msg = 'msg changed'\r\n },\r\n incrementNum(){\r\n this.num++\r\n }\r\n }\r\n}\r\n</script>\r\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>\r\n <view>\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>v-model in Foo:</text>\r\n <text id=\"model-value-text\">{{ modelValue }}</text>\r\n </view>\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>v-model:msg in Foo:</text>\r\n <text id=\"model-msg-text\">{{ msg }}</text>\r\n </view>\r\n\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>defineModel num:</text>\r\n <text id=\"model-num-text\">{{ num }}</text>\r\n </view>\r\n <button class=\"mb-10\" id=\"update-value-btn\" @click=\"updateValue\">\r\n update value\r\n </button>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n// 在被修改时，触发 \"update:modelValue\" 事件\r\nconst modelValue = defineModel({ type: String })\r\n\r\n// 在被修改时，触发 \"update:msg\" 事件\r\nconst msg = defineModel('msg', { type: String, default: 'default msg' })\r\n\r\nconst num = defineModel('num', { type: Number, default: 1 })\r\n\r\nconst updateValue = () => {\r\n modelValue.value += '1'\r\n msg.value += '2'\r\n num.value++\r\n}\r\n</script>\r\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>\r\n <view class=\"page\">\r\n <Foo\r\n v-model=\"str\"\r\n v-model:msg=\"msg\"\r\n @update:modelValue=\"handleModelValueUpdate\"\r\n @update:msg=\"handleModelMsgUpdate\" />\r\n <input class=\"mb-10 input\" id=\"model-value-input\" v-model=\"str\" />\r\n <input class=\"mb-10 input\" id=\"model-msg-input\" v-model=\"msg\" />\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>handle modelValue update res:</text>\r\n <text id=\"handle-model-value-update-res\">{{ handleModelValueUpdateRes }}</text>\r\n </view>\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>handle model msg update res:</text>\r\n <text id=\"handle-model-msg-update-res\">{{ handleModelMsgUpdateRes }}</text>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nimport Foo from './Foo-composition.uvue'\r\n\r\nconst str = ref('str')\r\nconst msg = ref('msg')\r\n\r\nconst handleModelValueUpdateRes = ref('')\r\nconst handleModelValueUpdate = (val : string) => {\r\n handleModelValueUpdateRes.value = val\r\n}\r\nconst handleModelMsgUpdateRes = ref('')\r\nconst handleModelMsgUpdate = (val : string) => {\r\n handleModelMsgUpdateRes.value = val\r\n}\r\n</script>\r\n\r\n<style>\r\n.input {\r\n padding: 8px 10px;\r\n border: 1px solid #ccc;\r\n border-radius: 4px;\r\n}\r\n</style>\r\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>\r\n <view class=\"page\">\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>str:</text>\r\n <text id=\"str\">{{ str }}</text>\r\n </view>\r\n <input class=\"mb-10 input\" id=\"model-str\" v-model=\"str\" />\r\n <input class=\"mb-10 input\" id=\"model-num\" v-model.number=\"num\" type=\"text\" />\r\n <input class=\"mb-10 input\" id=\"model-str-trim\" v-model.trim=\"strForTrim\" />\r\n <input class=\"mb-10 input\" id=\"model-str-lazy\" v-model.lazy=\"str\" type=\"text\" />\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>typeof num:</text>\r\n <text id=\"typeof-num\">{{ typeof num }}</text>\r\n </view>\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>str for trim length:</text>\r\n <text id=\"str-length\">{{ strForTrim.length }}</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 str: 'str',\r\n num: 1,\r\n strForTrim: ' abc ',\r\n }\r\n },\r\n}\r\n</script>\r\n\r\n<style>\r\n.input {\r\n padding: 8px 10px;\r\n border: 1px solid #ccc;\r\n border-radius: 4px;\r\n}\r\n</style>\r\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>\r\n <view class=\"page\">\r\n <view class=\"flex flex-row justify-between mb-10\" v-once>\r\n <text>This msg will never change:</text>\r\n <text id='v-once-msg'>{{ msg }}</text>\r\n </view>\r\n <view class=\"flex flex-row justify-between mb-10\">\r\n <text>msg:</text>\r\n <text id=\"msg\">{{ msg }}</text>\r\n </view>\r\n <button id=\"btn\" class=\"mb-10\" type=\"primary\" @click=\"changeMessage\">\r\n change message\r\n </button>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n const msg = ref('hello world')\r\n const changeMessage = () => {\r\n msg.value = 'msg changed'\r\n }\r\n</script>\r\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>\r\n <view class=\"page\">\r\n <view class=\"flex flex-row justify-between mb-10\" v-once>\r\n <text>This msg will never change:</text>\r\n <text id='v-once-msg'>{{ msg }}</text>\r\n </view>\r\n <view class=\"flex flex-row justify-between mb-10\">\r\n <text>msg:</text>\r\n <text id=\"msg\">{{ msg }}</text>\r\n </view>\r\n <button id=\"btn\" class=\"mb-10\" type=\"primary\" @click=\"changeMessage\">\r\n change message\r\n </button>\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nexport default {\r\n data() {\r\n return {\r\n msg: 'hello world'\r\n }\r\n },\r\n methods: {\r\n changeMessage() {\r\n this.msg = 'msg changed'\r\n }\r\n }\r\n}\r\n</script>\r\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>\r\n <view class=\"page\">\r\n <text class=\"bold mb-10\">v-pre 跳过该元素及其所有子元素的编译</text>\r\n <text class=\"mb-10 v-pre-text\" v-pre>{{ this will not be compiled }}</text>\r\n </view>\r\n</template>\r\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>\r\n <view class=\"page\">\r\n <button id=\"toggle-btn\" @click=\"toggleShow\">toggle show/hide</button>\r\n <view class=\"v-show-element mt-10\" v-show=\"dataInfo.show\">\r\n 点击上方按钮，切换显示/隐藏\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\ntype DataInfo = {\r\n show: boolean\r\n}\r\n\r\nconst dataInfo = reactive({\r\n show: true\r\n} as DataInfo)\r\n\r\nconst toggleShow = () => {\r\n dataInfo.show = !dataInfo.show\r\n}\r\n\r\ndefineExpose({\r\n dataInfo\r\n})\r\n</script>\r\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>\r\n <view class=\"page\">\r\n <button id=\"toggle-btn\" @click=\"toggleShow\">toggle show/hide</button>\r\n <view class=\"v-show-element mt-10\" v-show=\"dataInfo.show\">\r\n 点击上方按钮，切换显示/隐藏\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\ntype DataInfo = {\r\n show: boolean\r\n}\r\n\r\nexport default {\r\n data() {\r\n return {\r\n dataInfo: {\r\n show: true\r\n } as DataInfo\r\n }\r\n },\r\n methods: {\r\n toggleShow() {\r\n this.dataInfo.show = !this.dataInfo.show\r\n }\r\n }\r\n}\r\n</script>\r\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>\r\n <view>\r\n <slot name=\"header\" :msg=\"msg\"></slot>\r\n <slot :num=\"num\"></slot>\r\n <slot name=\"footer\" :arr=\"arr\"></slot>\r\n </view>\r\n</template>\r\n\r\n<script setup lang='uts'>\r\n const msg = ref('foo msg')\r\n const num = ref<number>(0)\r\n const arr = ref<string[]>(['a', 'b', 'c'])\r\n\r\n defineSlots<{\r\n header(props : { msg : string }) : any,\r\n default(props : { num : number }) : any,\r\n footer(props : { arr : string[] }) : any\r\n }>()\r\n</script>\r\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>\r\n <view>\r\n <slot name=\"header\" :msg=\"msg\"></slot>\r\n <slot :num=\"num\"></slot>\r\n <slot name=\"footer\" :arr=\"arr\"></slot>\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\n export default {\r\n slots: Object as SlotsType<{\r\n header: { msg: string }\r\n default: { num: number }\r\n footer: { arr: string[] }\r\n }>,\r\n data(){\r\n return {\r\n msg: 'foo msg',\r\n num: 0,\r\n arr: ['a','b', 'c']\r\n }\r\n }\r\n }\r\n</script>\r\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>\r\n <view class=\"page\">\r\n <Foo>\r\n <template #header=\"{ msg }\">\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>header slot msg:</text>\r\n <text id=\"slot-header\">{{ msg }}</text>\r\n </view>\r\n </template>\r\n <template #default=\"{ num }\">\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>default slot num:</text>\r\n <text id=\"slot-default\">{{ num }}</text>\r\n </view>\r\n </template>\r\n <template #footer=\"{ arr }\">\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>footer slot arr:</text>\r\n <text id=\"slot-footer\">{{ JSON.stringify(arr) }}</text>\r\n </view>\r\n </template>\r\n </Foo>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nimport Foo from './Foo-composition.uvue'\r\n</script>\r\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>\r\n <view class=\"page\">\r\n <Foo>\r\n <template #header=\"{ msg }\">\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>header slot msg:</text>\r\n <text id=\"slot-header\">{{ msg }}</text>\r\n </view>\r\n </template>\r\n <template #default=\"{ num }\">\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>default slot num:</text>\r\n <text id=\"slot-default\">{{ num }}</text>\r\n </view>\r\n </template>\r\n <template #footer=\"{ arr }\">\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>footer slot arr:</text>\r\n <text id=\"slot-footer\">{{ JSON.stringify(arr) }}</text>\r\n </view>\r\n </template>\r\n </Foo>\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nimport Foo from './Foo-options.uvue'\r\nexport default {\r\n components: {Foo}\r\n}\r\n</script>\r\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>\r\n <view class=\"page\">\r\n <view class=\"flex flex-row justify-between mb-10\">\r\n <text>v-txt for text:</text>\r\n <text id=\"v-text-text\" v-text=\"vTextForText\"></text>\r\n </view>\r\n <view class=\"flex flex-row justify-between mb-10\">\r\n <text>v-txt for view:</text>\r\n <view id=\"v-text-view\" v-text=\"vTextForView\"></view>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst vTextForText = ref('v-text for text')\r\nconst vTextForView = ref('v-text for view')\r\n</script>\r\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>\r\n <view class=\"page\">\r\n <view class=\"flex flex-row justify-between mb-10\">\r\n <text>v-txt for text:</text>\r\n <text id=\"v-text-text\" v-text=\"vTextForText\"></text>\r\n </view>\r\n <view class=\"flex flex-row justify-between mb-10\">\r\n <text>v-txt for view:</text>\r\n <view id=\"v-text-view\" v-text=\"vTextForView\"></view>\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 vTextForText: 'v-text for text',\r\n vTextForView: 'v-text for view',\r\n }\r\n }\r\n}\r\n</script>\r\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>\r\n <view class=\"page\">\r\n <text>{{ arr[1] }}</text>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst arr = [0]\r\n</script>\r\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>\r\n <view class=\"page\">\r\n <text>{{ arr[1] }}</text>\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 arr: [0]\r\n }\r\n }\r\n }\r\n</script>\r\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>\r\n <view class=\"page\">\r\n <view class=\"flex-row\">\r\n 父组件:\r\n <text class=\"parent-msg\">{{ msg }}</text>\r\n </view>\r\n <button class=\"parent-btn\" @click=\"change\">父组件改变数据</button>\r\n <child />\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nimport child from './components/child.uvue'\r\nimport { setComponentMsg, state } from '@/store/index.uts'\r\n\r\nconst msg = computed<number>((): number => state.componentMsg)\r\n\r\nconst change = () => {\r\n setComponentMsg(state.componentMsg + 1)\r\n}\r\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>\r\n <view class=\"page\">\r\n <view class=\"flex-row\">\r\n 父组件:\r\n <text class=\"parent-msg\">{{ msg }}</text>\r\n </view>\r\n <button class=\"parent-btn\" @click=\"change\">父组件改变数据</button>\r\n <child></child>\r\n </view>\r\n</template>\r\n\r\n<script>\r\nimport child from './components/child.uvue'\r\nimport { setComponentMsg, state } from '@/store/index.uts'\r\nexport default {\r\n components: {\r\n child\r\n },\r\n computed: {\r\n msg(): number {\r\n return state.componentMsg\r\n }\r\n },\r\n methods: {\r\n change() {\r\n setComponentMsg(state.componentMsg + 1)\r\n }\r\n }\r\n}\r\n</script>\r\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>\r\n <view>\r\n <button class=\"btn-child bg-orange\">button in child page</button>\r\n </view>\r\n</template>\r\n\r\n<style>\r\n.btn-child {\r\n width: 300px;\r\n color: rgb(83, 156, 234);\r\n}\r\n.bg-orange{\r\n background-color: rgb(214, 154, 50);\r\n}\r\n</style>\r\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>\r\n <view>\r\n <button class=\"btn-page bg-green\">button in parent page</button>\r\n <Child />\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nimport Child from './child.uvue'\r\n</script>\r\n\r\n<style>\r\n.btn-page {\r\n width: 280px;\r\n color: rgb(209, 51, 51);\r\n}\r\n.bg-green {\r\n background-color: rgb(105, 154, 105);\r\n}\r\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>\r\n <view>\r\n <button class=\"btn-page bg-green\">button in parent page</button>\r\n <Child />\r\n </view>\r\n</template>\r\n\r\n<script lang='uts'>\r\nimport Child from \"./child.uvue\";\r\nexport default {\r\n components: {\r\n Child\r\n }\r\n}\r\n</script>\r\n\r\n<style>\r\n.btn-page {\r\n width: 280px;\r\n color: rgb(209, 51, 51);\r\n}\r\n.bg-green{\r\n background-color: rgb(105, 154, 105);\r\n}\r\n</style>\r\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>\r\n <view class=\"child\">\r\n <view class=\"flex-row\">\r\n 子组件:\r\n <text class=\"child-msg\">{{ msg }}</text>\r\n </view>\r\n <grand-child></grand-child>\r\n </view>\r\n</template>\r\n\r\n<script>\r\nimport grandChild from './grandChild.uvue'\r\nimport { state } from '@/store/index.uts'\r\nexport default {\r\n components: {\r\n grandChild\r\n },\r\n computed: {\r\n msg(): number {\r\n return state.componentMsg\r\n }\r\n }\r\n}\r\n</script>\r\n<style>\r\n.child {\r\n margin-top: 10px;\r\n}\r\n</style>\r\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>\r\n <view class=\"child\">\r\n <view class=\"flex-row\">\r\n 孙组件:\r\n <text class=\"grandchild-msg\">{{ msg }}</text>\r\n </view>\r\n <button class=\"grandchild-btn\" @click=\"change\">孙组件清空数据</button>\r\n </view>\r\n</template>\r\n\r\n<script>\r\nimport { state, setComponentMsg } from '@/store/index.uts'\r\nexport default {\r\n computed: {\r\n msg(): number {\r\n return state.componentMsg\r\n }\r\n },\r\n methods: {\r\n change() {\r\n setComponentMsg(0)\r\n }\r\n }\r\n}\r\n</script>\r\n\r\n<style>\r\n.child {\r\n margin-top: 10px;\r\n}\r\n</style>\r\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>\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>onShow 触发：</text>\r\n <text>{{ isOnShowTriggered }}</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>onHide 触发：</text>\r\n <text>{{ isOnHideTriggered }}</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<MonitorPageLifecycleOptions />\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 lang=\"uts\">\r\nimport { state, setLifeCycleNum } from '@/store/index.uts'\nimport MonitorPageLifecycleOptions from './monitor-page-lifecycle-options.uvue'\r\n type DataInfo = {\r\n \tisScrolled: boolean\r\n }\r\nexport default {\n\tcomponents: { MonitorPageLifecycleOptions },\r\n\tdata() {\r\n\t\treturn {\r\n\t\t\tisOnloadTriggered: false,\r\n\t\t\tisOnShowTriggered: false,\r\n\t\t\tisOnReadyTriggered: false,\r\n\t\t\tisOnPullDownRefreshTriggered: false,\r\n\t\t\tisOnPageScrollTriggered: false,\r\n\t\t\tisOnReachBottomTriggered: false,\r\n\t\t\tisOnBackPressTriggered: false,\r\n\t\t\tisOnHideTriggered: false,\r\n\t\t\tisOnResizeTriggered: false,\r\n\t\t\tdataInfo: {\r\n isScrolled: false,\r\n } as DataInfo\r\n\t\t}\r\n\t},\r\n\tonLoad(options : OnLoadOptions) {\r\n\t\tconsole.log('onLoad', options)\r\n\t\tthis.isOnloadTriggered = true\r\n\t\t// 自动化测试\r\n\t\tsetLifeCycleNum(state.lifeCycleNum + 100)\r\n\t},\r\n\tonShow() {\r\n\t\tthis.isOnShowTriggered = true\r\n\t\t// 自动化测试\r\n\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\r\n\t},\r\n\tonReady() {\r\n\t\tthis.isOnReadyTriggered = true\r\n\t\t// 自动化测试\r\n\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\r\n\t},\r\n\tonPullDownRefresh() {\r\n\t\tthis.isOnPullDownRefreshTriggered = true\r\n\t\t// 自动化测试\r\n\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\r\n\t},\r\n\tonPageScroll(e: OnPageScrollOptions) {\r\n\t\tconsole.log('onPageScroll', e)\r\n \tthis.isOnPageScrollTriggered = true\r\n\t\t// 自动化测试\r\n\t\tthis.dataInfo.isScrolled = true\r\n\t},\r\n\tonReachBottom() {\r\n\t\tthis.isOnReachBottomTriggered = true\r\n\t\t// 自动化测试\r\n\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\r\n\t},\r\n\tonBackPress(options : OnBackPressOptions) : boolean | null {\r\n\t\tconsole.log('onBackPress', options)\r\n\t\tthis.isOnBackPressTriggered = true\r\n\t\t// 自动化测试\r\n\t\tsetLifeCycleNum(state.lifeCycleNum - 10)\r\n\t\treturn null\r\n\t},\r\n\tonHide() {\r\n\t\tthis.isOnHideTriggered = true\r\n\t\t// 自动化测试\r\n\t\tsetLifeCycleNum(state.lifeCycleNum - 10)\r\n\t},\r\n\tonUnload() {\r\n\t\t// 自动化测试\r\n\t\tsetLifeCycleNum(state.lifeCycleNum - 100)\r\n\t},\r\n\tonResize(options: OnResizeOptions) {\r\n\t\tconsole.log('onBackPress', options)\r\n\t\tthis.isOnResizeTriggered = true\r\n\t\t// 自动化测试\r\n\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\r\n\t},\r\n\tmethods: {\r\n\t\t// 自动化测试\r\n\t\tpageGetLifeCycleNum() : number {\r\n\t\t\treturn state.lifeCycleNum\r\n\t\t},\r\n\t\t// 自动化测试\r\n\t\tpageSetLifeCycleNum(num : number) {\r\n\t\t\tsetLifeCycleNum(num)\r\n\t\t},\r\n\t\t// 自动化测试\r\n\t\tpullDownRefresh() {\r\n\t\t\tuni.startPullDownRefresh({\r\n\t\t\t\tsuccess() {\r\n\t\t\t\t\tsetTimeout(() => {\r\n\t\t\t\t\t\tuni.stopPullDownRefresh()\r\n\t\t\t\t\t\t// 一秒后立即停止下拉刷新不会触发 onPullDownRefresh，因为下拉动画时间大概需要1.1～1.2秒\r\n\t\t\t\t\t}, 1500)\r\n\t\t\t\t},\r\n\t\t\t})\r\n\t\t},\r\n\t\tscrollToBottom() {\r\n\t\t\tuni.pageScrollTo({\r\n\t\t\t\tscrollTop: 2000,\r\n\t\t\t})\r\n\t\t},\r\n\t},\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-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\">\r\nimport CompForHFunction from '@/components/CompForHFunction.uvue'\r\n\r\ndefineOptions({\r\n data() {\r\n return {\r\n msg: 'default msg'\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(CompForHFunction, {}, (): VNode[] => [h('text', { class: 'comp-slot' }, 'component slot')]),\r\n h('text', { class: 'uni-common-mt msg', style: { color: 'blue' } }, instance.$data['msg']),\r\n h(\r\n 'button',\r\n {\r\n class: 'uni-common-mt btn',\r\n type: 'primary',\r\n onClick: () => {\r\n instance.$data['msg'] = 'new msg'\r\n }\r\n },\r\n 'click'\r\n )\r\n ])\r\n }\r\n})\r\n</script>\r\n\r\n<style>\r\n.btn {\r\n color: red;\r\n}\r\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\">\r\nimport CompForHFunction from '@/components/CompForHFunction.uvue'\r\nexport default {\r\n data() {\r\n return {\r\n msg: 'default msg'\r\n }\r\n },\r\n render(): VNode {\r\n return h('view', { class: 'page' }, [\r\n h(CompForHFunction, {}, (): VNode[] => [h('text', { class: 'comp-slot' }, 'component slot')]),\r\n h('text', { class: 'uni-common-mt msg', style: { color: 'blue' } }, this.msg),\r\n h(\r\n 'button',\r\n {\r\n class: 'uni-common-mt btn',\r\n type: 'primary',\r\n onClick: () => {\r\n this.msg = 'new msg'\r\n }\r\n },\r\n 'click'\r\n )\r\n ])\r\n }\r\n}\r\n</script>\r\n\r\n<style>\r\n.btn {\r\n color: red;\r\n}\r\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>\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\">include=\"Counter,Message\"</text>\r\n <KeepAlive include=\"Counter,Message\">\r\n <component :is=\"currentComponent\"></component>\r\n </KeepAlive>\r\n <view class=\"hr\"></view>\r\n <text class=\"bold mt-10 mb-10\">:include=\"/Counter|Message/\"</text>\r\n <KeepAlive :include=\"/Counter|Message/\">\r\n <component :is=\"currentComponent\"></component>\r\n </KeepAlive>\r\n <view class=\"hr\"></view>\r\n <text class=\"bold mb-10 mb-10\">:include=\"['Counter', 'Message']\"</text>\r\n <KeepAlive :include=\"['Counter', 'Message']\">\r\n <component :is=\"currentComponent\"></component>\r\n </KeepAlive>\r\n <view class=\"hr\"></view>\r\n <text class=\"bold mt-10 mb-10\">exclude=\"ShouldExclude\"</text>\r\n <KeepAlive exclude=\"ShouldExclude\">\r\n <component :is=\"currentComponent\"></component>\r\n </KeepAlive>\r\n <view class=\"hr\"></view>\r\n <text class=\"bold mt-10 mb-10\">:max=\"2\"</text>\r\n <KeepAlive :max=\"2\">\r\n <component :is=\"currentComponent\"></component>\r\n </KeepAlive>\r\n <view class=\"hr\"></view>\r\n <button class=\"mt-10 show-counter\" @click=\"changeComponent('Counter')\">show Counter</button>\r\n <button class=\"mt-10 show-message\" @click=\"changeComponent('Message')\">show Message</button>\r\n <button class=\"mt-10 show-should-exclude\" @click=\"changeComponent('ShouldExclude')\">show ShouldExclude</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 Counter from '@/components/keep-alive/Counter.uvue'\r\nimport Message from '@/components/keep-alive/Message.uvue'\r\nimport ShouldExclude from '@/components/keep-alive/ShouldExclude.uvue'\r\n\r\ndefineOptions({\r\n components: {\r\n Counter,\r\n Message,\r\n ShouldExclude\r\n }\r\n})\r\n\r\nconst currentComponent = ref<string>('ShouldExclude')\r\n\r\nconst changeComponent = (componentName: string) => {\r\n currentComponent.value = componentName\r\n}\r\n</script>\r\n\r\n<style>\r\n.hr {\r\n margin: 30rpx 0;\r\n border-bottom: 1px solid #ccc;\r\n}\r\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>\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\">include \"Counter,Message\"</text>\r\n <KeepAlive include=\"Counter,Message\">\r\n <component :is=\"currentComponent\"></component>\r\n </KeepAlive>\r\n <view class=\"hr\"></view>\r\n <text class=\"bold mt-10 mb-10\">include \"/Counter|Message/\"</text>\r\n <KeepAlive :include=\"/Counter|Message/\">\r\n <component :is=\"currentComponent\"></component>\r\n </KeepAlive>\r\n <view class=\"hr\"></view>\r\n <text class=\"bold mt-10 mb-10\">include \"['Counter', 'Message']\"</text>\r\n <KeepAlive :include=\"['Counter', 'Message']\">\r\n <component :is=\"currentComponent\"></component>\r\n </KeepAlive>\r\n <view class=\"hr\"></view>\r\n <text class=\"bold mt-10 mb-10\">exclude \"ShouldExclude\"</text>\r\n <KeepAlive exclude=\"ShouldExclude\">\r\n <component :is=\"currentComponent\"></component>\r\n </KeepAlive>\r\n <view class=\"hr\"></view>\r\n <text class=\"bold mt-10 mb-10\">max 2</text>\r\n <KeepAlive :max=\"2\">\r\n <component :is=\"currentComponent\"></component>\r\n </KeepAlive>\r\n <view class=\"hr\"></view>\r\n <button class=\"mt-10 show-counter\" @click=\"changeComponent('Counter')\">show Counter</button>\r\n <button class=\"mt-10 show-message\" @click=\"changeComponent('Message')\">show Message</button>\r\n <button class=\"mt-10 show-should-exclude\" @click=\"changeComponent('ShouldExclude')\">show ShouldExclude</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\nimport Counter from '@/components/keep-alive/Counter.uvue'\r\nimport Message from '@/components/keep-alive/Message.uvue'\r\nimport ShouldExclude from '@/components/keep-alive/ShouldExclude.uvue'\r\nexport default {\r\n components: {\r\n Counter,\r\n Message,\r\n ShouldExclude\r\n },\r\n data() {\r\n return {\r\n currentComponent: 'ShouldExclude'\r\n }\r\n },\r\n methods: {\r\n changeComponent(componentName: string) {\r\n this.currentComponent = componentName\r\n }\r\n }\r\n}\r\n</script>\r\n\r\n<style>\r\n.hr {\r\n margin-top: 30rpx;\r\n border-bottom: 1px solid #ccc;\r\n}\r\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>\r\n <!-- #ifdef APP -->\r\n <scroll-view style=\"flex: 1\">\r\n <!-- #endif -->\r\n <view id=\"container\" class=\"container\">\r\n <text class=\"text\">.container 区域</text>\r\n <view id=\"content1\" class=\"content content-1\">\r\n <text class=\"text\">content1 区域</text>\r\n </view>\r\n <view id=\"content2\" class=\"content content-2\">\r\n <text class=\"text\">content2 区域</text>\r\n </view>\r\n <teleport v-if=\"show\" to=\"#content1\" :disabled=\"disabled\">\r\n <view class=\"send-content\">\r\n <text class=\"send-content-text\">内容在.container中，使用teleport在#content1元素中展示</text>\r\n </view>\r\n </teleport>\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\nconst to = ref<string>('content1')\r\nconst showingString = ref<string>('穿梭内容在 body 中')\r\nconst disabled = ref<boolean>(false)\r\nconst show = ref<boolean>(false)\r\n\r\nonReady(() => {\r\n // 需要等内容挂载后，teleport才生效\r\n show.value = true\r\n})\r\nconst changePosition = () => {\r\n to.value = '#content1'\r\n}\r\n\r\ndefineExpose({\r\n changePosition\r\n})\r\n</script>\r\n\r\n<style>\r\n.container {\r\n background-color: #f5f5f5;\r\n border: 1px #ccc solid;\r\n margin: 5px;\r\n padding: 10px;\r\n}\r\n\r\n.text {\r\n margin: 5px 0;\r\n}\r\n\r\n.content {\r\n height: 120px;\r\n border: 1px #ccc solid;\r\n margin: 5px;\r\n padding: 10px;\r\n}\r\n\r\n.send-content {\r\n padding: 5px;\r\n background-color: #ff5a5f;\r\n height: 50px;\r\n}\r\n\r\n.send-content-text {\r\n color: #fff;\r\n font-size: 12px;\r\n}\r\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>\r\n <!-- #ifdef APP -->\r\n <scroll-view style=\"flex: 1\">\r\n <!-- #endif -->\r\n <view id=\"container\" class=\"container\">\r\n <text class=\"text\">.container 区域</text>\r\n <view id=\"content1\" class=\"content content-1\">\r\n <text class=\"text\">content1 区域</text>\r\n </view>\r\n <view id=\"content2\" class=\"content content-2\">\r\n <text class=\"text\">content2 区域</text>\r\n </view>\r\n <teleport v-if=\"show\" to=\"#content1\" :disabled=\"disabled\">\r\n <view class=\"send-content\">\r\n <text class=\"send-content-text\">内容在.container中，使用teleport在#content1元素中展示</text>\r\n </view>\r\n </teleport>\r\n </view>\r\n <!-- #ifdef APP -->\r\n </scroll-view>\r\n <!-- #endif -->\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n data() {\r\n return {\r\n to: 'content1',\r\n disabled: false,\r\n showingString: '穿梭内容在 body 中',\r\n show: false\r\n }\r\n },\r\n onReady() {\r\n // 需要等内容挂载后，teleport才生效\r\n this.show = true\r\n },\r\n methods: {\r\n changePosition() {\r\n this.to = '#content1'\r\n }\r\n }\r\n}\r\n</script>\r\n\r\n<style>\r\n.container {\r\n background-color: #f5f5f5;\r\n border: 1px #ccc solid;\r\n margin: 5px;\r\n padding: 10px;\r\n}\r\n.text {\r\n margin: 5px 0;\r\n}\r\n\r\n.content {\r\n height: 120px;\r\n border: 1px #ccc solid;\r\n margin: 5px;\r\n padding: 10px;\r\n}\r\n\r\n.send-content {\r\n padding: 5px;\r\n background-color: #ff5a5f;\r\n height: 50px;\r\n}\r\n\r\n.send-content-text {\r\n color: #fff;\r\n font-size: 12px;\r\n}\r\n</style>\r\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>\r\n <view class=\"container\">\r\n <component :is=\"currentComponentStr\" />\r\n <component :is=\"currentComponentInstance\" />\r\n <button @click=\"changeCurrentComponent\">change current component</button>\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nimport Foo from '../../../../components/Foo.uvue'\r\nimport Bar from '../../../../components/Bar.uvue'\r\nexport default {\r\n components: {\r\n Foo,\r\n Bar\r\n },\r\n data() {\r\n return {\r\n currentComponentStr: 'Foo',\r\n currentComponentInstance: Foo\r\n }\r\n },\r\n methods: {\r\n changeCurrentComponent() {\r\n if (this.currentComponentStr === 'Foo') {\r\n this.currentComponentStr = 'Bar'\r\n this.currentComponentInstance = Bar\r\n } else {\r\n this.currentComponentStr = 'Foo'\r\n this.currentComponentInstance = Foo\r\n }\r\n }\r\n }\r\n}\r\n</script>\r\n\r\n<style>\r\n.item {\r\n display: flex;\r\n flex-direction: row;\r\n margin: 15px;\r\n border: #eee solid 1px;\r\n}\r\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>\r\n <view class=\"container\">\r\n <component :is=\"currentComponentStr\" />\r\n <component :is=\"currentComponentInstance\" />\r\n <button @click=\"changeCurrentComponent\">change current component</button>\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nimport Foo from '../../../../components/Foo.uvue'\r\nimport Bar from '../../../../components/Bar.uvue'\r\nexport default {\r\n components: {\r\n Foo,\r\n Bar\r\n },\r\n data() {\r\n return {\r\n currentComponentStr: 'Foo',\r\n currentComponentInstance: Foo\r\n }\r\n },\r\n methods: {\r\n changeCurrentComponent() {\r\n if (this.currentComponentStr === 'Foo') {\r\n this.currentComponentStr = 'Bar'\r\n this.currentComponentInstance = Bar\r\n } else {\r\n this.currentComponentStr = 'Foo'\r\n this.currentComponentInstance = Foo\r\n }\r\n }\r\n }\r\n}\r\n</script>\r\n\r\n<style>\r\n.item {\r\n display: flex;\r\n flex-direction: row;\r\n margin: 15px;\r\n border: #eee solid 1px;\r\n}\r\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>\r\n <view class=\"container\">\r\n <view>\r\n <slot name=\"header\" msg=\"Here might be a page title\"></slot>\r\n </view>\r\n <view>\r\n <slot msg=\"A paragraph for the main content.\"></slot>\r\n </view>\r\n <view>\r\n <slot name=\"footer\" msg=\"Here's some contact info\"></slot>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\ndefineOptions({\r\n name: 'child'\r\n})\r\n\r\ndefineSlots<{\r\n default(props: { msg: string }): any\r\n header(props: { msg: string }): any\r\n footer(props: { msg: string }): any\r\n}>()\r\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>\r\n <view class=\"container\">\r\n <view>\r\n <slot name=\"header\" msg=\"Here might be a page title\"></slot>\r\n </view>\r\n <view>\r\n <slot msg=\"A paragraph for the main content.\"></slot>\r\n </view>\r\n <view>\r\n <slot name=\"footer\" msg=\"Here's some contact info\"></slot>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nimport { SlotsType } from 'vue'\r\nexport default {\r\n name: 'child',\r\n slots: Object as SlotsType<{\r\n header: { msg: string }\r\n default: { msg: string }\r\n footer: { msg: string }\r\n }>\r\n}\r\n</script>\r\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>\r\n <view class=\"content\">\r\n <child>\r\n <template v-slot:header=\"slotProps\">\r\n <view class=\"header\">{{ slotProps.msg }}</view>\r\n </template>\r\n <template v-slot:default=\"{ msg }\">\r\n <view class=\"main\">{{ msg }}</view>\r\n </template>\r\n <template #footer=\"{ msg: text }\">\r\n <view class=\"footer\">{{ text }}</view>\r\n </template>\r\n </child>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nimport child from './child-composition.uvue'\r\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>\r\n <view class=\"content\">\r\n <child>\r\n <template v-slot:header=\"slotProps\">\r\n <view class=\"header\">{{ slotProps.msg }}</view>\r\n </template>\r\n <template v-slot:default=\"{ msg }\">\r\n <view class=\"main\">{{ msg }}</view>\r\n </template>\r\n <template #footer=\"{ msg: text }\">\r\n <view class=\"footer\">{{ text }}</view>\r\n </template>\r\n </child>\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nimport child from './child-options.uvue'\r\nexport default {\r\n components: { child }\r\n}\r\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>\r\n <view class=\"page\">\r\n <template v-if=\"dataInfo.isShow\">\r\n <view class=\"title\">{{ title }}</view>\r\n </template>\r\n <view class=\"show-botton\" @click=\"handleShow\">{{ dataInfo.isShow ? '点击隐藏' : '点击显示' }}</view>\r\n <template v-for=\"(item, index) in list\" :key=\"index\">\r\n <view class=\"item\">{{ index + 1 }}.{{ item.name }}</view>\r\n </template>\r\n <button @click=\"goMapStyle\">跳转绑定 Map 类型 style 页面</button>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\ntype DataInfo = {\r\n isShow: boolean\r\n}\r\ntype ListItem = {\r\n name: string\r\n}\r\n\r\nconst dataInfo = reactive({\r\n isShow: false\r\n} as DataInfo)\r\n\r\nconst title = ref<string>('hello')\r\nconst list = ref<ListItem[]>([\r\n {\r\n name: 'foo1'\r\n },\r\n {\r\n name: 'foo2'\r\n }\r\n] as ListItem[])\r\n\r\nconst handleShow = () => {\r\n dataInfo.isShow = !dataInfo.isShow\r\n}\r\n\r\nconst goMapStyle = () => {\r\n uni.navigateTo({ url: '/pages/built-in/component/template/template-map-style-composition' })\r\n}\r\n\r\ndefineExpose({\r\n dataInfo,\r\n goMapStyle\r\n})\r\n</script>\r\n\r\n<style>\r\n.item {\r\n display: flex;\r\n flex-direction: row;\r\n margin: 15px;\r\n border: #eee solid 1px;\r\n}\r\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>\r\n <view class=\"page\">\r\n <view :style=\"[styleW200, styleRounded, styleBorder]\" :class=\"[classPadding10, classBgRed]\">\r\n <text>width:200px;</text>\r\n <text>padding:10px;</text>\r\n <text>border-radius:8px;</text>\r\n <text>border:1px solid #ccc;</text>\r\n <text>background-color: red;</text>\r\n <text class=\"text-white\">this text color: #fff;</text>\r\n </view>\r\n <view :style=\"[stylePadding10, styleBgGreen, styleMargin10]\" :class=\"[classH200, classRounded, classBorder, classBorderRed]\">\r\n <text>height:200px;</text>\r\n <text>margin:10px;</text>\r\n <text>padding:10px;</text>\r\n <text>border-radius:8px;</text>\r\n <text>border:1px solid #ccc;</text>\r\n <text>border-color:red;</text>\r\n <text>background-color: green;</text>\r\n <text class=\"text-blue\">this text color: blue;</text>\r\n </view>\r\n <view :style=\"styleBgBlue\" :class=\"classPadding10\">\r\n <text>padding:10px;</text>\r\n <text>background-color: blue;</text>\r\n <text class=\"text-red\">this text color: red;</text>\r\n </view>\r\n <button class=\"mt-10\" id=\"btn\" @click=\"toggleIsClassValid\">toggle isClassValid</button>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst styleW200 = ref(new Map<string, string>([['width', '200px']]))\r\nconst styleH200 = ref(new Map<string, string>([['height', '200px']]))\r\nconst stylePadding10 = ref(new Map<string, string>([['padding', '10px']]))\r\nconst styleMargin10 = ref(new Map<string, string>([['margin', '10px']]))\r\nconst styleRounded = ref(new Map<string, string>([['border-radius', '8px']]))\r\nconst styleBorder = ref(new Map<string, string>([['border', '1px solid #ccc']]))\r\nconst styleBorderRed = ref(new Map<string, string>([['border-color', 'red']]))\r\nconst styleBorderBlue = ref(new Map<string, string>([['border-color', 'blue']]))\r\nconst styleBorderGreen = ref(new Map<string, string>([['border-color', 'green']]))\r\nconst styleBgGreen = ref(new Map<string, string>([['background-color', 'green']]))\r\nconst styleBgBlue = ref(new Map<string, string>([['background-color', 'blue']]))\r\nconst styleBgRed = ref(new Map<string, string>([['background-color', 'red']]))\r\nconst styleTextWhite = ref(new Map<string, string>([['color', '#fff']]))\r\nconst styleTextBlack = ref(new Map<string, string>([['color', '#000']]))\r\nconst styleTextRed = ref(new Map<string, string>([['color', 'red']]))\r\nconst styleTextBlue = ref(new Map<string, string>([['color', 'blue']]))\r\nconst styleTextGreen = ref(new Map<string, string>([['color', 'green']]))\r\nconst isClassValid = ref(true)\r\nconst classW200 = ref(new Map<string, boolean>([['w-200', true]]))\r\nconst classH200 = ref(new Map<string, boolean>([['h-200', true]]))\r\nconst classPadding10 = ref(new Map<string, boolean>([['padding-10', true]]))\r\nconst classMargin10 = ref(new Map<string, boolean>([['margin-10', true]]))\r\nconst classRounded = ref(new Map<string, boolean>([['rounded', true]]))\r\nconst classBorder = ref(new Map<string, boolean>([['border', true]]))\r\nconst classBorderRed = ref(new Map<string, boolean>([['border-red', true]]))\r\nconst classBorderBlue = ref(new Map<string, boolean>([['border-blue', true]]))\r\nconst classBorderGreen = ref(new Map<string, boolean>([['border-green', true]]))\r\nconst classBgGreen = ref(new Map<string, boolean>([['bg-green', true]]))\r\nconst classBgBlue = ref(new Map<string, boolean>([['bg-blue', true]]))\r\nconst classBgRed = ref(new Map<string, boolean>([['bg-red', true]]))\r\nconst classTextWhite = ref(new Map<string, boolean>([['text-white', true]]))\r\nconst classTextBlack = ref(new Map<string, boolean>([['text-black', true]]))\r\nconst classTextRed = ref(new Map<string, boolean>([['text-red', true]]))\r\nconst classTextBlue = ref(new Map<string, boolean>([['text-blue', true]]))\r\nconst classTextGreen = ref(new Map<string, boolean>([['text-green', true]]))\r\nconst toggleIsClassValid = () => {\r\n isClassValid.value = !isClassValid.value\r\n classW200.value = new Map<string, boolean>([['w-200', isClassValid.value]])\r\n classH200.value = new Map<string, boolean>([['h-200', isClassValid.value]])\r\n classPadding10.value = new Map<string, boolean>([['padding-10', isClassValid.value]])\r\n classMargin10.value = new Map<string, boolean>([['margin-10', isClassValid.value]])\r\n classRounded.value = new Map<string, boolean>([['rounded', isClassValid.value]])\r\n classBorder.value = new Map<string, boolean>([['border', isClassValid.value]])\r\n classBorderRed.value = new Map<string, boolean>([['border-red', isClassValid.value]])\r\n classBorderBlue.value = new Map<string, boolean>([['border-blue', isClassValid.value]])\r\n classBorderGreen.value = new Map<string, boolean>([['border-green', isClassValid.value]])\r\n classBgGreen.value = new Map<string, boolean>([['bg-green', isClassValid.value]])\r\n classBgBlue.value = new Map<string, boolean>([['bg-blue', isClassValid.value]])\r\n classBgRed.value = new Map<string, boolean>([['bg-red', isClassValid.value]])\r\n classTextWhite.value = new Map<string, boolean>([['text-white', isClassValid.value]])\r\n classTextBlack.value = new Map<string, boolean>([['text-black', isClassValid.value]])\r\n classTextRed.value = new Map<string, boolean>([['text-red', isClassValid.value]])\r\n classTextBlue.value = new Map<string, boolean>([['text-blue', isClassValid.value]])\r\n classTextGreen.value = new Map<string, boolean>([['text-green', isClassValid.value]])\r\n}\r\n</script>\r\n\r\n<style>\r\n.w-200 {\r\n width: 200px;\r\n}\r\n\r\n.h-200 {\r\n height: 200px;\r\n}\r\n\r\n.padding-10 {\r\n padding: 10px;\r\n}\r\n\r\n.margin-10 {\r\n margin: 10px;\r\n}\r\n\r\n.rounded {\r\n border-radius: 8px;\r\n}\r\n\r\n.border {\r\n border: 1px solid #ccc;\r\n}\r\n\r\n.border-red {\r\n border-color: red;\r\n}\r\n\r\n.border-green {\r\n border-color: green;\r\n}\r\n\r\n.border-blue {\r\n border-color: blue;\r\n}\r\n\r\n.bg-green {\r\n background-color: green;\r\n}\r\n\r\n.bg-red {\r\n background-color: red;\r\n}\r\n\r\n.bg-blue {\r\n background-color: blue;\r\n}\r\n\r\n.text-white {\r\n color: #fff;\r\n}\r\n\r\n.text-black {\r\n color: #000;\r\n}\r\n\r\n.text-green {\r\n color: green;\r\n}\r\n\r\n.text-red {\r\n color: red;\r\n}\r\n\r\n.text-blue {\r\n color: blue;\r\n}\r\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>\r\n <view class=\"page\">\r\n <view :style=\"[styleW200, styleRounded, styleBorder]\" :class=\"[classPadding10, classBgRed]\">\r\n <text>width:200px;</text>\r\n <text>padding:10px;</text>\r\n <text>border-radius:8px;</text>\r\n <text>border:1px solid #ccc;</text>\r\n <text>background-color: red;</text>\r\n <text class=\"text-white\">this text color: #fff;</text>\r\n </view>\r\n <view :style=\"[stylePadding10, styleBgGreen, styleMargin10]\" :class=\"[classH200, classRounded, classBorder, classBorderRed]\">\r\n <text>height:200px;</text>\r\n <text>margin:10px;</text>\r\n <text>padding:10px;</text>\r\n <text>border-radius:8px;</text>\r\n <text>border:1px solid #ccc;</text>\r\n <text>border-color:red;</text>\r\n <text>background-color: green;</text>\r\n <text class=\"text-blue\">this text color: blue;</text>\r\n </view>\r\n <view :style=\"styleBgBlue\" :class=\"classPadding10\">\r\n <text>padding:10px;</text>\r\n <text>background-color: blue;</text>\r\n <text class=\"text-red\">this text color: red;</text>\r\n </view>\r\n <button class=\"mt-10\" id=\"btn\" @click=\"toggleIsClassValid\">toggle isClassValid</button>\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nexport default {\r\n data() {\r\n return {\r\n styleW200: new Map<string, string>([['width', '200px']]),\r\n styleH200: new Map<string, string>([['height', '200px']]),\r\n stylePadding10: new Map<string, string>([['padding', '10px']]),\r\n styleMargin10: new Map<string, string>([['margin', '10px']]),\r\n styleRounded: new Map<string, string>([['border-radius', '8px']]),\r\n styleBorder: new Map<string, string>([['border', '1px solid #ccc']]),\r\n styleBorderRed: new Map<string, string>([['border-color', 'red']]),\r\n styleBorderBlue: new Map<string, string>([['border-color', 'blue']]),\r\n styleBorderGreen: new Map<string, string>([['border-color', 'green']]),\r\n styleBgGreen: new Map<string, string>([['background-color', 'green']]),\r\n styleBgBlue: new Map<string, string>([['background-color', 'blue']]),\r\n styleBgRed: new Map<string, string>([['background-color', 'red']]),\r\n styleTextWhite: new Map<string, string>([['color', '#fff']]),\r\n styleTextBlack: new Map<string, string>([['color', '#000']]),\r\n styleTextRed: new Map<string, string>([['color', 'red']]),\r\n styleTextBlue: new Map<string, string>([['color', 'blue']]),\r\n styleTextGreen: new Map<string, string>([['color', 'green']]),\r\n isClassValid: true,\r\n classW200: new Map<string, boolean>([['w-200', true]]),\r\n classH200: new Map<string, boolean>([['h-200', true]]),\r\n classPadding10: new Map<string, boolean>([['padding-10', true]]),\r\n classMargin10: new Map<string, boolean>([['margin-10', true]]),\r\n classRounded: new Map<string, boolean>([['rounded', true]]),\r\n classBorder: new Map<string, boolean>([['border', true]]),\r\n classBorderRed: new Map<string, boolean>([['border-red', true]]),\r\n classBorderBlue: new Map<string, boolean>([['border-blue', true]]),\r\n classBorderGreen: new Map<string, boolean>([['border-green', true]]),\r\n classBgGreen: new Map<string, boolean>([['bg-green', true]]),\r\n classBgBlue: new Map<string, boolean>([['bg-blue', true]]),\r\n classBgRed: new Map<string, boolean>([['bg-red', true]]),\r\n classTextWhite: new Map<string, boolean>([['text-white', true]]),\r\n classTextBlack: new Map<string, boolean>([['text-black', true]]),\r\n classTextRed: new Map<string, boolean>([['text-red', true]]),\r\n classTextBlue: new Map<string, boolean>([['text-blue', true]]),\r\n classTextGreen: new Map<string, boolean>([['text-green', true]])\r\n }\r\n },\r\n methods: {\r\n toggleIsClassValid() {\r\n this.isClassValid = !this.isClassValid\r\n this.classW200 = new Map<string, boolean>([['w-200', this.isClassValid]])\r\n this.classH200 = new Map<string, boolean>([['h-200', this.isClassValid]])\r\n this.classPadding10 = new Map<string, boolean>([['padding-10', this.isClassValid]])\r\n this.classMargin10 = new Map<string, boolean>([['margin-10', this.isClassValid]])\r\n this.classRounded = new Map<string, boolean>([['rounded', this.isClassValid]])\r\n this.classBorder = new Map<string, boolean>([['border', this.isClassValid]])\r\n this.classBorderRed = new Map<string, boolean>([['border-red', this.isClassValid]])\r\n this.classBorderBlue = new Map<string, boolean>([['border-blue', this.isClassValid]])\r\n this.classBorderGreen = new Map<string, boolean>([['border-green', this.isClassValid]])\r\n this.classBgGreen = new Map<string, boolean>([['bg-green', this.isClassValid]])\r\n this.classBgBlue = new Map<string, boolean>([['bg-blue', this.isClassValid]])\r\n this.classBgRed = new Map<string, boolean>([['bg-red', this.isClassValid]])\r\n this.classTextWhite = new Map<string, boolean>([['text-white', this.isClassValid]])\r\n this.classTextBlack = new Map<string, boolean>([['text-black', this.isClassValid]])\r\n this.classTextRed = new Map<string, boolean>([['text-red', this.isClassValid]])\r\n this.classTextBlue = new Map<string, boolean>([['text-blue', this.isClassValid]])\r\n this.classTextGreen = new Map<string, boolean>([['text-green', this.isClassValid]])\r\n }\r\n }\r\n}\r\n</script>\r\n\r\n<style>\r\n.w-200 {\r\n width: 200px;\r\n}\r\n\r\n.h-200 {\r\n height: 200px;\r\n}\r\n\r\n.padding-10 {\r\n padding: 10px;\r\n}\r\n\r\n.margin-10 {\r\n margin: 10px;\r\n}\r\n\r\n.rounded {\r\n border-radius: 8px;\r\n}\r\n\r\n.border {\r\n border: 1px solid #ccc;\r\n}\r\n\r\n.border-red {\r\n border-color: red;\r\n}\r\n\r\n.border-green {\r\n border-color: green;\r\n}\r\n\r\n.border-blue {\r\n border-color: blue;\r\n}\r\n\r\n.bg-green {\r\n background-color: green;\r\n}\r\n\r\n.bg-red {\r\n background-color: red;\r\n}\r\n\r\n.bg-blue {\r\n background-color: blue;\r\n}\r\n\r\n.text-white {\r\n color: #fff;\r\n}\r\n\r\n.text-black {\r\n color: #000;\r\n}\r\n\r\n.text-green {\r\n color: green;\r\n}\r\n\r\n.text-red {\r\n color: red;\r\n}\r\n\r\n.text-blue {\r\n color: blue;\r\n}\r\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>\r\n <view class=\"page\">\r\n <template v-if=\"dataInfo.isShow\">\r\n <view class=\"title\">{{ title }}</view>\r\n </template>\r\n <view class=\"show-botton\" @click=\"handleShow\">{{ dataInfo.isShow ? '点击隐藏' : '点击显示' }}</view>\r\n <template v-for=\"(item, index) in list\" :key=\"index\">\r\n <view class=\"item\">{{ index + 1 }}.{{ item.name }}</view>\r\n </template>\r\n <button @click=\"goMapStyle\">跳转绑定 Map 类型 style 页面</button>\r\n </view>\r\n</template>\r\n\r\n<script lang='uts'>\r\ntype DataInfo = {\r\n isShow: boolean\r\n}\r\ntype objType = {\r\n name : string\r\n}\r\nexport default {\r\n data() {\r\n return {\r\n title: \"hello\",\r\n dataInfo: {\r\n isShow: false,\r\n } as DataInfo,\r\n list: [{\r\n name: 'foo1'\r\n },\r\n {\r\n name: 'foo2'\r\n }\r\n ] as objType[]\r\n }\r\n },\r\n methods: {\r\n handleShow() {\r\n this.dataInfo.isShow = !this.dataInfo.isShow\r\n },\r\n goMapStyle() {\r\n uni.navigateTo({ url: '/pages/built-in/component/template/template-map-style-options' })\r\n }\r\n }\r\n}\r\n</script>\r\n\r\n<style>\r\n.item {\r\n display: flex;\r\n flex-direction: row;\r\n margin: 15px;\r\n border: #eee solid 1px;\r\n}\r\n</style>\r\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>\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 </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst hasCurrentScope = ref(false);\r\n\r\nconst createScope = () => {\r\n const scope = effectScope();\r\n scope.run(() => {\r\n hasCurrentScope.value = getCurrentScope() !== null;\r\n });\r\n};\r\n</script>\r\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\r\n class=\"increment-state-count-btn mb-10\"\r\n @click=\"incrementStateCount\">\r\n increment state.count\r\n </button>\r\n <button\r\n class=\"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}\r\nconst state = shallowReactive({\r\n count: 0,\r\n nested: {\r\n count: 0\r\n } as StateNested\r\n} as State)\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}\r\nconst state = shallowReadonly({\r\n count: 0,\r\n nested: {\r\n count: 0\r\n } as StateNested\r\n} as State)\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\r\n class=\"increment-state-count-btn mb-10\"\r\n @click=\"incrementStateCount\">\r\n increment state.count\r\n </button>\r\n <button class=\"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({\r\n count: 0\r\n} as State)\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 class=\"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 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({\r\n str: 'default str',\r\n num: 0,\r\n arr: ['a', 'b', 'c']\r\n} as Data)\r\n\r\nconst readonlyData = readonly(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 <text id=\"count1\" class=\"mb-10\">count1: {{ count1 }}</text>\r\n <text id=\"count2\" class=\"mb-10\">count2: {{ count2 }}</text>\r\n <text id=\"counter-count\" class=\"mb-10\">counter.count: {{ counter.count }}</text>\r\n <button class=\"increment-btn\" @click=\"increment\">increment</button>\r\n </view>\r\n</template>\r\n\r\n<script setup lang='uts'>\r\n // 基础数据类型可自动推导类型\r\n const count1 = ref(0)\r\n const count2 = ref(count1)\r\n\r\n type Counter = {\r\n count : number\r\n }\r\n // TODO: Android 端暂不支持通过泛型指定类型，可通过 as 方式指定类型\r\n const counter = ref({\r\n count: 0\r\n } as Counter)\r\n\r\n const increment = () => {\r\n count1.value++\r\n count2.value++\r\n counter.value.count++\r\n }\r\n</script>\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 function (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 function (count : number, prevCount : number, onCleanup : OnCleanup) {\r\n this.watchCountRes = `count: ${count}, prevCount: ${prevCount}, count ref text (flush sync): ${this.$refs['countRef'].childNodes[0].innerText}`\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 this.watchObjRes = `obj: ${JSON.stringify(obj)}, prevObj: ${JSON.stringify(prevObj)}`\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.childNodes[0].innerText}`\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.childNodes[0].innerText}`\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: ${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 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: ${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 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>\r\n\t<text class=\"component-bar\">this is component Bar</text>\r\n</template>\r\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>\r\n <text class=\"uni-common-mt bold\">component for app.component</text>\r\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>\r\n <view>\r\n <text class=\"uni-common-mt bold\">component for app.use</text>\r\n <text class=\"uni-common-mt plugin1\">plugin1: {{ plugin1 }}</text>\r\n <text class=\"uni-common-mt plugin2\">plugin2: {{ plugin2 }}</text>\r\n <text class=\"uni-common-mt plugin3\">plugin3: {{ plugin3 }}</text>\r\n <text class=\"uni-common-mt plugin4\">plugin4: {{ plugin4 }}</text>\r\n <CompForPlugin />\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nexport default {\r\n inject: ['plugin3', 'plugin4'],\r\n}\r\n</script>\r\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>\r\n <view>\r\n <text class=\"uni-common-mt bold component-for-h-function\">component for h()</text>\r\n <slot />\r\n </view>\r\n</template>\r\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>\r\n <text class=\"uni-common-mt component-for-plugin\">component for plugin</text>\r\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'>\r\n const str = 'foo str'\r\n const num = ref(0)\r\n const increment = () => {\r\n num.value++\r\n }\r\n \r\n defineExpose({\r\n str,\r\n num,\r\n increment\r\n })\r\n \r\n</script>\r\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>\r\n\t<view>\r\n\t\ttest-type\r\n\t</view>\r\n</template>\r\n\r\n<script>\r\n\texport default {\r\n\t\tname:\"test-type\",\r\n\t\tdata() {\r\n\t\t\treturn {\r\n\t\t\t\t\r\n\t\t\t};\r\n\t\t}\r\n\t}\r\n</script>\r\n\r\n<style>\r\n\r\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>\r\n\t<view>\r\n\t\ttest-type1\r\n\t</view>\r\n</template>\r\n\r\n<script>\r\n\texport default {\r\n\t\tname:\"test-type1\",\r\n\t\tdata() {\r\n\t\t\treturn {\r\n\t\t\t\t\r\n\t\t\t};\r\n\t\t}\r\n\t}\r\n</script>\r\n\r\n<style>\r\n\r\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/hello-uvue/components/test-type1/test-type1"}}}
