vueJson.json

{
  "template": {
    "name": "#### template",
    "description": "\n\n##### template 兼容性\n| Android | iOS | web |\n| :- | :- | :- |\n| 3.9 | 4.11 | 4.0 |\n",
    "attribute": "##### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| lang | string | - |  |\n@| 值名称 | 描述 |\n@| :- | :- |\n@| html | html |\n@| pug | 仅 Web 端支持 |\n",
    "event": "",
    "example": "",
    "compatibility": "##### template 属性兼容性\n|  | Android | iOS | web |\n| :- | :- | :- | :- |\n| lang | 3.9 | x | 4.0 |\n",
    "children": "",
    "reference": ""
  },
  "slot": {
    "name": "#### slot",
    "description": "> 组件类型：string \n\n \\<slot> 元素作为组件模板之中的内容分发插槽。\\<slot> 元素自身将被替换。\n\n##### slot 兼容性\n| Android | iOS | web |\n| :- | :- | :- |\n| 3.9 | 4.11 | 4.0 |\n",
    "attribute": "##### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| name | string | - | 用于命名插槽。 |",
    "event": "",
    "example": "",
    "compatibility": "",
    "children": "",
    "reference": "\n##### 参见\n- [Reference](https://v3.cn.vuejs.org/api/built-in-components.html#slot)\n"
  },
  "script": {
    "name": "#### script",
    "description": "\n\n##### script 兼容性\n| Android | iOS | web |\n| :- | :- | :- |\n| 3.9 | 4.11 | 4.0 |\n",
    "attribute": "##### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| setup | Any | - | - |\n| lang | Any | - |  |\n@| 值名称 | 描述 |\n@| :- | :- |\n@| uts | uts |\n\n##### lang 兼容性\n|  | Android | iOS | web |\n| :- | :- | :- | :- |\n| uts | 4.0 | 4.11 | 4.0 |\n",
    "event": "",
    "example": "",
    "compatibility": "##### script 属性兼容性\n|  | Android | iOS | web |\n| :- | :- | :- | :- |\n| setup | 4.0 | 4.11 | 4.0 |\n| lang | 4.0 | 4.11 | 4.0 |\n",
    "children": "",
    "reference": ""
  },
  "style": {
    "name": "#### style",
    "description": "\n\n##### style 兼容性\n| Android | iOS | web |\n| :- | :- | :- |\n| 3.9 | 4.11 | 4.0 |\n",
    "attribute": "##### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| lang | string | - |  |\n@| 值名称 | 描述 |\n@| :- | :- |\n@| scss | - |\n@| less | - |\n@| stylus | - |\n| scoped | Any | - | - |\n| module | Any | - | - |\n",
    "event": "",
    "example": "",
    "compatibility": "##### style 属性兼容性\n|  | Android | iOS | web |\n| :- | :- | :- | :- |\n| lang | 3.9 | 4.11 | 4.0 |\n| scoped | x | x | 4.0 |\n| module | x | x | 4.0 |\n",
    "children": "",
    "reference": ""
  },
  "keep-alive": {
    "name": "#### keep-alive",
    "description": "> 组件类型：string \n\n \\<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 \\<transition> 相似，\\<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。\n\n##### keep-alive 兼容性\n| Android | iOS | web |\n| :- | :- | :- |\n| 4.0 | 4.11 | 4.0 |\n",
    "attribute": "##### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| include | string | - | 字符串或正则表达式。只有名称匹配的组件会被缓存。 |\n| exclude | string | - | 字符串或正则表达式。任何名称匹配的组件都不会被缓存。 |\n| max | string | - | 最多可以缓存多少组件实例。 |",
    "event": "",
    "example": "",
    "compatibility": "",
    "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 的值，来决定哪个组件被渲染。\n\n##### component 兼容性\n| Android | iOS | web |\n| :- | :- | :- |\n| 3.99 | 4.11 | 4.0 |\n",
    "attribute": "##### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| is | Any | - | - |\n| inline-template | Any | - | - |",
    "event": "",
    "example": "",
    "compatibility": "",
    "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 元素，也不会出现在检测过的组件层级中。\n\n##### transition 兼容性\n| Android | iOS | web |\n| :- | :- | :- |\n| x | x | 4.0 |\n",
    "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 | - | - |\n\n",
    "event": "",
    "example": "",
    "compatibility": "",
    "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 属性配置哪个元素应该被渲染。\n\n##### transition-group 兼容性\n| Android | iOS | web |\n| :- | :- | :- |\n| x | x | 4.0 |\n",
    "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 | - | - |\n",
    "event": "",
    "example": "",
    "compatibility": "",
    "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，而不必求助于全局状态或将其拆分为两个组件。\n\n##### teleport 兼容性\n| Android | iOS | web |\n| :- | :- | :- |\n| 4.0 | 4.11 | 4.0 |\n",
    "attribute": "##### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| to | string | - | 必须是有效的查询选择器或 HTMLElement (如果在浏览器环境中使用)。指定将在其中移动 \\<teleport> 内容的目标元素 |\n| disabled | boolean | - | 此可选属性可用于禁用 \\<teleport> 的功能，这意味着其插槽内容将不会移动到任何位置，而是在您在周围父组件中指定了 \\<teleport> 的位置渲染。 |",
    "event": "",
    "example": "",
    "compatibility": "",
    "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": ""
  },
  "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/tab-bar/options-api'\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>\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 fn\">fn: {{(fn as () =>  string)()}}</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('msg')\r\n  const num = inject('num')\r\n  const obj = inject('obj')\r\n  const arr = inject('arr')\r\n  const fn = inject('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-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    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('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_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 is Map', this.$props, this.$props instanceof Map);\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  </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\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  </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\n\r\nexport default {\r\n  components: {\r\n    ArrayLiteral,\r\n    ObjectType,\r\n    SameNamePropDefaultValue\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_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  rootStr.value = (instance.$root!.$exposed['str'] as Ref<string>).value as string\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\r\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\nimport Child from './child-composition.uvue'\r\n\r\nconst str = ref('root component str')\r\nconst rootStr = ref('')\r\n\r\nonReady(() => {\r\n  const instance = getCurrentInstance()!.proxy!\r\n  rootStr.value = (instance.$root!.$exposed['str'] as Ref<string>).value as string\r\n})\r\n\r\ndefineExpose({\r\n  str\r\n})\r\n</script>\r\n\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"
    },
    "watch-function_child": {
      "gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/watch-function/child.uvue",
      "code": "```vue\n<template>\r\n  <view class=\"page\">\r\n    <view class=\"row\">\r\n      <text>子组件 初始值</text>\r\n      <text class=\"init-value\">init</text>\r\n    </view>\r\n    <view class=\"row\">\r\n      <text>子组件 val</text>\r\n      <text>{{ val }}</text>\r\n    </view>\r\n    <view class=\"row\">\r\n      <text>子组件 值是否变化</text>\r\n      <text>{{ changed }}</text>\r\n    </view>\r\n    <view class=\"row\">\r\n      <text>immediate=true 值应为 true</text>\r\n      <text>{{ immediateChanged }}</text>\r\n    </view>\r\n  </view>\r\n</template>\r\n\r\n<script>\r\n  export default {\r\n    name: \"watch-child\",\r\n    data() {\r\n      return {\r\n        val: \"init\",\r\n        changed: false,\r\n        immediateValue: 'value',\r\n        immediateChanged: false\r\n      }\r\n    },\r\n    mounted() {\r\n      this.createWatch()\r\n      this.createImmediateWatch()\r\n    },\r\n    methods: {\r\n      createWatch() {\r\n        this.$watch('val', () => {\r\n          this.changed = !this.changed\r\n        })\r\n\r\n        this.val = 'changed'\r\n      },\r\n      createImmediateWatch() {\r\n        this.$watch('immediateValue', () => {\r\n          this.immediateChanged = !this.immediateChanged\r\n        }, {\r\n          immediate: true\r\n        })\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/watch-function/child"
    },
    "watch-function_watch-array-child": {
      "gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/watch-function/watch-array-child.uvue",
      "code": "```vue\n<template>\r\n  <view>\r\n    <view v-for=\"(item, _) in list\">\r\n      <text class=\"data-item-text\">{{JSON.stringify(item)}}</text>\r\n      <!-- TODO 暂不支持 for UTSJSONObject -->\r\n      <!-- <view v-for=\"(value, key) in item\">\r\n        <text class=\"k\">{{key}}</text>\r\n        <text class=\"v\">{{value}}</text>\r\n      </view> -->\r\n    </view>\r\n    <view>\r\n      <text class=\"watch-count\">{{watchCount}}</text>\r\n    </view>\r\n  </view>\r\n</template>\r\n\r\n<script>\r\n  import { PropType } from 'vue'\r\n  export default {\r\n    name: 'ArrayDeep',\r\n    props: {\r\n      list: {\r\n        type: Array as PropType<Array<UTSJSONObject>>,\r\n        default: [] as Array<UTSJSONObject>\r\n      },\r\n    },\r\n    data() {\r\n      return {\r\n        watchCount: 0\r\n      }\r\n    },\r\n    watch: {\r\n      list: {\r\n        handler(_ : Array<UTSJSONObject>) {\r\n          this.watchCount++\r\n        },\r\n        deep: true,\r\n        immediate: true\r\n      }\r\n    }\r\n  }\r\n</script>\n```",
      "webUrl": "https://hellouvue.dcloud.net.cn/#/pages/component-instance/watch-function/watch-array-child"
    },
    "watch-function_watch-array": {
      "gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/watch-function/watch-array.uvue",
      "code": "```vue\n<template>\r\n  <view>\r\n    <view v-for=\"item in dataList\">\r\n      <text class=\"data-item-text\">{{JSON.stringify(item)}}</text>\r\n      <!-- TODO 暂不支持 for UTSJSONObject -->\r\n      <!-- <view v-for=\"(value, key) in item\">\r\n        <text class=\"k\">{{key}}</text>\r\n        <text class=\"v\">{{value}}</text>\r\n      </view> -->\r\n    </view>\r\n    <view>\r\n      <text class=\"watch-count\">{{watchCount}}</text>\r\n    </view>\r\n    <view>\r\n      <text>Watch array in component</text>\r\n    </view>\r\n    <watch-array-child class=\"watch-array-child\" :list=\"dataList\"></watch-array-child>\r\n    <button class=\"change-data1\" @click=\"changeData1\">changeData1(push)</button>\r\n    <button class=\"change-data2\" @click=\"changeData2\">changeData2(allocate)</button>\r\n  </view>\r\n</template>\r\n\r\n<script>\r\n  import WatchArrayChild from './watch-array-child.uvue'\r\n  export default {\r\n    components: {\r\n      WatchArrayChild\r\n    },\r\n    data() {\r\n      return {\r\n        dataList: [] as Array<UTSJSONObject>,\r\n        watchCount: 0\r\n      }\r\n    },\r\n    watch: {\r\n      dataList: {\r\n        handler(_ : Array<UTSJSONObject>) {\r\n          this.watchCount++\r\n        },\r\n        deep: true,\r\n        immediate: true\r\n      }\r\n    },\r\n    methods: {\r\n      changeData1() {\r\n        let item = {\r\n          \"a\": 1,\r\n          \"b\": 2\r\n        }\r\n        this.dataList.push(item)\r\n      },\r\n      changeData2() {\r\n        let list = [{\r\n          \"c\": 3,\r\n          \"d\": 4\r\n        }] as Array<UTSJSONObject>\r\n        this.dataList = list\r\n      }\r\n    }\r\n  }\r\n</script>\n```",
      "webUrl": "https://hellouvue.dcloud.net.cn/#/pages/component-instance/watch-function/watch-array"
    },
    "watch-function_watch-function": {
      "gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/watch-function/watch-function.uvue",
      "code": "```vue\n<template>\r\n  <view class=\"page\">\r\n    <button class=\"btn-click\" type=\"default\" @click=\"click\">Click</button>\r\n    <view>\r\n      <view class=\"value-item\">\r\n        <text class=\"value-item-k\">a</text>\r\n        <text class=\"value-item-v value-1-n\">{{v1New}}</text>\r\n        <text class=\"value-item-v value-1-o\">{{v1Old}}</text>\r\n      </view>\r\n      <view class=\"value-item\">\r\n        <text class=\"value-item-k\">c.d</text>\r\n        <text class=\"value-item-v value-2-n\">{{v2New}}</text>\r\n        <text class=\"value-item-v value-2-o\">{{v2Old}}</text>\r\n      </view>\r\n      <view class=\"value-item\">\r\n        <text class=\"value-item-k\">a+b</text>\r\n        <text class=\"value-item-v value-3-n\">{{v3New}}</text>\r\n        <text class=\"value-item-v value-3-o\">{{v3Old}}</text>\r\n      </view>\r\n      <view class=\"value-item\">\r\n        <text class=\"value-item-k\">f</text>\r\n        <text class=\"value-item-v value-4-n\">{{v4New}}</text>\r\n        <text class=\"value-item-v value-4-o\">{{v4Old}}</text>\r\n      </view>\r\n    </view>\r\n    <watch-child class=\"watch-child\"></watch-child>\r\n  </view>\r\n</template>\r\n\r\n<script>\r\n  import child from './child.uvue'\r\n  type C = {\r\n    d : number\r\n  }\r\n  export default {\r\n    components: {\r\n      watchChild: child\r\n    },\r\n    data() {\r\n      return {\r\n        a: 1,\r\n        b: 2,\r\n        c: {\r\n          d: 4\r\n        } as C,\r\n        e: 5,\r\n        f: 6,\r\n        v1New: 0,\r\n        v1Old: 0,\r\n        v2New: 0,\r\n        v2Old: 0,\r\n        v3New: 0,\r\n        v3Old: 0,\r\n        v4New: 0,\r\n        v4Old: 0,\r\n      }\r\n    },\r\n    mounted() {\r\n      this.$watch('a', (newVal, oldVal) => {\r\n        this.v1New = newVal\r\n        this.v1Old = oldVal\r\n      })\r\n      this.$watch('c.d', (newVal : number, oldVal : number) => {\r\n        this.v2New = newVal\r\n        this.v2Old = oldVal\r\n      })\r\n      this.$watch(() : number => this.a + this.b, (newVal : number, oldVal : number) => {\r\n        this.v3New = newVal\r\n        this.v3Old = oldVal\r\n      })\r\n      this.$watch('f', (newVal, oldVal) => {\r\n        this.v4New = newVal\r\n        this.v4Old = oldVal\r\n      }, { immediate: true })\r\n    },\r\n    methods: {\r\n      click() {\r\n        this.a++\r\n        this.b++\r\n        this.c.d++\r\n        this.e++\r\n        this.f++\r\n      }\r\n    }\r\n  }\r\n</script>\r\n\r\n<style>\r\n  .value {\r\n    flex: 1;\r\n    flex-direction: column;\r\n  }\r\n\r\n  .value-item {\r\n    flex-direction: row;\r\n  }\r\n\r\n  .value-item-k {\r\n    width: 50px;\r\n    line-height: 2;\r\n  }\r\n\r\n  .value-item-v {\r\n    font-weight: bold;\r\n    line-height: 2;\r\n    margin-left: 10px;\r\n  }\r\n</style>\n```",
      "webUrl": "https://hellouvue.dcloud.net.cn/#/pages/component-instance/watch-function/watch-function"
    },
    "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>\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 />\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 = JSON.stringify(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    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}\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} 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: 20px;\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>\n  <view class=\"page\">\n    <!-- v-bind attribute -->\n    <button id=\"disabled-btn\" class=\"mb-10\" :disabled=\"true\">:disabled true</button>\n    <button id=\"v-bind-disabled-btn\" class=\"mb-10\" v-bind:disabled=\"false\">v-bind:disabled false</button>\n\n    <!-- v-bind style -->\n    <view class=\"flex justify-between flex-row mb-10\">\n      <text>bind object style fontSize:</text>\n      <text id=\"bind-object-style\" :style=\"{ fontSize: dataInfo.fontSize }\">\n        {{ dataInfo.fontSize }}\n      </text>\n    </view>\n    <view id=\"bind-array-style\" class=\"mb-10 p-10\" :style=\"[dataInfo.backgroundColor, dataInfo.border]\">\n      <view>bind arr style</view>\n      <view class=\"my-10\">{{ dataInfo.backgroundColor }}</view>\n      <view>{{ dataInfo.border }}</view>\n    </view>\n\n    <!-- v-bind props -->\n    <Foo :title :num=\"dataInfo.fooProps.num\" :obj=\"dataInfo.fooProps.obj\" />\n\n    <!-- v-bind in style -->\n    <!-- #ifdef WEB -->\n    <view class=\"mb-10 v-bind-css\"></view>\n    <!-- #endif -->\n  </view>\n</template>\n\n<script lang=\"uts\">\nimport Foo from './Foo-options.uvue'\n\ntype FooPropsObj = {\n  name: string\n}\ntype FooProps = {\n  title: string\n  num: number\n  obj: FooPropsObj\n}\ntype DataInfo = {\n  fontSize: string\n  backgroundColor: string\n  border: string\n  fooProps: FooProps\n  vBindClassBackgroundColor: string\n}\n\nexport default {\n  components: { Foo },\n  data() {\n    return {\n      title: 'foo title',\n      dataInfo: {\n        fontSize: '20px',\n        backgroundColor: 'background-color: green',\n        border: 'border: 2px solid red',\n        fooProps: {\n          title: '',\n          num: 1,\n          obj: {\n            name: 'foo obj name'\n          }\n        },\n        vBindClassBackgroundColor: 'red'\n      } as DataInfo\n    }\n  }\n}\n</script>\n\n<style>\n/* #ifdef WEB */\n.v-bind-css {\n  background-color: v-bind(dataInfo.vBindClassBackgroundColor);\n  height: 20px;\n}\n/* #endif */\n</style>\n\n```",
      "webUrl": "https://hellouvue.dcloud.net.cn/#/pages/directive/v-bind/v-bind-options"
    },
    "v-for_v-for-composition": {
      "gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-for/v-for-composition.uvue",
      "code": "```vue\n<template>\r\n  <!-- #ifdef APP -->\r\n  <scroll-view style=\"flex: 1\">\r\n    <!-- #endif -->\r\n    <view class=\"page\">\r\n      <text class=\"bold mb-10\">v-for number</text>\r\n      <view class=\"mb-10\" v-for=\"item in 3\" :key=\"item\">\r\n        <text :id=\"`number-${item}`\">{{ item }}</text>\r\n      </view>\r\n\r\n      <view class=\"bold mb-10\">v-for object</view>\r\n      <view\r\n        v-for=\"(value, key) in object\"\r\n        :key=\"key\"\r\n        class=\"mb-10 flex justify-between flex-row\">\r\n        <text :id=\"key\">{{ key }}</text>\r\n        <text :id=\"value\">{{ value }}</text>\r\n      </view>\r\n\r\n      <view class=\"bold mb-10\">v-for & v-if list items</view>\r\n      <view\r\n        id=\"v-for-v-if-list-items\"\r\n        v-for=\"item in listItems\"\r\n        :key=\"item.name\">\r\n        <template v-if=\"item.show\">\r\n          <view class=\"mb-10 flex justify-between flex-row\">\r\n            <text :id=\"item.name\">{{ item.name }}</text>\r\n            <text @click=\"item.count++\" :id=\"`v-if-${item.name}-count`\">{{\r\n              item.count\r\n            }}</text>\r\n          </view>\r\n          <template v-for=\"child in item.items\">\r\n            <view\r\n              v-if=\"child.show\"\r\n              :key=\"child.name\"\r\n              class=\"mb-10 flex justify-between flex-row\">\r\n              <text :id=\"child.name\">{{ child.name }}</text>\r\n              <text @click=\"child.count++\" :id=\"`v-if-${child.name}-count`\">{{\r\n                child.count\r\n              }}</text>\r\n            </view>\r\n          </template>\r\n        </template>\r\n      </view>\r\n\r\n      <view class=\"bold mb-10\">v-for & v-show list items</view>\r\n      <view\r\n        id=\"v-for-v-if-list-items\"\r\n        v-for=\"item in listItems\"\r\n        :key=\"item.name\"\r\n        v-show=\"item.show\">\r\n        <view class=\"mb-10 flex justify-between flex-row\">\r\n          <text :id=\"item.name\">{{ item.name }}</text>\r\n          <text @click=\"item.count++\" :id=\"`v-show-${item.name}-count`\">{{\r\n            item.count\r\n          }}</text>\r\n        </view>\r\n        <view\r\n          v-for=\"child in item.items\"\r\n          v-show=\"child.show\"\r\n          :key=\"child.name\"\r\n          class=\"mb-10 flex justify-between flex-row\">\r\n          <text :id=\"child.name\">{{ child.name }}</text>\r\n          <text @click=\"child.count++\" :id=\"`v-show-${child.name}-count`\">{{\r\n            child.count\r\n          }}</text>\r\n        </view>\r\n      </view>\r\n\r\n      <view\r\n        class=\"mb-10 flex justify-between flex-row\"\r\n        v-for=\"item in mapList\"\r\n        :key=\"item[0]\">\r\n        <text>{{ item[0] }}</text>\r\n        <text :id=\"item[0]\">{{ item[1] }}</text>\r\n      </view>\r\n\r\n      <view class=\"mb-10\" v-for=\"(item, index) in setList\" :key=\"index\">\r\n        <text :id=\"`set-value-${index + 1}`\">{{ item }}</text>\r\n      </view>\r\n    </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'])\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>\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']),\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 不支持修饰符 -->\r\n    <!-- <view class=\"mb-10 btn\" v-on:click.once=\"handleClick\">v-on:click.once=\"handleClick\" 点击事件将最多触发一次</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 不支持修饰符 -->\r\n    <!-- <view class=\"mb-10 btn\" v-on:click.once=\"handleClick\">v-on:click.once=\"handleClick\" 点击事件将最多触发一次</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"
    },
    "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_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      <button class=\"mt-10\" @click=\"scrollToBottom\">\r\n        scrollToBottom\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\n  import { state, setLifeCycleNum } from '@/store/index.uts'\r\n  type DataInfo = {\r\n    isScrolled : boolean\r\n  }\r\n  const dataInfo = reactive({\r\n    isScrolled: false,\r\n  } as DataInfo)\r\n\r\n  onLoad((_ : OnLoadOptions) => {\r\n    // 自动化测试\r\n    setLifeCycleNum(state.lifeCycleNum + 100)\r\n  })\r\n  onPageShow(() => {\r\n    // 自动化测试\r\n    setLifeCycleNum(state.lifeCycleNum + 10)\r\n  })\r\n  onReady(() => {\r\n    // 自动化测试\r\n    setLifeCycleNum(state.lifeCycleNum + 10)\r\n  })\r\n  onPullDownRefresh(() => {\r\n    // 自动化测试\r\n    setLifeCycleNum(state.lifeCycleNum + 10)\r\n  })\r\n  onPageScroll((_) => {\r\n    // 自动化测试\r\n    dataInfo.isScrolled = true\r\n  })\r\n  onReachBottom(() => {\r\n    // 自动化测试\r\n    setLifeCycleNum(state.lifeCycleNum + 10)\r\n  })\r\n  onBackPress((_ : OnBackPressOptions) : boolean | null => {\r\n    // 自动化测试\r\n    setLifeCycleNum(state.lifeCycleNum - 10)\r\n    return null\r\n  })\r\n  onPageHide(() => {\r\n    // 自动化测试\r\n    setLifeCycleNum(state.lifeCycleNum - 10)\r\n  })\r\n  onUnload(() => {\r\n    // 自动化测试\r\n    setLifeCycleNum(state.lifeCycleNum - 100)\r\n  })\r\n  onResize((_) => {\r\n    // 自动化测试\r\n    setLifeCycleNum(state.lifeCycleNum + 10)\r\n  })\r\n\r\n  // 自动化测试\r\n  const pageGetLifeCycleNum = () : number => {\r\n    return state.lifeCycleNum\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: 2000,\r\n    })\r\n  }\r\n\r\n  defineExpose({\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>\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\t<!-- #ifdef APP -->\r\n\t<scroll-view style=\"flex: 1\" :bounces=\"false\">\r\n\t<!-- #endif -->\r\n\t\t<view class=\"page container\">\r\n\t\t\t<text>page lifecycle 选项式 API</text>\r\n\t\t\t<button class=\"mt-10\" @click=\"scrollToBottom\">scrollToBottom</button>\r\n\t\t</view>\r\n\t<!-- #ifdef APP -->\r\n\t</scroll-view>\r\n\t<!-- #endif -->\r\n</template>\r\n\r\n<script lang=\"uts\">\r\n\timport { state, setLifeCycleNum } from '@/store/index.uts'\r\n  type DataInfo = {\r\n  \tisScrolled: boolean\r\n  }\r\n\texport default {\r\n\t\tdata() {\r\n\t\t\treturn {\r\n\t\t\t\tdataInfo: {\r\n          isScrolled: false,\r\n        } as DataInfo\r\n\t\t\t}\r\n\t\t},\r\n\t\tonLoad(_ : OnLoadOptions) {\r\n\t\t\t// 自动化测试\r\n\t\t\tsetLifeCycleNum(state.lifeCycleNum + 100)\r\n\t\t},\r\n\t\tonShow() {\r\n\t\t\t// 自动化测试\r\n\t\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\r\n\t\t},\r\n\t\tonReady() {\r\n\t\t\t// 自动化测试\r\n\t\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\r\n\t\t},\r\n\t\tonPullDownRefresh() {\r\n\t\t\t// 自动化测试\r\n\t\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\r\n\t\t},\r\n\t\tonPageScroll(_) {\r\n\t\t\t// 自动化测试\r\n\t\t\tthis.dataInfo.isScrolled = true\r\n\t\t},\r\n\t\tonReachBottom() {\r\n\t\t\t// 自动化测试\r\n\t\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\r\n\t\t},\r\n\t\tonBackPress(_ : OnBackPressOptions) : boolean | null {\r\n\t\t\t// 自动化测试\r\n\t\t\tsetLifeCycleNum(state.lifeCycleNum - 10)\r\n\t\t\treturn null\r\n\t\t},\r\n\t\tonHide() {\r\n\t\t\t// 自动化测试\r\n\t\t\tsetLifeCycleNum(state.lifeCycleNum - 10)\r\n\t\t},\r\n\t\tonUnload() {\r\n\t\t\t// 自动化测试\r\n\t\t\tsetLifeCycleNum(state.lifeCycleNum - 100)\r\n\t\t},\r\n\t\tonResize(_) {\r\n\t\t\t// 自动化测试\r\n\t\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\r\n\t\t},\r\n\t\tmethods: {\r\n\t\t\t// 自动化测试\r\n\t\t\tpageGetLifeCycleNum() : number {\r\n\t\t\t\treturn state.lifeCycleNum\r\n\t\t\t},\r\n\t\t\t// 自动化测试\r\n\t\t\tpageSetLifeCycleNum(num : number) {\r\n\t\t\t\tsetLifeCycleNum(num)\r\n\t\t\t},\r\n\t\t\t// 自动化测试\r\n\t\t\tpullDownRefresh() {\r\n\t\t\t\tuni.startPullDownRefresh({\r\n\t\t\t\t\tsuccess() {\r\n\t\t\t\t\t\tsetTimeout(() => {\r\n\t\t\t\t\t\t\tuni.stopPullDownRefresh()\r\n\t\t\t\t\t\t\t// 一秒后立即停止下拉刷新不会触发 onPullDownRefresh，因为下拉动画时间大概需要1.1～1.2秒\r\n\t\t\t\t\t\t}, 1500)\r\n\t\t\t\t\t},\r\n\t\t\t\t})\r\n\t\t\t},\r\n\t\t\tscrollToBottom() {\r\n\t\t\t\tuni.pageScrollTo({\r\n\t\t\t\t\tscrollTop: 2000,\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\t.container {\r\n\t\theight: 1200px;\r\n\t}\r\n</style>\n```",
      "webUrl": "https://hellouvue.dcloud.net.cn/#/pages/lifecycle/page/page-options"
    }
  },
  "E_rendering": {
    "render_render": {
      "gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/rendering/render/render.uvue",
      "code": "```vue\n<script lang=\"uts\">\r\nimport CompForRenderFunction from '@/components/CompForRenderFunction.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(CompForRenderFunction, {}, (): 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/rendering/render/render"
    },
    "unrecognized-component_unrecognized-component": {
      "gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/rendering/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/rendering/unrecognized-component/unrecognized-component"
    }
  },
  "E_built-in": {
    "component_component_component-composition": {
      "gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/component/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/component/component/component-composition"
    },
    "component_component_component-options": {
      "gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/component/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/component/component/component-options"
    },
    "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_slots_child-composition": {
      "gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/component/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/component/slots/child-composition"
    },
    "component_slots_child-options": {
      "gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/component/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/component/slots/child-options"
    },
    "component_slots_slots-composition": {
      "gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/component/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/component/slots/slots-composition"
    },
    "component_slots_slots-options": {
      "gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/component/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/component/slots/slots-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"
    },
    "component_template_template-composition": {
      "gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/component/template/template-composition.uvue",
      "code": "```vue\n<template>\r\n  <view class=\"page\">\r\n    <template v-if=\"isShow\">\r\n      <view class=\"title\">{{ title }}</view>\r\n    </template>\r\n    <view class=\"show-botton\" @click=\"handleShow\">{{ 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 ListItem = {\r\n  name: string\r\n}\r\n\r\n// 自动化测试拿不到 ref\r\ndefineOptions({\r\n  data() {\r\n    return {\r\n      isShow: false\r\n    }\r\n  },\r\n  methods: {\r\n    handleShow() {\r\n      this.isShow = !this.isShow\r\n    }\r\n  }\r\n})\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 goMapStyle = () => {\r\n  uni.navigateTo({ url: '/pages/built-in/component/template/template-map-style-composition' })\r\n}\r\n\r\ndefineExpose({\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/component/template/template-composition"
    },
    "component_template_template-map-style-composition": {
      "gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/component/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/component/template/template-map-style-composition"
    },
    "component_template_template-map-style-options": {
      "gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/component/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/component/template/template-map-style-options"
    },
    "component_template_template-options": {
      "gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/component/template/template-options.uvue",
      "code": "```vue\n<template>\r\n  <view class=\"page\">\r\n    <template v-if=\"isShow\">\r\n      <view class=\"title\">{{ title }}</view>\r\n    </template>\r\n    <view class=\"show-botton\" @click=\"handleShow\">{{ 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>\r\ntype objType = {\r\n  name : string\r\n}\r\nexport default {\r\n  data() {\r\n    return {\r\n      title: \"hello\",\r\n      isShow: false,\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.isShow = !this.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/component/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</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  const count1 = ref(0)\r\n  const count2 = ref(count1)\r\n\r\n  type Counter = {\r\n    count : number\r\n  }\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  // TODO: vue 3.4 开始, 数据更新,也会触发 onTrack, 待升级 vue 版本时,需要确认该变化是否合理及跟进\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          // TODO: vue 3.4 开始, 数据更新,也会触发 onTrack, 待升级 vue 版本时,需要确认该变化是否合理及跟进\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          // TODO: vue 3.4 开始, 数据更新,也会触发 onTrack, 待升级 vue 版本时,需要确认该变化是否合理及跟进\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 => obj.num)\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"
    },
    "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"
    },
    "CompForRenderFunction": {
      "gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/hello-uvue/components/CompForRenderFunction.uvue",
      "code": "```vue\n<template>\r\n  <view>\r\n    <text class=\"uni-common-mt bold component-for-render-function\">component for render function</text>\r\n    <slot />\r\n  </view>\r\n</template>\r\n\n```",
      "webUrl": "https://hellouvue.dcloud.net.cn/#/hello-uvue/components/CompForRenderFunction"
    },
    "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"
    }
  }
}