{"template":{"name":"#### template","description":"> 组件类型：string \n\n 当我们想要使用内置指令而不在 DOM 中渲染元素时，\\<template> 标签可以作为占位符使用。","compatibility":"\n##### 兼容性\n| Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| 4.0 | - | 3.9 | 4.11 |\n","attribute":"##### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| lang | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> |  |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| html | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | html |\n@| pug | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\"]]}' /> | pug |","event":"","example":"","children":"","reference":"\n##### 参见\n- [Reference](https://cn.vuejs.org/api/built-in-special-elements.html#template)"},"slot":{"name":"#### slot","description":"> 组件类型：string \n\n \\<slot> 元素作为组件模板之中的内容分发插槽。\\<slot> 元素自身将被替换。","compatibility":"\n##### 兼容性\n| Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| 4.0 | - | 3.9 | 4.11 |\n","attribute":"##### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| name | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> | 用于命名插槽。 |","event":"","example":"","children":"","reference":"\n##### 参见\n- [Reference](https://cn.vuejs.org/api/built-in-special-elements.html#slot)"},"script":{"name":"#### script","description":"-","compatibility":"\n##### 兼容性\n| Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| 4.0 | - | 3.9 | 4.11 |\n","attribute":"##### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| setup | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"4.0\",\"4.11\"]]}' /> | - |\n| lang | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"4.0\",\"4.11\"]]}' /> |  |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| ts | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\"]]}' /> | typescript |\n@| uts | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"4.0\",\"4.11\"]]}' /> | uts |","event":"","example":"","children":"","reference":"\n##### 参见\n"},"style":{"name":"#### style","description":"-","compatibility":"\n##### 兼容性\n| Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| 4.0 | - | 3.9 | 4.11 |\n","attribute":"##### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| lang | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> |  |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| scss | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> |  |\n@| less | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> |  |\n@| stylus | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.9\",\"4.11\"]]}' /> |  |\n| scoped | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | - |\n| module | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | - |","event":"","example":"","children":"","reference":"\n##### 参见\n"},"keep-alive":{"name":"#### keep-alive","description":"> 组件类型：string \n\n \\<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 \\<transition> 相似，\\<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。","compatibility":"\n##### 兼容性\n| Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| 4.0 | - | 4.0 | 4.11 |\n","attribute":"##### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| include | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"4.0\",\"4.11\"]]}' /> | 字符串或正则表达式。只有名称匹配的组件会被缓存。 |\n| exclude | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"4.0\",\"4.11\"]]}' /> | 字符串或正则表达式。任何名称匹配的组件都不会被缓存。 |\n| max | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"4.0\",\"4.11\"]]}' /> | 最多可以缓存多少组件实例。 |","event":"","example":"","children":"","reference":"\n##### 参见\n- [Reference](https://v3.cn.vuejs.org/api/built-in-components.html#keep-alive)"},"component":{"name":"#### component","description":"> 组件类型：string \n\n 渲染一个“元组件”为动态组件。依 is 的值，来决定哪个组件被渲染。","compatibility":"\n##### 兼容性\n| Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| 4.0 | - | 3.99 | 4.11 |\n","attribute":"##### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| is | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.99\",\"4.11\"]]}' /> | - |\n| inline-template | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"3.99\",\"4.11\"]]}' /> | - |","event":"","example":"","children":"","reference":"\n##### 参见\n- [Reference](https://cn.vuejs.org/api/built-in-special-elements.html#component)"},"transition":{"name":"#### transition","description":"> 组件类型：string \n\n \\<transition> 元素作为单个元素/组件的过渡效果。\\<transition> 只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在检测过的组件层级中。","compatibility":"\n##### 兼容性\n| Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| 4.0 | - | x | x |\n","attribute":"##### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| name | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 用于自动生成 CSS 过渡类名。例如：name: 'fade' 将自动拓展为.fade-enter，.fade-enter-active等。默认类名为 \"v\" |\n| appear | string(true \\| false) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 是否在初始渲染时使用过渡。默认为 false。 |\n| css | string(true \\| false) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 是否使用 CSS 过渡类。默认为 true。如果设置为 false，将只通过组件事件触发注册的 JavaScript 钩子。 |\n| type | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 指定过渡事件类型，侦听过渡何时结束。有效值为 \"transition\" 和 \"animation\"。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| transition | - |  |\n@| animation | - |  |\n| mode | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 控制离开/进入的过渡时间序列。有效的模式有 \"out-in\" 和 \"in-out\"；默认同时生效。 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| out-in | - |  |\n@| in-out | - |  |\n| duration | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 指定过渡的持续时间。默认情况下，Vue 会等待过渡所在根元素的第一个 transitionend 或 animationend 事件。 |\n| enter-class | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | - |\n| leave-class | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | - |\n| appear-class | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | - |\n| enter-to-class | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | - |\n| leave-to-class | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | - |\n| appear-to-class | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | - |\n| enter-active-class | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | - |\n| leave-active-class | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | - |\n| appear-active-class | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | - |\n| @before-enter | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | - |\n| @before-leave | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | - |\n| @before-appear | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | - |\n| @enter | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | - |\n| @leave | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | - |\n| @appear | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | - |\n| @after-enter | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | - |\n| @after-leave | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | - |\n| @after-appear | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | - |\n| @enter-cancelled | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | - |\n| @leave-cancelled | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | v-show only |\n| @appear-cancelled | Any | - | - | - |","event":"","example":"","children":"","reference":"\n##### 参见\n- [Reference](https://v3.cn.vuejs.org/api/built-in-components.html#transition)"},"transition-group":{"name":"#### transition-group","description":"> 组件类型：string \n\n \\<transition-group> 元素作为多个元素/组件的过渡效果。\\<transition-group> 渲染一个真实的 DOM 元素。默认渲染 \\<span>，可以通过 tag 属性配置哪个元素应该被渲染。","compatibility":"\n##### 兼容性\n| Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| 4.0 | - | x | x |\n","attribute":"##### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| tag | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 默认为 span。 |\n| move-class | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 覆盖移动过渡期间应用的 CSS 类。 |\n| name | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 用于自动生成 CSS 过渡类名。例如：name: 'fade' 将自动拓展为.fade-enter，.fade-enter-active等。默认类名为 \"v\" |\n| appear | string(true \\| false) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 是否在初始渲染时使用过渡。默认为 false。 |\n| css | string(true \\| false) | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 是否使用 CSS 过渡类。默认为 true。如果设置为 false，将只通过组件事件触发注册的 JavaScript 钩子。 |\n| type | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 指定过渡事件类型，侦听过渡何时结束。有效值为 \"transition\" 和 \"animation\"。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。 |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| transition | - |  |\n@| animation | - |  |\n| mode | Any | - | - | - |\n| duration | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | 指定过渡的持续时间。默认情况下，Vue 会等待过渡所在根元素的第一个 transitionend 或 animationend 事件。 |\n| enter-class | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | - |\n| leave-class | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | - |\n| appear-class | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | - |\n| enter-to-class | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | - |\n| leave-to-class | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | - |\n| appear-to-class | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | - |\n| enter-active-class | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | - |\n| leave-active-class | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | - |\n| appear-active-class | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | - |\n| @before-enter | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | - |\n| @before-leave | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | - |\n| @before-appear | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | - |\n| @enter | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | - |\n| @leave | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | - |\n| @appear | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | - |\n| @after-enter | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | - |\n| @after-leave | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | - |\n| @after-appear | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | - |\n| @enter-cancelled | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | - |\n| @leave-cancelled | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | v-show only |\n| @appear-cancelled | Any | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"x\",\"x\"]]}' /> | - |","event":"","example":"","children":"","reference":"\n##### 参见\n- [Reference](https://v3.cn.vuejs.org/api/built-in-components.html#transition-group)"},"teleport":{"name":"#### teleport","description":"> 组件类型：string \n\n Teleport 提供了一种干净的方法，允许我们控制在 DOM 中哪个父节点下呈现 HTML，而不必求助于全局状态或将其拆分为两个组件。","compatibility":"\n##### 兼容性\n| Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| 4.0 | - | 4.0 | 4.11 |\n","attribute":"##### 属性 \n| 名称 | 类型 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- |  :-: | :- |\n| to | string | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"4.0\",\"4.11\"]]}' /> | 必须是有效的查询选择器或 HTMLElement (如果在浏览器环境中使用)。指定将在其中移动 \\<teleport> 内容的目标元素 |\n| disabled | boolean | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"4.0\",\"-\",\"4.0\",\"4.11\"]]}' /> | 此可选属性可用于禁用 \\<teleport> 的功能，这意味着其插槽内容将不会移动到任何位置，而是在您在周围父组件中指定了 \\<teleport> 的位置渲染。 |","event":"","example":"","children":"","reference":"\n##### 参见\n- [Reference](https://v3.vuejs.org/api/built-in-components.html#teleport)"},"application":{"compatibility":"|  | Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- | :- |\n| createApp() | 4.0 | 4.41 | √ | 4.11 |\n| createSSRApp() | 4.0 | 4.41 | √ | 4.11 |\n| app.mount() | 4.0 | 4.41 | √ | 4.11 |\n| app.unmount() | 4.0 | 4.41 | √ | 4.11 |\n| app.component() | 4.0 | 4.41 | √ | 4.11 |\n| app.directive() | - | - | - | - |\n| app.use() | 4.0 | 4.41 | 3.99 | 4.11 |\n| app.mixin() | 4.0 | 4.41 | 3.99 | 4.11 |\n| app.provide() | 4.0 | 4.41 | 3.99 | 4.11 |\n| app.runWithContext() | - | - | - | - |\n| app.version | 4.0 | 4.41 | √ | 4.11 |\n| app.config | - | - | - | - |\n| app.config.errorHandler | 4.0 | 4.41 | x | 4.11 |\n| app.config.warnHandler | - | - | - | - |\n| app.config.performance | - | - | - | - |\n| app.config.compilerOptions | - | - | - | - |\n| app.config.globalProperties | 4.0 | 4.41 | 3.99 | 4.11 |\n| app.config.optionMergeStrategies | - | - | - | - |\n| globalData | 4.0 | 4.41 | 3.9 | 4.0 |\n| onLaunch() | 4.0 | 4.41 | 3.9 | 4.0 |\n| onShow() | 4.0 | 4.41 | 3.9 | 4.0 |\n| onHide() | 4.0 | 4.41 | 3.9 | 4.0 |\n| onLastPageBackPress() | x | x | 3.9 | x |\n| onExit() | x | x | 3.9 | x |\n| onError() | 4.0 | 4.41 | 4.21 | 4.21 |","example":"","onLaunch":{"name":"### onLaunch?(options: OnLaunchOptions): void; @onlaunch","description":"生命周期回调，监听应用初始化，应用初始化完成时触发，全局只触发一次。\n","compatibility":"#### onLaunch 兼容性 \n| Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| 4.0 | 4.41 | 3.9 | 4.0 |\n","param":"#### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- |  :-: | :- |\n| options | **OnLaunchOptions** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- |  :-: | :- |\n@| path | string | 是 | - | - | 应用启动页面路径 |\n@| appScheme | string | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"4.25\",\"4.25\"]]}' /> | 首次启动时的Scheme。返回值与App.onLaunch的回调参数一致<br/> |\n@| appLink | string | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"4.25\"]]}' /> | 首次启动时的appLink。返回值与App.onLaunch的回调参数一致<br/> | \n","returnValue":"","tutorial":"\n#### 参见\n - [参见uni-app相关文档](https://uniapp.dcloud.net.cn/collocation/App.html#applifecycle)"},"onShow":{"name":"### onShow?(options: OnShowOptions): void; @onshow","description":"生命周期回调 监听应用显示\n\n应用启动，或从后台进入前台显示时触发\n","compatibility":"#### onShow 兼容性 \n| Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| 4.0 | 4.41 | 3.9 | 4.0 |\n","param":"#### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- |  :-: | :- |\n| options | **OnShowOptions** | 是 | - | - | - |\n@| 名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |\n@| :- | :- | :- | :- |  :-: | :- |\n@| path | string | 是 | - | - | 应用启动页面路径 |\n@| appScheme | string | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"4.25\",\"4.25\"]]}' /> | 本次启动时的Scheme。返回值与App.onShow的回调参数一致<br/> |\n@| appLink | string | 否 | - | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"4.25\"]]}' /> | 本次启动时的appLink。返回值与App.onShow的回调参数一致<br/> | \n","returnValue":"","tutorial":"\n#### 参见\n - [参见uni-app相关文档](https://uniapp.dcloud.net.cn/collocation/App.html#applifecycle)"},"onHide":{"name":"### onHide?(): void; @onhide","description":"生命周期回调 监听应用隐藏\n\n应用从前台进入后台时触发\n","compatibility":"#### onHide 兼容性 \n| Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| 4.0 | 4.41 | 3.9 | 4.0 |\n","param":"","returnValue":"","tutorial":"\n#### 参见\n - [参见uni-app相关文档](https://uniapp.dcloud.net.cn/collocation/App.html#applifecycle)"},"onError":{"name":"### onError?(error: any): void; @onerror","description":"错误监听函数\n应用发生脚本错误或 API 调用报错时触发\n4.33+ App 端支持监听异步逻辑中的错误","compatibility":"#### onError 兼容性 \n| Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| 4.0 | 4.41 | 4.21 | 4.21 |\n","param":"#### 参数 \n\n| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |\n| :- | :- | :- | :- |  :-: | :- |\n| error | any | 是 | - | - | 错误信息 | \n","returnValue":"","tutorial":"\n#### 参见\n - [参见uni-app相关文档](https://uniapp.dcloud.net.cn/collocation/App.html#applifecycle)"},"onExit":{"name":"### onExit?(): void; @onexit","description":"监听应用退出。app-uvue-android 3.9+\n","compatibility":"#### onExit 兼容性 \n| Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| x | x | 3.9 | x |\n","param":"","returnValue":"","tutorial":""},"onLastPageBackPress":{"name":"### onLastPageBackPress?(): void; @onlastpagebackpress","description":"最后一个页面按下Android back键，常用于自定义退出。app-uvue-android 3.9+\n","compatibility":"#### onLastPageBackPress 兼容性 \n| Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| x | x | 3.9 | x |\n","param":"","returnValue":"","tutorial":"\n#### 参见\n - [参见uni-app相关文档](https://uniapp.dcloud.net.cn/collocation/App.html#applifecycle)"}},"general":{"compatibility":"|  | Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- | :- |\n| version | 4.0 | 4.41 | √ | 4.11 |\n| nextTick() | 4.0 | 4.41 | √ | 4.11 |\n| defineComponent() | 4.0 | 4.41 | x | x |\n| defineAsyncComponent() | - | - | - | - |\n| defineCustomElement() | - | - | - | - |","example":""},"reactivity_core":{"compatibility":"|  | Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- | :- |\n| ref() | 4.0 | 4.41 | √ | 4.11 |\n| computed() | 4.0 | 4.41 | √ | 4.11 |\n| reactive() | 4.0 | 4.41 | √ | 4.11 |\n| readonly() | 4.0 | 4.41 | 4.0 | 4.11 |\n| watchEffect() | 4.0 | 4.41 | 4.0 | 4.11 |\n| watchPostEffect() | 4.0 | 4.41 | 4.0 | 4.11 |\n| watchSyncEffect() | 4.0 | 4.41 | 4.0 | 4.11 |\n| watch() | 4.0 | 4.41 | 4.0 | 4.11 |","example":""},"reactivity_utilities":{"compatibility":"|  | Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- | :- |\n| isRef() | 4.0 | 4.41 | 4.0 | 4.11 |\n| unref() | 4.0 | 4.41 | 4.0 | 4.11 |\n| toRef() | 4.11 | 4.41 | 4.0 | 4.11 |\n| toValue() | 4.11 | 4.41 | 4.0 | 4.11 |\n| toRefs() | 4.11 | 4.41 | 4.0 | 4.11 |\n| isProxy() | 4.0 | 4.41 | 4.0 | 4.11 |\n| isReactive() | 4.0 | 4.41 | 4.0 | 4.11 |\n| isReadonly() | 4.0 | 4.41 | 4.0 | 4.11 |","example":""},"reactivity_advanced":{"compatibility":"|  | Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- | :- |\n| shallowRef() | 4.0 | 4.41 | 4.0 | 4.11 |\n| triggerRef() | x | 4.41 | 4.0 | 4.11 |\n| customRef() | 4.0 | 4.41 | 4.0 | 4.11 |\n| shallowReactive() | 4.0 | 4.41 | 4.0 | 4.11 |\n| shallowReadonly() | 4.0 | 4.41 | 4.0 | 4.11 |\n| toRaw() | 4.0 | 4.41 | 4.0 | 4.11 |\n| markRaw() | - | - | - | - |\n| effectScope() | 4.0 | 4.41 | 4.0 | 4.11 |\n| getCurrentScope() | 4.0 | 4.41 | 4.0 | 4.11 |\n| onScopeDispose() | 4.0 | 4.41 | 4.0 | 4.11 |","example":""},"composition_lifecycle":{"compatibility":"|  | Web | 微信小程序 | Android | iOS | 描述 |\n| :- | :- | :- | :- | :- | :- |\n| onMounted() | 4.0 | 4.41 | 4.0 | 4.11 | el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。<br/>如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。 |\n| onUpdated() | 4.0 | 4.41 | 4.0 | 4.11 | 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。 |\n| onUnmounted() | 4.0 | 4.41 | 4.0 | 4.11 | 在一个组件实例被卸载之后调用。 |\n| onBeforeMount() | 4.0 | 4.41 | 4.0 | 4.11 | 在挂载开始之前被调用：相关的 render 函数首次被调用。 |\n| onBeforeUpdate() | 4.0 | 4.41 | 4.0 | 4.11 | 数据更新时调用，发生在虚拟 DOM 打补丁之前。<br/>这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。 |\n| onBeforeUnmount() | 4.0 | 4.41 | 4.0 | 4.11 | 在一个组件实例被卸载之前调用。 |\n| onErrorCaptured() | x | - | x | x | 注册一个钩子，在捕获了后代组件传递的错误时调用。 |\n| onRenderTracked() | x | - | x | x | 注册一个调试钩子，当组件渲染过程中追踪到响应式依赖时调用。 |\n| onRenderTriggered() | x | - | x | x | 注册一个调试钩子，当响应式依赖的变更触发了组件渲染时调用。 |\n| onActivated() | 4.0 | x | x | x | keep-alive 组件激活时调用。 |\n| onDeactivated() | 4.0 | x | x | x | keep-alive 组件停用时调用。 |\n| onServerPrefetch() | x | x | x | x | 注册一个异步函数，在组件实例在服务器上被渲染之前调用。<br/>如果这个钩子返回了一个 Promise，服务端渲染会在渲染该组件前等待该 Promise 完成。<br/>这个钩子仅会在服务端渲染中执行，可以用于执行一些仅存在于服务端的数据抓取过程。 |","example":""},"composition_injection":{"compatibility":"|  | Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- | :- |\n| provide() | 4.0 | 4.41 | 4.0 | 4.11 |\n| inject() | - | - | - | - |\n| hasInjectionContext() | 4.11 | 4.41 | 4.0 | 4.11 |","example":""},"options_state":{"compatibility":"|  | Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- | :- |\n| data | 4.0 | 4.41 | 3.9 | 4.11 |\n| props | 4.0 | 4.41 | 3.9 | 4.11 |\n| computed | 4.0 | 4.41 | 3.9 | 4.11 |\n| methods | 4.0 | 4.41 | 3.9 | 4.11 |\n| watch | 4.0 | 4.41 | 3.9 | 4.11 |\n| emits | 4.0 | 4.41 | 3.9 | 4.11 |\n| expose | 4.0 | 4.41 | x | x |","example":""},"options_rendering":{"compatibility":"|  | Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- | :- |\n| template | x | 4.41 | x | x |\n| render | 4.0 | - | 3.9 | 4.11 |\n| compilerOptions | x | x | x | x |\n| slots | 4.0 | 4.41 | 3.9 | 4.11 |","example":""},"options_lifecycle":{"compatibility":"|  | Web | 微信小程序 | Android | iOS | 描述 |\n| :- | :- | :- | :- | :- | :- |\n| beforeCreate | 4.0 | 4.41 | 3.9 | 4.11 | 在组件实例初始化完成之后立即调用。<br/>在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 |\n| created | 4.0 | 4.41 | 3.9 | 4.11 | 在组件实例处理完所有与状态相关的选项后调用。<br/>在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。<br/>然而，此时挂载阶段还未开始，因此 $el 属性仍不可用。 |\n| beforeMount | 4.0 | 4.41 | 3.9 | 4.11 | 在组件被挂载之前调用。<br/>相关的 render 函数首次被调用。<br/>当这个钩子被调用时，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点。<br/>它即将首次执行 DOM 渲染过程。 |\n| mounted | 4.0 | 4.41 | 3.9 | 4.11 | 在组件被挂载之后调用。<br/>el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。<br/>如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。 |\n| beforeUpdate | 4.0 | 4.41 | 3.9 | 4.11 | 在组件即将因为一个响应式状态变更而更新其 DOM 树之前调用。<br/>数据更新时调用，发生在虚拟 DOM 打补丁之前。<br/>这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。 |\n| updated | 4.0 | 4.41 | 3.9 | 4.11 | 在组件因为一个响应式状态变更而更新其 DOM 树之后调用。<br/>父组件的更新钩子将在其子组件的更新钩子之后调用。<br/>这个钩子会在组件的任意 DOM 更新后被调用，这些更新可能是由不同的状态变更导致的。<br/>如果你需要在某个特定的状态更改后访问更新后的 DOM，请使用 nextTick() 作为替代。 |\n| beforeUnmount | 4.0 | 4.41 | 3.9 | 4.11 | 在一个组件实例被卸载之前调用。<br/>当这个钩子被调用时，组件实例依然还保有全部的功能。 |\n| unmounted | 4.0 | 4.41 | 3.9 | 4.11 | 在一个组件实例被卸载之后调用。<br/>可以在这个钩子中手动清理一些副作用，例如计时器、DOM 事件监听器或者与服务器的连接。 |\n| errorCaptured | 4.0 | 4.41 | x | x | 在捕获了后代组件传递的错误时调用。<br/>这个钩子带有三个实参：错误对象、触发该错误的组件实例，以及一个说明错误来源类型的信息字符串。<br/>这个钩子可以通过返回 false 来阻止错误继续向上传递。 |\n| renderTracked | 4.0 | 4.41 | x | x | 在一个响应式依赖被组件的渲染作用追踪后调用。<br/>跟踪虚拟 DOM 重新渲染时调用。钩子接收 debugger event 作为参数。<br/>此事件告诉你哪个操作跟踪了组件以及该操作的目标对象和键。 |\n| renderTriggered | 4.0 | 4.41 | x | x | 在一个响应式依赖被组件触发了重新渲染之后调用。<br/>当虚拟 DOM 重新渲染为 triggered.Similarly 为renderTracked，接收 debugger event 作为参数。<br/>此事件告诉你是什么操作触发了重新渲染，以及该操作的目标对象和键。 |\n| activated | 4.0 | x | 4.0 | 4.11 | 若组件实例是 \\<KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。<br/>keep-alive 组件激活时调用。 |\n| deactivated | 4.0 | x | 4.0 | 4.11 | 若组件实例是 \\<KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。<br/>keep-alive 组件停用时调用。 |\n| serverPrefetch | x | x | x | x | 当组件实例在服务器上被渲染之前要完成的异步函数。<br/>如果这个钩子返回了一个 Promise，服务端渲染会在渲染该组件前等待该 Promise 完成。 |","example":""},"options_composition":{"compatibility":"|  | Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- | :- |\n| provide | 4.0 | 4.41 | 3.99 | 4.11 |\n| inject | 4.0 | 4.41 | 3.99 | 4.11 |\n| mixins | 4.0 | 4.41 | 3.99 | 4.11 |\n| extends | - | - | - | - |","example":""},"options_misc":{"compatibility":"|  | Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- | :- |\n| name | 4.0 | 4.41 | 3.9 | 4.11 |\n| inheritAttrs | 4.0 | - | 3.9 | 4.11 |\n| components | 4.0 | 4.41 | 3.9 | 4.11 |\n| directives | - | - | - | - |","example":""},"component_instance":{"compatibility":"|  | Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- | :- |\n| $data | 4.0 | 4.41 | √ | 4.11 |\n| $props | 4.0 | 4.41 | √ | 4.11 |\n| $el | 4.0 | 4.41 | √ | 4.11 |\n| $options | 4.0 | 4.41 | √ | 4.11 |\n| $parent | 4.0 | 4.41 | √ | 4.11 |\n| $root | 4.0 | 4.41 | √ | 4.11 |\n| $slots | 4.0 | 4.41 | √ | 4.11 |\n| $refs | 4.0 | 4.41 | √ | 4.11 |\n| $attrs | 4.0 | 4.41 | √ | 4.11 |\n| $watch() | 4.0 | 4.41 | √ | 4.11 |\n| $emit | 4.0 | 4.41 | √ | 4.11 |\n| $forceUpdate | 4.0 | 4.41 | √ | 4.11 |\n| $nextTick | 4.0 | 4.41 | √ | 4.11 |\n| $callMethod | 4.0 | 4.41 | √ | 4.11 |","example":""},"directives":{"compatibility":"|  | Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- | :- |\n| v-text | 4.0 | - | x | x |\n| v-html | 4.0 | - | 3.99 | x |\n| v-show | 4.0 | - | 3.9 | 4.11 |\n| v-if | 4.0 | - | 3.9 | 4.11 |\n| v-else | 4.0 | - | 3.9 | 4.11 |\n| v-else-if | 4.0 | - | 3.9 | 4.11 |\n| v-for | 4.0 | - | 3.9 | 4.11 |\n| v-on | 4.0 | - | 3.9 | 4.11 |\n| v-bind | 4.0 | - | 3.9 | 4.11 |\n| v-model | 4.0 | - | 3.9 | 4.11 |\n| v-slot | 4.0 | - | 3.9 | 4.11 |\n| v-pre | 4.0 | - | 3.99 | 4.11 |\n| v-once | x | - | 3.99 | 4.11 |\n| v-memo | x | - | 3.99 | 4.11 |\n| v-cloak | 4.0 | - | x | x |","example":""},"special_attributes":{"compatibility":"|  | Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- | :- |\n| key | 4.0 | - | 3.9 | 4.11 |\n| ref | 4.0 | - | 3.9 | 4.11 |\n| is | 4.0 | - | 3.99 | 4.11 |","example":""},"render_function":{"compatibility":"|  | Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- | :- |\n| h() | 4.0 | x | 3.99 | 4.11 |\n| mergeProps() | 4.0 | - | 4.0 | 4.11 |\n| cloneVNode() | 4.0 | - | 4.0 | x |\n| isVNode() | 4.0 | - | √ | 4.11 |\n| resolveComponent() | 4.0 | x | √ | 4.11 |\n| resolveDirective() | - | - | - | - |\n| withDirectives() | 4.0 | 4.41 | x | 4.11 |\n| withModifiers() | 4.0 | - | √ | 4.11 |","example":""},"single_file_component_script":{"compatibility":"|  | Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- | :- |\n| defineProps() | 4.0 | 4.41 | 4.0 | 4.11 |\n| defineEmits() | 4.0 | 4.41 | 4.0 | 4.11 |\n| defineModel() | 4.11 | 4.41 | 4.0 | 4.11 |\n| defineExpose() | 4.0 | 4.41 | 4.0 | 4.11 |\n| defineOptions() | 4.11 | 4.41 | 4.0 | 4.11 |\n| defineSlots() | 4.0 | 4.41 | 4.0 | 4.11 |\n| useSlots() | 4.0 | 4.41 | 4.0 | 4.11 |\n| useAttrs() | 4.0 | 4.41 | 4.0 | 4.11 |","example":""},"eventModifiers":{"stop":{"name":"### stop\n","description":"单击事件将停止传递","compatibility":"**兼容性** \n | Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| 4.0 | - | 3.9 | 4.11 |"},"prevent":{"name":"### prevent\n","description":"提交事件将不再重新加载页面","compatibility":"**兼容性** \n | Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| 4.0 | - | x | x |"},"capture":{"name":"### capture\n","description":"添加事件监听器时，使用 `capture` 捕获模式（例如：指向内部元素的事件，在被内部元素处理前，先被外部处理）","compatibility":"**兼容性** \n | Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| 4.0 | - | x | x |"},"self":{"name":"### self\n","description":"仅当 event.target 是元素本身时才会触发事件处理器（仅当 event.target 是元素本身时才会触发事件处理器）","compatibility":"**兼容性** \n | Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| 4.0 | - | x | x |"},"once":{"name":"### once\n","description":"点击事件最多被触发一次","compatibility":"**兼容性** \n | Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| 4.0 | - | 3.9 | x |"},"passive":{"name":"### passive\n","description":"滚动事件的默认行为 (scrolling) 将立即发生而非等待 `onScroll` 完成（滚动事件的默认行为 (scrolling) 将立即发生而非等待 `onScroll` 完成）","compatibility":"**兼容性** \n | Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| 4.0 | - | x | x |"}},"keyModifiers":{"enter":{"name":"### enter\n","description":"仅在 `key` 为 `Enter` 时调用事件处理器（keycode 为 13）","compatibility":"**兼容性** \n | Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| 4.0 | - | x | x |"},"tab":{"name":"### tab\n","description":"仅在 `key` 为 `Tab` 时调用事件处理器（keycode 为 9）","compatibility":"**兼容性** \n | Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| 4.0 | - | x | x |"},"delete":{"name":"### delete\n","description":"仅在 `key` 为 `Delete` 或 `Backspace` 时调用事件处理器","compatibility":"**兼容性** \n | Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| 4.0 | - | x | x |"},"esc":{"name":"### esc\n","description":"仅在 `key` 为 `Escape` 时调用事件处理器（keycode 为 27）","compatibility":"**兼容性** \n | Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| 4.0 | - | x | x |"},"space":{"name":"### space\n","description":"仅在 `key` 为 `Space` 时调用事件处理器（keycode 为 32）","compatibility":"**兼容性** \n | Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| 4.0 | - | x | x |"},"up":{"name":"### up\n","description":"仅在 `key` 为 `ArrowUp` 时调用事件处理器（keycode 为 38）","compatibility":"**兼容性** \n | Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| 4.0 | - | x | x |"},"down":{"name":"### down\n","description":"仅在 `key` 为 `ArrowDown` 时调用事件处理器（keycode 为 40）","compatibility":"**兼容性** \n | Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| 4.0 | - | x | x |"},"left":{"name":"### left\n","description":"仅在 `key` 为 `ArrowLeft` 时调用事件处理器（keycode 为 37）","compatibility":"**兼容性** \n | Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| 4.0 | - | x | x |"},"right":{"name":"### right\n","description":"仅在 `key` 为 `ArrowRight` 时调用事件处理器（keycode 为 39）","compatibility":"**兼容性** \n | Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| 4.0 | - | x | x |"}},"mouseModifiers":{"left":{"name":"### left\n","description":"单击鼠标左键时触发鼠标事件。","compatibility":"**兼容性** \n | Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| 4.0 | - | x | x |"},"right":{"name":"### right\n","description":"单击鼠标右键时触发鼠标事件","compatibility":"**兼容性** \n | Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| 4.0 | - | x | x |"},"middle":{"name":"### middle\n","description":"单击鼠标中键（滚轮）时触发鼠标事件","compatibility":"**兼容性** \n | Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| 4.0 | - | x | x |"}},"systemModifiers":{"ctrl":{"name":"### ctrl\n","description":"当按下 \\<Control> 时触发鼠标或键盘事件。","compatibility":"**兼容性** \n | Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| 4.0 | - | x | x |"},"alt":{"name":"### alt\n","description":"当按下 \\<Alt> 时触发鼠标或键盘事件。","compatibility":"**兼容性** \n | Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| 4.0 | - | x | x |"},"shift":{"name":"### shift\n","description":"当按下 \\<Shift> 时触发鼠标或键盘事件。","compatibility":"**兼容性** \n | Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| 4.0 | - | x | x |"},"meta":{"name":"### meta\n","description":"当按下 \\<Meta> 时触发鼠标或键盘事件。","compatibility":"**兼容性** \n | Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| 4.0 | - | x | x |"},"exact":{"name":"### exact\n","description":"`.exact` 修饰符允许控制触发事件所需的系统修饰符的精确组合。","compatibility":"**兼容性** \n | Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| 4.0 | - | x | x |"}},"propsModifiers":{"sync":{"name":"### sync\n","description":"","compatibility":""}},"vModelModifiers":{"lazy":{"name":"### lazy\n","description":"默认情况下，`v-model` 会在每次 `input` 事件后更新数据 (IME 拼字阶段的状态例外)。你可以添加 `lazy` 修饰符来改为在每次 `change` 事件后更新数据","compatibility":"**兼容性** \n | Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| x | - | 3.9 | x |"},"number":{"name":"### number\n","description":"如果你想让用户输入自动转换为数字，你可以在 `v-model` 后添加 `.number` 修饰符来管理输入","compatibility":"**兼容性** \n | Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| 4.0 | - | 3.9 | x |"},"trim":{"name":"### trim\n","description":"如果你想要默认自动去除用户输入内容中两端的空格，你可以在 `v-model` 后添加 `.trim` 修饰符","compatibility":"**兼容性** \n | Web | 微信小程序 | Android | iOS |\n| :- | :- | :- | :- |\n| 4.0 | - | 3.9 | x |"}},"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    // #ifndef APP-ANDROID\r\n    mixins: [\r\n      {\r\n        data() {\r\n          return {\r\n            appMixinDataMsg: 'App.uvue mixin data msg'\r\n          }\r\n        }\r\n      }],\r\n    // #endif\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      if(this.globalPropertiesStr === 'default string'){\r\n        setLifeCycleNum(state.lifeCycleNum + 10)\r\n      }\r\n      console.log('App Show')\r\n    },\r\n    onHide: function () {\r\n      // 自动化测试\r\n      setLifeCycleNum(state.lifeCycleNum - 100)\r\n      console.log('App Hide')\r\n    },\r\n    // #ifdef APP-ANDROID\r\n    onLastPageBackPress: function () {\r\n      // 自动化测试\r\n      setLifeCycleNum(state.lifeCycleNum - 1000)\r\n      console.log('App LastPageBackPress')\r\n      if (firstBackTime == 0) {\r\n        uni.showToast({\r\n          title: '再按一次退出应用',\r\n          position: 'bottom',\r\n        })\r\n        firstBackTime = Date.now()\r\n        setTimeout(() => {\r\n          firstBackTime = 0\r\n        }, 2000)\r\n      } else if (Date.now() - firstBackTime < 2000) {\r\n        firstBackTime = Date.now()\r\n        uni.exit()\r\n      }\r\n    },\r\n    onExit() {\r\n      console.log('App Exit')\r\n    },\r\n    // #endif\r\n    onError: function(error: any) {\r\n      console.log('App Error', error)\r\n      setLifeCycleNum(state.lifeCycleNum + 100)\r\n    },\r\n    methods: {\r\n      checkLaunchPath() : boolean {\r\n        const HOME_PATH = 'pages/index/index'\r\n        if (state.appLaunchPath != HOME_PATH) {\r\n          return false\r\n        }\r\n        if (state.appShowPath != HOME_PATH) {\r\n          return false\r\n        }\r\n        return true\r\n      },\r\n      // #ifndef APP-ANDROID\r\n      checkAppMixin() : boolean {\r\n        if(this.globalMixinDataMsg1 != '通过 defineMixin 定义全局 mixin data') {\r\n          return false\r\n        }\r\n        if(this.appMixinDataMsg != 'App.uvue mixin data msg') {\r\n          return false\r\n        }\r\n        return true\r\n      }\r\n      // #endif\r\n    }\r\n  }\r\n</script>\r\n\r\n<style>\r\n  @import './styles/common.css';\r\n\r\n  .list-item-text {\r\n    line-height: 36px;\r\n  }\r\n\r\n  .split-title {\r\n    margin: 20px 0 5px;\r\n    padding: 5px 0;\r\n    border-bottom: 1px solid #dfdfdf;\r\n  }\r\n\r\n  .btn-view {\r\n    margin: 10px 0;\r\n    padding: 10px;\r\n    border: 1px solid #dfdfdf;\r\n    border-radius: 3px;\r\n  }\r\n</style>\r\n<style>\r\n.text-red{\r\n  color: red;\r\n}\r\n</style>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#"}},"E_type":{"type":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/type/type.uvue","code":"```vue\n<template>\r\n  <!-- #ifdef APP -->\r\n  <scroll-view style=\"flex: 1\">\r\n  <!-- #endif -->\r\n  <!-- #ifdef APP -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n<script lang='uts'>\r\n  // 仅引用类型，模板中不使用，也要保证不报错\r\n  let testType: TestTypeComponentPublicInstance | null = null;\r\n  export default {\r\n    data() {\r\n      return {}\r\n    },\r\n    onLoad() {\r\n      console.log('testType', testType)\r\n    },\r\n  }\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/type/type"}},"E_app-instance":{"component_component":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/app-instance/component/component.uvue","code":"```vue\n<template>\r\n  <view class=\"page\">\r\n    <CompForAppComponent class=\"component-for-app-component\" />\r\n  </view>\r\n</template>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/app-instance/component/component"},"globalProperties_globalProperties-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/app-instance/globalProperties/globalProperties-composition.uvue","code":"```vue\n<template>\r\n  <!-- #ifdef APP -->\r\n  <scroll-view style=\"flex: 1; padding-bottom: 20px\">\r\n    <!-- #endif -->\r\n    <view class=\"uni-padding-wrap\">\r\n      <text class=\"mt-10\"\r\n        >globalProperties string: {{ globalPropertiesStr }}</text\r\n      >\r\n      <text class=\"mt-10\"\r\n        >globalProperties number: {{ globalPropertiesNum }}</text\r\n      >\r\n      <text class=\"mt-10\"\r\n        >globalProperties boolean: {{ globalPropertiesBool }}</text\r\n      >\r\n      <text class=\"mt-10\"\r\n        >globalProperties object: {{ globalPropertiesObj }}</text\r\n      >\r\n      <text class=\"mt-10\"\r\n        >globalProperties null: {{ globalPropertiesNull }}</text\r\n      >\r\n      <text class=\"mt-10\"\r\n        >globalProperties array: {{ globalPropertiesArr }}</text\r\n      >\r\n      <text class=\"mt-10\"\r\n        >globalProperties set: {{ globalPropertiesSet }}</text\r\n      >\r\n      <text class=\"mt-10\"\r\n        >globalProperties map: {{ globalPropertiesMap }}</text\r\n      >\r\n      <text class=\"mt-10\"\r\n        >globalProperties reactiveObj.str:\r\n        {{ globalPropertiesReactiveObj['str'] }}</text\r\n      >\r\n      <text class=\"mt-10\"\r\n        >globalProperties reactiveObj.num:\r\n        {{ globalPropertiesReactiveObj['num'] }}</text\r\n      >\r\n      <text class=\"mt-10\"\r\n        >globalProperties reactiveObj.boolean:\r\n        {{ globalPropertiesReactiveObj['bool'] }}</text\r\n      >\r\n      <text class=\"mt-10\"\r\n        >globalProperties fun 返回值: {{ globalPropertiesFn() }}</text\r\n      >\r\n      <button @click=\"updateGlobalProperties\" class=\"mt-10\">\r\n        update globalProperties\r\n      </button>\r\n    </view>\r\n    <!-- #ifdef APP -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\ntype MyGlobalProperties = {\r\n\tstr : string;\r\n\tnum : number;\r\n\tbool : boolean;\r\n\tobj : UTSJSONObject;\r\n\tnull : string | null;\r\n\tarr : number[];\r\n\tset : string[];\r\n\tmap : UTSJSONObject;\r\n\treactiveObj : UTSJSONObject;\r\n  globalPropertiesFnRes: string;\r\n}\r\n\r\nconst myGlobalProperties = reactive<MyGlobalProperties>({\r\n\tstr: '',\r\n\tnum: 0,\r\n\tbool: false,\r\n\tobj: {},\r\n\tnull: null,\r\n\tarr: [] as number[],\r\n\tset: [] as string[],\r\n\tmap: {},\r\n\treactiveObj: {\r\n\t\tstr: '',\r\n\t\tnum: 0,\r\n\t\tbool: false,\r\n\t},\r\n  globalPropertiesFnRes: '',\r\n} as MyGlobalProperties)\r\n\r\nconst instance = getCurrentInstance()!.proxy!\r\nconst getGlobalProperties = () => {\r\n\tmyGlobalProperties.str = instance.globalPropertiesStr\r\n\tmyGlobalProperties.num = instance.globalPropertiesNum\r\n\tmyGlobalProperties.bool = instance.globalPropertiesBool\r\n\tmyGlobalProperties.obj = instance.globalPropertiesObj\r\n\tmyGlobalProperties.null = instance.globalPropertiesNull\r\n\tmyGlobalProperties.arr = instance.globalPropertiesArr\r\n\tmyGlobalProperties.set = []\r\n\tinstance.globalPropertiesSet.forEach(item => {\r\n\t\tmyGlobalProperties.set.push(item)\r\n\t})\r\n\tmyGlobalProperties.map = {}\r\n\tinstance.globalPropertiesMap.forEach((value: number, key: string) => {\r\n\t\tmyGlobalProperties.map[key] = value\r\n\t})\r\n\tmyGlobalProperties.reactiveObj = instance.globalPropertiesReactiveObj\r\n\tmyGlobalProperties.globalPropertiesFnRes = instance.globalPropertiesFn()\r\n}\r\n\r\nsetTimeout(() => {\r\n  // 等待 globalProperties-options resetGlobalProperties 完成\r\n\tgetGlobalProperties()\r\n}, 1000)\r\n\r\nconst updateGlobalProperties = () => {\r\n\tinstance.globalPropertiesStr = 'new string'\r\n\tinstance.globalPropertiesNum = 100\r\n\tinstance.globalPropertiesBool = true\r\n\tinstance.globalPropertiesObj = {\r\n\t\tstr: 'new globalProperties obj string',\r\n\t\tnum: 100,\r\n\t\tbool: true,\r\n\t}\r\n\tinstance.globalPropertiesNull = 'not null'\r\n\tinstance.globalPropertiesArr = [1, 2, 3]\r\n\tinstance.globalPropertiesSet = new Set(['a', 'b', 'c'])\r\n\tinstance.globalPropertiesMap = new Map([['a', 1], ['b', 2], ['c', 3]])\r\n\tinstance.globalPropertiesReactiveObj['str'] = 'new reactive string'\r\n\tinstance.globalPropertiesReactiveObj['num'] = 200\r\n\tinstance.globalPropertiesReactiveObj['bool'] = true\r\n\tgetGlobalProperties()\r\n}\r\n\r\ndefineExpose({\r\n  myGlobalProperties,\r\n  updateGlobalProperties\r\n})\r\n</script>\r\n\r\n<style>\r\n.uni-padding-wrap {\r\n  padding: 10px;\r\n}\r\n</style>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/app-instance/globalProperties/globalProperties-composition"},"globalProperties_globalProperties-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/app-instance/globalProperties/globalProperties-options.uvue","code":"```vue\n<template>\r\n  <!-- #ifdef APP -->\r\n  <scroll-view style=\"flex: 1; padding-bottom: 20px\">\r\n    <!-- #endif -->\r\n    <view class=\"uni-padding-wrap\">\r\n      <text class=\"mt-10\"\r\n        >globalProperties string: {{ globalPropertiesStr }}</text\r\n      >\r\n      <text class=\"mt-10\"\r\n        >globalProperties number: {{ globalPropertiesNum }}</text\r\n      >\r\n      <text class=\"mt-10\"\r\n        >globalProperties boolean: {{ globalPropertiesBool }}</text\r\n      >\r\n      <text class=\"mt-10\"\r\n        >globalProperties object: {{ globalPropertiesObj }}</text\r\n      >\r\n      <text class=\"mt-10\"\r\n        >globalProperties null: {{ globalPropertiesNull }}</text\r\n      >\r\n      <text class=\"mt-10\"\r\n        >globalProperties array: {{ globalPropertiesArr }}</text\r\n      >\r\n      <text class=\"mt-10\"\r\n        >globalProperties set: {{ globalPropertiesSet }}</text\r\n      >\r\n      <text class=\"mt-10\"\r\n        >globalProperties map: {{ globalPropertiesMap }}</text\r\n      >\r\n      <text class=\"mt-10\"\r\n        >globalProperties reactiveObj.str:\r\n        {{ globalPropertiesReactiveObj['str'] }}</text\r\n      >\r\n      <text class=\"mt-10\"\r\n        >globalProperties reactiveObj.num:\r\n        {{ globalPropertiesReactiveObj['num'] }}</text\r\n      >\r\n      <text class=\"mt-10\"\r\n        >globalProperties reactiveObj.boolean:\r\n        {{ globalPropertiesReactiveObj['bool'] }}</text\r\n      >\r\n      <text class=\"mt-10\"\r\n        >globalProperties fun 返回值: {{ globalPropertiesFn() }}</text\r\n      >\r\n      <button @click=\"updateGlobalProperties\" class=\"mt-10\">\r\n        update globalProperties\r\n      </button>\r\n    </view>\r\n    <!-- #ifdef APP -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n<script lang=\"uts\">\r\ntype MyGlobalProperties = {\r\n\tstr : string;\r\n\tnum : number;\r\n\tbool : boolean;\r\n\tobj : UTSJSONObject;\r\n\tnull : string | null;\r\n\tarr : number[];\r\n\tset : string[];\r\n\tmap : UTSJSONObject;\r\n\treactiveObj : UTSJSONObject;\r\n\tglobalPropertiesFnRes: string\r\n}\r\nexport default {\r\n\tdata() {\r\n\t\treturn {\r\n\t\t\tmyGlobalProperties: {\r\n\t\t\t\tstr: '',\r\n\t\t\t\tnum: 0,\r\n\t\t\t\tbool: false,\r\n\t\t\t\tobj: {},\r\n\t\t\t\tnull: null,\r\n\t\t\t\tarr: [],\r\n\t\t\t\tset: [],\r\n\t\t\t\tmap: {},\r\n\t\t\t\treactiveObj: {\r\n\t\t\t\t\tstr: '',\r\n\t\t\t\t\tnum: 0,\r\n\t\t\t\t\tbool: false,\r\n\t\t\t\t} as UTSJSONObject,\r\n\t\t\t\tglobalPropertiesFnRes: '',\r\n\t\t\t} as MyGlobalProperties,\r\n\t\t}\r\n\t},\r\n\tonLoad() {\r\n\t\tthis.getGlobalProperties()\r\n\t},\r\n\tonUnload(){\r\n\t\tthis.resetGlobalProperties()\r\n\t},\r\n\tmethods: {\r\n\t\tgetGlobalProperties() {\r\n\t\t\tthis.myGlobalProperties.str = this.globalPropertiesStr\r\n\t\t\tthis.myGlobalProperties.num = this.globalPropertiesNum\r\n\t\t\tthis.myGlobalProperties.bool = this.globalPropertiesBool\r\n\t\t\tthis.myGlobalProperties.obj = this.globalPropertiesObj\r\n\t\t\tthis.myGlobalProperties.null = this.globalPropertiesNull\r\n\t\t\tthis.myGlobalProperties.arr = this.globalPropertiesArr\r\n\t\t\tthis.myGlobalProperties.set = []\r\n\t\t\tthis.globalPropertiesSet.forEach(item => {\r\n\t\t\t\tthis.myGlobalProperties.set.push(item)\r\n\t\t\t})\r\n\t\t\tthis.myGlobalProperties.map = {}\r\n\t\t\tthis.globalPropertiesMap.forEach((value: number, key: string) => {\r\n\t\t\t\tthis.myGlobalProperties.map[key] = value\r\n\t\t\t})\r\n\t\t\tthis.myGlobalProperties.reactiveObj = this.globalPropertiesReactiveObj\r\n\t\t\tthis.myGlobalProperties.globalPropertiesFnRes = this.globalPropertiesFn()\r\n\t\t},\r\n\t\tresetGlobalProperties() {\r\n\t\t\tthis.globalPropertiesStr = 'default string'\r\n\t\t\tthis.globalPropertiesNum = 0\r\n\t\t\tthis.globalPropertiesBool = false\r\n\t\t\tthis.globalPropertiesObj = {\r\n\t\t\t\tstr: 'default globalProperties obj string',\r\n\t\t\t\tnum: 0,\r\n\t\t\t\tbool: false,\r\n\t\t\t}\r\n\t\t\tthis.globalPropertiesNull = null\r\n\t\t\tthis.globalPropertiesArr = []\r\n\t\t\tthis.globalPropertiesSet = new Set()\r\n\t\t\tthis.globalPropertiesMap = new Map()\r\n\t\t\tthis.globalPropertiesReactiveObj['str'] = 'default reactive string'\r\n\t\t\tthis.globalPropertiesReactiveObj['num'] = 0\r\n\t\t\tthis.globalPropertiesReactiveObj['bool'] = false\r\n\t\t},\r\n\t\tupdateGlobalProperties() {\r\n\t\t\tthis.globalPropertiesStr = 'new string'\r\n\t\t\tthis.globalPropertiesNum = 100\r\n\t\t\tthis.globalPropertiesBool = true\r\n\t\t\tthis.globalPropertiesObj = {\r\n\t\t\t\tstr: 'new globalProperties obj string',\r\n\t\t\t\tnum: 100,\r\n\t\t\t\tbool: true,\r\n\t\t\t}\r\n\t\t\tthis.globalPropertiesNull = 'not null'\r\n\t\t\tthis.globalPropertiesArr = [1, 2, 3]\r\n\t\t\tthis.globalPropertiesSet = new Set(['a', 'b', 'c'])\r\n\t\t\tthis.globalPropertiesMap = new Map([['a', 1], ['b', 2], ['c', 3]])\r\n\t\t\tthis.globalPropertiesReactiveObj['str'] = 'new reactive string'\r\n\t\t\tthis.globalPropertiesReactiveObj['num'] = 200\r\n\t\t\tthis.globalPropertiesReactiveObj['bool'] = true\r\n\t\t\tthis.getGlobalProperties()\r\n\t\t}\r\n\t},\r\n}\r\n</script>\r\n\r\n<style>\r\n.uni-padding-wrap {\r\n  padding: 10px;\r\n}\r\n</style>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/app-instance/globalProperties/globalProperties-options"},"use_use-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/app-instance/use/use-composition.uvue","code":"```vue\n<template>\r\n  <view class=\"page\">\r\n    <CompForAppUse class=\"component-for-app-use\" />\r\n  </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nimport CompForAppUse from '@/components/CompForAppUse.uvue'\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/app-instance/use/use-composition"},"use_use-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/app-instance/use/use-options.uvue","code":"```vue\n<template>\r\n  <view class=\"page\">\r\n    <CompForAppUse class=\"component-for-app-use\" />\r\n  </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nimport CompForAppUse from '@/components/CompForAppUse.uvue'\r\n\r\nexport default {\r\n  components: {\r\n    CompForAppUse\r\n  }\r\n}\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/app-instance/use/use-options"}},"E_component-instance":{"attrs_attrs-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/attrs/attrs-composition.uvue","code":"```vue\n<template>\n  <view class=\"page\">\n    <child\n      class=\"child-class\"\n      str=\"str from parent\"\n      @childClick=\"() => {}\" />\n  </view>\n</template>\n\n<script setup lang=\"uts\">\nimport child from './child-composition.uvue'\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/attrs/attrs-composition"},"attrs_attrs-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/attrs/attrs-options.uvue","code":"```vue\n<template>\n  <view class=\"page\">\n    <child\n      class=\"child-class\"\n      str=\"str from parent\"\n      @childClick=\"() => {}\" />\n  </view>\n</template>\n\n<script lang=\"uts\">\nimport child from './child-options.uvue'\n\nexport default {\n  components: {\n    child,\n  },\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/attrs/attrs-options"},"attrs_child-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/attrs/child-composition.uvue","code":"```vue\n<template>\n  <view>\n    <view class=\"mb-10 flex flex-row justify-between\">\n      <text>hasPropsAttr</text>\n      <text id=\"has-props-attr\">{{ hasPropsAttr }}</text>\n    </view>\n    <view class=\"mb-10 flex flex-row justify-between\">\n      <text>hasEmitsAttr</text>\n      <text id=\"has-emits-attr\">{{ hasEmitsAttr }}</text>\n    </view>\n    <view class=\"mb-10 flex flex-row justify-between\">\n      <text>hasClassAttr</text>\n      <text id=\"has-class-attr\">{{ hasClassAttr }}</text>\n    </view>\n  </view>\n</template>\n\n<script setup lang=\"uts\">\ndefineEmits(['childClick'])\n\ndefineProps({\n  str: {\n    type: String,\n    required: true\n  }\n})\n\nconst attrs = useAttrs()\n\nconst hasPropsAttr = computed(():boolean => {\n  return attrs['val'] != null\n})\n\nconst hasEmitsAttr = computed(():boolean => {\n  return attrs['childClick'] != null\n})\n\nconst hasClassAttr = computed(():boolean => {\n  return attrs['class'] != null\n})\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/attrs/child-composition"},"attrs_child-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/attrs/child-options.uvue","code":"```vue\n<template>\n  <view>\n    <view class=\"mb-10 flex flex-row justify-between\">\n      <text>hasPropsAttr</text>\n      <text id=\"has-props-attr\" class=\"has-props-attr\">{{ hasPropsAttr }}</text>\n    </view>\n    <view class=\"mb-10 flex flex-row justify-between\">\n      <text>hasEmitsAttr</text>\n      <text id=\"has-emits-attr\">{{ hasEmitsAttr }}</text>\n    </view>\n    <view class=\"mb-10 flex flex-row justify-between\">\n      <text>hasClassAttr</text>\n      <text id=\"has-class-attr\" class=\"has-class-attr\">{{ hasClassAttr }}</text>\n    </view>\n  </view>\n</template>\n\n<script lang=\"uts\">\nexport default {\n  emits: ['childClick'],\n  props: {\n    str: {\n      type: String,\n      required: true\n    }\n  },\n  computed: {\n    hasPropsAttr(): boolean {\n      return this.$attrs['val'] != null\n    },\n    hasEmitsAttr(): boolean {\n      return this.$attrs['childClick'] != null\n    },\n    hasClassAttr(): boolean {\n      return this.$attrs['class'] != null\n    }\n  }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/attrs/child-options"},"circular-reference_ChildA-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/circular-reference/ChildA-composition.uvue","code":"```vue\n<template>\r\n  <view class=\"child-a\">\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>child A limit:</text>\r\n      <text>{{limit}}</text>\r\n    </view>\r\n    <child-b v-if=\"limit>1\" :limit=\"limit-1\" />\r\n  </view>\r\n</template>\r\n\r\n<script setup lang='uts'>\r\n  import ChildB from './childB-composition.uvue'\r\n\r\n  defineProps({\r\n    limit: {\r\n      type: Number,\r\n      default: 0\r\n    }\r\n  })\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/circular-reference/ChildA-composition"},"circular-reference_ChildA-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/circular-reference/ChildA-options.uvue","code":"```vue\n<template>\r\n  <view class=\"child-a\">\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>child A limit:</text>\r\n      <text>{{limit}}</text>\r\n    </view>\r\n    <child-b v-if=\"limit>1\" :limit=\"limit-1\" />\r\n  </view>\r\n</template>\r\n\r\n<script lang='uts'>\r\n  import ChildB from './childB-options.uvue'\r\n\r\n  export default {\r\n    components: {\r\n      ChildB\r\n    },\r\n    props: {\r\n      limit: {\r\n        type: Number,\r\n        default: 0\r\n      }\r\n    }\r\n  }\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/circular-reference/ChildA-options"},"circular-reference_ChildB-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/circular-reference/ChildB-composition.uvue","code":"```vue\n<template>\n  <view class=\"child-b\">\n    <view class=\"flex justify-between flex-row mb-10\">\n      <text>child B limit:</text>\n      <text>{{ limit }}</text>\n    </view>\n    <child-a v-if=\"limit > 1\" :limit=\"limit - 1\" />\n  </view>\n</template>\n\n<script setup lang=\"uts\">\n  import ChildA from './childA-composition.uvue'\n\n  defineProps({\n    limit: {\n      type: Number,\n      default: 0\n    }\n  })\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/circular-reference/ChildB-composition"},"circular-reference_ChildB-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/circular-reference/ChildB-options.uvue","code":"```vue\n<template>\n  <view class=\"child-b\">\n    <view class=\"flex justify-between flex-row mb-10\">\n      <text>child B limit:</text>\n      <text>{{limit}}</text>\n    </view>\n    <child-a v-if=\"limit>1\" :limit=\"limit-1\" />\n  </view>\n</template>\n\n<script lang='uts'>\n  import ChildA from './childA-options.uvue'\n\n  export default {\n    components: {\n      ChildA\n    },\n    props: {\n      limit: {\n        type: Number,\n        default: 0\n      }\n    }\n  }\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/circular-reference/ChildB-options"},"circular-reference_ChildC-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/circular-reference/ChildC-composition.uvue","code":"```vue\n<template>\r\n  <view class=\"child-c\">\n    <view class=\"flex justify-between flex-row mb-10\">\n      <text>child C limit:</text>\n      <text>{{limit}}</text>\n    </view>\n    <child-c-composition v-if=\"limit>1\" :limit=\"limit-1\" />\n  </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n  defineOptions({\r\n    name: \"ChildCComposition\"\r\n  })\r\n\r\n  defineProps({\r\n    limit: {\r\n      type: Number,\r\n      default: 0\r\n    }\r\n  })\r\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/circular-reference/ChildC-composition"},"circular-reference_ChildC-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/circular-reference/ChildC-options.uvue","code":"```vue\n<template>\r\n  <view class=\"child-c\">\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>child C limit:</text>\r\n      <text>{{limit}}</text>\r\n    </view>\r\n    <child-c-options v-if=\"limit>1\" :limit=\"limit-1\" />\r\n  </view>\r\n</template>\r\n\r\n<script lang='uts'>\r\n  export default {\r\n    name: \"ChildCOptions\",\r\n    props: {\r\n      limit: {\r\n        type: Number,\r\n        default: 0\r\n      }\r\n    }\r\n  }\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/circular-reference/ChildC-options"},"circular-reference_circular-reference-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/circular-reference/circular-reference-composition.uvue","code":"```vue\n<template>\r\n  <view class=\"page\">\r\n    <!-- #ifdef APP-ANDROID -->\r\n    <!-- TODO: ios & web 不支持 a b 互相引用 -->\r\n    <child-a :limit=\"5\" />\r\n    <!-- #endif -->\r\n    <child-c :limit=\"5\" />\r\n  </view>\r\n</template>\r\n\r\n<script setup lang='uts'>\r\n  // #ifdef APP-ANDROID\r\n  import ChildA from './childA-composition.uvue'\r\n  // #endif\r\n  import ChildC from './ChildC-composition.uvue'\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/circular-reference/circular-reference-composition"},"circular-reference_circular-reference-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/circular-reference/circular-reference-options.uvue","code":"```vue\n<template>\r\n  <view class=\"page\">\r\n    <!-- #ifdef APP-ANDROID -->\r\n    <!-- TODO: ios & web 不支持 a b 互相引用 -->\r\n    <child-a :limit=\"5\" />\r\n    <!-- #endif -->\r\n    <child-c :limit=\"5\" />\r\n  </view>\r\n</template>\r\n\r\n<script lang='uts'>\r\n  // #ifdef APP-ANDROID\r\n  import ChildA from './childA-options.uvue'\r\n  // #endif\r\n  import childC from './childC-options.uvue'\r\n\r\n  export default {\r\n    components: {\r\n      // #ifdef APP-ANDROID\r\n      ChildA,\r\n      // #endif\r\n      childC\r\n    }\r\n  }\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/circular-reference/circular-reference-options"},"data_data-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/data/data-composition.uvue","code":"```vue\n<template>\n  <view class=\"page\">\n    <view class=\"flex justify-between flex-row mb-10\">\n      <text>str: </text>\n      <text id=\"str\">{{ str }}</text>\n    </view>\n    <view class=\"flex justify-between flex-row mb-10\">\n      <text>num: </text>\n      <text id=\"num\">{{ num }}</text>\n    </view>\n    <view class=\"flex justify-between flex-row mb-10\">\n      <text>arr: </text>\n      <text id=\"arr\">{{ arr.join(',') }}</text>\n    </view>\n    <view class=\"flex justify-between flex-row mb-10\">\n      <text>obj.str: </text>\n      <text id=\"obj-str\">{{ obj.str }}</text>\n    </view>\n    <view class=\"flex justify-between flex-row mb-10\">\n      <text>obj.num: </text>\n      <text id=\"obj-num\">{{ obj.num }}</text>\n    </view>\n    <view class=\"flex justify-between flex-row mb-10\">\n      <text>obj.arr: </text>\n      <text id=\"obj-arr\">{{ obj.arr.join(',') }}</text>\n    </view>\n    <view ref='htmlRef' id=\"idRef\" class=\"flex justify-between flex-row mb-10\">\n      <text>data 存储 element不需要被包装</text>\n      <text id=\"isSameRefText\">{{ refElementIsSame }}</text>\n    </view>\n    <button @click=\"updateData\">update data</button>\n  </view>\n</template>\n\n<script setup lang=\"uts\">\n  type Obj = {\n    str : string,\n    num : number,\n    arr : number[]\n  }\n\n  const instance = getCurrentInstance()!.proxy!\n\n  const str = ref('default str')\n  const num = ref(0)\n  // 可通过泛型指定类型\n  const arr = ref<number[]>([1, 2, 3])\n  const obj = ref<Obj>({\n    str: 'default obj.str',\n    num: 10,\n    arr: [4, 5, 6]\n  })\n\n  const refElement = ref<UniElement | null>(null)\n  const refElementIsSame = ref(false)\n\n  const refTest = () => {\n    const queryElementById1 = uni.getElementById('idRef')\n    const queryElementById2 = uni.getElementById('idRef')\n    const htmlRefElement = instance.$refs['htmlRef'] as UniElement | null;\n    refElement.value = htmlRefElement\n    if (queryElementById1 === queryElementById2\n      && queryElementById1 === htmlRefElement\n      && queryElementById1 === refElement.value\n    ) {\n      refElementIsSame.value = true\n    }\n  }\n  const updateData = () => {\n    str.value = 'new str'\n    num.value = 1\n    arr.value = [4, 5, 6]\n\n    obj.value.str = 'new obj.str'\n    obj.value.num = 100\n    obj.value.arr = [7, 8, 9]\n\n    refTest()\n  }\n\n  defineExpose({\n    updateData\n  })\n</script>\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>\n  <view class=\"page\">\n    <view class=\"flex justify-between flex-row mb-10\">\n      <text>str: </text>\n      <text id=\"str\">{{ str }}</text>\n    </view>\n    <view class=\"flex justify-between flex-row mb-10\">\n      <text>num: </text>\n      <text id=\"num\">{{ num }}</text>\n    </view>\n    <view class=\"flex justify-between flex-row mb-10\">\n      <text>arr: </text>\n      <text id=\"arr\">{{ arr.join(',') }}</text>\n    </view>\n    <view class=\"flex justify-between flex-row mb-10\">\n      <text>obj.str: </text>\n      <text id=\"obj-str\">{{ obj.str }}</text>\n    </view>\n    <view class=\"flex justify-between flex-row mb-10\">\n      <text>obj.num: </text>\n      <text id=\"obj-num\">{{ obj.num }}</text>\n    </view>\n    <view class=\"flex justify-between flex-row mb-10\">\n      <text>obj.arr: </text>\n      <text id=\"obj-arr\">{{ obj.arr.join(',') }}</text>\n    </view>\n    <view ref='htmlRef' id=\"idRef\" class=\"flex justify-between flex-row mb-10\">\n      <text>data 存储 element不需要被包装</text>\n      <text id=\"isSameRefText\">{{ refElementIsSame }}</text>\n    </view>\n\n    <button @click=\"updateData\">update data</button>\n  </view>\n</template>\n\n<script lang=\"uts\">\n  type Obj = {\n    str : string,\n    num : number,\n    arr : number[]\n  }\n  export default {\n    data() {\n      return {\n        str: 'default str',\n        num: 0,\n        arr: [1, 2, 3],\n        // 特殊类型需要通过 as 指定类型\n        obj: {\n          str: 'default obj.str',\n          num: 10,\n          arr: [4, 5, 6]\n        } as Obj,\n        refElement: null as UniElement | null,\n        refElementIsSame: false\n      }\n    },\n    methods: {\n      refTest() {\n        const queryElementById1 = uni.getElementById('idRef')\n        const queryElementById2 = uni.getElementById('idRef')\n        const htmlRefElement = this.$refs['htmlRef'] as UniElement;\n        this.refElement = htmlRefElement\n        if (queryElementById1 === queryElementById2\n          && queryElementById1 === htmlRefElement\n          && queryElementById1 === this.refElement) {\n          this.refElementIsSame = true\n        }\n      },\n      updateData() {\n        this.str = 'new str'\n        this.num = 1\n        this.arr = [4, 5, 6]\n\n        this.obj.str = 'new obj.str'\n        this.obj.num = 100\n        this.obj.arr = [7, 8, 9]\n\n        this.refTest()\n\n\n      },\n    },\n  }\n</script>\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>\n  <view class=\"page\">\n    <define-expose-foo ref=\"fooRef\" />\n    <view class=\"flex justify-between flex-row mt-10\">\n      <text>str from component Foo: </text>\n      <text id=\"foo-str\">{{ fooStr }}</text>\n    </view>\n    <view class=\"flex justify-between flex-row mt-10\">\n      <text>num from component Foo: </text>\n    <text id=\"foo-num\">{{ fooNum }}</text>\n    </view>\n    <button class=\"increment-btn mt-10\" @click=\"increment\">\n      trigger Foo increment\n    </button>\n  </view>\n</template>\n\n<script setup lang=\"uts\">\nconst fooRef = ref<DefineExposeFooComponentPublicInstance | null>(null)\nconst fooStr = ref('')\nconst fooNum = ref<number>(0)\n\nonMounted(() => {\n  fooStr.value = fooRef.value!.str\n  fooNum.value = fooRef.value!.num\n})\n\nconst increment = () => {\n  fooRef.value!.increment()\n  fooNum.value = fooRef.value!.num\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/define-expose/define-expose"},"el_el-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/el/el-composition.uvue","code":"```vue\n\n<template>\n    <view class=\"page flex justify-between flex-row\">\n      <text class=\"child\">root node tagName：</text>\n      <text class=\"tag-name\">{{ el }}</text>\n    </view>\n</template>\n\n<script setup lang='uts'>\nconst el = ref('')\nconst instance = getCurrentInstance()!.proxy!\nonMounted(() => {el.value = instance.$el?.nodeName ?? ''})\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/el/el-composition"},"el_el-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/el/el-options.uvue","code":"```vue\n<template>\n  <view class=\"page flex justify-between flex-row\">\n    <text class=\"child\">root node tagName：</text>\n    <text class=\"tag-name\">{{ el }}</text>\n  </view>\n</template>\n\n<script lang='uts'>\nexport default {\n  data() {\n    return {\n      el: '',\n    }\n  },\n  mounted() {\n    this.el = this.$el?.nodeName ?? ''\n  },\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/el/el-options"},"emit-function_child-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/emit-function/child-composition.uvue","code":"```vue\n<template>\n  <view>\n    <button @click=\"click\" class=\"call-parent-btn\">调用父组件事件</button>\n  </view>\n</template>\n\n<script setup lang=\"uts\">\nconst emit = defineEmits(['callback'])\n\nconst click = () => {\n  emit('callback', `${Date.now()}`)\n}\n\ndefineExpose({\n  click\n})\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/emit-function/child-composition"},"emit-function_child-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/emit-function/child-options.uvue","code":"```vue\n<template>\n  <view>\n    <button @click=\"click\" class=\"call-parent-btn\">调用父组件事件</button>\n  </view>\n</template>\n\n<script>\nexport default {\n  emits: ['callback'],\n  methods: {\n    click () {\n      this.$emit('callback', `${Date.now()}`)\n    }\n  }\n}\n</script>\n\n<style scoped>\n\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/emit-function/child-options"},"emit-function_emit-function-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/emit-function/emit-function-composition.uvue","code":"```vue\n<template>\n  <view class=\"page\">\n    <view class=\"row\">\n      <text>子组件传的参数</text>\n      <text id=\"value\">\n        {{ value }}\n      </text>\n    </view>\n    <child @callback=\"callback\"></child>\n  </view>\n</template>\n\n<script setup lang=\"uts\">\nimport child from './child-composition.uvue'\n\nconst value = ref('')\n\nconst callback = (str: string) => {\n  value.value = str\n}\n</script>\n\n<style>\n.row {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  margin-bottom: 10px;\n}\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/emit-function/emit-function-composition"},"emit-function_emit-function-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/emit-function/emit-function-options.uvue","code":"```vue\n<template>\n  <view class=\"page\">\n    <view class=\"row\">\n      <text>子组件传的参数</text>\n      <text id=\"value\">\n        {{ value }}\n      </text>\n    </view>\n    <child @callback=\"callback\"></child>\n  </view>\n</template>\n\n<script>\nimport child from './child-options.uvue'\n\nexport default {\n  components: {\n    child\n  },\n  data () {\n    return {\n      value: \"\"\n    }\n  },\n  methods: {\n    callback (str: string) {\n      this.value = str\n    }\n  }\n}\n</script>\n\n<style>\n.row {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  margin-bottom: 10px;\n}\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/emit-function/emit-function-options"},"force-update_force-update-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/force-update/force-update-composition.uvue","code":"```vue\n<template>\n  <view class=\"page\">\n    <view class=\"split-title\">$forceUpdate</view>\n    <text class=\"mt-10 time\">Date.now(): {{ Date.now() }}</text>\n    <button class=\"mt-10 trigger-force-update-btn\" type=\"primary\" @click=\"triggerForceUpdate\">trigger $forceUpdate</button>\n  </view>\n</template>\n\n<script setup lang=\"uts\">\nconst instance = getCurrentInstance()\n\nconst triggerForceUpdate = () => {\n  instance?.proxy?.$forceUpdate()\n}\n\ndefineExpose({\n  triggerForceUpdate\n})\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/force-update/force-update-composition"},"force-update_force-update-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/force-update/force-update-options.uvue","code":"```vue\n<template>\n  <view class=\"page\">\n    <view class=\"split-title\">$forceUpdate</view>\n    <text class=\"uni-common-mt time\">Date.now(): {{ Date.now() }}</text>\n    <button\n      class=\"uni-common-mt trigger-force-update-btn\"\n      type=\"primary\"\n      @click=\"triggerForceUpdate\">\n      trigger $forceUpdate\n    </button>\n  </view>\n</template>\n\n<script lang=\"uts\">\nexport default {\n  methods: {\n    triggerForceUpdate(){\n      this.$forceUpdate()\n    }\n  }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/force-update/force-update-options"},"inject_inject-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/inject/inject-composition.uvue","code":"```vue\n<template>\r\n  <view>\r\n    <text>inject page</text>\r\n    <text class=\"mt-10 msg\">msg: {{msg}}</text>\r\n    <text class=\"mt-10 num\">num: {{num}}</text>\r\n    <text class=\"mt-10 obj\">obj: {{JSON.stringify(obj)}}</text>\r\n    <text class=\"mt-10 arr\">arr: {{JSON.stringify(arr)}}</text>\r\n    <text class=\"mt-10 arr-0\">arr[0]: {{ arr[0]}}</text>\r\n    <text class=\"mt-10 fn\">fn: {{fnRes}}</text>\r\n    <text class=\"mt-10 has-injection-context\">hasInjectionContext:\r\n      {{checkHasInjectionContextRes}}</text>\r\n    <button class=\"mt-10 check-has-injection-context-btn\" @click=\"checkHasInjectionContext\">check\r\n      hasInjectionContext</button>\r\n  </view>\r\n</template>\r\n\r\n<script setup lang='uts'>\r\n  const msg = inject<string>('msg')\r\n  const num = inject('num')\r\n  const obj = inject('obj')\r\n  const arr = inject<number[]>('arr', [99])\r\n  const fn = inject<() => string>('fn')\n  const fnRes = ref('')\n  if(fn != null){\n    fnRes.value = fn()\n  }\r\n\r\n  const checkHasInjectionContextRes = ref('')\r\n\r\n  const checkHasInjectionContext = () => {\r\n    checkHasInjectionContextRes.value = `${hasInjectionContext()}`\r\n  }\r\n  checkHasInjectionContext()\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/inject/inject-composition"},"inject_inject-options-1":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/inject/inject-options-1.uvue","code":"```vue\n<template>\n  <view>\n    <text class=\"mt-10 bold\">component for inject 1</text>\n    <text class=\"mt-10 alias-provide-page-title\"\n      >aliasProvidePageTitle: {{ aliasProvidePageTitle }}</text\n    >\n    <text class=\"mt-10 provide-page-str\"\n      >providePageStr: {{ providePageStr }}</text\n    >\n    <text class=\"mt-10 provide-page-num\"\n      >providePageNum: {{ providePageNum }}</text\n    >\n    <text class=\"mt-10 provide-page-bool\"\n      >providePageBool: {{ providePageBool }}</text\n    >\n    <text class=\"mt-10 provide-page-object-title\"\n      >providePageObject.title: {{ providePageObject['title'] }}</text\n    >\n    <text class=\"mt-10 provide-page-object-content\"\n      >providePageObject.content: {{ providePageObject['content'] }}</text\n    >\n    <text class=\"mt-10 provide-page-arr\"\n      >providePageArr: {{ JSON.stringify(providePageArr) }}</text\n    >\n   <text class=\"mt-10 provide-page-map\"\n      >providePageMap: {{ JSON.stringify(providePageMapObj) }}</text\n    >\n    <text class=\"mt-10 provide-page-set\"\n      >providePageSet: {{ JSON.stringify(providePageSetArr) }}</text\n    >\n    <text class=\"mt-10 test-inject-string-default-value\"\n      >testInjectStringDefaultValue: {{ testInjectStringDefaultValue }}</text\n    >\n    <text class=\"mt-10 test-inject-object-default-value-title\"\n      >testInjectObjectDefaultValue.title:\n      {{ testInjectObjectDefaultValue['title'] }}</text\n    >\n    <text class=\"mt-10 test-inject-object-default-value-content\"\n      >testInjectObjectDefaultValue.content:\n      {{ testInjectObjectDefaultValue['content'] }}</text\n    >\n  </view>\n</template>\n\n<script lang=\"uts\">\nexport default {\n  inject: {\n    aliasProvidePageTitle: {\n      type: String,\n      from: 'providePageTitle',\n      default: 'default alias provide page title'\n    },\n    providePageStr: {\n      type: String,\n      default: 'default provide page str'\n    },\n    providePageNum: {\n      type: Number,\n      default: 0\n    },\n    providePageBool: {\n      type: Boolean,\n      default: false\n    },\n    providePageObject: {\n      type: UTSJSONObject,\n      default: (): UTSJSONObject => {\n        return {\n          title: 'default provide page object title',\n          content: 'default provide page object content'\n        }\n      }\n    },\n    providePageArr: {\n      type: Array as PropType<String[]>,\n      default: (): String[] => {\n        return ['default provide page arr']\n      }\n    },\n    providePageMap: {\n      type: Object as PropType<Map<string, string>>,\n      default: (): Map<string, string> => {\n        return new Map<string, string>([['key', 'default provide page map']])\n      }\n    },\n    providePageSet: {\n      type: Object as PropType<Set<string>>,\n      default: (): Set<string> => {\n        return new Set<string>(['default provide page set'])\n      }\n    },\n    testInjectStringDefaultValue: {\n      type: String,\n      default: 'test inject string default value'\n    },\n    testInjectObjectDefaultValue: {\n      type: UTSJSONObject,\n      default(): UTSJSONObject {\n        return {\n          title: 'test inject object default value title',\n          content: 'test inject object default value content'\n        }\n      }\n    }\n  },\n\tcomputed: {\n\t\tprovidePageMapObj(): UTSJSONObject {\n\t\t\tconst obj: UTSJSONObject = {}\n\t\t\tthis.providePageMap.forEach((value, key) => {\n\t\t\t\tobj[key] = value\n\t\t\t})\n\t\t\treturn obj\n\t\t},\n\t\tprovidePageSetArr(): string[] {\n\t\t\tconst arr: string[] = []\n\t\t\tthis.providePageSet.forEach((value) => {\n\t\t\t\tarr.push(value)\n\t\t\t})\n\t\t\treturn arr\n\t\t}\n\t}\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/inject/inject-options-1"},"inject_inject-options-2":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/inject/inject-options-2.uvue","code":"```vue\n<template>\n  <view>\n    <text class=\"mt-10 bold\">component for inject 2</text>\n    <text class=\"mt-10 provide-page-title\"\n      >providePageTitle: {{ providePageTitle }}</text\n    >\n    <text class=\"mt-10 provide-page-str\">providePageStr: {{ providePageStr }}</text>\n    <text class=\"mt-10 provide-page-num\">providePageNum: {{ providePageNum }}</text>\n    <text class=\"mt-10 provide-page-bool\">providePageBool: {{ providePageBool }}</text>\n    <text class=\"mt-10 provide-page-object-title\"\n      >providePageObject.title: {{ providePageObject['title'] }}</text\n    >\n    <text class=\"mt-10 provide-page-object-content\"\n      >providePageObject.content: {{ providePageObject['content'] }}</text\n    >\n    <text class=\"mt-10 provide-page-arr\">providePageArr: {{ JSON.stringify(providePageArr) }}</text>\n    <text class=\"mt-10 provide-page-map\">providePageMap: {{ JSON.stringify(providePageMapObj) }}</text>\n    <text class=\"mt-10 provide-page-set\">providePageSet: {{ JSON.stringify(providePageSetArr) }}</text>\n  </view>\n</template>\n\n<script lang=\"uts\">\nexport default {\n  inject: {\n    providePageTitle: {\n      type: String,\n      default: 'default provide page title'\n    },\n    providePageStr: {\n      type: String,\n      default: 'default provide page str'\n    },\n    providePageNum: {\n      type: Number,\n      default: 0\n    },\n    providePageBool: {\n      type: Boolean,\n      default: false\n    },\n    providePageObject: {\n      type: UTSJSONObject,\n      default: (): UTSJSONObject => {\n        return {\n          title: 'default provide page object title',\n          content: 'default provide page object content'\n        }\n      }\n    },\n    providePageArr: {\n      type: Array as PropType<String[]>,\n      default: (): String[] => {\n        return ['default provide page arr']\n      }\n    },\n    providePageMap: {\n      type: Object as PropType<Map<string, string>>,\n      default: (): Map<string, string> => {\n        return new Map<string, string>([['key', 'default provide page map']])\n      }\n    },\n    providePageSet: {\n      type: Object as PropType<Set<string>>,\n      default: (): Set<string> => {\n        return new Set<string>(['default provide page set'])\n      }\n    },\n  },\n\tcomputed: {\n\t\tprovidePageMapObj(): UTSJSONObject {\n\t\t\tconst obj: UTSJSONObject = {}\n\t\t\tthis.providePageMap.forEach((value, key) => {\n\t\t\t\tobj[key] = value\n\t\t\t})\n\t\t\treturn obj\n\t\t},\n\t\tprovidePageSetArr(): string[] {\n\t\t\tconst arr: string[] = []\n\t\t\tthis.providePageSet.forEach((value) => {\n\t\t\t\tarr.push(value)\n\t\t\t})\n\t\t\treturn arr\n\t\t}\n\t}\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/inject/inject-options-2"},"methods_call-method-define-expose":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/methods/call-method-define-expose.uvue","code":"```vue\n<template>\n  <view>\n    <component-define-expose ref=\"component\"></component-define-expose>\n    <button @click='callMethod'>callMethod</button>\n    <view class=\"mt-10 flex\">\n      <text>调用子组件 difineExpose 暴露方法结果: </text>\n      <text class='mt-10'>{{ callMethodRes }}</text>\n    </view>\n  </view>\n</template>\n\n<script setup lang=\"uts\">\nimport ComponentDefineExpose from './component-define-expose.uvue'\n\nconst component = ref<ComponentPublicInstance | null>(null)\nconst callMethodRes = ref('')\n\nconst callMethod = () : string => {\n  callMethodRes.value = component.value?.$callMethod('test', 'call defineExpose method res') as string\n  return callMethodRes.value\n}\n\ndefineExpose({\n  callMethod\n})\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/methods/call-method-define-expose"},"methods_call-method-easycom-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/methods/call-method-easycom-composition.uvue","code":"```vue\n<template>\n  <view>\n    <call-easy-method ref=\"callEasyMethod1\"></call-easy-method>\n    <custom-call-easy-method ref=\"customCallEasyMethod1\"></custom-call-easy-method>\n  </view>\n</template>\n\n<script setup lang=\"uts\">\nconst callEasyMethod1 = ref<CallEasyMethodComponentPublicInstance | null>(null)\nconst customCallEasyMethod1 = ref<CustomCallEasyMethodComponentPublicInstance | null>(null)\n\nconst callMethod = () => {\n  // 调用组件的 foo 方法\n  customCallEasyMethod1.value?.foo?.()\n}\n\nconst callMethod1 = () => {\n  // 调用组件的 foo1 方法\n  callEasyMethod1.value?.foo1?.()\n}\n\nconst callMethod2 = () => {\n  // 调用组件的 foo2 方法并传递 1个参数\n  callEasyMethod1.value?.foo2?.(Date.now())\n}\n\nconst callMethod3 = () => {\n  // 调用组件的 foo3 方法并传递 2个参数\n  callEasyMethod1.value?.foo3?.(Date.now(), Date.now())\n}\n\nconst callMethod4 = () => {\n  // 调用组件的 foo4 方法并传递 callback\n  callEasyMethod1.value?.foo4?.(() => {\n    console.log('callback')\n  })\n}\n\nconst callMethod5 = () => {\n  // 注意： 返回值可能为 null，当前例子一定不为空，所以加了 !\n  const result = callEasyMethod1.value?.foo5?.('string1') as string\n  console.log(result) // string1\n}\n\nconst callMethodTest = (text: string): string | null => {\n  const result = callEasyMethod1.value?.foo5?.(text) as string\n  return result\n}\n\nconst callCustomMethodTest = (): string | null => {\n  const result = customCallEasyMethod1.value?.foo?.() as string\n  return result\n}\n\nconst delay = (): Promise<string> =>\n  new Promise((resolve, _) => {\n    setTimeout(() => {\n      resolve('')\n    }, 1000)\n  })\n\nconst call = async (): Promise<void> => {\n  callMethod()\n  callMethod1()\n  await delay()\n  callMethod2()\n  await delay()\n  callMethod3()\n  await delay()\n  callMethod4()\n  await delay()\n  callMethod5()\n}\n\nonReady(() => {\n  call()\n})\n\ndefineExpose({\n  callMethodTest,\n  callCustomMethodTest\n})\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/methods/call-method-easycom-composition"},"methods_call-method-easycom-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/methods/call-method-easycom-options.uvue","code":"```vue\n<template>\n  <view>\n    <call-easy-method ref=\"callEasyMethod1\"></call-easy-method>\n    <custom-call-easy-method ref=\"customCallEasyMethod1\"></custom-call-easy-method>\n  </view>\n</template>\n\n<script lang=\"uts\">\nconst delay = (): Promise<string> =>\n  new Promise((resolve, _) => {\n    setTimeout(() => {\n      resolve('')\n    }, 1000)\n  })\n\nexport default {\n  data() {\n    return {\n      callEasyMethod1: null as CallEasyMethodComponentPublicInstance | null,\n      customCallEasyMethod1: null as CustomCallEasyMethodComponentPublicInstance | null,\n    }\n  },\n  onReady() {\n    // 通过组件 ref 属性获取组件实例, 组件标签名首字母大写，驼峰+ComponentPublicInstance\n    this.callEasyMethod1 = this.$refs['callEasyMethod1'] as CallEasyMethodComponentPublicInstance\n    this.customCallEasyMethod1 = this.$refs['customCallEasyMethod1'] as CustomCallEasyMethodComponentPublicInstance\n    this.call()\n  },\n  methods: {\n    async call(): Promise<void> {\n      this.callCustomMethod()\n      this.callMethod1()\n      await delay()\n      this.callMethod2()\n      await delay()\n      this.callMethod3()\n      await delay()\n      this.callMethod4()\n      await delay()\n      this.callMethod5()\n    },\n    callMethod1() {\n      // 调用组件的 foo1 方法\n      this.callEasyMethod1?.foo1?.()\n    },\n    callMethod2() {\n      // 调用组件的 foo2 方法并传递 1个参数\n      this.callEasyMethod1?.foo2?.(Date.now())\n    },\n    callMethod3() {\n      // 调用组件的 foo3 方法并传递 2个参数\n      this.callEasyMethod1?.foo3?.(Date.now(), Date.now())\n    },\n    callMethod4() {\n      // 调用组件的 foo4 方法并传递 callback\n      this.callEasyMethod1?.foo4?.(() => {\n        console.log('callback')\n      })\n    },\n    callMethod5() {\n      // 注意： 返回值可能为 null，当前例子一定不为空，所以加了 !\n      const result = this.callEasyMethod1?.foo5?.('string1') as string\n      console.log(result) // string1\n    },\n    callMethodTest(text: string): string | null {\n      const result = this.callEasyMethod1?.foo5?.(text) as string\n      return result\n    },\n    callCustomMethod() {\n      // 调用组件的 foo 方法\n      this.customCallEasyMethod1?.foo?.()\n    },\n    callCustomMethodTest(): string | null {\n      const result = this.customCallEasyMethod1?.foo?.() as string\n      return result\n    },\n  }\n}\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/methods/call-method-easycom-options"},"methods_call-method-easycom-uni-modules-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/methods/call-method-easycom-uni-modules-composition.uvue","code":"```vue\n<template>\n  <view>\n    <call-easy-method-uni-modules ref=\"callEasyMethod1\"></call-easy-method-uni-modules>\n    <!-- #ifdef APP -->\n    <view>---</view>\n    <test-props id=\"btn1\" :numList=\"numList\" :objList='objList' @buttonclick='onButtonClick'\n      @numListChange='numListChange' @objListChange='objListChange'\n      style=\"width: 80px;height: 30px;background-color: lightblue\"></test-props>\n    <view style=\"flex-direction: row ;\">\n      <text>isNumListValid: </text>\n      <text id='isNumListValid'>{{isNumListValid}}</text>\n    </view>\n    <view style=\"flex-direction: row ;\">\n      <text>isObjListValid: </text>\n      <text id='isObjListValid'>{{isObjListValid}}</text>\n    </view>\n    <!-- #endif -->\n  </view>\n</template>\n\n<script setup lang=\"uts\">\n  import { testInOtherFile } from './call-method-easycom-uni-modules'\n  import { ref, isProxy, isRef } from 'vue'\n\n  // #ifdef APP\n  import { PropsChangeEvent } from '@/uni_modules/test-props'\n  // #endif\n\n  const delay = () : Promise<string> =>\n    new Promise((resolve, _) => {\n      setTimeout(() => {\n        resolve('')\n      }, 1000)\n    })\n\n  const callEasyMethod1 = ref<CallEasyMethodUniModulesComponentPublicInstance | null>(null)\n\n  const numList = ref<number[]>([1])   // 传递 props\n  const objList = ref<any[]>([])\n  const isNumListValid = ref(false)\n  const isObjListValid = ref(false)\n\n\n  const callMethod1 = () => {\n    // 调用组件的 foo1 方法\n    callEasyMethod1.value?.foo1?.()\n  }\n  const callMethod2 = () => {\n    // 调用组件的 foo2 方法并传递 1个参数\n    callEasyMethod1.value?.foo2?.(Date.now())\n  }\n  const callMethod3 = () => {\n    // 调用组件的 foo3 方法并传递 2个参数\n    callEasyMethod1.value?.foo3?.(Date.now(), Date.now())\n  }\n  const callMethod4 = () => {\n    // 调用组件的 foo4 方法并传递 callback\n    callEasyMethod1.value?.foo4?.(() => {\n      console.log('callback')\n    })\n  }\n  const callMethod5 = () => {\n    // 注意： 返回值可能为 null，当前例子一定不为空，所以加了 !\n    const result = callEasyMethod1.value?.foo5?.('string5') as string\n    console.log(result) // string1\n  }\n  const callMethodTest = (text : string) : string | null => {\n    const result = callEasyMethod1.value?.foo5?.(text) as string\n    return result\n  }\n  const callMethodInOtherFile = (text : string) : string => {\n    return testInOtherFile(callEasyMethod1.value!, text)\n  }\n\n  // #ifdef APP-ANDROID\n  const numListChange = (res : Map<string, Map<string, any>>) => {\n    const value = res['detail']!['value'] as number[]\n    const isArray = Array.isArray(value)\n    const isLengthGt0 = value.length > 0\n    isNumListValid.value = isArray && isLengthGt0\n  }\n  // #endif\n\n  // #ifdef APP-IOS\n  const numListChange = (res : any) => {\n    const value = res['detail']!['value'] as number[]\n    const isArray = Array.isArray(value)\n    const isLengthGt0 = value.length > 0\n    console.log('is array',isArray,'is length>0',isLengthGt0,'res',isArray && isLengthGt0);\n    isNumListValid.value = isArray && isLengthGt0\n  }\n  // #endif\n\n\n  // #ifdef APP-ANDROID\n  const objListChange = (res : Map<string, Map<string, any>>) => {\n    const value = res['detail']!['value'] as any[]\n    const isArray = Array.isArray(value)\n    const isLengthGt0 = value.length > 0\n    isObjListValid.value = isArray && isLengthGt0\n  }\n  // #endif\n\n  // #ifdef APP-IOS\n  const objListChange = (res : any) => {\n    const value = res['detail']!['value'] as any[]\n    const isArray = Array.isArray(value)\n    const isLengthGt0 = value.length > 0\n    console.log('is array',isArray,'is length>0',isLengthGt0,'res',isArray && isLengthGt0);\n    isObjListValid.value = isArray && isLengthGt0\n  }\n  // #endif\n\n\n  const onButtonClick = () => {\n    // 改变 props: 观察 props 返回值为非响应式值\n    numList.value = [3, 2, 1]\n    objList.value = [{ id: '3' }, { id: '4' }]\n  }\n\n\n  const call = async () : Promise<void> => {\n    callMethod1()\n    await delay()\n    callMethod2()\n    await delay()\n    callMethod3()\n    await delay()\n    callMethod4()\n    await delay()\n    callMethod5()\n  }\n\n  onReady(() => {\n    call()\n  })\n\n  defineExpose({\n    callMethodTest,\n    callMethodInOtherFile,\n    onButtonClick\n  })\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/methods/call-method-easycom-uni-modules-composition"},"methods_call-method-easycom-uni-modules-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/methods/call-method-easycom-uni-modules-options.uvue","code":"```vue\n<template>\n  <view>\n    <call-easy-method-uni-modules ref=\"callEasyMethod1\"></call-easy-method-uni-modules>\n\n    <!-- #ifdef APP -->\n    <view>---</view>\n    <test-props id=\"btn1\" :numList=\"numList\" :objList='objList' @buttonclick='onButtonClick'\n      @numListChange='numListChange' @objListChange='objListChange'\n      style=\"width: 80px;height: 30px;background-color: lightblue\"></test-props>\n    <view style=\"flex-direction: row ;\">\n      <text>isNumListValid: </text>\n      <text id='isNumListValid'>{{isNumListValid}}</text>\n    </view>\n    <view style=\"flex-direction: row ;\">\n      <text>isObjListValid: </text>\n      <text id='isObjListValid'>{{isObjListValid}}</text>\n    </view>\n    <!-- #endif -->\n  </view>\n</template>\n\n<script lang=\"uts\">\n  import { testInOtherFile } from './call-method-easycom-uni-modules'\n\n  const delay = () : Promise<string> =>\n    new Promise((resolve, _) => {\n      setTimeout(() => {\n        resolve('')\n      }, 1000)\n    })\n\n  export default {\n    data() {\n      return {\n        callEasyMethod1: null as CallEasyMethodUniModulesComponentPublicInstance | null,\n        isWatched: false,\n        changeTimes: 0,\n        numList: [1] as number[], // 传递 props\n        objList: [] as any[],\n        isNumListValid: false,\n        isObjListValid: false\n      }\n    },\n    onReady() {\n      // 通过组件 ref 属性获取组件实例, 组件标签名首字母大写，驼峰+ComponentPublicInstance\n      this.callEasyMethod1 = this.$refs['callEasyMethod1'] as CallEasyMethodUniModulesComponentPublicInstance\n\n      this.call()\n    },\n    methods: {\n      async call() : Promise<void> {\n        this.callMethod1()\n        await delay()\n        this.callMethod2()\n        await delay()\n        this.callMethod3()\n        await delay()\n        this.callMethod4()\n        await delay()\n        this.callMethod5()\n\n      },\n      callMethod1() {\n        // 调用组件的 foo1 方法\n        this.callEasyMethod1?.foo1?.()\n      },\n      callMethod2() {\n        // 调用组件的 foo2 方法并传递 1个参数\n        this.callEasyMethod1?.foo2?.(Date.now())\n      },\n      callMethod3() {\n        // 调用组件的 foo3 方法并传递 2个参数\n        this.callEasyMethod1?.foo3?.(Date.now(), Date.now())\n      },\n      callMethod4() {\n        // 调用组件的 foo4 方法并传递 callback\n        this.callEasyMethod1?.foo4?.(() => {\n          console.log('callback')\n        })\n      },\n      callMethod5() {\n        // 注意： 返回值可能为 null，当前例子一定不为空，所以加了 !\n        const result = this.callEasyMethod1?.foo5?.('string5') as string\n        console.log(result) // string1\n      },\n      callMethodTest(text : string) : string | null {\n        const result = this.callEasyMethod1?.foo5?.(text) as string\n        return result\n      },\n      callMethodInOtherFile(text : string) : string {\n        return testInOtherFile(this.callEasyMethod1!, text)\n      },\n\n      // #ifdef APP-ANDROID\n      numListChange(res : Map<string, Map<string, any>>) {\n    const value = res['detail']!['value'] as number[]\n    const isArray = Array.isArray(value)\n    const isLengthGt0 = value.length > 0\n    this.isNumListValid = isArray && isLengthGt0\n  },\n  // #endif\n  // #ifdef APP-IOS\n  numListChange(res : any) {\n    const value = res['detail']!['value'] as number[]\n    const isArray = Array.isArray(value)\n    const isLengthGt0 = value.length > 0\n    this.isNumListValid = isArray && isLengthGt0\n  },\n  // #endif\n\n  // #ifdef APP-ANDROID\n  objListChange(res : Map<string, Map<string, any>>) {\n    const value = res['detail']!['value'] as number[]\n    const isArray = Array.isArray(value)\n    const isLengthGt0 = value.length > 0\n    this.isObjListValid = isArray && isLengthGt0\n  },\n  // #endif\n  // #ifdef APP-IOS\n  objListChange(res : any) {\n    const value = res['detail']!['value'] as number[]\n    const isArray = Array.isArray(value)\n    const isLengthGt0 = value.length > 0\n    this.isObjListValid = isArray && isLengthGt0\n  },\n  // #endif\n  onButtonClick() {\n    // 改变 props: 观察 props 返回值为非响应式值\n    console.log('button click');\n    this.numList = [3, 2, 1]\n    this.objList = [{ id: '3' }, { id: '4' }]\n  }\n    }\n  }\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/methods/call-method-easycom-uni-modules-options"},"methods_call-method-other-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/methods/call-method-other-composition.uvue","code":"```vue\n<template>\n  <view>\n    <component1 ref=\"componentRef\"></component1>\n  </view>\n</template>\n\n<script setup lang=\"uts\">\n// 非easycom组件需import引用组件 componentRef-composition.uvue\nimport component1 from './component1-composition.uvue'\n\nconst componentRef = ref<ComponentPublicInstance | null>(null)\n\nconst callMethod1 = () => {\n  // 通过 $callMethod 调用组件的 foo1 方法\n  componentRef.value?.$callMethod('foo1')\n}\n\nconst callMethod2 = () => {\n  // 通过 $callMethod 调用组件的 foo2 方法并传递 1个参数\n  componentRef.value?.$callMethod('foo2', Date.now())\n}\n\nconst callMethod3 = () => {\n  // 通过 $callMethod 调用组件的 foo3 方法并传递 2个参数\n  componentRef.value?.$callMethod('foo3', Date.now(), Date.now())\n}\n\nconst callMethod4 = () => {\n  // 通过 $callMethod 调用组件的 foo4 方法并传递 callback\n  componentRef.value?.$callMethod('foo4', () => {\n    console.log('callback')\n  })\n}\n\nconst callMethod5 = () => {\n  // 通过 $callMethod 调用组件的 foo5 方法并接收返回值\n  // 注意： 返回值可能为 null，当前例子一定不为空，所以加了 !\n  const result = componentRef.value?.$callMethod('foo5', 'string1') as string\n  console.log(result) // string1\n}\n\nconst callMethodTest = (text: string): string | null => {\n  const result = componentRef.value?.$callMethod('foo5', text) as string\n  return result\n}\n\nconst delay = (): Promise<string> =>\n  new Promise((resolve, _) => {\n    setTimeout(() => {\n      resolve('')\n    }, 1000)\n  })\n\nconst call = async (): Promise<void> => {\n  callMethod1()\n  await delay()\n  callMethod2()\n  await delay()\n  callMethod3()\n  await delay()\n  callMethod4()\n  await delay()\n  callMethod5()\n}\n\nonReady(() => {\n  call()\n})\n\ndefineExpose({\n  callMethodTest\n})\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/methods/call-method-other-composition"},"methods_call-method-other-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/methods/call-method-other-options.uvue","code":"```vue\n<template>\n  <view>\n    <component1 ref=\"component1\"></component1>\n  </view>\n</template>\n\n<script>\n// 非easycom组件需import引用组件 component1.uvue\nimport component1 from './component1.uvue'\n\nconst delay = (): Promise<string> =>\n  new Promise((resolve, _) => {\n    setTimeout(() => {\n      resolve('')\n    }, 1000)\n  })\n\nexport default {\n  components: {\n    component1\n  },\n  data() {\n    return {\n      component1: null as ComponentPublicInstance | null\n    }\n  },\n  onReady() {\n    // 通过组件 ref 属性获取组件实例\n    this.component1 = this.$refs['component1'] as ComponentPublicInstance;\n    this.call()\n  },\n  methods: {\n    async call(): Promise<void> {\n      this.callMethod1()\n      await delay()\n      this.callMethod2()\n      await delay()\n      this.callMethod3()\n      await delay()\n      this.callMethod4()\n      await delay()\n      this.callMethod5()\n    },\n    callMethod1() {\n      // 通过 $callMethod 调用组件的 foo1 方法\n      this.component1?.$callMethod('foo1');\n    },\n    callMethod2() {\n      // 通过 $callMethod 调用组件的 foo2 方法并传递 1个参数\n      this.component1?.$callMethod('foo2', Date.now());\n    },\n    callMethod3() {\n      // 通过 $callMethod 调用组件的 foo3 方法并传递 2个参数\n      this.component1?.$callMethod('foo3', Date.now(), Date.now());\n    },\n    callMethod4() {\n      // 通过 $callMethod 调用组件的 foo4 方法并传递 callback\n      this.component1?.$callMethod('foo4', () => {\n        console.log('callback')\n      });\n    },\n    callMethod5() {\n      // 通过 $callMethod 调用组件的 foo5 方法并接收返回值\n      // 注意： 返回值可能为 null，当前例子一定不为空，所以加了 !\n      const result = this.component1?.$callMethod('foo5', 'string1') as string;\n      console.log(result); // string1\n    },\n    callMethodTest(text: string): string | null {\n      const result = this.component1?.$callMethod('foo5', text) as string;\n      return result;\n    },\n  }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/methods/call-method-other-options"},"methods_call-method-uni-element-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/methods/call-method-uni-element-composition.uvue","code":"```vue\n<template>\n  <view>\n    <slider :show-value=\"true\" ref=\"sliderRef\"></slider>\n  </view>\n</template>\n\n<script setup lang=\"uts\">\nconst sliderRef = ref<UniSliderElement | null>(null)\n\nonReady(() => {\n  sliderRef.value!.value = 80\n})\n\nconst callMethodTest = (text: string): string | null => {\n  sliderRef.value?.setAttribute('str', text)\n  const result = sliderRef.value?.getAttribute('str') as string\n  return result\n}\n\ndefineExpose({\n  callMethodTest\n})\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/methods/call-method-uni-element-composition"},"methods_call-method-uni-element-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/methods/call-method-uni-element-options.uvue","code":"```vue\n<template>\n  <view>\n    <slider :show-value=\"true\" ref=\"slider1\"></slider>\n  </view>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      slider1: null as UniSliderElement | null\n    }\n  },\n  onReady() {\n    // 通过组件 ref 属性获取组件实例, Uni组件名(驼峰)UniElement\n    this.slider1 = this.$refs['slider1'] as UniSliderElement;\n    this.setValue()\n  },\n  methods: {\n    setValue() {\n      this.slider1!.value = 80\n    },\n    callMethodTest(text: string): string | null {\n      this.slider1?.setAttribute('str', text);\n      const result = this.slider1?.getAttribute('str') as string;\n      return result;\n    },\n  }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/methods/call-method-uni-element-options"},"methods_component-define-expose":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/methods/component-define-expose.uvue","code":"```vue\n<template>\r\n  <view></view>\r\n</template>\r\n\r\n<script setup lang='uts'>\r\n  function test(name : string) : string {\r\n    return name\r\n  }\r\n  defineExpose({\r\n    test\r\n  })\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/methods/component-define-expose"},"methods_component1-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/methods/component1-composition.uvue","code":"```vue\n<template>\n  <view>{{ result }}</view>\n</template>\n\n<script setup lang=\"uts\">\nconst result = ref<string>('')\n\nconst foo1 = () => {\n  result.value = 'foo1'\n}\n\nconst foo2 = (date1: number) => {\n  result.value = 'foo2=' + date1\n}\n\nconst foo3 = (date1: number, date2: number) => {\n  result.value = 'foo3=' + date1 + ' ' + date2\n}\n\nconst foo4 = (callback: () => void) => {\n  callback()\n}\n\nconst foo5 = (text: string): string => {\n  result.value = text\n  return text\n}\n\ndefineExpose({\n  foo1,\n  foo2,\n  foo3,\n  foo4,\n  foo5\n})\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/methods/component1-composition"},"methods_component1":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/methods/component1.uvue","code":"```vue\n<template>\n  <view>{{result}}</view>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        result: ''\n      }\n    },\n    methods: {\n      foo1() {\n        this.result = \"foo1\"\n      },\n      foo2(date1 : number) {\n        this.result = \"foo2=\" + date1\n      },\n      foo3(date1 : number, date2 : number) {\n        this.result = \"foo3=\" + date1 + \" \" + date2\n      },\n      foo4(callback : (() => void)) {\n        callback()\n      },\n      foo5(text1 : string) : string | null {\n        this.result = text1\n        return text1\n      }\n    }\n  }\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/methods/component1"},"mixins_mixins-app-page-namesake":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/mixins/mixins-app-page-namesake.uvue","code":"```vue\n<template>\n  <!-- #ifdef APP -->\n  <scroll-view style=\"flex: 1\">\n    <!-- #endif -->\n    <view class=\"page\">\n      <text class=\"bold\">props:</text>\n      <text class=\"mt-10 namesake-mixin-prop\">{{ namesakeMixinProp }}</text>\n      <text class=\"mt-10 namesake-child-mixin-prop\">{{ namesakeChildMixinProp }}</text>\n\n      <text class=\"bold mt-10\">data:</text>\n      <text class=\"mt-10 namesake-mixin-data-msg\">{{ namesakeMixinDataMsg }}</text>\n      <text class=\"mt-10 namesake-child-mixin-data-msg\">{{ namesakeChildMixinDataMsg }}</text>\n\n      <text class=\"bold mt-10\">computed:</text>\n      <text class=\"mt-10 namesake-mixin-computed\">{{ namesakeMixinComputed }}</text>\n      <text class=\"mt-10 namesake-child-mixin-computed\">{{ namesakeChildMixinComputed }}</text>\n\n      <text class=\"mt-10 bold\">method:</text>\n      <text class=\"mt-10 namesake-mixin-method\">{{ namesakeMixinMethod() }}</text>\n      <text class=\"mt-10 namesake-child-mixin-method\">{{ namesakeChildMixinMethod() }}</text>\n\n      <text class=\"mt-10 bold\">mixin component:</text>\n      <GlobalMixinComp1 />\n      <GlobalChildMixinComp1 />\n      <GlobalMixinComp2 />\n      <GlobalChildMixinComp2 />\n      <MixinComp1 />\n      <ChildMixinComp1 />\n      <MixinComp2 />\n      <ChildMixinComp2 />\n      <MixinComp />\n    </view>\n    <!-- #ifdef APP -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script lang=\"uts\">\nimport MixinComp2 from './components/MixinComp2.uvue'\nimport ChildMixinComp2 from './components/ChildMixinComp2.uvue'\nimport CompForPage from './components/CompForPage.uvue'\nimport { pageMixin } from './mixins'\n\nexport default {\n  components: {\n    MixinComp: CompForPage\n  },\n  mixins: [\n    pageMixin,\n    {\n      mixins: [{\n        components: {ChildMixinComp2},\n        props: {\n          childMixinProp2: {\n            type: String,\n            default: '通过字面量定义非全局 child mixin props'\n          },\n          namesakeChildMixinProp: {\n            type: String,\n            default: '通过字面量定义非全局同名 child mixin props'\n          }\n        },\n        data() {\n          return {\n            childMixinDataMsg2: '通过字面量定义非全局 child mixin data',\n            namesakeChildMixinDataMsg: '通过字面量定义非全局同名 child mixin data',\n            childMixinOnLoadMsg2: '',\n            childMixinWatchMsg2: ''\n          }\n        },\n        computed: {\n          childMixinComputed2(): string {\n            const res = `通过字面量定义非全局 child mixin computed, 更新后的 childMixinOnLoadMsg2: ${this.childMixinOnLoadMsg2}`\n            console.log(res)\n            return res\n          },\n          namesakeChildMixinComputed(): string {\n            const res = '通过字面量定义非全局同名 child mixin computed'\n            console.log(res)\n            return res\n          }\n        },\n        watch: {\n          globalMixinOnloadMsg1(newVal: string) {\n            this.childMixinWatchMsg2 = `通过字面量定义非全局 child mixin watch, 更新后的 globalMixinOnloadMsg1: ${newVal}`\n            console.log(this.childMixinWatchMsg2)\n          },\n        },\n        onLoad() {\n          const res = '通过字面量定义非全局 child mixin onLoad'\n          console.log(res)\n          this.childMixinOnLoadMsg2 = res\n        },\n        methods: {\n          childMixinMethod2(): string {\n            const res = '通过字面量定义非全局 child mixin method'\n            console.log(res)\n            return res\n          },\n          namesakeChildMixinMethod(): string {\n            const res = '通过字面量定义非全局同名 child mixin method'\n            console.log(res)\n            return res\n          },\n        },\n      }],\n      components: {MixinComp2},\n      props: {\n        mixinProp2: {\n          type: String,\n          default: '通过字面量定义非全局 mixin props'\n        },\n        namesakeMixinProp: {\n          type: String,\n          default: '通过字面量定义非全局同名 mixin props'\n        }\n      },\n      data() {\n        return {\n          mixinDataMsg2: '通过字面量定义非全局 mixin data',\n          namesakeMixinDataMsg: '通过字面量定义非全局同名 mixin data',\n          mixinOnloadMsg2: '',\n          mixinWatchMsg2: ''\n        }\n      },\n      computed: {\n        mixinComputed2(): string {\n          const res = `通过字面量定义非全局 mixin computed, 更新后的 mixinOnloadMsg2: ${this.mixinOnloadMsg2}`\n          console.log(res)\n          return res\n        },\n        namesakeMixinComputed(): string {\n          const res = '通过字面量定义非全局同名 mixin computed'\n          console.log(res)\n          return res\n        }\n      },\n      watch: {\n        globalMixinOnloadMsg1(newVal: string) {\n          this.mixinWatchMsg2 = `通过 defineMixin 定义非全局 child mixin watch, 更新后的 globalMixinOnloadMsg1: ${newVal}`\n          console.log(this.mixinWatchMsg2)\n        },\n      },\n      onLoad() {\n        const res = '通过字面量定义非全局 mixin onLoad'\n        console.log(res)\n        this.mixinOnloadMsg2 = res\n      },\n      methods: {\n        mixinMethod2(): string {\n          const res = '通过字面量定义非全局 mixin method'\n          console.log(res)\n          return res\n        },\n        namesakeMixinMethod(): string {\n          const res = '通过字面量定义非全局同名 mixin method'\n          console.log(res)\n          return res\n        }\n      },\n    },\n  ],\n  props: {\n    namesakeMixinProp: {\n      type: String,\n      default: '页面内的同名 props'\n    },\n    namesakeChildMixinProp: {\n      type: String,\n      default: '页面内的同名 child props'\n    },\n  },\n  data(){\n    return {\n      namesakeMixinDataMsg: '页面内的同名 data',\n      namesakeChildMixinDataMsg: '页面内的同名 child data',\n      mixinWatchMsg: ''\n    }\n  },\n  watch: {\n    globalMixinOnloadMsg1(newVal: string) {\n      this.mixinWatchMsg = `页面内部定义的 watch, 更新后的 globalMixinOnloadMsg1: ${newVal}`\n      console.log(this.mixinWatchMsg)\n    },\n  },\n  computed: {\n    namesakeMixinComputed(): string {\n      const res = '页面内的同名 computed'\n      console.log(res)\n      return res\n    },\n    namesakeChildMixinComputed(): string {\n      const res = '页面内的同名 child computed'\n      console.log(res)\n      return res\n    }\n  },\n  methods: {\n    namesakeMixinMethod(): string {\n      const res = '页面内的同名 method'\n      console.log(res)\n      return res\n    },\n    namesakeChildMixinMethod(): string {\n      const res = '页面内的同名 child method'\n      console.log(res)\n      return res\n    },\n  }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/mixins/mixins-app-page-namesake"},"mixins_mixins-app":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/mixins/mixins-app.uvue","code":"```vue\n<template>\n  <!-- #ifdef APP -->\n  <scroll-view style=\"flex: 1\">\n    <!-- #endif -->\n    <view class=\"page\">\n      <button type=\"primary\" @click=\"goMixinPageNamesake\">go mixin page namesake</button>\n      <text class=\"mt-10 bold\">props:</text>\n      <text class=\"mt-10 global-mixin-prop-1\">{{ globalMixinProp1 }}</text>\n      <text class=\"mt-10 global-child-mixin-prop-1\">{{ globalChildMixinProp1 }}</text>\n      <text class=\"mt-10 global-mixin-prop-2\">{{ globalMixinProp2 }}</text>\n      <text class=\"mt-10 global-child-mixin-prop-2\">{{ globalChildMixinProp2 }}</text>\n      <text class=\"mt-10 mixin-prop-1\">{{ mixinProp1 }}</text>\n      <text class=\"mt-10 child-mixin-prop-1\">{{ childMixinProp1 }}</text>\n      <text class=\"mt-10 mixin-prop-2\">{{ mixinProp2 }}</text>\n      <text class=\"mt-10 child-mixin-prop-2\">{{ childMixinProp2 }}</text>\n      <text class=\"mt-10 namesake-mixin-prop\">{{ namesakeMixinProp }}</text>\n      <text class=\"mt-10 namesake-child-mixin-prop\">{{ namesakeChildMixinProp }}</text>\n\n      <text class=\"bold mt-10\">data:</text>\n      <text class=\"mt-10 global-mixin-data-msg-1\">{{ globalMixinDataMsg1 }}</text>\n      <text class=\"mt-10 global-child-mixin-data-msg-1\">{{ globalChildMixinDataMsg1 }}</text>\n      <text class=\"mt-10 global-mixin-data-msg-2\">{{ globalMixinDataMsg2 }}</text>\n      <text class=\"mt-10 global-child-mixin-data-msg-2\">{{ globalChildMixinDataMsg2 }}</text>\n      <text class=\"mt-10 mixin-data-msg-1\">{{ mixinDataMsg1 }}</text>\n      <text class=\"mt-10 child-mixin-data-msg-1\">{{ childMixinDataMsg1 }}</text>\n      <text class=\"mt-10 mixin-data-msg-2\">{{ mixinDataMsg2 }}</text>\n      <text class=\"mt-10 child-mixin-data-msg-2\">{{ childMixinDataMsg2 }}</text>\n      <text class=\"mt-10 namesake-mixin-data-msg\">{{ namesakeMixinDataMsg }}</text>\n      <text class=\"mt-10 namesake-child-mixin-data-msg\">{{ namesakeChildMixinDataMsg }}</text>\n\n      <text class=\"bold mt-10\">computed:</text>\n      <text class=\"mt-10 global-mixin-computed-1\">{{ globalMixinComputed1 }}</text>\n      <text class=\"mt-10 global-child-mixin-computed-1\">{{ globalChildMixinComputed1 }}</text>\n      <text class=\"mt-10 global-mixin-computed-2\">{{ globalMixinComputed2 }}</text>\n      <text class=\"mt-10 global-child-mixin-computed-2\">{{ globalChildMixinComputed2 }}</text>\n      <text class=\"mt-10 mixin-computed-1\">{{ mixinComputed1 }}</text>\n      <text class=\"mt-10 child-mixin-computed-1\">{{ childMixinComputed1 }}</text>\n      <text class=\"mt-10 mixin-computed-2\">{{ mixinComputed2 }}</text>\n      <text class=\"mt-10 child-mixin-computed-2\">{{ childMixinComputed2 }}</text>\n      <text class=\"mt-10 namesake-mixin-computed\">{{ namesakeMixinComputed }}</text>\n      <text class=\"mt-10 namesake-child-mixin-computed\">{{ namesakeChildMixinComputed }}</text>\n\n      <text class=\"bold mt-10\">watch:</text>\n      <text class=\"mt-10 global-mixin-watch-1\">{{ globalMixinWatchMsg1 }}</text>\n      <text class=\"mt-10 global-child-mixin-watch-1\">{{ globalChildMixinWatchMsg1 }}</text>\n      <text class=\"mt-10 global-mixin-watch-2\">{{ globalMixinWatchMsg2 }}</text>\n      <text class=\"mt-10 global-child-mixin-watch-2\">{{ globalChildMixinWatchMsg2 }}</text>\n      <text class=\"mt-10 mixin-watch-1\">{{ mixinWatchMsg1 }}</text>\n      <text class=\"mt-10 child-mixin-watch-1\">{{ childMixinWatchMsg1 }}</text>\n      <text class=\"mt-10 mixin-watch-2\">{{ mixinWatchMsg2 }}</text>\n      <text class=\"mt-10 child-mixin-watch-2\">{{ childMixinWatchMsg2 }}</text>\n      <text class=\"mt-10 mixin-watch\">{{ mixinWatchMsg }}</text>\n\n      <text class=\"bold mt-10\">lifecycle:</text>\n      <text class=\"mt-10\">{{ globalMixinOnloadMsg1 }}</text>\n      <text class=\"mt-10\">{{ globalMixinOnloadMsg2 }}</text>\n      <text class=\"mt-10\">{{ globalChildMixinOnloadMsg1 }}</text>\n      <text class=\"mt-10\">{{ globalChildMixinOnloadMsg2 }}</text>\n      <text class=\"mt-10\">{{ mixinOnloadMsg1 }}</text>\n      <text class=\"mt-10\">{{ mixinOnloadMsg2 }}</text>\n      <text class=\"mt-10\">{{ childMixinOnloadMsg1 }}</text>\n      <text class=\"mt-10\">{{ childMixinOnloadMsg2 }}</text>\n      <text class=\"mt-10\">{{ onloadMsg }}</text>\n\n      <text class=\"mt-10 bold\">method:</text>\n      <text class=\"mt-10 global-mixin-method-1\">{{ globalMixinMethod1() }}</text>\n      <text class=\"mt-10 global-child-mixin-method-1\">{{ globalChildMixinMethod1() }}</text>\n      <text class=\"mt-10 global-mixin-method-2\">{{ globalMixinMethod2() }}</text>\n      <text class=\"mt-10 global-child-mixin-method-2\">{{ globalChildMixinMethod2() }}</text>\n      <text class=\"mt-10 mixin-method-1\">{{ mixinMethod1() }}</text>\n      <text class=\"mt-10 child-mixin-method-1\">{{ childMixinMethod1() }}</text>\n      <text class=\"mt-10 mixin-method-2\">{{ mixinMethod2() }}</text>\n      <text class=\"mt-10 child-mixin-method-2\">{{ childMixinMethod2() }}</text>\n      <text class=\"mt-10 namesake-mixin-method\">{{ namesakeMixinMethod() }}</text>\n      <text class=\"mt-10 namesake-child-mixin-method\">{{ namesakeChildMixinMethod() }}</text>\n\n      <text class=\"mt-10 bold\">component:</text>\n      <Comp1\n        title=\"title\"\n        @globalMixinEmit1=\"(arg: string) => handleMixinEmitter('globalMixinEmit1', arg)\"\n        @globalChildMixinEmit1=\"(arg: string) => handleMixinEmitter('globalChildMixinEmit1', arg)\"\n        @globalMixinEmit2=\"(arg: string) => handleMixinEmitter('globalMixinEmit2', arg)\"\n        @globalChildMixinEmit2=\"(arg: string) => handleMixinEmitter('globalChildMixinEmit2', arg)\"\n        @mixinEmit=\"(arg: string) => handleMixinEmitter('mixinEmit', arg)\"\n        @childMixinEmit=\"(arg: string) => handleMixinEmitter('childMixinEmit', arg)\" />\n      <text v-if=\"handleMixinEmitterMsg\" class=\"mt-10 handle-mixin-emitter-msg\"\n        >handleMixinEmitterMsg: {{ handleMixinEmitterMsg }}</text\n      >\n      <Comp2 class='comp2' title=\"title\" />\n      <text class=\"mt-10 bold\">mixin component:</text>\n      <GlobalMixinComp1 />\n      <GlobalChildMixinComp1 />\n      <GlobalMixinComp2 />\n      <GlobalChildMixinComp2 />\n      <MixinComp1 />\n      <ChildMixinComp1 />\n      <MixinComp2 />\n      <ChildMixinComp2 />\n    </view>\n    <!-- #ifdef APP -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script lang=\"uts\">\nimport Comp1 from './components/Comp1.uvue'\nimport Comp2 from './components/Comp2.uvue'\nimport MixinComp2 from './components/MixinComp2.uvue'\nimport ChildMixinComp2 from './components/ChildMixinComp2.uvue'\nimport { pageMixin } from './mixins'\n\nexport default {\n  components: {\n    Comp1,\n    Comp2,\n  },\n  mixins: [\n    pageMixin,\n    {\n      mixins: [{\n        components: {ChildMixinComp2},\n        props: {\n          childMixinProp2: {\n            type: String,\n            default: '通过字面量定义非全局 child mixin props'\n          },\n          namesakeChildMixinProp: {\n            type: String,\n            default: '通过字面量定义非全局同名 child mixin props'\n          }\n        },\n        data() {\n          return {\n            childMixinDataMsg2: '通过字面量定义非全局 child mixin data',\n            namesakeChildMixinDataMsg: '通过字面量定义非全局同名 child mixin data',\n            childMixinOnloadMsg2: '',\n            childMixinOnloadTime2: 0,\n            childMixinWatchMsg2: ''\n          }\n        },\n        computed: {\n          childMixinComputed2(): string {\n            const res = `通过字面量定义非全局 child mixin computed, 更新后的 childMixinOnloadMsg2: ${this.childMixinOnloadMsg2}`\n            console.log(res)\n            return res\n          },\n          namesakeChildMixinComputed(): string {\n            const res = '通过字面量定义非全局同名 child mixin computed'\n            console.log(res)\n            return res\n          }\n        },\n        watch: {\n          globalMixinOnloadMsg1(newVal: string) {\n            this.childMixinWatchMsg2 = `通过字面量定义非全局 child mixin watch, 更新后的 globalMixinOnloadMsg1: ${newVal}`\n            console.log(this.childMixinWatchMsg2)\n          },\n        },\n        onLoad() {\n          this.childMixinOnloadTime2 = Date.now()\n          const res = '通过字面量定义非全局 child mixin onLoad'\n          console.log(res)\n          this.childMixinOnloadMsg2 = res\n        },\n        methods: {\n          childMixinMethod2(): string {\n            const res = '通过字面量定义非全局 child mixin method'\n            console.log(res)\n            return res\n          },\n          namesakeChildMixinMethod(): string {\n            const res = '通过字面量定义非全局同名 child mixin method'\n            console.log(res)\n            return res\n          },\n        },\n      }],\n      components: {MixinComp2},\n      props: {\n        mixinProp2: {\n          type: String,\n          default: '通过字面量定义非全局 mixin props'\n        },\n        namesakeMixinProp: {\n          type: String,\n          default: '通过字面量定义非全局同名 mixin props'\n        }\n      },\n      data() {\n        return {\n          mixinDataMsg2: '通过字面量定义非全局 mixin data',\n          namesakeMixinDataMsg: '通过字面量定义非全局同名 mixin data',\n          mixinOnloadMsg2: '',\n          mixinOnloadTime2: 0,\n          mixinWatchMsg2: ''\n        }\n      },\n      computed: {\n        mixinComputed2(): string {\n          const res = `通过字面量定义非全局 mixin computed, 更新后的 mixinOnloadMsg2: ${this.mixinOnloadMsg2}`\n          console.log(res)\n          return res\n        },\n        namesakeMixinComputed(): string {\n          const res = '通过字面量定义非全局同名 mixin computed'\n          console.log(res)\n          return res\n        }\n      },\n      watch: {\n        globalMixinOnloadMsg1(newVal: string) {\n          this.mixinWatchMsg2 = `通过字面量定义非全局 mixin watch, 更新后的 globalMixinOnloadMsg1: ${newVal}`\n          console.log(this.mixinWatchMsg2)\n        },\n      },\n      onLoad() {\n        this.mixinOnloadTime2 = Date.now()\n        const res = '通过字面量定义非全局 mixin onLoad'\n        console.log(res)\n        this.mixinOnloadMsg2 = res\n      },\n      methods: {\n        mixinMethod2(): string {\n          const res = '通过字面量定义非全局 mixin method'\n          console.log(res)\n          return res\n        },\n        namesakeMixinMethod(): string {\n          const res = '通过字面量定义非全局同名 mixin method'\n          console.log(res)\n          return res\n        }\n      },\n    },\n  ],\n  data(){\n    return {\n      handleMixinEmitterMsg: '',\n      mixinWatchMsg: '',\n      mixinOnloadTime: 0,\n      onloadMsg: ''\n    }\n  },\n  watch: {\n    globalMixinOnloadMsg1(newVal: string) {\n      this.mixinWatchMsg = `页面内部定义的 watch, 更新后的 globalMixinOnloadMsg1: ${newVal}`\n      console.log(this.mixinWatchMsg)\n    },\n  },\n  onLoad(){\n    this.mixinOnloadTime = Date.now()\n    const res = '页面内的 onLoad'\n    console.log(res)\n    this.onloadMsg = res\n  },\n  methods: {\n    goMixinPageNamesake(){\n      uni.navigateTo({url: './mixins-app-page-namesake'})\n    },\n    handleMixinEmitter(emit: string, arg: string){\n      this.handleMixinEmitterMsg = `触发 ${emit}, 参数为 ${arg}`\n      console.log(this.handleMixinEmitterMsg)\n    }\n  }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/mixins/mixins-app"},"mixins_mixins-web":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/mixins/mixins-web.uvue","code":"```vue\n<template>\r\n  <!-- #ifdef APP -->\r\n  <scroll-view style=\"flex: 1\">\r\n    <!-- #endif -->\r\n    <view class=\"page\">\r\n      <text id=\"mixin-prop\" class=\"mb-10\">mixinProp: {{mixinProp}}</text>\r\n      <text id=\"mixin-data-msg\" class=\"mb-10\">mixinDataMsg: {{mixinDataMsg}}</text>\r\n      <text id=\"mixin-onload-msg\" class=\"mb-10\">mixinOnloadMsg: {{mixinOnloadMsg}}</text>\r\n      <text id=\"mixin-computed\" class=\"mb-10\">mixinComputed: {{mixinComputed}}</text>\r\n\r\n      <Comp1 title=\"title\" @globalMixinEmit1=\"(arg: string) => handleMixinEmitter('globalMixinEmit1', arg)\"\r\n        @globalChildMixinEmit1=\"(arg: string) => handleMixinEmitter('globalChildMixinEmit1', arg)\"\r\n        @globalMixinEmit2=\"(arg: string) => handleMixinEmitter('globalMixinEmit2', arg)\"\r\n        @globalChildMixinEmit2=\"(arg: string) => handleMixinEmitter('globalChildMixinEmit2', arg)\"\r\n        @mixinEmit=\"(arg: string) => handleMixinEmitter('mixinEmit', arg)\"\r\n        @childMixinEmit=\"(arg: string) => handleMixinEmitter('childMixinEmit', arg)\" />\r\n      <text v-if=\"handleMixinEmitterMsg\" class=\"mt-10 handle-mixin-emitter-msg\">\r\n        handleMixinEmitterMsg: {{ handleMixinEmitterMsg }}\r\n      </text>\r\n      <Comp2 class='comp2' title=\"title\" />\r\n    </view>\r\n    <!-- #ifdef APP -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n<script lang=\"uts\">\r\n  import Comp1 from './components/Comp1.uvue'\r\n  import Comp2 from './components/Comp2.uvue'\r\n  export default {\r\n    components: {\r\n      Comp1,\r\n      Comp2,\r\n    },\r\n    mixins: [defineMixin({\r\n      props: {\r\n        mixinProp: {\r\n          type: String,\r\n          default: '通过字面量定义非全局 mixin props'\r\n        }\r\n      },\r\n      data() {\r\n        return {\r\n          handleMixinEmitterMsg: '',\r\n          mixinDataMsg: '通过字面量定义非全局 mixin data',\r\n          mixinOnloadMsg: ''\r\n        }\r\n      },\r\n      computed: {\r\n        mixinComputed(): string {\r\n          const res = `通过字面量定义非全局 mixin computed, 更新后的 mixinOnloadMsg: ${this.mixinOnloadMsg}`\r\n          console.log(res)\r\n          return res\r\n        }\r\n      },\r\n      onLoad() {\r\n        this.mixinOnloadMsg = 'mixin onLoad msg in onLoad'\r\n      },\r\n      methods: {\r\n        mixinMethod(): string {\r\n          const res = '通过字面量定义非全局 mixin method'\r\n          console.log(res)\r\n          return res\r\n        },\r\n        handleMixinEmitter(emit: string, arg: string) {\r\n          this.handleMixinEmitterMsg = `触发 ${emit}, 参数为 ${arg}`\r\n          console.log(this.handleMixinEmitterMsg)\r\n        }\r\n      },\r\n    })]\r\n  }\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/mixins/mixins-web"},"mp-instance_mp-instance":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/mp-instance/mp-instance.uvue","code":"```vue\n<template>\n  <view>\n    renderer: <text id=\"mp-renderer\">{{mpRenderer}}</text>\n  </view>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        mpRenderer: ''\n      }\n    },\n    onLoad() {\n      this.mpRenderer = this.$scope.renderer\n    },\n    methods: {\n      \n    }\n  }\n</script>\n\n<style>\n\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/mp-instance/mp-instance"},"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        // #ifdef WEB\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          // #ifdef WEB\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        // #ifdef WEB\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          // #ifdef WEB\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})\r\n\r\ntype DataInfo = {\r\n  name: string\r\n  customKey: string\r\n  mixinDataStr: string\r\n}\r\n\r\nconst dataInfo = reactive({\r\n  name: \"\",\r\n  customKey: \"\",\r\n  mixinDataStr: \"\"\r\n} as DataInfo)\r\n\r\nonMounted(() => {\r\n  const instance = getCurrentInstance()!.proxy!\r\n  dataInfo.name = instance.$options.name!\r\n  // #ifndef APP-ANDROID\r\n  dataInfo.customKey = instance.$options._customKey\r\n  dataInfo.mixinDataStr = instance.$options.data!({})!['str']\r\n  // #endif\r\n})\r\n\r\ndefineExpose({\r\n  dataInfo\r\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\r\ntype DataInfo = {\r\n  name: string\r\n  customKey: string\r\n  mixinDataStr: string\r\n}\r\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: {\r\n        name: \"\",\r\n        customKey: \"\",\r\n        mixinDataStr: \"\",\r\n      } as DataInfo\r\n    }\r\n  },\r\n  mounted() {\r\n    this.dataInfo.name = this.$options.name!\r\n    // #ifndef APP-ANDROID\r\n    this.dataInfo.customKey = this.$options._customKey\r\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    parentNum.value = instance.$parent!.$callMethod('callMethodByChild') as number\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        this.parentNum = this.$parent!.$callMethod('callMethodByChild') as number\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    return childComponent.$parent!.$callMethod('getNum') as number\r\n  }\r\n\r\n  defineExpose({\r\n    str,\r\n    getNum,\r\n    callMethodByChild\r\n  })\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/parent/parent-composition"},"parent_parent-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/parent/parent-options.uvue","code":"```vue\n<template>\n  <view class=\"page\">\n    <child ref='child' />\n  </view>\n</template>\n\n<script lang='uts'>\nimport child from './child-options.uvue'\n\nexport default {\n  components: {\n    child\n  },\n  data() {\n    return {\n      str: \"parent str\",\n      num: 1\n    }\n  },\n  methods: {\n    getNum() : number {\n      return this.num\n    },\n    callMethodByChild(): number {\n      const child = this.$refs['child'] as ComponentPublicInstance\n      return child.$parent!.$callMethod('getNum') as number\n    }\n  }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/parent/parent-options"},"props_array-literal-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/props/array-literal-composition.uvue","code":"```vue\n<template>\r\n  <view>\r\n    <text class=\"mb-10 bold\">array literal</text>\r\n    <view class=\"mb-10 flex justify-between flex-row\">\r\n      <text>str: </text>\r\n      <text id=\"array-literal-str\">{{ str }}</text>\r\n    </view>\r\n    <view class=\"mb-10 flex justify-between flex-row\">\r\n      <text>num: </text>\r\n      <text id=\"array-literal-num\">{{ num }}</text>\r\n    </view>\r\n    <view class=\"mb-10 flex justify-between flex-row\">\r\n      <text>bool: </text>\r\n      <text id=\"array-literal-bool\">{{ bool }}</text>\r\n    </view>\r\n    <view class=\"mb-10 flex justify-between flex-row\">\r\n      <text>obj: </text>\r\n      <text id=\"array-literal-obj\">{{ JSON.stringify(obj) }}</text>\r\n    </view>\r\n    <view class=\"mb-10 flex justify-between flex-row\">\r\n      <text>arr: </text>\r\n      <text id=\"array-literal-arr\">{{ JSON.stringify(arr) }}</text>\r\n    </view>\r\n  </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst props = defineProps(['str', 'num', 'bool', 'obj', 'arr'])\n\nconsole.log('props.str: ',props.str);\nconsole.log('props.num: ',props.num);\nconsole.log('props.obj: ',props.obj);\nconsole.log('props.bool: ',props.bool);\nconsole.log('props.arr: ',props.arr);\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/props/array-literal-composition"},"props_array-literal-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/props/array-literal-options.uvue","code":"```vue\n<template>\r\n  <view>\r\n    <text class=\"mb-10 bold\">array literal</text>\r\n    <view class=\"mb-10 flex justify-between flex-row\">\r\n      <text>str: </text>\r\n      <text id=\"array-literal-str\">{{ str }}</text>\r\n    </view>\r\n    <view class=\"mb-10 flex justify-between flex-row\">\r\n      <text>num: </text>\r\n      <text id=\"array-literal-num\">{{ num }}</text>\r\n    </view>\r\n    <view class=\"mb-10 flex justify-between flex-row\">\r\n      <text>bool: </text>\r\n      <text id=\"array-literal-bool\">{{ bool }}</text>\r\n    </view>\r\n    <view class=\"mb-10 flex justify-between flex-row\">\r\n      <text>obj: </text>\r\n      <text id=\"array-literal-obj\">{{ JSON.stringify(obj) }}</text>\r\n    </view>\r\n    <view class=\"mb-10 flex justify-between flex-row\">\r\n      <text>arr: </text>\r\n      <text id=\"array-literal-arr\">{{ JSON.stringify(arr) }}</text>\r\n    </view>\r\n  </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nexport default {\r\n  props: ['str', 'num', 'bool', 'obj', 'arr'],\r\n  mounted() {\r\n    console.log('this.$props.str: ',this.$props['str']);\r\n    console.log('this.$props.num: ',this.$props['num']);\r\n    console.log('this.$props.bool: ',this.$props['bool']);\r\n    console.log('this.$props.arr: ',this.$props['arr']);\r\n    console.log('this.$props.obj: ',this.$props['obj']);\r\n  }\r\n};\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/props/array-literal-options"},"props_object-type-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/props/object-type-composition.uvue","code":"```vue\n<template>\r\n  <view>\r\n    <text class=\"mb-10 bold\">object type</text>\r\n    <view class=\"mb-10 flex justify-between flex-row\">\r\n      <text>str: </text>\r\n      <text id=\"object-type-str\">{{ str }}</text>\r\n    </view>\r\n    <view class=\"mb-10 flex justify-between flex-row\">\r\n      <text>num: </text>\r\n      <text id=\"object-type-num\">{{ num }}</text>\r\n    </view>\r\n    <view class=\"mb-10 flex justify-between flex-row\">\r\n      <text>bool: </text>\r\n      <text id=\"object-type-bool\">{{ bool }}</text>\r\n    </view>\r\n    <view class=\"mb-10 flex justify-between flex-row\">\r\n      <text>obj: </text>\r\n      <text id=\"object-type-obj\">{{ JSON.stringify(obj) }}</text>\r\n    </view>\r\n    <view class=\"mb-10 flex justify-between flex-row\">\r\n      <text>arr: </text>\r\n      <text id=\"object-type-arr\">{{ JSON.stringify(arr) }}</text>\r\n    </view>\r\n  </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\ndefineProps({\r\n\tstr: {\r\n\t\ttype: String,\r\n\t\tdefault: 'default str'\r\n\t},\r\n\tnum: {\r\n\t\ttype: Number,\r\n\t\tdefault: 0\r\n\t},\r\n\tbool: {\r\n\t\ttype: Boolean,\r\n\t\tdefault: false\r\n\t},\r\n\tobj: {\r\n\t\ttype: UTSJSONObject,\r\n\t\tdefault: (): UTSJSONObject => ({})\r\n\t},\r\n\tarr: {\r\n\t\ttype: Array as PropType<string[]>,\r\n\t\tdefault: () : Array<string> => {\r\n\t\t\treturn []\r\n\t\t}\r\n\t}\r\n})\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/props/object-type-composition"},"props_object-type-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/props/object-type-options.uvue","code":"```vue\n<template>\r\n\t<view>\r\n    <text class=\"mb-10 bold\">object type</text>\r\n\t\t<view class=\"mb-10 flex justify-between flex-row\">\r\n      <text>str: </text>\r\n      <text id=\"object-type-str\">{{ str }}</text>\r\n    </view>\r\n    <view class=\"mb-10 flex justify-between flex-row\">\r\n      <text>num: </text>\r\n      <text id=\"object-type-num\">{{ num }}</text>\r\n    </view>\r\n    <view class=\"mb-10 flex justify-between flex-row\">\r\n      <text>bool: </text>\r\n      <text id=\"object-type-bool\">{{ bool }}</text>\r\n    </view>\r\n    <view class=\"mb-10 flex justify-between flex-row\">\r\n      <text>obj: </text>\r\n      <text id=\"object-type-obj\">{{ JSON.stringify(obj) }}</text>\r\n    </view>\r\n    <view class=\"mb-10 flex justify-between flex-row\">\r\n      <text>arr: </text>\r\n      <text id=\"object-type-arr\">{{ JSON.stringify(arr) }}</text>\r\n    </view>\r\n\t</view>\r\n</template>\r\n\r\n<script lang='uts'>\r\n\texport default {\r\n\t\tprops: {\r\n\t\t\tstr: {\r\n\t\t\t\ttype: String,\r\n\t\t\t\tdefault: 'default str'\r\n\t\t\t},\r\n\t\t\tnum: {\r\n\t\t\t\ttype: Number,\r\n\t\t\t\tdefault: 0\r\n\t\t\t},\r\n\t\t\tbool: {\r\n\t\t\t\ttype: Boolean,\r\n\t\t\t\tdefault: false\r\n\t\t\t},\r\n\t\t\tobj: {\r\n\t\t\t\ttype: UTSJSONObject,\r\n\t\t\t\tdefault: (): UTSJSONObject => ({})\r\n\t\t\t},\r\n\t\t\tarr: {\r\n\t\t\t\ttype: Array as PropType<string[]>,\r\n\t\t\t\tdefault: () : Array<string> => {\r\n\t\t\t\t\treturn []\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/props/object-type-options"},"props_props-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/props/props-composition.uvue","code":"```vue\n<template>\r\n  <view class=\"page\">\r\n    <array-literal :str=\"str\" :num=\"num\" :bool=\"bool\" :obj=\"obj\" :arr=\"arr\" />\r\n    <object-type str=\"str\" :num=\"num\" :bool=\"bool\" :obj=\"obj\" :arr=\"arr\" />\r\n    <same-name-prop-default-value />\r\n    <props-with-defaults />\r\n    <!-- #ifdef APP-ANDROID -->\r\n    <reference-types :list=\"[1,2,3]\" />\r\n    <!-- #endif -->\r\n    <!-- #ifndef APP-ANDROID -->\r\n    <reference-types :list=\"['a','b','c']\" />\r\n    <!-- #endif -->\r\n  </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n  import ArrayLiteral from './array-literal-composition.uvue'\r\n  import ObjectType from \"./object-type-composition.uvue\";\r\n  import SameNamePropDefaultValue from \"./same-name-prop-default-value-composition.uvue\";\r\n  import PropsWithDefaults from \"./props-with-defaults.uvue\";\r\n  import ReferenceTypes from './reference-types-composition.uvue'\r\n\r\n  const str = 'str'\r\n  const num = 10\r\n  const bool = true\r\n  const obj = { age: 18 }\r\n  const arr = ['a', 'b', 'c']\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/props/props-composition"},"props_props-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/props/props-options.uvue","code":"```vue\n<template>\r\n  <view class=\"page\">\r\n    <array-literal :str=\"str\" :num=\"num\" :bool=\"bool\" :obj=\"obj\" :arr=\"arr\" />\r\n    <object-type str=\"str\" :num=\"num\" :bool=\"bool\" :obj=\"obj\" :arr=\"arr\" />\r\n    <same-name-prop-default-value />\r\n    <props-with-defaults />\r\n    <!-- #ifdef APP-ANDROID -->\r\n    <reference-types :list=\"[1,2,3]\" />\r\n    <!-- #endif -->\r\n    <!-- #ifndef APP-ANDROID -->\r\n    <reference-types :list=\"['a','b','c']\" />\r\n    <!-- #endif -->\r\n  </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\n  import ArrayLiteral from './array-literal-options.uvue'\r\n  import ObjectType from \"./object-type-options.uvue\";\r\n  import SameNamePropDefaultValue from \"./same-name-prop-default-value-options.uvue\";\r\n  import PropsWithDefaults from \"./props-with-defaults.uvue\";\r\n  import ReferenceTypes from './reference-types-options.uvue'\r\n\r\n  export default {\r\n    components: {\r\n      ArrayLiteral,\r\n      ObjectType,\r\n      SameNamePropDefaultValue,\r\n      PropsWithDefaults,\r\n      ReferenceTypes\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>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/props/props-options"},"props_props-with-defaults":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/props/props-with-defaults.uvue","code":"```vue\n<template>\n  <view class='mt-10'>\n    <text class=\"mb-10 bold\">withDefaults</text>\n    <view class=\"mb-10 flex flex-row justify-between\">\n      <text>msg</text>\n      <text id=\"prop-msg\">{{ props.msg }}</text>\n    </view>\n    <view class=\"mb-10 flex flex-row justify-between\">\n      <text>labels</text>\n      <text id=\"prop-labels\">{{ JSON.stringify(props.labels) }}</text>\n    </view>\n  </view>\n</template>\n\n<script setup lang=\"uts\">\ninterface CustomProps {\n  msg: string\n  labels : string[]\n}\n\nconst props = withDefaults(defineProps<CustomProps>(), {\n  msg: 'hello',\n  labels: ():string[] => ['a', 'b']\n})\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/props/props-with-defaults"},"props_reference-types-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/props/reference-types-composition.uvue","code":"```vue\n<template>\r\n  <view>\r\n    <text class=\"mb-10 bold\">reference types</text>\r\n    <text id=\"reference-type-list\">{{ JSON.stringify(list) }}</text>\r\n  </view>\r\n</template>\r\n<script setup lang=\"uts\">\r\n  import type { ReferenceTypesProps } from './types.uts'\r\n\r\n  const props = withDefaults(defineProps<ReferenceTypesProps>(), {\r\n    // #ifdef APP-ANDROID\r\n    list: [] as number[]\r\n    // #endif\r\n    // #ifndef APP-ANDROID\r\n    list: [] as string[]\r\n    // #endif\r\n  })\r\n  console.log('reference types props', props)\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/props/reference-types-composition"},"props_reference-types-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/props/reference-types-options.uvue","code":"```vue\n<template>\r\n  <view>\r\n    <text class=\"mb-10 bold\">reference types</text>\r\n    <text id=\"reference-type-list\">{{ JSON.stringify(list) }}</text>\r\n  </view>\r\n</template>\r\n<script lang=\"uts\">\r\n  export default {\r\n    props: {\r\n      list: {\r\n        // #ifdef APP-ANDROID\r\n        type: Array as PropType<number[]>,\r\n        default: [] as number[]\r\n        // #endif\r\n        // #ifndef APP-ANDROID\r\n        type: Array as PropType<string[]>,\r\n        default: [] as string[]\r\n        // #endif\r\n      }\r\n    },\r\n    onReady() {\r\n      console.log('reference types props', this.$props)\r\n    }\r\n  }\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/props/reference-types-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>\n  <view class=\"page\">\n    <inject-comp />\n  </view>\n</template>\n\n<script setup lang=\"uts\">\nimport InjectComp from '../inject/inject-composition.uvue';\n\nprovide('msg', 'hello');\nprovide('num', 0);\nprovide('obj', { a: 1 });\nprovide('arr', [1, 2, 3]);\nprovide('fn', () : string => 'hello');\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/provide/provide-composition"},"provide_provide-options-1":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/provide/provide-options-1.uvue","code":"```vue\n<template>\n  <!-- #ifdef APP -->\n  <scroll-view style=\"flex: 1\">\n    <!-- #endif -->\n    <view class=\"page\">\n      <text>provide page</text>\n      <button class=\"mt-10\" @click=\"goProvidePage2\">\n        跳转函数方式定义 provide 示例\n      </button>\n      <ComponentForInject />\n    </view>\n    <!-- #ifdef APP -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script lang=\"uts\">\nimport ComponentForInject from '../inject/inject-options-1.uvue'\n\nexport default {\n  components: {\n    ComponentForInject\n  },\n  data(){\n    return {\n      title: '字面量方式定义 provide page title',\n      obj: {\n        title: 'data obj.title',\n        content: 'data obj.content'\n      },\n    }\n  },\n  provide: {\n    providePageStr: '字面量方式定义 provide page str',\n    providePageNum: 1,\n    providePageBool: true,\n    providePageObject: {\n      title: '字面量方式定义 provide page object title',\n      content: '字面量方式定义 provide page object content'\n    },\n    providePageArr: ['字面量方式定义 provide page arr'],\n    providePageMap: new Map<string, string>([['key', '字面量方式定义 provide page map']]),\n    providePageSet: new Set<string>(['字面量方式定义 provide page set']),\n  },\n  methods: {\n    goProvidePage2(){\n      uni.navigateTo({\n        url: '/pages/component-instance/provide/provide-options-2'\n      })\n    }\n  },\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/provide/provide-options-1"},"provide_provide-options-2":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/provide/provide-options-2.uvue","code":"```vue\n<template>\n  <!-- #ifdef APP -->\n  <scroll-view style=\"flex: 1\">\n    <!-- #endif -->\n    <view class=\"page\">\n      <text>provide page 2</text>\n      <ComponentForInject />\n    </view>\n    <!-- #ifdef APP -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script lang=\"uts\">\nimport ComponentForInject from '../inject/inject-options-2.uvue'\n\nexport default {\n  components: {\n    ComponentForInject\n  },\n  data(){\n    return {\n      title: '函数方式定义 provide page title'\n    }\n  },\n  provide(){\n    return {\n      providePageTitle: this.title,\n      providePageStr: '函数方式定义 provide page str',\n      providePageNum: 2,\n      providePageBool: true,\n      providePageObject: {\n        title: '函数方式定义 provide page object title',\n        content: '函数方式定义 provide page object content'\n      },\n      providePageArr: ['函数方式定义 provide page arr'],\n      providePageMap: new Map<string, string>([['key', '函数方式定义 provide page map']]),\n      providePageSet: new Set<string>(['函数方式定义 provide page set']),\n    }\n  }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/provide/provide-options-2"},"refs_child-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/refs/child-composition.uvue","code":"```vue\n<script setup lang=\"uts\">\nconst value = ref<string>('child value')\n</script>\n\n<template>\n  <text>{{ value }}</text>\n</template>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/refs/child-composition"},"refs_child-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/refs/child-options.uvue","code":"```vue\n<script>\nexport default {\n  data() {\n    return {\n      value: 'child value'\n    }\n  }\n}\n</script>\n\n<template>\n  <text>{{ value }}</text>\n</template>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/refs/child-options"},"refs_refs-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/refs/refs-composition.uvue","code":"```vue\n<template>\n  <view class=\"page\">\n    <view class=\"row\">\n      <text>NodeRef: </text>\n      <text ref=\"nodeRef\">{{ dataInfo.existRef }}</text>\n    </view>\n    <view class=\"row\">\n      <text>childRef:</text>\n      <text>{{ dataInfo.existChildRef }}</text>\n    </view>\n    <view class=\"row\">\n      <text>existTextItems:</text>\n      <text>{{ dataInfo.existTextItems }}</text>\n    </view>\n    <view>\n      <text v-for=\"item in dataInfo.textItemsExpectNum\" ref=\"textItems\" :key=\"item\">{{\n        item\n      }}</text>\n    </view>\n    <child class=\"mt-10\" ref=\"childRef\">ComponentRef</child>\n  </view>\n</template>\n\n<script setup lang=\"uts\">\nimport Child from './child-composition.uvue'\n\ntype DataInfo = {\n  existRef: boolean\n  existChildRef: boolean\n  textItemsExpectNum: number\n  existTextItems: boolean\n}\n\nconst dataInfo = reactive<DataInfo>({\n  existRef: false,\n  existChildRef: false,\n  textItemsExpectNum: 3,\n  existTextItems: false\n})\n\nconst nodeRef = ref<UniElement | null>(null)\nconst childRef = ref<UniElement | null>(null)\nconst textItems = ref<UniElement[] | null>(null)\n\nonReady(() => {\n  dataInfo.existRef = nodeRef.value !== null\n  dataInfo.existChildRef = childRef.value !== null\n  dataInfo.existTextItems = textItems.value?.length === dataInfo.textItemsExpectNum\n})\n\ndefineExpose({\n  dataInfo\n})\n</script>\n\n<style>\n.row {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  margin-bottom: 10px;\n}\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/refs/refs-composition"},"refs_refs-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/refs/refs-options.uvue","code":"```vue\n<template>\n  <view class=\"page\">\n    <view class=\"row\">\n      <text>NodeRef: </text>\n      <text ref=\"node\">{{ dataInfo.existRef }}</text>\n    </view>\n    <view class=\"row\">\n      <text>childRef:</text>\n      <text>{{ dataInfo.existChildRef }}</text>\n    </view>\n    <view class=\"row\">\n      <text>existTextItems:</text>\n      <text>{{ dataInfo.existTextItems }}</text>\n    </view>\n    <view>\n      <text v-for=\"item in dataInfo.textItemsExpectNum\" ref=\"textItems\" :key=\"item\">{{\n        item\n      }}</text>\n    </view>\n    <child class=\"mt-10\" ref=\"childRef\">ComponentRef</child>\n  </view>\n</template>\n\n<script lang=\"uts\">\nimport child from './child-options.uvue'\n\ntype DataInfo = {\n  existRef: boolean\n  existChildRef: boolean\n  textItemsExpectNum: number\n  existTextItems: boolean\n}\nexport default {\n  components: {\n    child\n  },\n  data() {\n    return {\n      dataInfo: {\n        existRef: false,\n        existChildRef: false,\n        textItemsExpectNum: 3,\n        existTextItems: false\n      } as DataInfo\n    }\n  },\n  onReady() {\n    this.dataInfo.existRef = this.$refs['node'] !== null\n    this.dataInfo.existChildRef = this.$refs['childRef'] !== null\n    const textItems = this.$refs['textItems'] as Array<UniElement>\n    this.dataInfo.existTextItems = textItems.length === this.dataInfo.textItemsExpectNum\n  }\n}\n</script>\n\n<style>\n.row {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  margin-bottom: 10px;\n}\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/refs/refs-options"},"root_child-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/root/child-composition.uvue","code":"```vue\n<template>\n  <view class=\"flex justify-between flex-row\">\n    <text>root str in parent component: </text>\n    <text id=\"root-str-child\">{{ rootStr }}</text>\n  </view>\n</template>\n\n<script setup lang=\"uts\">\nconst str = ref('child component str')\nconst rootStr = ref('')\n\nonMounted(() => {\n  const instance = getCurrentInstance()!.proxy!\n  // #ifdef APP-ANDROID\n  rootStr.value = (instance.$root!.$exposed['str'] as Ref<string>).value as string\n  // #endif\n  // #ifndef APP-ANDROID\n  rootStr.value = instance.$root!['str'] as string\n  // #endif\n})\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/root/child-composition"},"root_child-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/root/child-options.uvue","code":"```vue\n<template>\n  <view class=\"flex justify-between flex-row\">\n    <text>root str in parent component: </text>\n    <text id=\"root-str-child\">{{ rootStr }}</text>\n  </view>\n</template>\n\n<script lang=\"uts\">\nexport default {\n  data () {\n    return {\n      str: 'child component str',\n      rootStr: ''\n    }\n  },\n  mounted() {\n    this.rootStr = this.$root!.$data['str'] as string\n  }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/root/child-options"},"root_root-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/root/root-composition.uvue","code":"```vue\n<template>\r\n  <view class=\"page\">\r\n    <view class=\"mb-10 flex justify-between flex-row\">\r\n      <text>root str in parent component: </text>\r\n      <text id=\"root-str-parent\">{{ rootStr }}</text>\r\n    </view>\r\n    <Child />\r\n  </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n  import Child from './child-composition.uvue'\r\n\r\n  const str = ref('root component str')\r\n  const rootStr = ref('')\r\n\r\n  onReady(() => {\r\n    const instance = getCurrentInstance()!.proxy!\n    // TODO: 确认 android 与 ios 的差异， ios 与标准 vue 相同\n    // #ifdef APP-ANDROID\r\n    rootStr.value = (instance.$root!.$exposed['str'] as Ref<string>).value as string\r\n    // #endif\r\n    // #ifndef APP-ANDROID\r\n    rootStr.value = instance.$root!['str'] as string\r\n    // #endif\r\n  })\r\n\r\n  defineExpose({\r\n    str\r\n  })\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/root/root-composition"},"root_root-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/root/root-options.uvue","code":"```vue\n<template>\n  <view class=\"page\">\n    <view class=\"mb-10 flex justify-between flex-row\">\n      <text>root str in parent component: </text>\n      <text id=\"root-str-parent\">{{ rootStr }}</text>\n    </view>\n    <child />\n  </view>\n</template>\n\n<script lang=\"uts\">\nimport Child from './child-options.uvue'\n\nexport default {\n  components: {Child},\n  data () {\n    return {\n      str: 'root component str',\n      rootStr: ''\n    }\n  },\n  onReady() {\n    this.rootStr = this.$root!.$data['str'] as string\n  }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/root/root-options"},"setup-function_Foo":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/setup-function/Foo.uvue","code":"```vue\n<template>\r\n  <view>\r\n    <text class=\"mt-10\">this is component Foo for setup function</text>\r\n    <slot></slot>\r\n    <view class=\"flex justify-between flex-row mt-10\">\r\n      <text>hasDefaultSlot:</text>\r\n      <text id=\"has-default-slot\">{{ hasDefaultSlot }}</text>\r\n    </view>\r\n  </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nexport default {\r\n\tsetup(_, context) {\r\n\t\tconst hasDefaultSlot = context.slots['default'] !== null\r\n\t\treturn {\r\n\t\t\thasDefaultSlot\r\n\t\t}\r\n\t}\r\n}\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/setup-function/Foo"},"setup-function_RenderFunction":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/setup-function/RenderFunction.uvue","code":"```vue\n<template>\r\n\t<view class=\"mt-10\">\r\n\t\t<text>this is Render Function component</text>\r\n\t</view>\r\n</template>\r\n\r\n<script lang='uts'>\r\n\texport default {\r\n\t\tprops: {\r\n\t\t\tstr: {\r\n\t\t\t\ttype: String,\r\n\t\t\t},\r\n\t\t\tcount: {\r\n\t\t\t\ttype: Number,\r\n\t\t\t},\r\n\t\t\tobj: {\r\n\t\t\t\ttype: UTSJSONObject,\r\n\t\t\t}\r\n\t\t},\r\n\t\temits: ['compUpdateObj'],\r\n\t\tsetup(props, context) {\r\n\t\t\tconst compUpdateObj = () => {\r\n\t\t\t\tcontext.emit('compUpdateObj')\r\n\t\t\t}\r\n\t\t\t// TODO: 待支持 expose 后补充示例\r\n\t\t\t// const compCount = ref(0)\r\n\t\t\t// const compIncrement = () => {\r\n\t\t\t// \tcompCount.value++\r\n\t\t\t// }\r\n\t\t\t// context.expose({compCount, compIncrement})\r\n\t\t\treturn () : VNode => h('view', { class: 'mt-10' }, [\r\n\t\t\t\th('text', { class: 'mt-10' }, 'this is render function component text with h function'),\r\n\t\t\t\t// h('text', { class: 'mt-10' }, `compCount: ${compCount.value}`),\r\n\t\t\t\th('text', { id: 'props-str', class: 'mt-10' }, `props.str: ${props.str}`),\r\n\t\t\t\th('text', { id: 'props-count', class: 'mt-10' }, `props.count: ${props.count}`),\r\n\t\t\t\th('text', { id: 'props-obj-str', class: 'mt-10' }, `props.obj['str']: ${props.obj!['str']}`),\r\n\t\t\t\th('text', { id: 'props-obj-num', class: 'mt-10' }, `props.obj['num']: ${props.obj!['num']}`),\r\n\t\t\t\th('text', { id: 'props-obj-bool', class: 'mt-10' }, `props.obj['bool']: ${props.obj!['bool']}`),\r\n\t\t\t\th('button', { id: 'comp-update-obj-btn', class: 'mt-10', onClick: compUpdateObj }, 'comp update obj'),\r\n\t\t\t\th('text', { id: 'context-attrs-is-show', class: 'mt-10' }, `context.attrs.isShow: ${context.attrs['isShow']}`),\r\n\t\t\t])\r\n\t\t}\r\n\t}\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/setup-function/RenderFunction"},"setup-function_setup-function":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/setup-function/setup-function.uvue","code":"```vue\n<template>\n  <!-- #ifdef APP -->\n  <scroll-view style=\"flex: 1\">\n    <!-- #endif -->\n    <view class=\"page\">\n      <view class=\"flex justify-between flex-row mt-10\">\n        <text>str:</text>\n        <text id=\"str\">{{ str }}</text>\n      </view>\n      <view class=\"flex justify-between flex-row mt-10\">\n        <text>num:</text>\n        <text id=\"num\">{{ num }}</text>\n      </view>\n      <view class=\"flex justify-between flex-row mt-10\">\n        <text>bool:</text>\n        <text id=\"bool\">{{ bool }}</text>\n      </view>\n      <view class=\"flex justify-between flex-row mt-10\">\n        <text>count:</text>\n        <text id=\"count\">{{ count }}</text>\n      </view>\n      <button class=\"mt-10\" id=\"increment-btn\" @click=\"increment\">\n        increment count\n      </button>\n      <view class=\"flex justify-between flex-row mt-10\">\n        <text>obj.str:</text>\n        <text id=\"obj-str\">{{ obj['str'] }}</text>\n      </view>\n      <view class=\"flex justify-between flex-row mt-10\">\n        <text>obj.num:</text>\n        <text id=\"obj-num\">{{ obj['num'] }}</text>\n      </view>\n      <view class=\"flex justify-between flex-row mt-10\">\n        <text>obj.bool:</text>\n        <text id=\"obj-bool\">{{ obj['bool'] }}</text>\n      </view>\n      <button class=\"mt-10\" id=\"update-obj-btn\" @click=\"updateObj\">\n        update obj\n      </button>\n      <!-- #ifdef APP -->\n      <RenderFunction\n        :str=\"str\"\n        :count=\"count\"\n        :obj=\"obj\"\n        @compUpdateObj=\"compUpdateObj\"\n        :isShow=\"true\" />\n      <!-- #endif -->\n      <Foo>\n        <text class=\"mt-10\" id=\"default-slot-in-foo\">default slot in Foo</text>\n      </Foo>\n    </view>\n    <!-- #ifdef APP -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script lang=\"uts\">\n// #ifdef APP\nimport RenderFunction from './RenderFunction.uvue'\n// #endif\nimport Foo from './Foo.uvue'\nexport default {\n  components: {\n    // #ifdef APP\n    RenderFunction,\n    // #endif\n    Foo\n  },\n  setup() {\n    const count = ref(0)\n    // 函数只能通过声明变量,赋值函数的方式,不支持 function xxx(){}\n    const increment = () => { count.value++ }\n    const obj = reactive({\n      str: 'obj default str',\n      num: 0,\n      bool: false,\n    })\n    const updateObj = () => {\n      obj['str'] = 'obj new str'\n      obj['num'] = 100\n      obj['bool'] = true\n    }\n    const compUpdateObj = () => {\n      obj['str'] = 'obj new str by comp update'\n      obj['num'] = 200\n      obj['bool'] = true\n    }\n    return {\n      str: 'default str',\n      num: 0,\n      bool: false,\n      count,\n      increment,\n      obj,\n      updateObj,\n      compUpdateObj\n    }\n  }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/setup-function/setup-function"},"slots_slot-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/slots/slot-composition.uvue","code":"```vue\n<template>\n  <view>\n    <slot name=\"header\"></slot>\n    <slot name=\"footer\"></slot>\n    <slot></slot>\n  </view>\n</template>\n\n<script setup lang=\"uts\">\nconst slots = useSlots()\n\nconst hasSlots = (): boolean => {\n  const header = slots['header']\n  const footer = slots['footer']\n  const def = slots['default']\n\n  return header !== null && footer !== null && def !== null\n}\n\ndefineExpose({\n  hasSlots\n})\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/slots/slot-composition"},"slots_slot-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/slots/slot-options.uvue","code":"```vue\n<template>\n  <view>\n    <slot name=\"header\"></slot>\n    <slot name=\"footer\"></slot>\n    <slot></slot>\n  </view>\n</template>\n\n<script lang=\"uts\">\nexport default {\n  mounted() {\n    console.log(this.hasSlots())\n  },\n  methods: {\n    hasSlots() : boolean {\n      const header = this.$slots['header']\n      const footer = this.$slots['footer']\n      const def = this.$slots['default']\n\n      return header !== null && footer !== null && def !== null\n    }\n  }\n}\n</script>\n\n<style scoped></style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/slots/slot-options"},"slots_slots-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/slots/slots-composition.uvue","code":"```vue\n<template>\n  <view class=\"page\">\n    <SlotComp class=\"slot-comp\">\n      <template v-slot:header>header</template>\n      <template v-slot:default>default</template>\n      <template v-slot:footer>footer</template>\n    </SlotComp>\n  </view>\n</template>\n\n<script setup lang=\"uts\">\n  import SlotComp from './slot-composition.uvue'\n</script>\n\n<style>\n  .row {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    margin-bottom: 10px;\n  }\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/slots/slots-composition"},"slots_slots-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/slots/slots-options.uvue","code":"```vue\n<template>\n  <view class=\"page\">\n    <slot-comp class=\"slot-comp\">\n      <template v-slot:header>header</template>\n      <template v-slot:default>default</template>\n      <template v-slot:footer>footer</template>\n    </slot-comp>\n  </view>\n</template>\n\n<script lang=\"uts\">\n  import slot from './slot-options.uvue'\n\n  export default {\n    components: {\n      slotComp: slot\n    }\n  }\n</script>\n\n<style>\n  .row {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    margin-bottom: 10px;\n  }\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/slots/slots-options"},"mixins_components_ChildMixinComp1":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/mixins/components/ChildMixinComp1.uvue","code":"```vue\n<template>\n  <text class=\"mt-10 child-mixin-component-1\">{{ title }}</text>\n</template>\n\n<script lang=\"uts\">\nexport default {\n  data(){\n    return {\n      title: 'child mixin component 1'\n    }\n  }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/mixins/components/ChildMixinComp1"},"mixins_components_ChildMixinComp2":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/mixins/components/ChildMixinComp2.uvue","code":"```vue\n<template>\n  <text class=\"mt-10 child-mixin-component-2\">{{ title }}</text>\n</template>\n\n<script lang=\"uts\">\nexport default {\n  data(){\n    return {\n      title: 'child mixin component 2'\n    }\n  }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/mixins/components/ChildMixinComp2"},"mixins_components_Comp1":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/mixins/components/Comp1.uvue","code":"```vue\n<template>\n  <view class=\"mt-10\" ref=\"mixin-comp-root\">\n    <text class=\"bold\">Comp1: inheritAttrs: false</text>\n    <text class=\"mt-10\" style=\"color:#ccc;\"\n      >rootElementTitle should be null</text\n    >\n    <text class=\"mt-10 root-element-title-1\">rootElementTitle: {{ rootElementTitle }}</text>\n    <!-- #ifdef APP -->\n    <text class=\"mt-10 bold\">trigger emitter:</text>\n    <button class=\"mt-10 global-mixin-emit-1\" @click=\"triggerEmitter('globalMixinEmit1')\">\n      trigger globalMixinEmit1\n    </button>\n    <button\n      class=\"mt-10 global-child-mixin-emit-1\"\n      @click=\"triggerEmitter('globalChildMixinEmit1')\">\n      trigger globalChildMixinEmit1\n    </button>\n    <button class=\"mt-10 global-mixin-emit-2\" @click=\"triggerEmitter('globalMixinEmit2')\">\n      trigger globalMixinEmit2\n    </button>\n    <button\n      class=\"mt-10 global-child-mixin-emit-2\"\n      @click=\"triggerEmitter('globalChildMixinEmit2')\">\n      trigger globalChildMixinEmit2\n    </button>\n    <button class=\"mt-10 mixin-emit\" @click=\"triggerEmitter('mixinEmit')\">\n      trigger mixinEmit\n    </button>\n    <button class=\"mt-10 child-mixin-emit\" @click=\"triggerEmitter('childMixinEmit')\">\n      trigger childMixinEmit\n    </button>\n    <MixinComp />\n    <!-- #endif -->\n  </view>\n</template>\n\n<script lang=\"uts\">\nexport default {\n  mixins:[{\n    mixins: [{\n      emits: ['childMixinEmit']\n    }],\n    inheritAttrs: false,\n    emits:['mixinEmit']\n  }],\n  data(){\n    return {\n      rootElementTitle: '' as string | null\n    }\n  },\n  mounted(){\n    const rootElement = this.$refs['mixin-comp-root'] as UniElement\n    this.rootElementTitle = JSON.stringify(rootElement.getAttribute('title'))\n  },\n  methods: {\n    triggerEmitter(emit: string){\n      this.$emit(emit, emit)\n    },\n  }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/mixins/components/Comp1"},"mixins_components_Comp2":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/mixins/components/Comp2.uvue","code":"```vue\n<template>\r\n  <view class=\"mt-10\" ref=\"mixin-comp-root\">\r\n    <text class=\"bold\">Comp2: inheritAttrs: true</text>\r\n    <text class=\"mt-10\" style=\"color:#ccc;\">rootElementTitle should not be null</text>\r\n    <text class=\"mt-10 root-element-title-2\">rootElementTitle: {{ rootElementTitle }}</text>\r\n    <text class=\"mt-10\">{{ namesakeMixinProp }}</text>\r\n    <text class=\"mt-10\">{{ namesakeMixinDataMsg }}</text>\r\n    <text class=\"mt-10\">{{ namesakeMixinComputed }}</text>\r\n    <text class=\"mt-10 mixin-watch-msg\">{{ mixinWatchMsg }}</text>\r\n    <text class=\"mt-10\">{{ namesakeMixinMethod() }}</text>\r\n    <button class=\"mt-10\" @click=\"changeGlobalMixinOnloadMsg1\">\r\n      change globalMixinOnloadMsg1\r\n    </button>\r\n    <MixinComp />\r\n  </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\n  import CompForComp from './CompForComp.uvue'\r\n\r\n  export default {\r\n    mixins: [{\r\n      inheritAttrs: true,\r\n    }],\r\n    components: { MixinComp: CompForComp },\r\n    props: {\r\n      namesakeMixinProp: {\r\n        type: String,\r\n        default: '组件内部的同名 props'\r\n      }\r\n    },\r\n    data() {\r\n      return {\r\n        namesakeMixinDataMsg: '组件内部的同名 data',\r\n        mixinWatchMsg: '',\r\n        rootElementTitle: '' as string | null\r\n      }\r\n    },\r\n    computed: {\r\n      namesakeMixinComputed() : string {\r\n        const res = '组件内部的同名 computed'\r\n        console.log(res)\r\n        return res\r\n      }\r\n    },\r\n    mounted() {\r\n      const rootElement = this.$refs['mixin-comp-root'] as UniElement\r\n      this.rootElementTitle = rootElement.getAttribute('title')\r\n    },\r\n    watch: {\r\n      globalMixinOnloadMsg1(newVal : string) {\r\n        this.mixinWatchMsg = `组件内部定义的 watch, 更新后的 globalMixinOnloadMsg1: ${newVal}`\r\n        console.log(this.mixinWatchMsg)\r\n      },\r\n    },\r\n    methods: {\r\n      namesakeMixinMethod() : string {\r\n        const res = '组件内部的同名 method'\r\n        console.log(res)\r\n        return res\r\n      },\r\n      changeGlobalMixinOnloadMsg1() {\r\n        // #ifdef WEB\r\n        (this.globalMixinOnloadMsg1 as string) = 'new globalMixinOnloadMsg1 changed in comp2'\r\n        // #endif\r\n        // #ifndef WEB\r\n        this.globalMixinOnloadMsg1 = 'new globalMixinOnloadMsg1 changed in comp2'\r\n        // #endif\r\n      }\r\n    }\r\n  }\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/mixins/components/Comp2"},"mixins_components_CompForComp":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/mixins/components/CompForComp.uvue","code":"```vue\n<template>\n  <text class=\"mt-10 component-for-component\">{{ title }}</text>\n</template>\n\n<script lang=\"uts\">\nexport default {\n  data(){\n    return {\n      title: 'component for component'\n    }\n  }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/mixins/components/CompForComp"},"mixins_components_CompForPage":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/mixins/components/CompForPage.uvue","code":"```vue\n<template>\n  <text class=\"mt-10 component-for-page\">{{ title }}</text>\n</template>\n\n<script lang=\"uts\">\nexport default {\n  data(){\n    return {\n      title: 'component for page'\n    }\n  }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/mixins/components/CompForPage"},"mixins_components_GlobalChildMixinComp1":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/mixins/components/GlobalChildMixinComp1.uvue","code":"```vue\n<template>\n  <text class=\"mt-10 global-child-mixin-component-1\">{{ title }}</text>\n</template>\n\n<script lang=\"uts\">\nexport default {\n  data(){\n    return {\n      title: 'global child mixin component 1'\n    }\n  }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/mixins/components/GlobalChildMixinComp1"},"mixins_components_GlobalChildMixinComp2":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/mixins/components/GlobalChildMixinComp2.uvue","code":"```vue\n<template>\n  <text class=\"mt-10 global-child-mixin-component-2\">{{ title }}</text>\n</template>\n\n<script lang=\"uts\">\nexport default {\n  data(){\n    return {\n      title: 'global child mixin component 2'\n    }\n  }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/mixins/components/GlobalChildMixinComp2"},"mixins_components_GlobalMixinComp1":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/mixins/components/GlobalMixinComp1.uvue","code":"```vue\n<template>\n  <text class=\"mt-10 global-mixin-component-1\">{{ title }}</text>\n</template>\n\n<script lang=\"uts\">\nexport default {\n  data(){\n    return {\n      title: 'global mixin component 1'\n    }\n  }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/mixins/components/GlobalMixinComp1"},"mixins_components_GlobalMixinComp2":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/mixins/components/GlobalMixinComp2.uvue","code":"```vue\n<template>\n  <text class=\"mt-10 global-mixin-component-2\">{{ title }}</text>\n</template>\n\n<script lang=\"uts\">\nexport default {\n  data(){\n    return {\n      title: 'global mixin component 2'\n    }\n  }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/mixins/components/GlobalMixinComp2"},"mixins_components_MixinComp1":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/mixins/components/MixinComp1.uvue","code":"```vue\n<template>\n  <text class=\"mt-10 mixin-component-1\">{{ title }}</text>\n</template>\n\n<script lang=\"uts\">\nexport default {\n  data(){\n    return {\n      title: 'mixin component 1'\n    }\n  }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/mixins/components/MixinComp1"},"mixins_components_MixinComp2":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/mixins/components/MixinComp2.uvue","code":"```vue\n<template>\n  <text class=\"mt-10 mixin-component-2\">{{ title }}</text>\n</template>\n\n<script lang=\"uts\">\nexport default {\n  data(){\n    return {\n      title: 'mixin component 2'\n    }\n  }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/mixins/components/MixinComp2"},"mixins_components_MixinCompForChildMixin":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/mixins/components/MixinCompForChildMixin.uvue","code":"```vue\n<template>\n  <text class=\"mt-10 mixin-component-for-child-mixin\">{{ title }}</text>\n</template>\n\n<script lang=\"uts\">\nexport default {\n  data(){\n    return {\n      title: 'mixin component for child mixin'\n    }\n  }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/mixins/components/MixinCompForChildMixin"},"mixins_components_MixinCompForGlobalChildMixin":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/mixins/components/MixinCompForGlobalChildMixin.uvue","code":"```vue\n<template>\n  <text class=\"mt-10 mixin-component-for-global-child-mixin\">{{ title }}</text>\n</template>\n\n<script lang=\"uts\">\nexport default {\n  data(){\n    return {\n      title: 'mixin component for global child mixin'\n    }\n  }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/mixins/components/MixinCompForGlobalChildMixin"},"mixins_components_MixinCompForGlobalMixin":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/mixins/components/MixinCompForGlobalMixin.uvue","code":"```vue\n<template>\n  <text class=\"mt-10 mixin-component-for-global-mixin\">{{ title }}</text>\n</template>\n\n<script lang=\"uts\">\nexport default {\n  data(){\n    return {\n      title: 'mixin component for global mixin'\n    }\n  }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/mixins/components/MixinCompForGlobalMixin"},"mixins_components_MixinCompForMixin":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/mixins/components/MixinCompForMixin.uvue","code":"```vue\n<template>\n  <text class=\"mt-10 mixin-component-for-mixin\">{{ title }}</text>\n</template>\n\n<script lang=\"uts\">\nexport default {\n  data(){\n    return {\n      title: 'mixin component for mixin'\n    }\n  }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/mixins/components/MixinCompForMixin"}},"E_directive":{"v-bind_Foo-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-bind/Foo-composition.uvue","code":"```vue\n<template>\r\n  <view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>props title:</text>\r\n      <text id=\"foo-props-title\">{{ title }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>props num:</text>\r\n      <text id=\"foo-props-num\">{{ num }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>props obj['name']:</text>\r\n      <text id=\"foo-props-obj-name\">{{ obj.name }}</text>\r\n    </view>\r\n  </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n  import { FooPropsObj } from './type.uts'\r\n\r\n  defineProps({\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    checked: {\r\n      type: Boolean,\r\n      default: false\r\n    },\r\n    obj: {\r\n      type: Object as PropType<FooPropsObj>,\r\n      default: {name: 'default name'} as FooPropsObj\r\n    }\r\n  })\r\n</script>\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  import { FooPropsObj } from './type.uts'\r\n\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      checked: {\r\n        type: Boolean,\r\n        default: false\r\n      },\r\n      obj: {\r\n        type: Object as PropType<FooPropsObj>,\r\n        default: {name: 'default name'} as FooPropsObj\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<!-- #ifdef APP -->\r\n<scroll-view style=\"flex: 1\">\r\n  <!-- #endif -->    \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 id=\"bind-array-style\" class=\"mb-10 p-10\" :style=\"[dataInfo.backgroundColor, dataInfo.border]\">\r\n      <view>bind arr style</view>\r\n      <view class=\"my-10\">{{ dataInfo.backgroundColor }}</view>\r\n      <view>{{ dataInfo.border }}</view>\r\n    </view>\r\n\r\n    <!-- v-bind props -->\r\n    <Foo :title=\"dataInfo.fooProps.title\" :num=\"dataInfo.fooProps.num\" :obj=\"dataInfo.fooProps.obj\" />\r\n\r\n    <!-- v-bind props -->\r\n    <Foo checked />\r\n    <!-- #ifndef MP -->\r\n    <!-- 绑定对象 -->\r\n    <Foo id=\"bindObj1\" v-bind=\"{ title: dataInfo.fooProps.title,num: dataInfo.fooProps.num,obj: dataInfo.fooProps.obj }\" />\r\n    <!-- 绑定对象合并-->\r\n    <Foo id=\"bindObj2\" v-bind=\"{ title: dataInfo.fooProps.title,num: dataInfo.fooProps.num,obj: dataInfo.fooProps.obj }\" title=\"foo title override\" />\r\n    <!-- 绑定对象合并-->\r\n    <Foo id=\"bindObj3\" title=\"foo\" v-bind=\"{ title: dataInfo.fooProps.title,num: dataInfo.fooProps.num,obj: dataInfo.fooProps.obj }\" />\r\n    <!-- 绑定对象合并（UTSJSONObject）-->\r\n    <Foo id=\"bindObj4\" v-bind=\"fooProps\" title=\"foo title(json) override\" />\r\n    <!-- 绑定对象合并（UTSJSONObject）-->\r\n    <Foo id=\"bindObj5\" title=\"foo\" v-bind=\"fooProps\" />\r\n    <!-- #endif -->\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<!-- #ifdef APP -->\r\n</scroll-view>\r\n<!-- #endif -->  \r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n  import Foo from './Foo-composition.uvue'\r\n  import { FooProps, FooPropsObj } from './type.uts'\r\n\r\n  type DataInfo = {\r\n    fontSize : string\r\n    backgroundColor : string\r\n    border : string\r\n    fooProps : FooProps\r\n    vBindClassBackgroundColor : string,\r\n    vBindClassRpxHeight : string,\r\n  }\r\n\r\n  const 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      } as FooPropsObj\r\n    },\r\n    vBindClassBackgroundColor: 'red',\r\n    vBindClassRpxHeight: '300rpx'\r\n  } as DataInfo)\r\n  \r\n  const fooProps = reactive({\r\n      title: 'foo title(json)',\r\n      num: 2,\r\n  })\r\n\r\n  defineExpose({\r\n    dataInfo\r\n  })\r\n</script>\r\n\r\n<style>\r\n  /* #ifdef WEB */\r\n  .v-bind-css {\r\n    background-color: v-bind(dataInfo.vBindClassBackgroundColor);\r\n    height: v-bind(dataInfo.vBindClassRpxHeight);\r\n  }\r\n  /* #endif */\r\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-bind/v-bind-composition"},"v-bind_v-bind-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-bind/v-bind-options.uvue","code":"```vue\n<template>\r\n<!-- #ifdef APP -->\r\n<scroll-view style=\"flex: 1\">\r\n  <!-- #endif -->\r\n  <view class=\"page\">\r\n    <!-- v-bind attribute -->\r\n    <button id=\"disabled-btn\" class=\"mb-10\" :disabled=\"true\">:disabled true</button>\r\n    <button id=\"v-bind-disabled-btn\" class=\"mb-10\" v-bind:disabled=\"false\">v-bind:disabled false</button>\r\n\r\n    <!-- v-bind style -->\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>bind object style fontSize:</text>\r\n      <text id=\"bind-object-style\" :style=\"{ fontSize: dataInfo.fontSize }\">\r\n        {{ dataInfo.fontSize }}\r\n      </text>\r\n    </view>\r\n    <view id=\"bind-array-style\" class=\"mb-10 p-10\" :style=\"[dataInfo.backgroundColor, dataInfo.border]\">\r\n      <view>bind arr style</view>\r\n      <view class=\"my-10\">{{ dataInfo.backgroundColor }}</view>\r\n      <view>{{ dataInfo.border }}</view>\r\n    </view>\r\n\r\n    <!-- v-bind props -->\r\n    <Foo :title=\"dataInfo.fooProps.title\" :num=\"dataInfo.fooProps.num\" :obj=\"dataInfo.fooProps.obj\" />\r\n\r\n    <!-- v-bind props -->\r\n    <Foo checked />\r\n    \r\n    <!-- #ifndef MP -->\r\n    <!-- 绑定对象 -->\r\n    <Foo v-bind=\"{ title: dataInfo.fooProps.title,num: dataInfo.fooProps.num,obj: dataInfo.fooProps.obj }\" />\r\n    <Foo v-bind=\"fooProps\"/>\r\n    <Foo id=\"bindObj1\" v-bind=\"{ title: dataInfo.fooProps.title,num: dataInfo.fooProps.num,obj: dataInfo.fooProps.obj }\" />\r\n    <!-- 绑定对象合并 v-bind 在前 -->\r\n    <Foo v-bind=\"{ title: dataInfo.fooProps.title,num: dataInfo.fooProps.num,obj: dataInfo.fooProps.obj }\" id=\"bindObj2\" :title=\"dataInfo.fooProps.title + ' override'\" />\r\n    <!-- 绑定对象合并 v-bind 在后 -->\r\n    <Foo id=\"bindObj3\" title=\"foo\" v-bind=\"{ title: dataInfo.fooProps.title,num: dataInfo.fooProps.num,obj: dataInfo.fooProps.obj }\" />\r\n    <!-- 绑定对象合并 v-bind 在中间（UTSJSONObject）-->\r\n    <Foo id=\"bindObj4\" v-bind=\"fooProps\" title=\"foo title(json) override\" />\r\n    <!-- 绑定对象合并（UTSJSONObject）-->\r\n    <Foo id=\"bindObj5\" title=\"foo\" v-bind=\"fooProps\" />\r\n    <!-- #endif -->\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<!-- #ifdef APP -->\r\n</scroll-view>\r\n<!-- #endif -->\r\n</template>\r\n\r\n<script lang=\"uts\">\r\n  import Foo from './Foo-options.uvue'\r\n  import { FooProps, FooPropsObj } from './type.uts'\r\n\r\n  type DataInfo = {\r\n    fontSize : string\r\n    backgroundColor : string\r\n    border : string\r\n    fooProps : FooProps\r\n    vBindClassBackgroundColor : string\r\n    vBindClassRpxHeight : string\r\n  }\r\n\r\n  export default {\r\n    components: { Foo },\r\n    data() {\r\n      return {\r\n        dataInfo: {\r\n          fontSize: '20px',\r\n          backgroundColor: 'background-color: green',\r\n          border: 'border: 2px solid red',\r\n          fooProps: {\r\n            title: 'foo title',\r\n            num: 1,\r\n            obj: {\r\n              name: 'foo obj name'\r\n            } as FooPropsObj\r\n          },\r\n          vBindClassBackgroundColor: 'red',\r\n          vBindClassRpxHeight: '300rpx'\r\n        } as DataInfo,\r\n        fooProps:{\r\n            title: 'foo title(json)',\r\n            num: 2,\r\n        }\r\n      }\r\n    }\r\n  }\r\n</script>\r\n\r\n<style>\r\n  /* #ifdef WEB */\r\n  .v-bind-css {\r\n    background-color: v-bind(dataInfo.vBindClassBackgroundColor);\r\n    height: v-bind(dataInfo.vBindClassRpxHeight);\r\n  }\r\n  /* #endif */\r\n</style>\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>\n      \n      <view class=\"mb-10\" v-for=\"item in utsNumber\" :key=\"item\">\n        <text :id=\"`uts-number-${item}`\">{{ item }}</text>\n      </view>\r\n\r\n      <view class=\"bold mb-10\">v-for object</view>\r\n      <view\r\n        v-for=\"(value, key) in object\"\r\n        :key=\"key\"\r\n        class=\"mb-10 flex justify-between flex-row\">\r\n        <text :id=\"key\">{{ key }}</text>\r\n        <text :id=\"value\">{{ value }}</text>\r\n      </view>\r\n\r\n      <view class=\"bold mb-10\">v-for & v-if list items</view>\r\n      <view\r\n        id=\"v-for-v-if-list-items\"\r\n        v-for=\"item in listItems\"\r\n        :key=\"item.name\">\r\n        <template v-if=\"item.show\">\r\n          <view class=\"mb-10 flex justify-between flex-row\">\r\n            <text :id=\"item.name\">{{ item.name }}</text>\r\n            <text @click=\"item.count++\" :id=\"`v-if-${item.name}-count`\">{{\r\n              item.count\r\n            }}</text>\r\n          </view>\r\n          <template v-for=\"child in item.items\">\r\n            <view\r\n              v-if=\"child.show\"\r\n              :key=\"child.name\"\r\n              class=\"mb-10 flex justify-between flex-row\">\r\n              <text :id=\"child.name\">{{ child.name }}</text>\r\n              <text @click=\"child.count++\" :id=\"`v-if-${child.name}-count`\">{{\r\n                child.count\r\n              }}</text>\r\n            </view>\r\n          </template>\r\n        </template>\r\n      </view>\r\n\r\n      <view class=\"bold mb-10\">v-for & v-show list items</view>\r\n      <view\r\n        id=\"v-for-v-if-list-items\"\r\n        v-for=\"item in listItems\"\r\n        :key=\"item.name\"\r\n        v-show=\"item.show\">\r\n        <view class=\"mb-10 flex justify-between flex-row\">\r\n          <text :id=\"item.name\">{{ item.name }}</text>\r\n          <text @click=\"item.count++\" :id=\"`v-show-${item.name}-count`\">{{\r\n            item.count\r\n          }}</text>\r\n        </view>\r\n        <view\r\n          v-for=\"child in item.items\"\r\n          v-show=\"child.show\"\r\n          :key=\"child.name\"\r\n          class=\"mb-10 flex justify-between flex-row\">\r\n          <text :id=\"child.name\">{{ child.name }}</text>\r\n          <text @click=\"child.count++\" :id=\"`v-show-${child.name}-count`\">{{\r\n            child.count\r\n          }}</text>\r\n        </view>\r\n      </view>\r\n\r\n      <view\r\n        class=\"mb-10 flex justify-between flex-row\"\r\n        v-for=\"item in mapList\"\r\n        :key=\"item[0]\">\r\n        <text>{{ item[0] }}</text>\r\n        <text :id=\"item[0]\">{{ item[1] }}</text>\r\n      </view>\r\n\r\n      <view class=\"mb-10\" v-for=\"(item, index) in setList\" :key=\"index\">\r\n        <text :id=\"`set-value-${index + 1}`\">{{ item }}</text>\r\n      </view>\r\n\r\n      <view class=\"bold mb-10\">v-for UTSJSONObject</view>\r\n      <view\r\n        v-for=\"(value, key) in utsJSONObject\"\r\n        :key=\"key\"\r\n        class=\"mb-10 flex justify-between flex-row\">\r\n        <text :id=\"key\">{{ key }}</text>\r\n        <text :id=\"value\">{{ value }}</text>\r\n      </view>\r\n    </view>\r\n    <!-- #ifdef APP -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\ntype VForObject = {\r\n  key1 : string\r\n  key2 : string\r\n  key3 : string\r\n}\r\n\r\ntype ListItem = {\r\n  name: string\r\n  count : number\r\n  show: boolean\r\n  items?: ListItem[]\r\n}\r\n\r\n// 可通过泛型指定类型\r\nconst object = reactive<VForObject>({ key1: 'value1', key2: 'value2', key3: 'value3' })\r\nconst listItems = ref<ListItem[]>([\r\n  { name: '1',\r\n    count: 0,\r\n    show: true,\r\n    items:[\r\n      { name: '1-1', count: 0, show: false },\r\n      { name: '1-2', count: 0, show: true },\r\n    ]\r\n  },\r\n  { name: '2',\r\n    count: 0,\r\n    show: true,\r\n    items:[\r\n      { name: '2-1', count: 0, show: true },\r\n      { name: '2-2', count: 0, show: false },\r\n    ]\r\n  },\r\n  { name: '3',\r\n    count: 0,\r\n    show: false,\r\n    items:[\r\n      { name: '3-1', count: 0, show: true },\r\n      { name: '3-2', count: 0, show: true },\r\n    ]\r\n  },\r\n])\r\n\r\nconst mapList = new Map<string, string>([\r\n  ['map-key-1', 'map value 1'],\r\n  ['map-key-2', 'map value 2'],\r\n  ['map-key-3', 'map value 3'],\r\n])\r\n\r\nconst setList = new Set<string>(['set value 1', 'set value 2', 'set value 3'])\r\n\r\nconst utsJSONObject = reactive({ utsKey1: 'UTSJSONObject-value1', utsKey2: 'UTSJSONObject-value2', utsKey3: 'UTSJSONObject-value3' })\n\nconst utsNumber = JSON.parse(\"3\") as number\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>\n      \n      <view class=\"mb-10\" v-for=\"item in utsNumber\" :key=\"item\">\n        <text :id=\"`uts-number-${item}`\">{{ item }}</text>\n      </view>\r\n\r\n      <view class=\"bold mb-10\">v-for object</view>\r\n      <view\r\n        v-for=\"(value, key) in object\"\r\n        :key=\"key\"\r\n        class=\"mb-10 flex justify-between flex-row\">\r\n        <text :id=\"key\">{{ key }}</text>\r\n        <text :id=\"value\">{{ value }}</text>\r\n      </view>\r\n\r\n      <view class=\"bold mb-10\">v-for & v-if list items</view>\r\n      <view\r\n        id=\"v-for-v-if-list-items\"\r\n        v-for=\"item in listItems\"\r\n        :key=\"item.name\">\r\n        <template v-if=\"item.show\">\r\n          <view class=\"mb-10 flex justify-between flex-row\">\r\n            <text :id=\"item.name\">{{ item.name }}</text>\r\n            <text @click=\"item.count++\" :id=\"`v-if-${item.name}-count`\">{{\r\n              item.count\r\n            }}</text>\r\n          </view>\r\n          <template v-for=\"child in item.items\">\r\n            <view\r\n              v-if=\"child.show\"\r\n              :key=\"child.name\"\r\n              class=\"mb-10 flex justify-between flex-row\">\r\n              <text :id=\"child.name\">{{ child.name }}</text>\r\n              <text @click=\"child.count++\" :id=\"`v-if-${child.name}-count`\">{{\r\n                child.count\r\n              }}</text>\r\n            </view>\r\n          </template>\r\n        </template>\r\n      </view>\r\n\r\n      <view class=\"bold mb-10\">v-for & v-show list items</view>\r\n      <view\r\n        id=\"v-for-v-show-list-items\"\r\n        v-for=\"item in listItems\"\r\n        v-show=\"item.show\"\r\n        :key=\"item.name\">\r\n        <view class=\"mb-10 flex justify-between flex-row\">\r\n          <text :id=\"item.name\">{{ item.name }}</text>\r\n          <text @click=\"item.count++\" :id=\"`v-show-${item.name}-count`\">{{\r\n            item.count\r\n          }}</text>\r\n        </view>\r\n        <view\r\n          v-for=\"child in item.items\"\r\n          v-show=\"child.show\"\r\n          :key=\"child.name\"\r\n          class=\"mb-10 flex justify-between flex-row\">\r\n          <text :id=\"child.name\">{{ child.name }}</text>\r\n          <text @click=\"child.count++\" :id=\"`v-show-${child.name}-count`\">{{\r\n            child.count\r\n          }}</text>\r\n        </view>\r\n      </view>\r\n\r\n      <view\r\n        class=\"mb-10 flex justify-between flex-row\"\r\n        v-for=\"item in mapList\"\r\n        :key=\"item[0]\">\r\n        <text>{{ item[0] }}</text>\r\n        <text :id=\"item[0]\">{{ item[1] }}</text>\r\n      </view>\r\n\r\n      <view class=\"mb-10\" v-for=\"(item, index) in setList\" :key=\"index\">\r\n        <text :id=\"`set-value-${index + 1}`\">{{ item }}</text>\r\n      </view>\n\n      <view class=\"bold mb-10\">v-for UTSJSONObject</view>\n      <view\n        v-for=\"(value, key) in utsJSONObject\"\n        :key=\"key\"\n        class=\"mb-10 flex justify-between flex-row\">\n        <text :id=\"key\">{{ key }}</text>\n        <text :id=\"value\">{{ value }}</text>\n      </view>\r\n    </view>\r\n    <!-- #ifdef APP -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n<script lang=\"uts\">\r\ntype VForObject = {\r\n  key1 : string\r\n  key2 : string\r\n  key3 : string\r\n}\r\n\r\ntype ListItem = {\r\n  name: string\r\n  count : number\r\n  show: boolean\r\n  items?: ListItem[]\r\n}\r\n\r\n// TODO: v-for map set deep array 动态增加删除\r\nexport default {\r\n  data() {\r\n    return {\r\n      object: { key1: 'value1', key2: 'value2', key3: 'value3' } as VForObject,\r\n      listItems: [\r\n        { name: '1',\r\n          count: 0,\r\n          show: true,\r\n          items:[\r\n            { name: '1-1', count: 0, show: false },\r\n            { name: '1-2', count: 0, show: true },\r\n          ]\r\n        },\r\n        { name: '2',\r\n          count: 0,\r\n          show: true,\r\n          items:[\r\n            { name: '2-1', count: 0, show: true },\r\n            { name: '2-2', count: 0, show: false },\r\n          ]\r\n        },\r\n        { name: '3',\r\n          count: 0,\r\n          show: false,\r\n          items:[\r\n            { name: '3-1', count: 0, show: true },\r\n            { name: '3-2', count: 0, show: true },\r\n          ]\r\n        },\r\n      ] as ListItem[],\r\n      mapList: new Map<string, string>([\r\n        ['map-key-1', 'map value 1'],\r\n        ['map-key-2', 'map value 2'],\r\n        ['map-key-3', 'map value 3'],\r\n      ]),\r\n      setList: new Set<string>(['set value 1', 'set value 2', 'set value 3']),\n      utsJSONObject: { utsKey1: 'UTSJSONObject-value1', utsKey2: 'UTSJSONObject-value2', utsKey3: 'UTSJSONObject-value3' },\n      utsNumber: JSON.parse(\"3\") as number\r\n    }\r\n  }\r\n}\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-for/v-for-options"},"v-html_v-html-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-html/v-html-composition.uvue","code":"```vue\n<template>\n  <view v-html=\"html\" />\n</template>\n\n<script setup lang=\"uts\">\nconst  html = '<p class=\"p\" style=\"color: red;\">hello world for composition API!</p>'\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-html/v-html-composition"},"v-html_v-html-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-html/v-html-options.uvue","code":"```vue\n<template>\n  <view v-html=\"html\" />\n</template>\n\n<script lang=\"uts\">\nexport default {\n  data() {\n    return {\n      html: '<p class=\"p\" style=\"color: red;\">hello world for options API!</p>'\n    }\n  }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-html/v-html-options"},"v-if_v-if-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-if/v-if-composition.uvue","code":"```vue\n<template>\n  <view class=\"page\">\n    <view class=\"mb-10 flex justify-between flex-row\">\n      <text>v-if</text>\n      <text id=\"v-if-show\" v-if=\"show\">show</text>\n    </view>\n    <button id=\"switch-v-if-btn\" @click=\"show = !show\">switch v-if</button>\n\n    <view class=\"mt-10 mb-10 flex justify-between flex-row\">\n      <text>num:</text>\n      <text id=\"num\">{{ num }}</text>\n    </view>\n    <view class=\"mb-10 flex justify-between flex-row\">\n      <text>v-if v-else-if v-else</text>\n      <text id=\"num-v-if\" v-if=\"num == 1\">v-if num = 1</text>\n      <text id=\"num-v-else-if\" v-else-if=\"num == 2\">v-else-if num = 2</text>\n      <text id=\"num-v-else\" v-else>v-else</text>\n    </view>\n    <button id=\"change-num-btn\" @click=\"changeNum\">change num</button>\n  </view>\n</template>\n\n<script setup lang=\"uts\">\nconst show = ref(true)\nconst num = ref(1)\n\nconst changeNum = () => {\n  if(num.value<3) {\n    num.value++\n  } else {\n    num.value = 1\n  }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-if/v-if-composition"},"v-if_v-if-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-if/v-if-options.uvue","code":"```vue\n<template>\n  <view class=\"page\">\n    <view class=\"mb-10 flex justify-between flex-row\">\n      <text>v-if</text>\n      <text id=\"v-if-show\" v-if=\"show\">show</text>\n    </view>\n    <button id=\"switch-v-if-btn\" @click=\"show = !show\">switch v-if</button>\n\n    <view class=\"mt-10 mb-10 flex justify-between flex-row\">\n      <text>num:</text>\n      <text id=\"num\">{{ num }}</text>\n    </view>\n    <view class=\"mb-10 flex justify-between flex-row\">\n      <text>v-if v-else-if v-else</text>\n      <text id=\"num-v-if\" v-if=\"num == 1\">v-if num = 1</text>\n      <text id=\"num-v-else-if\" v-else-if=\"num == 2\">v-else-if num = 2</text>\n      <text id=\"num-v-else\" v-else>v-else</text>\n    </view>\n    <button id=\"change-num-btn\" @click=\"changeNum\">change num</button>\n  </view>\n</template>\n\n<script lang=\"uts\">\nexport default {\n  data() {\n    return {\n      show: true,\n      num: 1\n    }\n  },\n  methods: {\n    changeNum() {\n      if(this.num<3) {\n        this.num++\n      } else {\n        this.num = 1\n      }\n    },\n  }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-if/v-if-options"},"v-memo_v-memo-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-memo/v-memo-composition.uvue","code":"```vue\n<template>\n  <view class=\"page\">\n    <view class=\"flex flex-row justify-between mb-10\" v-memo=\"[]\">\n      <text>msg will never change:</text>\n      <text id=\"v-memo-never-change-msg\">{{ msg }}</text>\n    </view>\n    <view class=\"flex flex-row justify-between mb-10\">\n      <text>msg:</text>\n      <text id=\"msg\">{{ msg }}</text>\n    </view>\n    <view class=\"flex flex-row justify-between mb-10\" v-memo=\"[num]\">\n      <text>msg will change when num chang:</text>\n      <text id=\"v-memo-num-change-msg\">{{ msg }}</text>\n    </view>\n    <view class=\"flex flex-row justify-between mb-10\">\n      <text>num:</text>\n      <text id=\"num\">{{ num }}</text>\n    </view>\n    <button\n      id=\"change-message-btn\"\n      class=\"mb-10\"\n      type=\"primary\"\n      @click=\"changeMessage\">\n      change message\n    </button>\n    <button\n      id=\"increment-num-btn\"\n      class=\"mb-10\"\n      type=\"primary\"\n      @click=\"incrementNum\">\n      increment num\n    </button>\n  </view>\n</template>\n\n<script setup lang=\"uts\">\nconst msg = ref('hello world')\n\nconst num = ref(0)\n\nconst changeMessage = () => {\n  msg.value = 'msg changed'\n}\n\nconst incrementNum = () =>{\n  num.value++\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-memo/v-memo-composition"},"v-memo_v-memo-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-memo/v-memo-options.uvue","code":"```vue\n<template>\n  <view class=\"page\">\n    <view class=\"flex flex-row justify-between mb-10\" v-memo=\"[]\">\n      <text>msg will never change:</text>\n      <text id=\"v-memo-never-change-msg\">{{ msg }}</text>\n    </view>\n    <view class=\"flex flex-row justify-between mb-10\">\n      <text>msg:</text>\n      <text id=\"msg\">{{ msg }}</text>\n    </view>\n    <view class=\"flex flex-row justify-between mb-10\" v-memo=\"[num]\">\n      <text>msg will change when num chang:</text>\n      <text id=\"v-memo-num-change-msg\">{{ msg }}</text>\n    </view>\n    <view class=\"flex flex-row justify-between mb-10\">\n      <text>num:</text>\n      <text id=\"num\">{{ num }}</text>\n    </view>\n    <button\n      id=\"change-message-btn\"\n      class=\"mb-10\"\n      type=\"primary\"\n      @click=\"changeMessage\">\n      change message\n    </button>\n    <button\n      id=\"increment-num-btn\"\n      class=\"mb-10\"\n      type=\"primary\"\n      @click=\"incrementNum\">\n      increment num\n    </button>\n  </view>\n</template>\n\n<script lang=\"uts\">\nexport default {\n  data() {\n    return {\n      msg: 'hello world',\n      num: 0\n    }\n  },\n  methods: {\n    changeMessage() {\n      this.msg = 'msg changed'\n    },\n    incrementNum(){\n      this.num++\n    }\n  }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-memo/v-memo-options"},"v-model_Foo-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-model/Foo-composition.uvue","code":"```vue\n<template>\n  <view>\n    <view class=\"mb-10 flex justify-between flex-row\">\n      <text>v-model in Foo:</text>\n      <text id=\"model-value-text\">{{ modelValue }}</text>\n    </view>\n    <view class=\"mb-10 flex justify-between flex-row\">\n      <text>v-model:msg in Foo:</text>\n      <text id=\"model-msg-text\">{{ msg }}</text>\n    </view>\n    <view class=\"mb-10 flex justify-between flex-row\">\n      <text>defineModel num:</text>\n      <text id=\"model-num-text\">{{ num }}</text>\n    </view>\n    <view class=\"mb-10 flex justify-between flex-row\">\n      <text>defineModel strArr:</text>\n      <text id=\"model-str-arr-text\">{{ JSON.stringify(strArr) }}</text>\n    </view>\n    <view class=\"mb-10 flex justify-between flex-row\">\n      <text>defineModel numArr:</text>\n      <text id=\"model-num-arr-text\">{{ JSON.stringify(numArr) }}</text>\n    </view>\n    <button class=\"mb-10\" id=\"update-value-btn\" @click=\"updateValue\">\n      update value\n    </button>\n  </view>\n</template>\n\n<script setup lang=\"uts\">\n// 在被修改时，触发 \"update:modelValue\" 事件\nconst modelValue = defineModel({ type: String })\n\n// 在被修改时，触发 \"update:msg\" 事件\nconst msg = defineModel('msg', { type: String, default: 'default msg' })\n\nconst num = defineModel('num', { type: Number, default: 1 })\n\nconst strArr = defineModel<string[]>('strArr', { default: () => [] as string[] })\nconst numArr = defineModel('numArr', {type: Array as PropType<number[]>, required: true })\n\nconst updateValue = () => {\n  modelValue.value += '1'\n  msg.value += '2'\n  num.value++\n  strArr.value.push(`${strArr.value.length}`)\n  numArr.value.push(numArr.value.length)\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-model/Foo-composition"},"v-model_Parent":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-model/Parent.uvue","code":"```vue\n<template>\r\n    <Son v-model=\"value\"></Son>\r\n</template>\r\n\r\n<script setup>\r\n    import Son from \"./Son.uvue\"\r\n    const value = defineModel<string>(\"modelValue\")\r\n</script>\r\n\r\n<style></style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-model/Parent"},"v-model_Son":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-model/Son.uvue","code":"```vue\n<template>\r\n    <text id=\"son-input\">{{value}}</text>\r\n</template>\r\n\r\n<script setup>\r\n    const value = defineModel<string>(\"modelValue\")\r\n</script>\r\n\r\n<style></style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-model/Son"},"v-model_v-model-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-model/v-model-composition.uvue","code":"```vue\n<template>\n  <view class=\"page\">\n    <Foo\n      v-model=\"str\"\n      v-model:msg=\"msg\"\n      v-model:strArr=\"strArr\"\n      v-model:numArr=\"numArr\"\n      @update:modelValue=\"handleModelValueUpdate\"\n      @update:msg=\"handleModelMsgUpdate\"\n       />\n    <input class=\"mb-10 input\" id=\"model-value-input\" v-model=\"str\" />\n    <input class=\"mb-10 input\" id=\"model-msg-input\" v-model=\"msg\" />\n    <view class=\"mb-10 flex justify-between flex-row\">\n      <text>handle modelValue update res:</text>\n      <text id=\"handle-model-value-update-res\">{{ handleModelValueUpdateRes }}</text>\n    </view>\n    <view class=\"mb-10 flex justify-between flex-row\">\n      <text>handle model msg update res:</text>\n      <text id=\"handle-model-msg-update-res\">{{ handleModelMsgUpdateRes }}</text>\n    </view>\n    <Parent v-model=\"value\"></Parent>\n  </view>\n</template>\n\n<script setup lang=\"uts\">\nimport Foo from './Foo-composition.uvue'\nimport Parent from './Parent.uvue'\n\nconst str = ref('str')\nconst msg = ref('msg')\nconst strArr = ref<string[]>(['0'])\nconst numArr = ref<number[]>([0])\nconst value = ref(\"nested\");\nconst handleModelValueUpdateRes = ref('')\nconst handleModelValueUpdate = (val : string) => {\n  handleModelValueUpdateRes.value = val\n}\nconst handleModelMsgUpdateRes = ref('')\nconst handleModelMsgUpdate = (val : string) => {\n  handleModelMsgUpdateRes.value = val\n}\n</script>\n\n<style>\n.input {\n  padding: 0px 10px;\n  height: 40px;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n}\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-model/v-model-composition"},"v-model_v-model-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-model/v-model-options.uvue","code":"```vue\n<template>\n  <view class=\"page\">\n    <view class=\"mb-10 flex justify-between flex-row\">\n      <text>str:</text>\n      <text id=\"str\">{{ str }}</text>\n    </view>\n    <input class=\"mb-10 input\" id=\"model-str\" v-model=\"str\" />\n    <input class=\"mb-10 input\" id=\"model-num\" v-model.number=\"num\" type=\"text\" />\n    <input class=\"mb-10 input\" id=\"model-str-trim\" v-model.trim=\"strForTrim\" />\n    <input class=\"mb-10 input\" id=\"model-str-lazy\" v-model.lazy=\"str\" type=\"text\" />\n    <view class=\"mb-10 flex justify-between flex-row\">\n      <text>typeof num:</text>\n      <text id=\"typeof-num\">{{ typeof num }}</text>\n    </view>\n    <view class=\"mb-10 flex justify-between flex-row\">\n      <text>str for trim length:</text>\n      <text id=\"str-length\">{{ strForTrim.length }}</text>\n    </view>\n    <Parent v-model=\"value\"></Parent>\n  </view>\n</template>\n\n<script lang=\"uts\">\nimport Parent from './Parent.uvue'    \nexport default {\n  data(){\n    return {\n      str: 'str',\n      num: 1,\n      strForTrim: ' abc ',\n      value: 'nested'\n    }\n  },\n  components: {\n      Parent\n  }\n}\n</script>\n\n<style>\n.input {\n  padding: 0px 10px;\n  height: 40px;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n}\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-model/v-model-options"},"v-on_v-on-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-on/v-on-composition.uvue","code":"```vue\n<template>\r\n  <view class=\"page\">\r\n    <text class=\"bold mb-10\">下方按钮点击累加 count</text>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>count:</text>\r\n      <text id=\"count\">{{ count }}</text>\r\n    </view>\r\n    <button class=\"mb-10 btn\" @click=\"handleClick\">\r\n      @click=\"handleClick\" 缩写\r\n    </button>\r\n    <button class=\"mb-10 btn\" v-on:click=\"handleClick\">\r\n      v-on:click=\"handleClick\" 方法处理函数\r\n    </button>\r\n    <button class=\"mb-10 btn\" v-on:click=\"count++\">\r\n      v-on:click=\"count++\" 内联事件\r\n    </button>\r\n    <button class=\"mb-10 btn\" v-on:click=\"handleClick($event as MouseEvent)\">\r\n      v-on:click=\"handleClick($event as MouseEvent)\"\r\n      内联声明，注意要显式声明$event的类型\r\n    </button>\n    <!-- #ifndef MP -->\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>\n    <!-- #endif -->\r\n    <!-- TODO: ios 不支持 -->\r\n    <!-- #ifndef APP-IOS || MP -->\r\n    <button class=\"mb-10 btn\" id=\"btn-once\" @click.once=\"handleClick\">@click once</button>\r\n    <!-- #endif -->\r\n    <view @click=\"handleClick\">\r\n      <button class=\"mb-10 btn\" id=\"btn-stop\" @click.stop=\"handleClick\">@click stop</button>\r\n    </view>\r\n  </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst count = ref(0)\r\n\r\nconst event = ref('click')\r\n\r\nconst handleClick = (e : MouseEvent) => {\r\n  count.value++\r\n  console.log('handleClick', e)\r\n}\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-on/v-on-composition"},"v-on_v-on-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-on/v-on-options.uvue","code":"```vue\n<template>\r\n  <view class=\"page\">\r\n    <text class=\"bold mb-10\">下方按钮点击累加 count</text>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>count:</text>\r\n      <text id=\"count\">{{ count }}</text>\r\n    </view>\r\n    <button class=\"mb-10 btn\" @click=\"handleClick\">@click=\"handleClick\" 缩写</button>\r\n    <button class=\"mb-10 btn\" v-on:click=\"handleClick\">\r\n      v-on:click=\"handleClick\" 方法处理函数\r\n    </button>\r\n    <button class=\"mb-10 btn\" v-on:click=\"count++\">\r\n      v-on:click=\"count++\" 内联事件\r\n    </button>\r\n    <button class=\"mb-10 btn\" v-on:click=\"handleClick($event as MouseEvent)\">\r\n      v-on:click=\"handleClick($event as MouseEvent)\"\r\n      内联声明，注意要显式声明$event的类型\r\n    </button>\n    <!-- #ifndef MP -->\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>\n    <!-- #endif -->\r\n    <!-- TODO: ios 不支持 -->\r\n    <!-- #ifndef APP-IOS || MP -->\r\n    <button class=\"mb-10 btn\" id=\"btn-once\" @click.once=\"handleClick\">@click once</button>\r\n    <!-- #endif -->\r\n    <view @click=\"handleClick\">\r\n      <button class=\"mb-10 btn\" id=\"btn-stop\" @click.stop=\"handleClick\">@click stop</button>\r\n    </view>\r\n  </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nexport default {\r\n  data() {\r\n    return {\r\n      count: 0,\r\n      event: 'click'\r\n    }\r\n  },\r\n  methods: {\r\n    handleClick(e : MouseEvent) {\r\n      this.count++\r\n      console.log('handleClick', e)\r\n    }\r\n  }\r\n}\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-on/v-on-options"},"v-once_v-once-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-once/v-once-composition.uvue","code":"```vue\n<template>\n  <view class=\"page\">\n    <!-- #ifndef MP -->\n    <view class=\"flex flex-row justify-between mb-10\" v-once>\n      <text>This msg will never change:</text>\n      <text id='v-once-msg'>{{ msg }}</text>\n    </view>\n    <!-- #endif -->\n    <view class=\"flex flex-row justify-between mb-10\">\n      <text>msg:</text>\n      <text id=\"msg\">{{ msg }}</text>\n    </view>\n    <button id=\"btn\" class=\"mb-10\" type=\"primary\" @click=\"changeMessage\">\n      change message\n    </button>\n  </view>\n</template>\n\n<script setup lang=\"uts\">\n  const msg = ref('hello world')\n  const changeMessage = () => {\n    msg.value = 'msg changed'\n  }\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-once/v-once-composition"},"v-once_v-once-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-once/v-once-options.uvue","code":"```vue\n<template>\n  <view class=\"page\">\n    <!-- #ifndef MP -->\n    <view class=\"flex flex-row justify-between mb-10\" v-once>\n      <text>This msg will never change:</text>\n      <text id='v-once-msg'>{{ msg }}</text>\n    </view>\n    <!-- #endif -->\n    <view class=\"flex flex-row justify-between mb-10\">\n      <text>msg:</text>\n      <text id=\"msg\">{{ msg }}</text>\n    </view>\n    <button id=\"btn\" class=\"mb-10\" type=\"primary\" @click=\"changeMessage\">\n      change message\n    </button>\n  </view>\n</template>\n\n<script lang=\"uts\">\nexport default {\n  data() {\n    return {\n      msg: 'hello world'\n    }\n  },\n  methods: {\n    changeMessage() {\n      this.msg = 'msg changed'\n    }\n  }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-once/v-once-options"},"v-pre_v-pre":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-pre/v-pre.uvue","code":"```vue\n<template>\n  <view class=\"page\">\n    <text class=\"bold mb-10\">v-pre 跳过该元素及其所有子元素的编译</text>\n    <text class=\"mb-10 v-pre-text\" v-pre>{{ this will not be compiled }}</text>\n  </view>\n</template>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-pre/v-pre"},"v-show_Foo":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-show/Foo.uvue","code":"```vue\n<template>\n  <view id=\"foo\">\n    component Foo\n  </view>\n</template>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-show/Foo"},"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    <text>点击上方按钮，切换下方 view 显示/隐藏</text>\r\n    <text>show default true: {{dataInfo.showDefaultTrue}}</text>\r\n    <view class=\"mt-10 default-true\" id=\"v-show-element-default-true\" v-show=\"dataInfo.showDefaultTrue\"></view>\r\n    <text>show default false: {{dataInfo.showDefaultFalse}}</text>\r\n    <view class=\"mt-10 default-false\" id=\"v-show-element-default-false\" v-show=\"dataInfo.showDefaultFalse\"></view>\n    <Foo v-show=\"dataInfo.showDefaultFalse\" />\r\n  </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n  import Foo from './Foo.uvue'\r\n\r\n  type DataInfo = {\r\n    showDefaultTrue : boolean\r\n    showDefaultFalse : boolean\r\n  }\r\n\r\n  const dataInfo = reactive({\r\n    showDefaultTrue: true,\r\n    showDefaultFalse: false\r\n  } as DataInfo)\r\n\r\n  const toggleShow = () => {\r\n    dataInfo.showDefaultTrue = !dataInfo.showDefaultTrue\r\n    dataInfo.showDefaultFalse = !dataInfo.showDefaultFalse\r\n  }\r\n\r\n  defineExpose({\r\n    dataInfo\r\n  })\r\n</script>\r\n\r\n<style>\r\n  .default-true,\r\n  .default-false {\r\n    display: flex;\r\n    width: 100px;\r\n    height: 50px;\r\n  }\r\n\r\n  .default-true {\r\n    background-color: greenyellow;\r\n  }\r\n\r\n  .default-false {\r\n    background-color: antiquewhite;\r\n  }\r\n</style>\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    <text>点击上方按钮，切换下方 view 显示/隐藏</text>\r\n    <text>show default true: {{dataInfo.showDefaultTrue}}</text>\r\n    <view class=\"mt-10 default-true\" id=\"v-show-element-default-true\" v-show=\"dataInfo.showDefaultTrue\"></view>\r\n    <text>show default false: {{dataInfo.showDefaultFalse}}</text>\r\n    <view class=\"mt-10 default-false\" id=\"v-show-element-default-false\" v-show=\"dataInfo.showDefaultFalse\"></view>\n    <Foo v-show=\"dataInfo.showDefaultFalse\" />\r\n  </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\n  import Foo from './Foo.uvue'\r\n\r\n  type DataInfo = {\r\n    showDefaultTrue : boolean\r\n    showDefaultFalse : boolean\r\n  }\r\n\r\n  export default {\r\n    components: { Foo },\r\n    data() {\r\n      return {\r\n        dataInfo: {\r\n          showDefaultTrue: true,\r\n          showDefaultFalse: false\r\n        } as DataInfo\r\n      }\r\n    },\r\n    methods: {\r\n      toggleShow() {\r\n        this.dataInfo.showDefaultTrue = !this.dataInfo.showDefaultTrue\r\n        this.dataInfo.showDefaultFalse = !this.dataInfo.showDefaultFalse\r\n      }\r\n    }\r\n  }\r\n</script>\r\n\r\n<style>\r\n  .default-true,\r\n  .default-false {\r\n    display: flex;\r\n    width: 100px;\r\n    height: 50px;\r\n  }\r\n\r\n  .default-true {\r\n    background-color: greenyellow;\r\n  }\r\n\r\n  .default-false {\r\n    background-color: antiquewhite;\r\n  }\r\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-show/v-show-options"},"v-slot_Foo-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-slot/Foo-composition.uvue","code":"```vue\n<template>\n  <view>\n    <slot name=\"header\" :msg=\"msg\"></slot>\n    <slot :num=\"num\"></slot>\n    <slot name=\"num1\" :num=\"num\"></slot>\n    <slot name=\"num2\" :num=\"num\"></slot>\n    <slot name=\"msgTrue\" :msg=\"msg\"></slot>\n    <slot name=\"msgFalse\" :msg=\"msg\"></slot>\n    <slot name=\"footer\" :arr=\"arr\"></slot>\n  </view>\n</template>\n\n<script setup lang='uts'>\n  const msg = ref('foo msg')\n  const num = ref<number>(0)\n  const arr = ref<string[]>(['a', 'b', 'c'])\n\n  defineSlots<{\n    header(props : { msg : string }) : any,\n    default(props : { num : number }) : any,\n    num1(props : { num : number }) : any,\n    num2(props : { num : number }) : any,\n    msgTrue(props : { msg : string }) : any,\n    msgFalse(props : { msg : string }) : any,\n    footer(props : { arr : string[] }) : any\n  }>()\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-slot/Foo-composition"},"v-slot_Foo-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-slot/Foo-options.uvue","code":"```vue\n<template>\n  <view>\n    <slot name=\"header\" :msg=\"msg\"></slot>\n    <slot :num=\"num\"></slot>\n    <slot name=\"num1\" :num=\"num\"></slot>\n    <slot name=\"num2\" :num=\"num\"></slot>\n    <slot name=\"msgTrue\" :msg=\"msg\"></slot>\n    <slot name=\"msgFalse\" :msg=\"msg\"></slot>\n    <slot name=\"footer\" :arr=\"arr\"></slot>\n  </view>\n</template>\n\n<script lang=\"uts\">\n  export default {\n    slots: Object as SlotsType<{\n      header: { msg: string }\n      default: { num: number }\n      num1: { num: number }\n      num2: { num: number }\n      msgTrue: { msg: string }\n      msgFalse: { msg: string }\n      footer: { arr: string[] }\n    }>,\n    data(){\n      return {\n        msg: 'foo msg',\n        num: 0,\n        arr: ['a','b', 'c']\n      }\n    }\n  }\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-slot/Foo-options"},"v-slot_v-slot-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-slot/v-slot-composition.uvue","code":"```vue\n<template>\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>\n      <!-- #ifndef MP -->\r\n      <template v-for=\"item in 2\" #[`num${item}`]=\"{ num }\">\r\n        <view class=\"mb-10 flex justify-between flex-row\">\r\n          <text>num{{ item }} slot:</text>\r\n          <text :id=\"`slot-num${item}`\">{{ num }}</text>\r\n        </view>\r\n      </template>\r\n      <template v-if=\"msgTrue['isShow']\" #[msgTrue['name']]=\"{ msg }\">\r\n        <view class=\"mb-10 flex justify-between flex-row\">\r\n          <text>{{ msgTrue['name'] }} slot msg:</text>\r\n          <text id=\"slot-msg-true\">{{ msg }}</text>\r\n        </view>\r\n      </template>\r\n      <template v-if=\"msgFalse['isShow']\" #[msgFalse['name']]=\"{ msg }\">\r\n        <view class=\"mb-10 flex justify-between flex-row\">\r\n          <text>{{ msgFalse['name'] }} slot msg:</text>\r\n          <text id=\"slot-msg-false\">{{ msg }}</text>\r\n        </view>\r\n      </template>\n      <!-- #endif -->\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\n  import Foo from './Foo-composition.uvue'\r\n\r\n  const msgTrue = ref({\r\n    isShow: true,\r\n    name: 'msgTrue'\r\n  })\r\n  const msgFalse = ref({\r\n    isShow: false,\r\n    name: 'msgFalse'\r\n  })\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-slot/v-slot-composition"},"v-slot_v-slot-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-slot/v-slot-options.uvue","code":"```vue\n<template>\n  <view class=\"page\">\n    <Foo>\n      <template #header=\"{ msg }\">\n        <view class=\"mb-10 flex justify-between flex-row\">\n          <text>header slot msg:</text>\n          <text id=\"slot-header\">{{ msg }}</text>\n        </view>\n      </template>\n      <template #default=\"{ num }\">\n        <view class=\"mb-10 flex justify-between flex-row\">\n          <text>default slot num:</text>\n          <text id=\"slot-default\">{{ num }}</text>\n        </view>\n      </template>\n      <!-- #ifndef MP -->\n      <template v-for=\"item in 2\" #[`num${item}`]=\"{ num }\">\n        <view class=\"mb-10 flex justify-between flex-row\">\n          <text>num{{ item }} slot:</text>\n          <text :id=\"`slot-num${item}`\">{{ num }}</text>\n        </view>\n      </template>\n      <template v-if=\"msgTrue['isShow']\" #[msgTrue['name']]=\"{ msg }\">\n        <view class=\"mb-10 flex justify-between flex-row\">\n          <text>{{ msgTrue['name'] }} slot msg:</text>\n          <text id=\"slot-msg-true\">{{ msg }}</text>\n        </view>\n      </template>\n      <template v-if=\"msgFalse['isShow']\" #[msgFalse['name']]=\"{ msg }\">\n        <view class=\"mb-10 flex justify-between flex-row\">\n          <text>{{ msgFalse['name'] }} slot msg:</text>\n          <text id=\"slot-msg-false\">{{ msg }}</text>\n        </view>\n      </template>\n      <!-- #endif -->\n      <template #footer=\"{ arr }\">\n        <view class=\"mb-10 flex justify-between flex-row\">\n          <text>footer slot arr:</text>\n          <text id=\"slot-footer\">{{ JSON.stringify(arr) }}</text>\n        </view>\n      </template>\n    </Foo>\n  </view>\n</template>\n\n<script lang=\"uts\">\nimport Foo from './Foo-options.uvue'\nexport default {\n  components: {Foo},\n  data(){\n    return {\n      msgTrue: {\n        isShow: true,\n        name: 'msgTrue'\n      },\n      msgFalse: {\n        isShow: false,\n        name: 'msgFalse'\n      }\n    }\n  }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-slot/v-slot-options"},"v-text_v-text-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-text/v-text-composition.uvue","code":"```vue\n<template>\n  <view class=\"page\">\n    <view class=\"flex flex-row justify-between mb-10\">\n      <text>v-txt for text:</text>\n      <text id=\"v-text-text\" v-text=\"vTextForText\"></text>\n    </view>\n    <view class=\"flex flex-row justify-between mb-10\">\n      <text>v-txt for view:</text>\n      <view id=\"v-text-view\" v-text=\"vTextForView\"></view>\n    </view>\n  </view>\n</template>\n\n<script setup lang=\"uts\">\nconst vTextForText = ref('v-text for text')\nconst vTextForView = ref('v-text for view')\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-text/v-text-composition"},"v-text_v-text-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-text/v-text-options.uvue","code":"```vue\n<template>\n  <view class=\"page\">\n    <view class=\"flex flex-row justify-between mb-10\">\n      <text>v-txt for text:</text>\n      <text id=\"v-text-text\" v-text=\"vTextForText\"></text>\n    </view>\n    <view class=\"flex flex-row justify-between mb-10\">\n      <text>v-txt for view:</text>\n      <view id=\"v-text-view\" v-text=\"vTextForView\"></view>\n    </view>\n  </view>\n</template>\n\n<script lang=\"uts\">\nexport default {\n  data() {\n    return {\n      vTextForText: 'v-text for text',\n      vTextForView: 'v-text for view',\n    }\n  }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-text/v-text-options"}},"E_error":{"runtime-error_runtime-error-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/error/runtime-error/runtime-error-composition.uvue","code":"```vue\n<template>\n  <view class=\"page\">\n    <text>{{ arr[1] }}</text>\n  </view>\n</template>\n\n<script setup lang=\"uts\">\nconst arr = [0]\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/error/runtime-error/runtime-error-composition"},"runtime-error_runtime-error-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/error/runtime-error/runtime-error-options.uvue","code":"```vue\n<template>\n  <view class=\"page\">\n    <text>{{ arr[1] }}</text>\n  </view>\n</template>\n\n<script lang=\"uts\">\n  export default {\n    data(){\n      return {\n        arr: [0]\n      }\n    }\n  }\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/error/runtime-error/runtime-error-options"},"throw-error_throw-error-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/error/throw-error/throw-error-composition.uvue","code":"```vue\n<template>\r\n  <view class=\"page\">\r\n    <button id=\"trigger-error\" @click=\"triggerError\">trigger error</button>\r\n    <button class='mt-10' id=\"trigger-timeout-error\" @click=\"triggerTimeoutError\">trigger timeout error</button>\r\n  </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n  import { state } from '@/store/index.uts'\r\n\r\n  onReady(() => {\r\n    throw new Error('error in error composition page onReady')\r\n  })\r\n  const triggerError = () => {\r\n    throw new Error('trigger error in throw error composition page')\r\n  }\r\n  const triggerTimeoutError = () => {\r\n    setTimeout(() => {\r\n      throw new Error('setTimeout trigger error in throw error composition page')\r\n    }, 10)\r\n  }\r\n\r\n  // 自动化测试\r\n  const setLifeCycleNum = (num: number) : number => {\r\n    state.lifeCycleNum = num\r\n  }\r\n  const getLifeCycleNum = () : number => {\r\n    return state.lifeCycleNum\r\n  }\r\n  defineExpose({\r\n    getLifeCycleNum\r\n  })\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/error/throw-error/throw-error-composition"},"throw-error_throw-error-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/error/throw-error/throw-error-options.uvue","code":"```vue\n<template>\r\n  <view class=\"page\">\r\n    <button id=\"trigger-error\" @click=\"triggerError\">trigger error</button>\r\n    <button class='mt-10' id=\"trigger-timeout-error\" @click=\"triggerTimeoutError\">trigger timeout error</button>\r\n  </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\n  import { setLifeCycleNum, state } from '@/store/index.uts'\r\n\r\n  export default {\r\n    onReady() {\r\n      throw new Error('error in error options page onReady')\r\n    },\r\n    methods: {\r\n      triggerError() {\r\n        throw new Error('trigger error in throw error options page')\r\n      },\r\n      triggerTimeoutError() {\r\n        setTimeout(() => {\r\n          throw new Error('setTimeout trigger error in throw error options page')\r\n        }, 10)\r\n      },\r\n      // 自动化测试\r\n      getLifeCycleNum() : number {\r\n        return state.lifeCycleNum\r\n      },\r\n      // 自动化测试\r\n      setLifeCycleNum(num : number) {\r\n        setLifeCycleNum(num)\r\n      }\r\n    },\r\n  }\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/error/throw-error/throw-error-options"}},"E_examples":{"multiple-style-script_multiple-style-script":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/examples/multiple-style-script/multiple-style-script.uvue","code":"```vue\n<template>\n  <view class=\"page\">\n    <view class=\"mb-10 flex flex-row justify-between\">\n      <text>msg: </text>\n      <text id=\"msg\">{{ msg }}</text>\n    </view>\n    <!-- #ifndef APP-ANDROID -->\n    <view class=\"mb-10 flex flex-row justify-between\">\n      <text>num: </text>\n      <text id=\"num\">{{ num }}</text>\n    </view>\n    <!-- #endif -->\n    <view class=\"mb-10\">\n      <text class=\"text-red\">text red</text>\n    </view>\n    <view class=\"mb-10\">\n      <text class=\"text-green\">text green</text>\n    </view>\n    <view class=\"mb-10\">\n      <text class=\"font-bold\">font bold</text>\n    </view>\n  </view>\n</template>\n\n<script lang=\"uts\">\nexport default {\n  data(){\n    return {\n      msg: 'Hello World'\n    }\n  }\n}\n</script>\n<!-- #ifndef APP-ANDROID -->\n<script setup lang=\"uts\">\nconst num = ref(0)\n</script>\n<!-- #endif -->\n\n<style>\n.text-green {\n  color: green;\n}\n</style>\n<style>\n.font-bold {\n  font-weight: bold;\n}\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/examples/multiple-style-script/multiple-style-script"},"nested-component-communication_nested-component-communication-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/examples/nested-component-communication/nested-component-communication-composition.uvue","code":"```vue\n<template>\n  <view class=\"page\">\n    <view class=\"flex-row\">\n      父组件:\n      <text class=\"parent-msg\">{{ msg }}</text>\n    </view>\n    <button class=\"parent-btn\" @click=\"change\">父组件改变数据</button>\n    <child />\n  </view>\n</template>\n\n<script setup lang=\"uts\">\nimport child from './components/child.uvue'\nimport { setComponentMsg, state } from '@/store/index.uts'\n\nconst msg = computed<number>((): number => state.componentMsg)\n\nconst change = () => {\n  setComponentMsg(state.componentMsg + 1)\n}\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/examples/nested-component-communication/nested-component-communication-composition"},"nested-component-communication_nested-component-communication-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/examples/nested-component-communication/nested-component-communication-options.uvue","code":"```vue\n<template>\n  <view class=\"page\">\n    <view class=\"flex-row\">\n      父组件:\n      <text class=\"parent-msg\">{{ msg }}</text>\n    </view>\n    <button class=\"parent-btn\" @click=\"change\">父组件改变数据</button>\n    <child></child>\n  </view>\n</template>\n\n<script>\nimport child from './components/child.uvue'\nimport { setComponentMsg, state } from '@/store/index.uts'\nexport default {\n  components: {\n    child\n  },\n  computed: {\n    msg(): number {\n      return state.componentMsg\n    }\n  },\n  methods: {\n    change() {\n      setComponentMsg(state.componentMsg + 1)\n    }\n  }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/examples/nested-component-communication/nested-component-communication-options"},"set-custom-child-component-root-node-class_child":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/examples/set-custom-child-component-root-node-class/child.uvue","code":"```vue\n<template>\n  <view>\n    <button class=\"btn-child bg-orange\">button in child page</button>\n  </view>\n</template>\n\n<style>\n.btn-child {\n  width: 300px;\n  color: rgb(83, 156, 234);\n}\n.bg-orange{\n  background-color: rgb(214, 154, 50);\n}\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/examples/set-custom-child-component-root-node-class/child"},"set-custom-child-component-root-node-class_set-custom-child-component-root-node-class-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/examples/set-custom-child-component-root-node-class/set-custom-child-component-root-node-class-composition.uvue","code":"```vue\n<template>\n  <view>\n    <button class=\"btn-page bg-green\">button in parent page</button>\n    <Child />\n  </view>\n</template>\n\n<script setup lang=\"uts\">\nimport Child from './child.uvue'\n</script>\n\n<style>\n.btn-page {\n  width: 280px;\n  color: rgb(209, 51, 51);\n}\n.bg-green {\n  background-color: rgb(105, 154, 105);\n}\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/examples/set-custom-child-component-root-node-class/set-custom-child-component-root-node-class-composition"},"set-custom-child-component-root-node-class_set-custom-child-component-root-node-class-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/examples/set-custom-child-component-root-node-class/set-custom-child-component-root-node-class-options.uvue","code":"```vue\n<template>\n  <view>\n    <button class=\"btn-page bg-green\">button in parent page</button>\n    <Child />\n  </view>\n</template>\n\n<script lang='uts'>\nimport Child from \"./child.uvue\";\nexport default {\n  components: {\n    Child\n  }\n}\n</script>\n\n<style>\n.btn-page {\n  width: 280px;\n  color: rgb(209, 51, 51);\n}\n.bg-green{\n  background-color: rgb(105, 154, 105);\n}\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/examples/set-custom-child-component-root-node-class/set-custom-child-component-root-node-class-options"},"unrecognized-component_unrecognized-component":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/examples/unrecognized-component/unrecognized-component.uvue","code":"```vue\n<template>\r\n\t<Abc><text>text in unrecognized component</text></Abc>\r\n</template>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/examples/unrecognized-component/unrecognized-component"},"nested-component-communication_components_child":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/examples/nested-component-communication/components/child.uvue","code":"```vue\n<template>\n  <view class=\"child\">\n    <view class=\"flex-row\">\n      子组件:\n      <text class=\"child-msg\">{{ msg }}</text>\n    </view>\n    <grand-child></grand-child>\n  </view>\n</template>\n\n<script>\nimport grandChild from './grandChild.uvue'\nimport { state } from '@/store/index.uts'\nexport default {\n  components: {\n    grandChild\n  },\n  computed: {\n    msg(): number {\n      return state.componentMsg\n    }\n  }\n}\n</script>\n<style>\n.child {\n  margin-top: 10px;\n}\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/examples/nested-component-communication/components/child"},"nested-component-communication_components_grandChild":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/examples/nested-component-communication/components/grandChild.uvue","code":"```vue\n<template>\n  <view class=\"child\">\n    <view class=\"flex-row\">\n      孙组件:\n      <text class=\"grandchild-msg\">{{ msg }}</text>\n    </view>\n    <button class=\"grandchild-btn\" @click=\"change\">孙组件清空数据</button>\n  </view>\n</template>\n\n<script>\nimport { state, setComponentMsg } from '@/store/index.uts'\nexport default {\n  computed: {\n    msg(): number {\n      return state.componentMsg\n    }\n  },\n  methods: {\n    change() {\n      setComponentMsg(0)\n    }\n  }\n}\n</script>\n\n<style>\n.child {\n  margin-top: 10px;\n}\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/examples/nested-component-communication/components/grandChild"}},"E_lifecycle":{"component_ChildComponentComposition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/lifecycle/component/ChildComponentComposition.uvue","code":"```vue\n<template>\r\n  title: {{ title }}\r\n  <button class=\"component-lifecycle-btn mt-10\" @click=\"updateTitle\">\r\n    updateTitle\r\n  </button>\r\n</template>\r\n\r\n<script setup lang='uts'>\r\nimport { state, setLifeCycleNum } from '@/store/index.uts'\r\n\r\nconst title = ref('component for composition API lifecycle test')\r\n\r\nconst emit = defineEmits<{\r\n  (e : 'updateIsScroll', val : boolean) : void\r\n}>()\r\n\r\nonLoad((_ : OnLoadOptions) => {\r\n  // 自动化测试\r\n  setLifeCycleNum(state.lifeCycleNum + 100)\r\n})\r\nonPageShow(() => {\r\n  // 自动化测试\r\n  setLifeCycleNum(state.lifeCycleNum + 10)\r\n})\r\nonReady(() => {\r\n  // 自动化测试\r\n  // TODO: onReady 未触发\r\n  setLifeCycleNum(state.lifeCycleNum + 10)\r\n})\r\n\r\nonPullDownRefresh(() => {\r\n  // 自动化测试\r\n  setLifeCycleNum(state.lifeCycleNum + 10)\r\n})\r\nonPageScroll((_) => {\r\n  // 自动化测试\r\n  emit('updateIsScroll', true)\r\n})\r\nonReachBottom(() => {\r\n  // 自动化测试\r\n  setLifeCycleNum(state.lifeCycleNum + 10)\r\n})\r\nonBackPress((_ : OnBackPressOptions) : boolean | null => {\r\n  // 自动化测试\r\n  setLifeCycleNum(state.lifeCycleNum - 10)\r\n  return null\r\n})\r\nonPageHide(() => {\r\n  // 自动化测试\r\n  setLifeCycleNum(state.lifeCycleNum - 10)\r\n})\r\nonUnload(() => {\r\n  // 自动化测试\r\n  setLifeCycleNum(state.lifeCycleNum - 100)\r\n})\r\n\r\nonBeforeMount(() => {\r\n  // 自动化测试\r\n  setLifeCycleNum(state.lifeCycleNum + 1)\r\n  console.log('component for lifecycle test onBeforeMount')\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\nonActivated(() => {\r\n  // 自动化测试\r\n  setLifeCycleNum(state.lifeCycleNum + 1)\r\n  console.log('component for lifecycle test onActivated')\r\n})\r\nonDeactivated(() => {\r\n  // 自动化测试\r\n  setLifeCycleNum(state.lifeCycleNum - 1)\r\n  console.log('component for lifecycle test onDeactivated')\r\n})\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    activated() {\r\n      // 自动化测试\r\n      setLifeCycleNum(state.lifeCycleNum + 1);\r\n      console.log('component for lifecycle test activated');\r\n    },\r\n    deactivated() {\r\n      // 自动化测试\r\n      setLifeCycleNum(state.lifeCycleNum - 1);\r\n      console.log('component for lifecycle test deactivated');\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      <keep-alive>\r\n        <component :is=\"aliveComponent\"  @updateIsScroll=\"updateIsScroll\" />\r\n      </keep-alive>\r\n      <button class=\"mt-10\" @click=\"scrollToBottom\">scrollToBottom</button>\n      <button id=\"toggle-alive-component-btn\" class=\"mt-10\" @click=\"toggleAliveComponent\">toggle alive component</button>\r\n      <button class=\"mt-10\" @click=\"navigateToHome\">navigateTo home</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 aliveComponent = shallowRef<any | null>(ChildComponent)\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) => {\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 toggleAliveComponent = () => {\r\n    aliveComponent.value = aliveComponent.value == null ? ChildComponent : null\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  }\n  \n  const navigateToHome = () => {\n    uni.navigateTo({\n      url: '/pages/index/index'\n    })\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    <keep-alive>\r\n      <component :is=\"aliveComponent\" />\r\n    </keep-alive>\r\n    <button id=\"toggle-alive-component-btn\" class=\"mt-10\" @click=\"toggleAliveComponent\">toggle alive component</button>\n    <button class=\"mt-10\" @click=\"navigateToHome\">navigateTo home</button>\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  data(){\r\n    return {\r\n      aliveComponent: ChildComponent as any | null,\r\n    }\r\n  },\r\n  methods: {\r\n    // 自动化测试\r\n    getLifeCycleNum(): number {\r\n      return state.lifeCycleNum\r\n    },\r\n    toggleAliveComponent(){\r\n      this.aliveComponent = this.aliveComponent == null ? ChildComponent : null\r\n    },\n    navigateToHome() {\n      uni.navigateTo({\n        url: '/pages/index/index'\n      })\n    }\r\n  },\r\n}\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/lifecycle/component/component-options"},"page_monitor-page-lifecycle-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/lifecycle/page/monitor-page-lifecycle-composition.uvue","code":"```vue\n<script lang=\"uts\" setup>\n// #ifdef APP-ANDROID\nonAppHide(() => {\n\tconsole.log('组件监听应用生命周期 => onAppHide')\n})\nonAppShow((onShowOptions: OnShowOptions) => {\n\tconsole.log('组件监听应用生命周期 => onAppShow => onShowOptions', onShowOptions)\n})\n// #endif\n\nonPageShow(() => {\n\tconsole.log('组件监听页面生命周期 => onPageShow')\n})\nonPageHide(() => {\n\tconsole.log('组件监听页面生命周期 => onPageHide')\n})\n</script>\n\n<template>组件监听页面、应用生命周期（组合式 API）</template>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/lifecycle/page/monitor-page-lifecycle-composition"},"page_monitor-page-lifecycle-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/lifecycle/page/monitor-page-lifecycle-options.uvue","code":"```vue\n<script lang=\"uts\">\nexport default {\n\tsetup() {\n\t\t// #ifdef APP-ANDROID\n\t\tonAppHide(() => {\n\t\t\tconsole.log('组件监听应用生命周期 => onAppHide')\n\t\t})\n\t\tonAppShow((onShowOptions: OnShowOptions) => {\n\t\t\tconsole.log('组件监听应用生命周期 => onAppShow => onShowOptions', onShowOptions)\n\t\t})\n\t\t// #endif\n\n\t\tonPageShow(() => {\n\t\t\tconsole.log('组件监听页面生命周期 => onPageShow')\n\t\t})\n\t\tonPageHide(() => {\n\t\t\tconsole.log('组件监听页面生命周期 => onPageHide')\n\t\t})\n\t}\n}\n</script>\n\n<template>组件监听页面、应用生命周期（选项式 API）</template>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/lifecycle/page/monitor-page-lifecycle-options"},"page_page-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/lifecycle/page/page-composition.uvue","code":"```vue\n<template>\r\n  <!-- #ifdef APP -->\r\n  <scroll-view style=\"flex: 1\" :bounces=\"false\">\r\n    <!-- #endif -->\r\n    <view class=\"page container\">\r\n      <text>page lifecycle 组合式 API</text>\r\n      <view class=\"flex flex-row justify-between mt-10\">\r\n        <text>onLoad 触发：</text>\r\n        <text>{{ isOnloadTriggered }}</text>\r\n      </view>\r\n      <view class=\"flex flex-row justify-between mt-10\">\r\n        <text>onPageShow 触发：</text>\r\n        <text>{{ isOnPageShowTriggered }}</text>\r\n      </view>\r\n      <view class=\"flex flex-row justify-between mt-10\">\r\n        <text>onReady 触发：</text>\r\n        <text>{{ isOnReadyTriggered }}</text>\r\n      </view>\r\n      <view class=\"flex flex-row justify-between mt-10\">\r\n        <text>onPullDownRefresh 触发：</text>\r\n        <text>{{ isOnPullDownRefreshTriggered }}</text>\r\n      </view>\r\n      <view class=\"flex flex-row justify-between mt-10\">\r\n        <text>onReachBottom 触发：</text>\r\n        <text>{{ isOnReachBottomTriggered }}</text>\r\n      </view>\r\n      <view class=\"flex flex-row justify-between mt-10\">\r\n        <text>onBackPress 触发：</text>\r\n        <text>{{ isOnBackPressTriggered }}</text>\r\n      </view>\r\n      <view class=\"flex flex-row justify-between mt-10\">\r\n        <text>onPageHide 触发：</text>\r\n        <text>{{ isOnPageHideTriggered }}</text>\r\n      </view>\r\n      <view class=\"flex flex-row justify-between mt-10\">\r\n        <text>onResize 触发：</text>\r\n        <text>{{ isOnResizeTriggered }}</text>\r\n      </view>\r\n      <view class=\"flex flex-row justify-between mt-10\">\r\n        <MonitorPageLifecycleComposition />\r\n      </view>\r\n      <button class=\"mt-10\" @click=\"scrollToBottom\">scrollToBottom</button>\r\n      <button class=\"mt-10\" @click=\"pullDownRefresh\">\r\n        trigger pullDownRefresh\r\n      </button>\r\n      <button class=\"mt-10\" @click=\"goOnBackPress\">\r\n        跳转 onBackPress 示例\r\n      </button>\r\n    </view>\r\n    <!-- #ifdef APP -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nimport { state, setLifeCycleNum } from '@/store/index.uts'\r\nimport MonitorPageLifecycleComposition from './monitor-page-lifecycle-composition.uvue'\r\n\r\nconst isOnloadTriggered = ref(false)\r\nconst isOnPageShowTriggered = ref(false)\r\nconst isOnReadyTriggered = ref(false)\r\nconst isOnPullDownRefreshTriggered = ref(false)\r\nconst isOnPageScrollTriggered = ref(false)\r\nconst isOnReachBottomTriggered = ref(false)\r\nconst isOnBackPressTriggered = ref(false)\r\nconst isOnPageHideTriggered = ref(false)\r\nconst isOnResizeTriggered = ref(false)\r\n\r\ntype DataInfo = {\r\n  isScrolled : boolean\r\n}\r\nconst dataInfo = reactive({\r\n  isScrolled: false,\r\n} as DataInfo)\r\n\r\nonLoad((options : OnLoadOptions) => {\r\n  console.log('onLoad', options)\r\n  isOnloadTriggered.value = true\r\n  // 自动化测试\r\n  setLifeCycleNum(state.lifeCycleNum + 100)\r\n})\r\nonPageShow(() => {\r\n  isOnPageShowTriggered.value = true\r\n  // 自动化测试\r\n  setLifeCycleNum(state.lifeCycleNum + 10)\r\n})\r\nonReady(() => {\r\n  isOnReadyTriggered.value = true\r\n  // 自动化测试\r\n  setLifeCycleNum(state.lifeCycleNum + 10)\r\n})\r\nonPullDownRefresh(() => {\r\n  isOnPullDownRefreshTriggered.value = true\r\n  // 自动化测试\r\n  setLifeCycleNum(state.lifeCycleNum + 10)\r\n})\r\nonPageScroll((e: OnPageScrollOptions) => {\r\n  console.log('onPageScroll', e)\r\n  isOnPageScrollTriggered.value = true\r\n  // 自动化测试\r\n  dataInfo.isScrolled = true\r\n})\r\nonReachBottom(() => {\r\n  isOnReachBottomTriggered.value = true\r\n  // 自动化测试\r\n  setLifeCycleNum(state.lifeCycleNum + 10)\r\n})\r\nonBackPress((options : OnBackPressOptions) : boolean | null => {\r\n  console.log('onBackPress', options)\r\n  isOnBackPressTriggered.value = true\r\n  // 自动化测试\r\n  setLifeCycleNum(state.lifeCycleNum - 10)\r\n  return null\r\n})\r\nonPageHide(() => {\r\n  isOnPageHideTriggered.value = true\r\n  // 自动化测试\r\n  setLifeCycleNum(state.lifeCycleNum - 10)\r\n})\r\nonUnload(() => {\r\n  // 自动化测试\r\n  setLifeCycleNum(state.lifeCycleNum - 100)\r\n})\r\nonResize((options: OnResizeOptions) => {\r\n  console.log('onBackPress', options)\r\n  isOnResizeTriggered.value = true\r\n  // 自动化测试\r\n  setLifeCycleNum(state.lifeCycleNum + 10)\r\n})\r\n\r\n// 自动化测试\r\nconst pageGetLifeCycleNum = () : number => {\r\n  return state.lifeCycleNum\r\n}\r\n// 自动化测试\r\nconst pageSetLifeCycleNum = (num : number) => {\r\n  setLifeCycleNum(num)\r\n}\r\n\r\n// 自动化测试\r\nconst pullDownRefresh = () => {\r\n  uni.startPullDownRefresh({\r\n    success() {\r\n      setTimeout(() => {\r\n        uni.stopPullDownRefresh()\r\n      }, 1500)\r\n    },\r\n  })\r\n}\r\n\r\nconst scrollToBottom = () => {\r\n  uni.pageScrollTo({\r\n    scrollTop: 2000,\r\n  })\r\n}\r\n\r\nconst goOnBackPress = () => {\r\n  uni.navigateTo({url: '/pages/lifecycle/page/onBackPress/on-back-press-composition'})\r\n}\r\n\r\ndefineExpose({\r\n  dataInfo,\r\n  pageGetLifeCycleNum,\r\n  pageSetLifeCycleNum,\r\n  pullDownRefresh,\r\n  scrollToBottom,\r\n})\r\n</script>\r\n\r\n<style>\r\n.container {\r\n  height: 1200px;\r\n}\r\n</style>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/lifecycle/page/page-composition"},"page_page-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/lifecycle/page/page-options.uvue","code":"```vue\n<template>\n  <!-- #ifdef APP -->\n  <scroll-view style=\"flex: 1\" :bounces=\"false\">\n    <!-- #endif -->\n    <view class=\"page container\">\n      <text>page lifecycle 选项式 API</text>\n      <view class=\"flex flex-row justify-between mt-10\">\n        <text>onLoad 触发：</text>\n        <text>{{ isOnloadTriggered }}</text>\n      </view>\n      <view class=\"flex flex-row justify-between mt-10\">\n        <text>onShow 触发：</text>\n        <text>{{ isOnShowTriggered }}</text>\n      </view>\n      <view class=\"flex flex-row justify-between mt-10\">\n        <text>onReady 触发：</text>\n        <text>{{ isOnReadyTriggered }}</text>\n      </view>\n      <view class=\"flex flex-row justify-between mt-10\">\n        <text>onPullDownRefresh 触发：</text>\n        <text>{{ isOnPullDownRefreshTriggered }}</text>\n      </view>\n      <view class=\"flex flex-row justify-between mt-10\">\n        <text>onReachBottom 触发：</text>\n        <text>{{ isOnReachBottomTriggered }}</text>\n      </view>\n      <view class=\"flex flex-row justify-between mt-10\">\n        <text>onBackPress 触发：</text>\n        <text>{{ isOnBackPressTriggered }}</text>\n      </view>\n      <view class=\"flex flex-row justify-between mt-10\">\n        <text>onHide 触发：</text>\n        <text>{{ isOnHideTriggered }}</text>\n      </view>\n      <view class=\"flex flex-row justify-between mt-10\">\n        <text>onResize 触发：</text>\n        <text>{{ isOnResizeTriggered }}</text>\n      </view>\n\t\t\t<MonitorPageLifecycleOptions />\n      <button class=\"mt-10\" @click=\"scrollToBottom\">scrollToBottom</button>\n      <button class=\"mt-10\" @click=\"pullDownRefresh\">\n        trigger pullDownRefresh\n      </button>\n\t\t\t<button class=\"mt-10\" @click=\"goOnBackPress\">\n        跳转 onBackPress 示例\n      </button>\n    </view>\n    <!-- #ifdef APP -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script lang=\"uts\">\nimport { state, setLifeCycleNum } from '@/store/index.uts'\nimport MonitorPageLifecycleOptions from './monitor-page-lifecycle-options.uvue'\n type DataInfo = {\n \tisScrolled: boolean\n }\nexport default {\n\tcomponents: { MonitorPageLifecycleOptions },\n\tdata() {\n\t\treturn {\n\t\t\tisOnloadTriggered: false,\n\t\t\tisOnShowTriggered: false,\n\t\t\tisOnReadyTriggered: false,\n\t\t\tisOnPullDownRefreshTriggered: false,\n\t\t\tisOnPageScrollTriggered: false,\n\t\t\tisOnReachBottomTriggered: false,\n\t\t\tisOnBackPressTriggered: false,\n\t\t\tisOnHideTriggered: false,\n\t\t\tisOnResizeTriggered: false,\n\t\t\tdataInfo: {\n         isScrolled: false,\n       } as DataInfo\n\t\t}\n\t},\n\tonLoad(options : OnLoadOptions) {\n\t\tconsole.log('onLoad', options)\n\t\tthis.isOnloadTriggered = true\n\t\t// 自动化测试\n\t\tsetLifeCycleNum(state.lifeCycleNum + 100)\n\t},\n\tonShow() {\n\t\tthis.isOnShowTriggered = true\n\t\t// 自动化测试\n\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\n\t},\n\tonReady() {\n\t\tthis.isOnReadyTriggered = true\n\t\t// 自动化测试\n\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\n\t},\n\tonPullDownRefresh() {\n\t\tthis.isOnPullDownRefreshTriggered = true\n\t\t// 自动化测试\n\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\n\t},\n\tonPageScroll(e: OnPageScrollOptions) {\n\t\tconsole.log('onPageScroll', e)\n  \tthis.isOnPageScrollTriggered = true\n\t\t// 自动化测试\n\t\tthis.dataInfo.isScrolled = true\n\t},\n\tonReachBottom() {\n\t\tthis.isOnReachBottomTriggered = true\n\t\t// 自动化测试\n\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\n\t},\n\tonBackPress(options : OnBackPressOptions) : boolean | null {\n\t\tconsole.log('onBackPress', options)\n\t\tthis.isOnBackPressTriggered = true\n\t\t// 自动化测试\n\t\tsetLifeCycleNum(state.lifeCycleNum - 10)\n\t\treturn null\n\t},\n\tonHide() {\n\t\tthis.isOnHideTriggered = true\n\t\t// 自动化测试\n\t\tsetLifeCycleNum(state.lifeCycleNum - 10)\n\t},\n\tonUnload() {\n\t\t// 自动化测试\n\t\tsetLifeCycleNum(state.lifeCycleNum - 100)\n\t},\n\tonResize(options: OnResizeOptions) {\n\t\tconsole.log('onBackPress', options)\n\t\tthis.isOnResizeTriggered = true\n\t\t// 自动化测试\n\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\n\t},\n\tmethods: {\n\t\t// 自动化测试\n\t\tpageGetLifeCycleNum() : number {\n\t\t\treturn state.lifeCycleNum\n\t\t},\n\t\t// 自动化测试\n\t\tpageSetLifeCycleNum(num : number) {\n\t\t\tsetLifeCycleNum(num)\n\t\t},\n\t\t// 自动化测试\n\t\tpullDownRefresh() {\n\t\t\tuni.startPullDownRefresh({\n\t\t\t\tsuccess() {\n\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\tuni.stopPullDownRefresh()\n\t\t\t\t\t\t// 一秒后立即停止下拉刷新不会触发 onPullDownRefresh，因为下拉动画时间大概需要1.1～1.2秒\n\t\t\t\t\t}, 1500)\n\t\t\t\t},\n\t\t\t})\n\t\t},\n\t\tscrollToBottom() {\n\t\t\tuni.pageScrollTo({\n\t\t\t\tscrollTop: 2000,\n\t\t\t})\n\t\t},\n\t\tgoOnBackPress() {\n\t\t\tuni.navigateTo({url: '/pages/lifecycle/page/onBackPress/on-back-press-options'})\n\t\t}\n\t},\n}\n</script>\n\n<style>\n.container {\n  height: 1200px;\n}\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/lifecycle/page/page-options"},"page_onBackPress_on-back-press-child-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/lifecycle/page/onBackPress/on-back-press-child-composition.uvue","code":"```vue\n<template>\r\n  <view class=\"page container\">\r\n    <text>测试 onBackPress 生命周期返回 false</text>\r\n  </view>\r\n</template>\r\n\r\n<script lang='uts' setup>\r\n  onBackPress((options: OnBackPressOptions): boolean | null => {\r\n    console.log('onBackPress', options)\r\n    return false\r\n  })\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/lifecycle/page/onBackPress/on-back-press-child-composition"},"page_onBackPress_on-back-press-child-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/lifecycle/page/onBackPress/on-back-press-child-options.uvue","code":"```vue\n<template>\r\n  <view class=\"page container\">\r\n    <text>测试 onBackPress 生命周期返回 false</text>\r\n  </view>\r\n</template>\r\n\r\n<script lang='uts'>\r\n  export default {\r\n    onBackPress(options: OnBackPressOptions): boolean | null {\r\n      console.log('onBackPress', options)\r\n      return false\r\n    }\r\n  }\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/lifecycle/page/onBackPress/on-back-press-child-options"},"page_onBackPress_on-back-press-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/lifecycle/page/onBackPress/on-back-press-composition.uvue","code":"```vue\n<template>\r\n  <view class=\"page container\">\r\n    <text>测试 onBackPress 生命周期返回 true</text>\r\n    <button class=\"mt-10\" @click=\"goChildPage\">\r\n      跳转子页，测试返回值为 false\r\n    </button>\r\n  </view>\r\n</template>\r\n\r\n<script lang=\"uts\" setup>\r\n  const backPressOptions = reactive({\r\n    from: 'backbutton'\r\n  } as OnBackPressOptions)\r\n\r\n  onBackPress((options : OnBackPressOptions) : boolean | null => {\r\n    console.log('onBackPress', options)\r\n    backPressOptions.from = options.from\r\n    return true\r\n  })\r\n  const goChildPage = () => {\r\n    uni.navigateTo({ url: '/pages/lifecycle/page/onBackPress/on-back-press-child-composition' })\r\n  }\r\n\r\n  defineExpose({\r\n    goChildPage,\r\n    backPressOptions\r\n  })\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/lifecycle/page/onBackPress/on-back-press-composition"},"page_onBackPress_on-back-press-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/lifecycle/page/onBackPress/on-back-press-options.uvue","code":"```vue\n<template>\r\n  <view class=\"page container\">\r\n    <text>测试 onBackPress 生命周期返回 true</text>\r\n    <button class='mt-10' @click=\"goChildPage\">跳转子页，测试返回值为 false</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        backPressOptions: {\r\n          from: 'backbutton'\r\n        } as OnBackPressOptions\r\n      }\r\n    },\r\n    onBackPress(options: OnBackPressOptions): boolean | null {\r\n      console.log('onBackPress', options)\r\n      this.backPressOptions = options\r\n      return true\r\n    },\r\n    methods: {\r\n      goChildPage() {\r\n        uni.navigateTo({\r\n          url: '/pages/lifecycle/page/onBackPress/on-back-press-child-options'\r\n        })\r\n      }\r\n    }\r\n  }\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/lifecycle/page/onBackPress/on-back-press-options"}},"E_render-function":{"cloneVNode_cloneVNode-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/render-function/cloneVNode/cloneVNode-composition.uvue","code":"```vue\n<script setup lang=\"uts\">\r\n  defineOptions({\r\n    render() : VNode {\r\n      const originalVNode = h('view', { class: 'original' }, [\r\n        h('text', {}, 'Hello World'),\r\n      ])\r\n      const clonedVNode = cloneVNode(originalVNode, { class: 'cloned' })\r\n\r\n      return h('view', { class: 'flex flex-col' }, [originalVNode, clonedVNode])\r\n    }\r\n  })\r\n</script>\r\n\r\n<style>\r\n  .original {\r\n    background-color: #ff0000;\r\n  }\r\n\r\n  .cloned {\r\n    background-color: #00ff00;\r\n  }\r\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/render-function/cloneVNode/cloneVNode-composition"},"cloneVNode_cloneVNode-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/render-function/cloneVNode/cloneVNode-options.uvue","code":"```vue\n<script lang=\"uts\">\r\n  export default {\r\n    render() : VNode {\r\n      const originalVNode = h('view', { class: 'original' }, [\r\n        h('text', {}, 'Hello World'),\r\n      ])\r\n      const clonedVNode = cloneVNode(originalVNode, { class: 'cloned' })\r\n\r\n      return h('view', { class: 'flex flex-col' }, [originalVNode, clonedVNode])\r\n    }\r\n  }\r\n</script>\r\n\r\n<style>\r\n  .original {\r\n    background-color: #ff0000;\r\n  }\r\n\r\n  .cloned {\r\n    background-color: #00ff00;\r\n  }\r\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/render-function/cloneVNode/cloneVNode-options"},"isVNode_isVNode-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/render-function/isVNode/isVNode-composition.uvue","code":"```vue\n<template>\r\n  <view class=\"page\">\r\n    <view class=\"mb-10 flex flex-row justify-between\">\r\n      <text>isVNode VNode:</text>\r\n      <text id=\"is-vnode-vnode\">{{ isVNodeVNode }}</text>\r\n    </view>\r\n    <view class=\"mb-10 flex flex-row justify-between\">\r\n      <text>isVNode string:</text>\r\n      <text id=\"is-vnode-string\">{{ isVNodeString }}</text>\r\n    </view>\r\n  </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n  const isVNodeVNode = ref(false)\r\n  const isVNodeString = ref(false)\r\n  const vnode = h('text', {}, 'Hello World')\r\n  isVNodeVNode.value = isVNode(vnode)\r\n  isVNodeString.value = isVNode('abc')\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/render-function/isVNode/isVNode-composition"},"isVNode_isVNode-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/render-function/isVNode/isVNode-options.uvue","code":"```vue\n<template>\r\n  <view class=\"page\">\r\n    <view class=\"mb-10 flex flex-row justify-between\">\r\n      <text>isVNode VNode:</text>\r\n      <text id=\"is-vnode-vnode\">{{ isVNodeVNode }}</text>\r\n    </view>\r\n    <view class=\"mb-10 flex flex-row justify-between\">\r\n      <text>isVNode string:</text>\r\n      <text id=\"is-vnode-string\">{{ isVNodeString }}</text>\r\n    </view>\r\n  </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\n  export default {\r\n    data() {\r\n      return {\r\n        isVNodeVNode: false,\r\n        isVNodeString: false\r\n      }\r\n    },\r\n    onLoad() {\r\n      const vnode = h('text', {}, 'Hello World')\r\n      this.isVNodeVNode = isVNode(vnode)\r\n      this.isVNodeString = isVNode('abc')\r\n    }\r\n  }\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/render-function/isVNode/isVNode-options"},"mergeProps_mergeProps-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/render-function/mergeProps/mergeProps-composition.uvue","code":"```vue\n<template>\r\n  <view class=\"page\">\r\n    <view class=\"mb-10 flex flex-row justify-between\">\r\n      <text>merged class</text>\r\n      <text id=\"merged-class\">{{mergedProps['class']}}</text>\r\n    </view>\r\n    <button class=\"mb-10\" id=\"trigger-merged-click\" @click=\"triggerMergedClick\">trigger merged onClick</button>\r\n    <view>\r\n      <text class=\"mb-10\">prop function result list</text>\r\n      <text class=\"click-res\" v-for=\"(item, index) in propFnResList\" :key=\"index\">{{item}}</text>\r\n    </view>\r\n  </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n  type PropFn = () => string\r\n\r\n  const propA = {\r\n    class: 'foo',\r\n    onClick: () : string => 'propA click res'\r\n  }\r\n  const propB = {\r\n    class: { bar: true },\r\n    onClick: () : string => 'propB click res'\r\n  }\r\n  const mergedProps = ref({})\r\n  const propFnResList = ref<string[]>([])\r\n\r\n  mergedProps.value = mergeProps(propA, propB)\r\n\r\n  const triggerMergedClick = () => {\r\n    (mergedProps.value['onClick'] as PropFn[]).forEach(fn => { propFnResList.value.push(fn()) })\r\n  }\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/render-function/mergeProps/mergeProps-composition"},"mergeProps_mergeProps-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/render-function/mergeProps/mergeProps-options.uvue","code":"```vue\n<template>\r\n  <view class=\"page\">\r\n    <view class=\"mb-10 flex flex-row justify-between\">\r\n      <text>merged class</text>\r\n      <text id=\"merged-class\">{{mergedProps['class']}}</text>\r\n    </view>\r\n    <button class=\"mb-10\" id=\"trigger-merged-click\" @click=\"triggerMergedClick\">trigger merged onClick</button>\r\n    <view>\r\n      <text class=\"mb-10\">prop function result list</text>\r\n      <text class=\"click-res\" v-for=\"(item, index) in propFnResList\" :key=\"index\">{{item}}</text>\r\n    </view>\r\n  </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\n  type PropFn = () => string\r\n  export default {\r\n    data() {\r\n      return {\r\n        propA: {\r\n          class: 'foo',\r\n          onClick: () : string => 'propA click res'\r\n        },\r\n        propB: {\r\n          class: { bar: true },\r\n          onClick: () : string => 'propB click res'\r\n        },\r\n        mergedProps: {},\r\n        propFnResList: [] as string[],\r\n      }\r\n    },\r\n    onLoad() {\r\n      this.mergedProps = mergeProps(this.propA, this.propB)\r\n    },\r\n    methods: {\r\n      triggerMergedClick() {\r\n        (this.mergedProps['onClick'] as PropFn[]).forEach(fn => { this.propFnResList.push(fn()) })\r\n      }\r\n    }\r\n  }\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/render-function/mergeProps/mergeProps-options"},"render_Foo":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/render-function/render/Foo.uvue","code":"```vue\n<template>\r\n    <view>\r\n        <slot name=\"header\"></slot>\r\n        <slot name=\"footer\"></slot>\r\n    </view>\r\n</template>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/render-function/render/Foo"},"render_render-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/render-function/render/render-composition.uvue","code":"```vue\n<script setup lang=\"uts\">\nimport CompForHFunction from '@/components/CompForHFunction.uvue'\r\nimport CompForHFunctionWithSlot from '@/components/CompForHFunctionWithSlot.uvue'\nimport Foo from './Foo.uvue'\nconst msg = ref('default msg')\n// 故意外部声明为UTSJSONObject\nconst msgProps = { class: 'uni-common-mt msg', style: { color: 'blue' } }\nconst render = ():VNode => h('view', { class: 'page' }, [\n  h(CompForHFunctionWithSlot, {}, () : VNode[] => [h('text', { class: 'comp-slot' }, 'component slot')]),\n  h(CompForHFunction, { msg: msg.value }),\n  h('text', msgProps, msg.value),\n  h(Foo, null, {\n      header: (): VNode[] => [h('text', { id: \"header\" }, 'header')],\n      footer: (): VNode[] => [h('text', { id: \"footer\" }, 'footer')]\n  }),\n  h(\n    'button',\n    {\n      class: 'uni-common-mt btn',\n      type: 'primary',\n      onClick: () => {\n        msg.value = 'new msg'\n      }\n    },\n    'click'\n  )\n])\n</script>\n\n<template><render /></template>\n\n<style>\n.btn {\n  color: red;\n}\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/render-function/render/render-composition"},"render_render-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/render-function/render/render-options.uvue","code":"```vue\n<script lang=\"uts\">\r\nimport CompForHFunction from '@/components/CompForHFunction.uvue'\r\nimport CompForHFunctionWithSlot from '@/components/CompForHFunctionWithSlot.uvue'\r\nimport Foo from './Foo.uvue'\r\n// 故意外部声明为UTSJSONObject\r\nconst msgProps = { class: 'uni-common-mt msg', style: { color: 'blue' } }\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(CompForHFunctionWithSlot, {}, () : VNode[] => [h('text', { class: 'comp-slot' }, 'component slot')]),\r\n      h(CompForHFunction, { msg: this.msg }),\r\n      h('text', msgProps, this.msg),\r\n      h(Foo, null, {\r\n          header: (): VNode[] => [h('text', { id: \"header\" }, 'header')],\r\n          footer: (): VNode[] => [h('text', { id: \"footer\" }, 'footer')]\r\n      }),\r\n      h(\r\n        'button',\r\n        {\r\n          class: 'uni-common-mt btn',\r\n          type: 'primary',\r\n          onClick: () => {\r\n            this.msg = 'new msg'\r\n          }\r\n        },\r\n        'click'\r\n      )\r\n    ])\r\n  }\r\n}\r\n</script>\r\n\r\n<style>\r\n.btn {\r\n  color: red;\r\n}\r\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/render-function/render/render-options"},"resolveComponent_resolveComponent-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/render-function/resolveComponent/resolveComponent-composition.uvue","code":"```vue\n<script setup lang=\"uts\">\r\n  defineOptions({\r\n    render() : VNode {\r\n      const CompForAppComponent = resolveComponent('CompForAppComponent')\r\n      return h(CompForAppComponent)\r\n    }\r\n  })\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/render-function/resolveComponent/resolveComponent-composition"},"resolveComponent_resolveComponent-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/render-function/resolveComponent/resolveComponent-options.uvue","code":"```vue\n<script lang=\"uts\">\r\n  export default {\r\n    setup() {\r\n      const CompForAppComponent = resolveComponent('CompForAppComponent')\r\n\r\n      return ():VNode => {\r\n        return h(CompForAppComponent)\r\n      }\r\n    }\r\n  }\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/render-function/resolveComponent/resolveComponent-options"},"withDirectives_withDirectives-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/render-function/withDirectives/withDirectives-composition.uvue","code":"```vue\n<script setup lang=\"ts\">\r\n  defineOptions({\r\n    data() {\r\n      return {\r\n        isMounted: false\r\n      }\r\n    },\r\n    render() : VNode {\r\n      const instance = getCurrentInstance()!.proxy!\r\n      \r\n      const customDirective = {\r\n        mounted(el : UniElement, binding : DirectiveBinding, vnode : VNode, prevVNode: VNode | null) {\r\n          console.log(el, binding, vnode, prevVNode)\r\n          instance.$data['isMounted'] = true\r\n        }\r\n      } as Directive\r\n      return h('view', { class: 'page' }, [\r\n        withDirectives(h('text', 'Hello World'), [[customDirective]]),\r\n        h('view', { class: 'mt-10 flex flex-row justify-between' }, [\r\n          h('text', {}, `isMounted:`),\r\n          h('text', { id: 'is-mounted' }, `${instance.$data['isMounted']}`),\r\n        ])\r\n      ])\r\n    }\r\n  })\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/render-function/withDirectives/withDirectives-composition"},"withDirectives_withDirectives-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/render-function/withDirectives/withDirectives-options.uvue","code":"```vue\n<script lang=\"uts\">\r\n  export default {\r\n    data() {\r\n      return {\r\n        isMounted: false\r\n      }\r\n    },\r\n    render() : VNode {\r\n      const instance = this\r\n\r\n      const customDirective = {\r\n        mounted(el : UniElement, binding : DirectiveBinding, vnode : VNode, prevVNode : VNode | null) {\r\n          console.log(el, binding, vnode, prevVNode)\r\n          instance.$data['isMounted'] = true\r\n        }\r\n      } as Directive\r\n      return h('view', { class: 'page' }, [\r\n        withDirectives(h('text', 'Hello World'), [[customDirective]]),\r\n        h('view', { class: 'mt-10 flex flex-row justify-between' }, [\r\n          h('text', {}, `isMounted:`),\r\n          h('text', { id: 'is-mounted' }, `${instance.$data['isMounted']}`),\r\n        ])\r\n      ])\r\n    }\r\n  }\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/render-function/withDirectives/withDirectives-options"},"withModifiers_withModifiers-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/render-function/withModifiers/withModifiers-composition.uvue","code":"```vue\n<script setup lang=\"uts\">\r\n  defineOptions({\r\n    data() {\r\n      return {\r\n        parentClickedNum: 0,\r\n        childClickedNum: 0\r\n      }\r\n    },\r\n    render() : VNode {\r\n      const instance = getCurrentInstance()!.proxy!\r\n\r\n      return h('view', { class: 'page' }, [\r\n        h('view', {\r\n          onClick: () => { instance.$data['childClickedNum'] = (instance.$data['parentClickedNum'] as number) + 1 }\r\n        }, [\r\n          h('button', {\r\n            id: 'stop-btn',\r\n            onClick: withModifiers(() => { instance.$data['childClickedNum'] = (instance.$data['childClickedNum'] as number) + 1 }, ['stop'])\r\n          }, 'click stop')\r\n        ]),\r\n        h('view', { class: 'mt-10 flex flex-row justify-between' }, [\n          h('text', {}, `parentCickedNum:`),\n          h('text', { id: 'parent-num' }, `${instance.$data['parentClickedNum']}`),\n        ]),\n        h('view', { class: 'mt-10 flex flex-row justify-between' }, [\n          h('text', {}, `childClickedNum:`),\n          h('text', { id: 'child-num' }, `${instance.$data['childClickedNum']}`),\n        ])\r\n      ])\r\n    }\r\n  })\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/render-function/withModifiers/withModifiers-composition"},"withModifiers_withModifiers-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/render-function/withModifiers/withModifiers-options.uvue","code":"```vue\n<script lang=\"uts\">\r\n  export default {\r\n    data() {\r\n      return {\r\n        parentClickedNum: 0,\r\n        childClickedNum: 0\r\n      }\r\n    },\r\n    render() : VNode {\r\n      const instance = this\r\n\r\n      return h('view', { class: 'page' }, [\r\n        h('view', {\r\n          onClick: () => { instance.$data['childClickedNum'] = (instance.$data['parentClickedNum'] as number) + 1 }\r\n        }, [\r\n          h('button', {\r\n            id: 'stop-btn',\r\n            onClick: withModifiers(() => { instance.$data['childClickedNum'] = (instance.$data['childClickedNum'] as number) + 1 }, ['stop'])\r\n          }, 'click stop')\r\n        ]),\r\n        h('view', { class: 'mt-10 flex flex-row justify-between' }, [\r\n          h('text', {}, `parentCickedNum:`),\r\n          h('text', { id: 'parent-num' }, `${instance.$data['parentClickedNum']}`),\r\n        ]),\r\n        h('view', { class: 'mt-10 flex flex-row justify-between' }, [\r\n          h('text', {}, `childClickedNum:`),\r\n          h('text', { id: 'child-num' }, `${instance.$data['childClickedNum']}`),\r\n        ])\r\n      ])\r\n    }\r\n  }\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/render-function/withModifiers/withModifiers-options"}},"E_built-in":{"component_keep-alive_keep-alive-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/component/keep-alive/keep-alive-composition.uvue","code":"```vue\n<template>\n  <!-- #ifdef APP -->\n  <scroll-view style=\"flex: 1\">\n    <!-- #endif -->\n    <view class=\"page\">\n      <text class=\"bold mb-10\">include=\"Counter,Message\"</text>\n      <KeepAlive include=\"Counter,Message\">\n        <component :is=\"currentComponent\"></component>\n      </KeepAlive>\n      <view class=\"hr\"></view>\n      <text class=\"bold mt-10 mb-10\">:include=\"/Counter|Message/\"</text>\n      <KeepAlive :include=\"/Counter|Message/\">\n        <component :is=\"currentComponent\"></component>\n      </KeepAlive>\n      <view class=\"hr\"></view>\n      <text class=\"bold mb-10 mb-10\">:include=\"['Counter', 'Message']\"</text>\n      <KeepAlive :include=\"['Counter', 'Message']\">\n        <component :is=\"currentComponent\"></component>\n      </KeepAlive>\n      <view class=\"hr\"></view>\n      <text class=\"bold mt-10 mb-10\">exclude=\"ShouldExclude\"</text>\n      <KeepAlive exclude=\"ShouldExclude\">\n        <component :is=\"currentComponent\"></component>\n      </KeepAlive>\n      <view class=\"hr\"></view>\n      <text class=\"bold mt-10 mb-10\">:max=\"2\"</text>\n      <KeepAlive :max=\"2\">\n        <component :is=\"currentComponent\"></component>\n      </KeepAlive>\n      <view class=\"hr\"></view>\n      <button class=\"mt-10 show-counter\" @click=\"changeComponent('Counter')\">show Counter</button>\n      <button class=\"mt-10 show-message\" @click=\"changeComponent('Message')\">show Message</button>\n      <button class=\"mt-10 show-should-exclude\" @click=\"changeComponent('ShouldExclude')\">show ShouldExclude</button>\n    </view>\n    <!-- #ifdef APP -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\nimport Counter from '@/components/keep-alive/Counter.uvue'\nimport Message from '@/components/keep-alive/Message.uvue'\nimport ShouldExclude from '@/components/keep-alive/ShouldExclude.uvue'\n\ndefineOptions({\n  components: {\n    Counter,\n    Message,\n    ShouldExclude\n  }\n})\n\nconst currentComponent = ref<string>('ShouldExclude')\n\nconst changeComponent = (componentName: string) => {\n  currentComponent.value = componentName\n}\n</script>\n\n<style>\n.hr {\n  margin: 30rpx 0;\n  border-bottom: 1px solid #ccc;\n}\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/built-in/component/keep-alive/keep-alive-composition"},"component_keep-alive_keep-alive-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/component/keep-alive/keep-alive-options.uvue","code":"```vue\n<template>\n  <!-- #ifdef APP -->\n  <scroll-view style=\"flex: 1\">\n    <!-- #endif -->\n    <view class=\"page\">\n      <text class=\"bold mb-10\">include \"Counter,Message\"</text>\n      <KeepAlive include=\"Counter,Message\">\n        <component :is=\"currentComponent\"></component>\n      </KeepAlive>\n      <view class=\"hr\"></view>\n      <text class=\"bold mt-10 mb-10\">include \"/Counter|Message/\"</text>\n      <KeepAlive :include=\"/Counter|Message/\">\n        <component :is=\"currentComponent\"></component>\n      </KeepAlive>\n      <view class=\"hr\"></view>\n      <text class=\"bold mt-10 mb-10\">include \"['Counter', 'Message']\"</text>\n      <KeepAlive :include=\"['Counter', 'Message']\">\n        <component :is=\"currentComponent\"></component>\n      </KeepAlive>\n      <view class=\"hr\"></view>\n      <text class=\"bold mt-10 mb-10\">exclude \"ShouldExclude\"</text>\n      <KeepAlive exclude=\"ShouldExclude\">\n        <component :is=\"currentComponent\"></component>\n      </KeepAlive>\n      <view class=\"hr\"></view>\n      <text class=\"bold mt-10 mb-10\">max 2</text>\n      <KeepAlive :max=\"2\">\n        <component :is=\"currentComponent\"></component>\n      </KeepAlive>\n      <view class=\"hr\"></view>\n      <button class=\"mt-10 show-counter\" @click=\"changeComponent('Counter')\">show Counter</button>\n      <button class=\"mt-10 show-message\" @click=\"changeComponent('Message')\">show Message</button>\n      <button class=\"mt-10 show-should-exclude\" @click=\"changeComponent('ShouldExclude')\">show ShouldExclude</button>\n    </view>\n    <!-- #ifdef APP -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script lang=\"uts\">\nimport Counter from '@/components/keep-alive/Counter.uvue'\nimport Message from '@/components/keep-alive/Message.uvue'\nimport ShouldExclude from '@/components/keep-alive/ShouldExclude.uvue'\nexport default {\n  components: {\n    Counter,\n    Message,\n    ShouldExclude\n  },\n  data() {\n    return {\n      currentComponent: 'ShouldExclude'\n    }\n  },\n  methods: {\n    changeComponent(componentName: string) {\n      this.currentComponent = componentName\n    }\n  }\n}\n</script>\n\n<style>\n.hr {\n  margin-top: 30rpx;\n  border-bottom: 1px solid #ccc;\n}\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/built-in/component/keep-alive/keep-alive-options"},"component_teleport_teleport-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/component/teleport/teleport-composition.uvue","code":"```vue\n<template>\n  <!-- #ifdef APP -->\n  <scroll-view style=\"flex: 1\">\n    <!-- #endif -->\n    <view id=\"container\" class=\"container\">\n      <text class=\"text\">.container 区域</text>\n      <view id=\"content1\" class=\"content content-1\">\n        <text class=\"text\">content1 区域</text>\n      </view>\n      <view id=\"content2\" class=\"content content-2\">\n        <text class=\"text\">content2 区域</text>\n      </view>\n      <teleport v-if=\"show\" to=\"#content1\" :disabled=\"disabled\">\n        <view class=\"send-content\">\n          <text class=\"send-content-text\">内容在.container中，使用teleport在#content1元素中展示</text>\n        </view>\n      </teleport>\n    </view>\n    <!-- #ifdef APP -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\nconst to = ref<string>('content1')\nconst showingString = ref<string>('穿梭内容在 body 中')\nconst disabled = ref<boolean>(false)\nconst show = ref<boolean>(false)\n\nonReady(() => {\n  // 需要等内容挂载后，teleport才生效\n  show.value = true\n})\nconst changePosition = () => {\n  to.value = '#content1'\n}\n\ndefineExpose({\n  changePosition\n})\n</script>\n\n<style>\n.container {\n  background-color: #f5f5f5;\n  border: 1px #ccc solid;\n  margin: 5px;\n  padding: 10px;\n}\n\n.text {\n  margin: 5px 0;\n}\n\n.content {\n  height: 120px;\n  border: 1px #ccc solid;\n  margin: 5px;\n  padding: 10px;\n}\n\n.send-content {\n  padding: 5px;\n  background-color: #ff5a5f;\n  height: 50px;\n}\n\n.send-content-text {\n  color: #fff;\n  font-size: 12px;\n}\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/built-in/component/teleport/teleport-composition"},"component_teleport_teleport-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/component/teleport/teleport-options.uvue","code":"```vue\n<template>\n  <!-- #ifdef APP -->\n  <scroll-view style=\"flex: 1\">\n    <!-- #endif -->\n    <view id=\"container\" class=\"container\">\n      <text class=\"text\">.container 区域</text>\n      <view id=\"content1\" class=\"content content-1\">\n        <text class=\"text\">content1 区域</text>\n      </view>\n      <view id=\"content2\" class=\"content content-2\">\n        <text class=\"text\">content2 区域</text>\n      </view>\n      <teleport v-if=\"show\" to=\"#content1\" :disabled=\"disabled\">\n        <view class=\"send-content\">\n          <text class=\"send-content-text\">内容在.container中，使用teleport在#content1元素中展示</text>\n        </view>\n      </teleport>\n    </view>\n    <!-- #ifdef APP -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      to: 'content1',\n      disabled: false,\n      showingString: '穿梭内容在 body 中',\n      show: false\n    }\n  },\n  onReady() {\n    // 需要等内容挂载后，teleport才生效\n    this.show = true\n  },\n  methods: {\n    changePosition() {\n      this.to = '#content1'\n    }\n  }\n}\n</script>\n\n<style>\n.container {\n  background-color: #f5f5f5;\n  border: 1px #ccc solid;\n  margin: 5px;\n  padding: 10px;\n}\n.text {\n  margin: 5px 0;\n}\n\n.content {\n  height: 120px;\n  border: 1px #ccc solid;\n  margin: 5px;\n  padding: 10px;\n}\n\n.send-content {\n  padding: 5px;\n  background-color: #ff5a5f;\n  height: 50px;\n}\n\n.send-content-text {\n  color: #fff;\n  font-size: 12px;\n}\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/built-in/component/teleport/teleport-options"},"special-elements_component_component-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/special-elements/component/component-composition.uvue","code":"```vue\n<template>\r\n  <view class=\"container\">\r\n    <component :is=\"currentComponentInstance\" />\r\n    <component :is=\"myInput\" :value=\"inputValue\" id=\"my-input\" />\r\n    <button @click=\"changeCurrentComponent\">change current component</button>\r\n  </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n  import Foo from '../../../../components/Foo.uvue'\r\n  import Bar from '../../../../components/Bar.uvue'\r\n\r\n  const currentComponentStr = ref('Foo')\r\n  const currentComponentInstance = ref(Foo)\r\n  const myInput = ref('input')\r\n  const inputValue = ref('default value')\r\n\r\n  const changeCurrentComponent = () => {\r\n    if (currentComponentStr.value === 'Foo') {\r\n      currentComponentStr.value = 'Bar'\r\n      currentComponentInstance.value = Bar\r\n    } else {\r\n      currentComponentStr.value = 'Foo'\r\n      currentComponentInstance.value = Foo\r\n    }\r\n  }\r\n\r\n  defineExpose({\r\n    changeCurrentComponent\r\n  })\r\n</script>\r\n\r\n<style>\r\n  .item {\r\n    display: flex;\r\n    flex-direction: row;\r\n    margin: 15px;\r\n    border: #eee solid 1px;\r\n  }\r\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/built-in/special-elements/component/component-composition"},"special-elements_component_component-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/special-elements/component/component-options.uvue","code":"```vue\n<template>\r\n  <view class=\"container\">\r\n    <component :is=\"currentComponentStr\" />\r\n    <component :is=\"currentComponentInstance\" />\r\n    <component :is=\"myInput\" :value=\"inputValue\" id=\"my-input\" />\r\n    <button @click=\"changeCurrentComponent\">change current component</button>\r\n  </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\n  import Foo from '../../../../components/Foo.uvue'\r\n  import Bar from '../../../../components/Bar.uvue'\r\n  export 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        myInput: 'input',\r\n        inputValue: 'default value'\r\n      }\r\n    },\r\n    methods: {\r\n      changeCurrentComponent() {\r\n        if (this.currentComponentStr === 'Foo') {\r\n          this.currentComponentStr = 'Bar'\r\n          this.currentComponentInstance = Bar\r\n        } else {\r\n          this.currentComponentStr = 'Foo'\r\n          this.currentComponentInstance = Foo\r\n        }\r\n      }\r\n    }\r\n  }\r\n</script>\r\n\r\n<style>\r\n  .item {\r\n    display: flex;\r\n    flex-direction: row;\r\n    margin: 15px;\r\n    border: #eee solid 1px;\r\n  }\r\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/built-in/special-elements/component/component-options"},"special-elements_slots_child-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/special-elements/slots/child-composition.uvue","code":"```vue\n<template>\n  <view class=\"container\">\n    <view>\n      <slot name=\"header\" msg=\"Here might be a page title\"></slot>\n    </view>\n    <view>\n      <slot msg=\"A paragraph for the main content.\"></slot>\n    </view>\n    <view>\n      <slot name=\"footer\" msg=\"Here's some contact info\"></slot>\n    </view>\n  </view>\n</template>\n\n<script setup lang=\"uts\">\ndefineOptions({\n  name: 'child'\n})\n\ndefineSlots<{\n  default(props: { msg: string }): any\n  header(props: { msg: string }): any\n  footer(props: { msg: string }): any\n}>()\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/built-in/special-elements/slots/child-composition"},"special-elements_slots_child-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/special-elements/slots/child-options.uvue","code":"```vue\n<template>\n  <view class=\"container\">\n    <view>\n      <slot name=\"header\" msg=\"Here might be a page title\"></slot>\n    </view>\n    <view>\n      <slot msg=\"A paragraph for the main content.\"></slot>\n    </view>\n    <view>\n      <slot name=\"footer\" msg=\"Here's some contact info\"></slot>\n    </view>\n  </view>\n</template>\n\n<script lang=\"uts\">\nexport default {\n  name: 'child',\n  slots: Object as SlotsType<{\n    header: { msg: string }\n    default: { msg: string }\n    footer: { msg: string }\n  }>\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/built-in/special-elements/slots/child-options"},"special-elements_slots_slots-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/special-elements/slots/slots-composition.uvue","code":"```vue\n<template>\n  <view class=\"content\">\n    <child>\n      <template v-slot:header=\"slotProps\">\n        <view class=\"header\">{{ slotProps.msg }}</view>\n      </template>\n      <template v-slot:default=\"{ msg }\">\n        <view class=\"main\">{{ msg }}</view>\n      </template>\n      <template #footer=\"{ msg: text }\">\n        <view class=\"footer\">{{ text }}</view>\n      </template>\n    </child>\n  </view>\n</template>\n\n<script setup lang=\"uts\">\nimport child from './child-composition.uvue'\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/built-in/special-elements/slots/slots-composition"},"special-elements_slots_slots-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/special-elements/slots/slots-options.uvue","code":"```vue\n<template>\n  <view class=\"content\">\n    <child>\n      <template v-slot:header=\"slotProps\">\n        <view class=\"header\">{{ slotProps.msg }}</view>\n      </template>\n      <template v-slot:default=\"{ msg }\">\n        <view class=\"main\">{{ msg }}</view>\n      </template>\n      <template #footer=\"{ msg: text }\">\n        <view class=\"footer\">{{ text }}</view>\n      </template>\n    </child>\n  </view>\n</template>\n\n<script lang=\"uts\">\nimport child from './child-options.uvue'\nexport default {\n  components: { child }\n}\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/built-in/special-elements/slots/slots-options"},"special-elements_template_template-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/special-elements/template/template-composition.uvue","code":"```vue\n<template>\n  <view class=\"page\">\n    <template v-if=\"dataInfo.isShow\">\n      <text id=\"title\">{{ title }}</text>\n    </template>\n    <template v-else>\n      <text>隐藏标题时显示</text>\n    </template>\n    <button id=\"show-botton\" @click=\"handleShow\">{{ dataInfo.isShow ? '点击隐藏' : '点击显示' }}</button>\n    <template v-for=\"(item, index) in list\" :key=\"index\">\n      <text :class=\"'item'\">{{ index + 1 }}.{{ item.name }}</text>\n    </template>\n    <button @click=\"goMapStyle\">跳转绑定 Map 类型 style 页面</button>\n  </view>\n</template>\n\n<script setup lang=\"uts\">\ntype DataInfo = {\n  isShow: boolean\n}\ntype ListItem = {\n  name: string\n}\n\nconst dataInfo = reactive({\n  isShow: false\n} as DataInfo)\n\nconst title = ref<string>('hello')\nconst list = ref<ListItem[]>([\n  {\n    name: 'foo1'\n  },\n  {\n    name: 'foo2'\n  }\n])\n\nconst handleShow = () => {\n  dataInfo.isShow = !dataInfo.isShow\n}\n\nconst goMapStyle = () => {\n  uni.navigateTo({ url: '/pages/built-in/special-elements/template/template-map-style-composition' })\n}\n\ndefineExpose({\n  dataInfo,\n  goMapStyle\n})\n</script>\n\n<style>\n.item {\n  margin: 15px;\n  padding: 4px 8px;\n  border: #eee solid 1px;\n}\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/built-in/special-elements/template/template-composition"},"special-elements_template_template-map-style-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/special-elements/template/template-map-style-composition.uvue","code":"```vue\n<template>\n  <view class=\"page\">\n    <view :style=\"[styleW200, styleRounded, styleBorder]\" :class=\"[classPadding10, classBgRed]\">\n      <text>width:200px;</text>\n      <text>padding:10px;</text>\n      <text>border-radius:8px;</text>\n      <text>border:1px solid #ccc;</text>\n      <text>background-color: red;</text>\n      <text class=\"text-white\">this text color: #fff;</text>\n    </view>\n    <view :style=\"[stylePadding10, styleBgGreen, styleMargin10]\" :class=\"[classH200, classRounded, classBorder, classBorderRed]\">\n      <text>height:200px;</text>\n      <text>margin:10px;</text>\n      <text>padding:10px;</text>\n      <text>border-radius:8px;</text>\n      <text>border:1px solid #ccc;</text>\n      <text>border-color:red;</text>\n      <text>background-color: green;</text>\n      <text class=\"text-blue\">this text color: blue;</text>\n    </view>\n    <view :style=\"styleBgBlue\" :class=\"classPadding10\">\n      <text>padding:10px;</text>\n      <text>background-color: blue;</text>\n      <text class=\"text-red\">this text color: red;</text>\n    </view>\n    <button class=\"mt-10\" id=\"btn\" @click=\"toggleIsClassValid\">toggle isClassValid</button>\n  </view>\n</template>\n\n<script setup lang=\"uts\">\nconst styleW200 = ref(new Map<string, string>([['width', '200px']]))\nconst styleH200 = ref(new Map<string, string>([['height', '200px']]))\nconst stylePadding10 = ref(new Map<string, string>([['padding', '10px']]))\nconst styleMargin10 = ref(new Map<string, string>([['margin', '10px']]))\nconst styleRounded = ref(new Map<string, string>([['border-radius', '8px']]))\nconst styleBorder = ref(new Map<string, string>([['border', '1px solid #ccc']]))\nconst styleBorderRed = ref(new Map<string, string>([['border-color', 'red']]))\nconst styleBorderBlue = ref(new Map<string, string>([['border-color', 'blue']]))\nconst styleBorderGreen = ref(new Map<string, string>([['border-color', 'green']]))\nconst styleBgGreen = ref(new Map<string, string>([['background-color', 'green']]))\nconst styleBgBlue = ref(new Map<string, string>([['background-color', 'blue']]))\nconst styleBgRed = ref(new Map<string, string>([['background-color', 'red']]))\nconst styleTextWhite = ref(new Map<string, string>([['color', '#fff']]))\nconst styleTextBlack = ref(new Map<string, string>([['color', '#000']]))\nconst styleTextRed = ref(new Map<string, string>([['color', 'red']]))\nconst styleTextBlue = ref(new Map<string, string>([['color', 'blue']]))\nconst styleTextGreen = ref(new Map<string, string>([['color', 'green']]))\nconst isClassValid = ref(true)\nconst classW200 = ref(new Map<string, boolean>([['w-200', true]]))\nconst classH200 = ref(new Map<string, boolean>([['h-200', true]]))\nconst classPadding10 = ref(new Map<string, boolean>([['padding-10', true]]))\nconst classMargin10 = ref(new Map<string, boolean>([['margin-10', true]]))\nconst classRounded = ref(new Map<string, boolean>([['rounded', true]]))\nconst classBorder = ref(new Map<string, boolean>([['border', true]]))\nconst classBorderRed = ref(new Map<string, boolean>([['border-red', true]]))\nconst classBorderBlue = ref(new Map<string, boolean>([['border-blue', true]]))\nconst classBorderGreen = ref(new Map<string, boolean>([['border-green', true]]))\nconst classBgGreen = ref(new Map<string, boolean>([['bg-green', true]]))\nconst classBgBlue = ref(new Map<string, boolean>([['bg-blue', true]]))\nconst classBgRed = ref(new Map<string, boolean>([['bg-red', true]]))\nconst classTextWhite = ref(new Map<string, boolean>([['text-white', true]]))\nconst classTextBlack = ref(new Map<string, boolean>([['text-black', true]]))\nconst classTextRed = ref(new Map<string, boolean>([['text-red', true]]))\nconst classTextBlue = ref(new Map<string, boolean>([['text-blue', true]]))\nconst classTextGreen = ref(new Map<string, boolean>([['text-green', true]]))\nconst toggleIsClassValid = () => {\n  isClassValid.value = !isClassValid.value\n  classW200.value = new Map<string, boolean>([['w-200', isClassValid.value]])\n  classH200.value = new Map<string, boolean>([['h-200', isClassValid.value]])\n  classPadding10.value = new Map<string, boolean>([['padding-10', isClassValid.value]])\n  classMargin10.value = new Map<string, boolean>([['margin-10', isClassValid.value]])\n  classRounded.value = new Map<string, boolean>([['rounded', isClassValid.value]])\n  classBorder.value = new Map<string, boolean>([['border', isClassValid.value]])\n  classBorderRed.value = new Map<string, boolean>([['border-red', isClassValid.value]])\n  classBorderBlue.value = new Map<string, boolean>([['border-blue', isClassValid.value]])\n  classBorderGreen.value = new Map<string, boolean>([['border-green', isClassValid.value]])\n  classBgGreen.value = new Map<string, boolean>([['bg-green', isClassValid.value]])\n  classBgBlue.value = new Map<string, boolean>([['bg-blue', isClassValid.value]])\n  classBgRed.value = new Map<string, boolean>([['bg-red', isClassValid.value]])\n  classTextWhite.value = new Map<string, boolean>([['text-white', isClassValid.value]])\n  classTextBlack.value = new Map<string, boolean>([['text-black', isClassValid.value]])\n  classTextRed.value = new Map<string, boolean>([['text-red', isClassValid.value]])\n  classTextBlue.value = new Map<string, boolean>([['text-blue', isClassValid.value]])\n  classTextGreen.value = new Map<string, boolean>([['text-green', isClassValid.value]])\n}\n</script>\n\n<style>\n.w-200 {\n  width: 200px;\n}\n\n.h-200 {\n  height: 200px;\n}\n\n.padding-10 {\n  padding: 10px;\n}\n\n.margin-10 {\n  margin: 10px;\n}\n\n.rounded {\n  border-radius: 8px;\n}\n\n.border {\n  border: 1px solid #ccc;\n}\n\n.border-red {\n  border-color: red;\n}\n\n.border-green {\n  border-color: green;\n}\n\n.border-blue {\n  border-color: blue;\n}\n\n.bg-green {\n  background-color: green;\n}\n\n.bg-red {\n  background-color: red;\n}\n\n.bg-blue {\n  background-color: blue;\n}\n\n.text-white {\n  color: #fff;\n}\n\n.text-black {\n  color: #000;\n}\n\n.text-green {\n  color: green;\n}\n\n.text-red {\n  color: red;\n}\n\n.text-blue {\n  color: blue;\n}\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/built-in/special-elements/template/template-map-style-composition"},"special-elements_template_template-map-style-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/special-elements/template/template-map-style-options.uvue","code":"```vue\n<template>\n  <view class=\"page\">\n    <view :style=\"[styleW200, styleRounded, styleBorder]\" :class=\"[classPadding10, classBgRed]\">\n      <text>width:200px;</text>\n      <text>padding:10px;</text>\n      <text>border-radius:8px;</text>\n      <text>border:1px solid #ccc;</text>\n      <text>background-color: red;</text>\n      <text class=\"text-white\">this text color: #fff;</text>\n    </view>\n    <view :style=\"[stylePadding10, styleBgGreen, styleMargin10]\" :class=\"[classH200, classRounded, classBorder, classBorderRed]\">\n      <text>height:200px;</text>\n      <text>margin:10px;</text>\n      <text>padding:10px;</text>\n      <text>border-radius:8px;</text>\n      <text>border:1px solid #ccc;</text>\n      <text>border-color:red;</text>\n      <text>background-color: green;</text>\n      <text class=\"text-blue\">this text color: blue;</text>\n    </view>\n    <view :style=\"styleBgBlue\" :class=\"classPadding10\">\n      <text>padding:10px;</text>\n      <text>background-color: blue;</text>\n      <text class=\"text-red\">this text color: red;</text>\n    </view>\n    <button class=\"mt-10\" id=\"btn\" @click=\"toggleIsClassValid\">toggle isClassValid</button>\n  </view>\n</template>\n\n<script lang=\"uts\">\nexport default {\n  data() {\n    return {\n      styleW200: new Map<string, string>([['width', '200px']]),\n      styleH200: new Map<string, string>([['height', '200px']]),\n      stylePadding10: new Map<string, string>([['padding', '10px']]),\n      styleMargin10: new Map<string, string>([['margin', '10px']]),\n      styleRounded: new Map<string, string>([['border-radius', '8px']]),\n      styleBorder: new Map<string, string>([['border', '1px solid #ccc']]),\n      styleBorderRed: new Map<string, string>([['border-color', 'red']]),\n      styleBorderBlue: new Map<string, string>([['border-color', 'blue']]),\n      styleBorderGreen: new Map<string, string>([['border-color', 'green']]),\n      styleBgGreen: new Map<string, string>([['background-color', 'green']]),\n      styleBgBlue: new Map<string, string>([['background-color', 'blue']]),\n      styleBgRed: new Map<string, string>([['background-color', 'red']]),\n      styleTextWhite: new Map<string, string>([['color', '#fff']]),\n      styleTextBlack: new Map<string, string>([['color', '#000']]),\n      styleTextRed: new Map<string, string>([['color', 'red']]),\n      styleTextBlue: new Map<string, string>([['color', 'blue']]),\n      styleTextGreen: new Map<string, string>([['color', 'green']]),\n      isClassValid: true,\n      classW200: new Map<string, boolean>([['w-200', true]]),\n      classH200: new Map<string, boolean>([['h-200', true]]),\n      classPadding10: new Map<string, boolean>([['padding-10', true]]),\n      classMargin10: new Map<string, boolean>([['margin-10', true]]),\n      classRounded: new Map<string, boolean>([['rounded', true]]),\n      classBorder: new Map<string, boolean>([['border', true]]),\n      classBorderRed: new Map<string, boolean>([['border-red', true]]),\n      classBorderBlue: new Map<string, boolean>([['border-blue', true]]),\n      classBorderGreen: new Map<string, boolean>([['border-green', true]]),\n      classBgGreen: new Map<string, boolean>([['bg-green', true]]),\n      classBgBlue: new Map<string, boolean>([['bg-blue', true]]),\n      classBgRed: new Map<string, boolean>([['bg-red', true]]),\n      classTextWhite: new Map<string, boolean>([['text-white', true]]),\n      classTextBlack: new Map<string, boolean>([['text-black', true]]),\n      classTextRed: new Map<string, boolean>([['text-red', true]]),\n      classTextBlue: new Map<string, boolean>([['text-blue', true]]),\n      classTextGreen: new Map<string, boolean>([['text-green', true]])\n    }\n  },\n  methods: {\n    toggleIsClassValid() {\n      this.isClassValid = !this.isClassValid\n      this.classW200 = new Map<string, boolean>([['w-200', this.isClassValid]])\n      this.classH200 = new Map<string, boolean>([['h-200', this.isClassValid]])\n      this.classPadding10 = new Map<string, boolean>([['padding-10', this.isClassValid]])\n      this.classMargin10 = new Map<string, boolean>([['margin-10', this.isClassValid]])\n      this.classRounded = new Map<string, boolean>([['rounded', this.isClassValid]])\n      this.classBorder = new Map<string, boolean>([['border', this.isClassValid]])\n      this.classBorderRed = new Map<string, boolean>([['border-red', this.isClassValid]])\n      this.classBorderBlue = new Map<string, boolean>([['border-blue', this.isClassValid]])\n      this.classBorderGreen = new Map<string, boolean>([['border-green', this.isClassValid]])\n      this.classBgGreen = new Map<string, boolean>([['bg-green', this.isClassValid]])\n      this.classBgBlue = new Map<string, boolean>([['bg-blue', this.isClassValid]])\n      this.classBgRed = new Map<string, boolean>([['bg-red', this.isClassValid]])\n      this.classTextWhite = new Map<string, boolean>([['text-white', this.isClassValid]])\n      this.classTextBlack = new Map<string, boolean>([['text-black', this.isClassValid]])\n      this.classTextRed = new Map<string, boolean>([['text-red', this.isClassValid]])\n      this.classTextBlue = new Map<string, boolean>([['text-blue', this.isClassValid]])\n      this.classTextGreen = new Map<string, boolean>([['text-green', this.isClassValid]])\n    }\n  }\n}\n</script>\n\n<style>\n.w-200 {\n  width: 200px;\n}\n\n.h-200 {\n  height: 200px;\n}\n\n.padding-10 {\n  padding: 10px;\n}\n\n.margin-10 {\n  margin: 10px;\n}\n\n.rounded {\n  border-radius: 8px;\n}\n\n.border {\n  border: 1px solid #ccc;\n}\n\n.border-red {\n  border-color: red;\n}\n\n.border-green {\n  border-color: green;\n}\n\n.border-blue {\n  border-color: blue;\n}\n\n.bg-green {\n  background-color: green;\n}\n\n.bg-red {\n  background-color: red;\n}\n\n.bg-blue {\n  background-color: blue;\n}\n\n.text-white {\n  color: #fff;\n}\n\n.text-black {\n  color: #000;\n}\n\n.text-green {\n  color: green;\n}\n\n.text-red {\n  color: red;\n}\n\n.text-blue {\n  color: blue;\n}\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/built-in/special-elements/template/template-map-style-options"},"special-elements_template_template-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/special-elements/template/template-options.uvue","code":"```vue\n<template>\n  <view class=\"page\">\n    <template v-if=\"dataInfo.isShow\">\n      <text id=\"title\">{{ title }}</text>\n    </template>\n    <template v-else>\n      <text>隐藏标题时显示</text>\n    </template>\n    <button id=\"show-botton\" @click=\"handleShow\">{{ dataInfo.isShow ? '点击隐藏' : '点击显示' }}</button>\n    <template v-for=\"(item, index) in list\" :key=\"index\">\n      <text :class=\"'item'\">{{ index + 1 }}.{{ item.name }}</text>\n    </template>\n    <button @click=\"goMapStyle\">跳转绑定 Map 类型 style 页面</button>\n  </view>\n</template>\n\n<script lang='uts'>\ntype DataInfo = {\n  isShow: boolean\n}\ntype objType = {\n  name : string\n}\nexport default {\n  data() {\n    return {\n      title: \"hello\",\n      dataInfo: {\n        isShow: false,\n      } as DataInfo,\n      list: [{\n        name: 'foo1'\n      },\n      {\n        name: 'foo2'\n      }\n      ] as objType[]\n    }\n  },\n  methods: {\n    handleShow() {\n      this.dataInfo.isShow = !this.dataInfo.isShow\n    },\n    goMapStyle() {\n      uni.navigateTo({ url: '/pages/built-in/special-elements/template/template-map-style-options' })\n    }\n  }\n}\n</script>\n\n<style>\n.item {\n  margin: 15px;\n  padding: 4px 8px;\n  border: #eee solid 1px;\n}\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/built-in/special-elements/template/template-options"}},"E_reactivity":{"advanced_custom-ref_custom-ref":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/advanced/custom-ref/custom-ref.uvue","code":"```vue\n<template>\r\n  <view class=\"page\">\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>state.count:</text>\r\n      <text id=\"state-count\">{{ state['count'] }}</text>\r\n    </view>\r\n    <button class=\"mb-10 increment-btn\" @click=\"increment\">\r\n      increment state.count\r\n    </button>\r\n    <button class=\"mb-10 trigger-ref-btn\" @click=\"triggerRefState\">\r\n      triggerRef state\r\n    </button>\r\n  </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst useCustomRef = (value : UTSJSONObject) : Ref<UTSJSONObject> => {\r\n  // @ts-ignore\r\n  return customRef<UTSJSONObject>((track, trigger) => {\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    }\r\n  })\r\n}\r\n\r\nconst state = useCustomRef({ count: 0 })\r\n\n\r\nconst increment = () => {\r\n  state.value['count'] = (state.value['count'] as number) + 1\r\n}\r\nconst triggerRefState = () => {\r\n  triggerRef(state)\r\n}\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/advanced/custom-ref/custom-ref"},"advanced_effect-scope_effect-scope":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/advanced/effect-scope/effect-scope.uvue","code":"```vue\n<template>\r\n  <view class=\"page\">\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>counter:</text>\r\n      <text id=\"counter\">{{ counter }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>watch counter result:</text>\r\n      <text id=\"watch-counter-res\">{{ watchCounterRes }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>watchEffect counter result:</text>\r\n      <text id=\"watch-effect-counter-res\">{{ watchEffectCounterRes }}</text>\r\n    </view>\r\n    <button\r\n      id=\"increment-counter-btn\"\r\n      class=\"mt-10\"\r\n      @click=\"\r\n        () => {\r\n          counter++;\r\n        }\r\n      \">\r\n      increment counter\r\n    </button>\r\n    <button id=\"stop-effect-scope-btn\" class=\"mt-10\" @click=\"stopEffectScope\">\r\n      stop effect scope\r\n    </button>\r\n  </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst scope = effectScope()\r\n\r\nconst counter = ref(0)\r\n\r\nconst watchCounterRes = ref('')\r\n\r\nconst watchEffectCounterRes = ref('')\r\n\r\nscope.run(() => {\r\n  watch(counter, (newVal : number, oldVal : number) => {\r\n    watchCounterRes.value = `newVal: ${newVal}, oldVal: ${oldVal}`\r\n  })\r\n\r\n  watchEffect(() => {\r\n    watchEffectCounterRes.value = `counter: ${counter.value}`\r\n  })\r\n})\r\n\r\nconst stopEffectScope = () => scope.stop()\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/advanced/effect-scope/effect-scope"},"advanced_get-current-scope_get-current-scope":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/advanced/get-current-scope/get-current-scope.uvue","code":"```vue\n<template>\n  <view class=\"page\">\n    <view class=\"flex justify-between flex-row mb-10\">\n      <text>hasCurrentScope:</text>\n      <text id=\"has-current-scope\">{{ hasCurrentScope }}</text>\n    </view>\n    <button id=\"create-scope-btn\" class=\"mt-10\" @click=\"createScope\">\n      create scope\n    </button>\n  </view>\n</template>\n\n<script setup lang=\"uts\">\nconst hasCurrentScope = ref(false);\n\nconst createScope = () => {\n  const scope = effectScope();\n  scope.run(() => {\n    hasCurrentScope.value = getCurrentScope() !== null;\n  });\n};\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/advanced/get-current-scope/get-current-scope"},"advanced_mark-raw_mark-raw":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/advanced/mark-raw/mark-raw.uvue","code":"```vue\n <template><view class=\"page\">markRaw 暂不支持</view></template>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/advanced/mark-raw/mark-raw"},"advanced_on-scope-dispose_on-scope-dispose":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/advanced/on-scope-dispose/on-scope-dispose.uvue","code":"```vue\n<template>\r\n  <view class=\"page\">\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>hasCurrentScope:</text>\r\n      <text id=\"has-current-scope\">{{ hasCurrentScope }}</text>\r\n    </view>\r\n    <button id=\"create-scope-btn\" class=\"mt-10\" @click=\"createScope\">\r\n      create scope\r\n    </button>\r\n    <button id=\"stop-scope-btn\" class=\"mt-10\" @click=\"stopScope\">\r\n      stop scope\r\n    </button>\r\n  </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst hasCurrentScope = ref(false)\r\n\r\nlet scope = null as EffectScope | null\r\n\r\nconst createScope = () => {\r\n  scope = effectScope();\r\n  (scope as EffectScope).run(() => {\r\n    hasCurrentScope.value = getCurrentScope() != null\r\n    onScopeDispose(() => {\r\n      hasCurrentScope.value = getCurrentScope() != null\r\n    })\r\n  })\r\n}\r\n\r\nconst stopScope = () => {\r\n  if (scope !== null) {\r\n    (scope as EffectScope).stop()\r\n  }\r\n}\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/advanced/on-scope-dispose/on-scope-dispose"},"advanced_shallow-reactive_shallow-reactive":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/advanced/shallow-reactive/shallow-reactive.uvue","code":"```vue\n<template>\r\n  <view class=\"page\">\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>state.count:</text>\r\n      <text id=\"state-count\" :data-count=\"state.count\">{{ state.count }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>state.nested.count:</text>\r\n      <text id=\"state-nested-count\">{{ state.nested.count }}</text>\r\n    </view>\r\n    <button\n      id=\"increment-state-count-btn\"\r\n      class=\"mb-10\"\r\n      @click=\"incrementStateCount\">\r\n      increment state.count\r\n    </button>\r\n    <button\r\n      id=\"increment-state-nested-count-btn\"\r\n      @click=\"incrementStateNestedCount\">\r\n      increment state.nested.count\r\n    </button>\r\n  </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\ntype StateNested = {\r\n  count : number\r\n}\r\ntype State = {\r\n  count : number,\r\n  nested : StateNested\r\n}\n// 可通过泛型指定类型\r\nconst state = shallowReactive<State>({\r\n  count: 0,\r\n  nested: {\r\n    count: 0\r\n  }\r\n})\r\n\r\nconst incrementStateCount = () => {\r\n  state.count++\r\n}\r\n\r\nconst incrementStateNestedCount = () => {\r\n  state.nested.count++\r\n}\r\n\r\ndefineExpose({\r\n  state\r\n})\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/advanced/shallow-reactive/shallow-reactive"},"advanced_shallow-readonly_shallow-readonly":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/advanced/shallow-readonly/shallow-readonly.uvue","code":"```vue\n<template>\r\n  <view :key=\"pageKey\" class=\"page\">\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>state.count:</text>\r\n      <text id=\"state-count\">{{ state.count }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>state.nested.count:</text>\r\n      <text id=\"state-nested-count\">{{ state.nested.count }}</text>\r\n    </view>\r\n    <button\r\n      id=\"increment-state-count-btn\"\r\n      class=\"mb-10\"\r\n      @click=\"incrementStateCount\">\r\n      increment state.count\r\n    </button>\r\n    <button\r\n      id=\"increment-state-nested-count-btn\"\r\n      class=\"mb-10\"\r\n      @click=\"incrementStateNestedCount\">\r\n      increment state.nested.count\r\n    </button>\r\n    <button id=\"update-page-render-btn\" @click=\"updatePageRender\">\r\n      update page render\r\n    </button>\r\n  </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nlet pageKey = ref<number>(0)\r\n\r\ntype StateNested = {\r\n  count : number\r\n}\r\ntype State = {\r\n  count : number,\r\n  nested : StateNested\r\n}\n// 可通过泛型指定类型\r\nconst state = shallowReadonly<State>({\r\n  count: 0,\r\n  nested: {\r\n    count: 0\r\n  }\r\n})\r\n\r\n// #ifdef APP\r\nconst incrementStateCount = () => {\r\n  state.count++\r\n}\r\n\r\nconst incrementStateNestedCount = () => {\r\n  state.nested.count++\r\n}\r\n// #endif\r\n\r\nconst updatePageRender = () => {\r\n  pageKey.value = Date.now()\r\n}\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/advanced/shallow-readonly/shallow-readonly"},"advanced_shallow-ref_shallow-ref":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/advanced/shallow-ref/shallow-ref.uvue","code":"```vue\n<template>\r\n  <view class=\"page\">\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>state.count:</text>\r\n      <text id=\"state-count\">{{ state.count }}</text>\r\n    </view>\r\n    <button\n      id=\"increment-state-count-btn\"\r\n      class=\"mb-10\"\r\n      @click=\"incrementStateCount\">\r\n      increment state.count\r\n    </button>\r\n    <button id=\"update-state-btn\" @click=\"updateState\">update state</button>\r\n  </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\ntype State = {\r\n  count: number\r\n}\r\n// 可通过泛型指定类型\r\nconst state = shallowRef<State>({\r\n  count: 0\r\n})\r\n\r\nconst incrementStateCount = () => {\r\n  state.value.count++\r\n}\r\n\r\nconst updateState = () => {\r\n  state.value = { count: state.value.count } as State\r\n}\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/advanced/shallow-ref/shallow-ref"},"advanced_to-raw_to-raw":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/advanced/to-raw/to-raw.uvue","code":"```vue\n<template>\r\n  <view class=\"page\">\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>check toRaw ref:</text>\r\n      <text id=\"check-to-raw-ref\">{{ checkToRawRef }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>check toRaw reactive:</text>\r\n      <text id=\"check-to-raw-reactive\">{{ checkToRawReactive }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>check toRaw readonly:</text>\r\n      <text id=\"check-to-raw-readonly\">{{ checkToRawReadonly }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>check toRaw shallowReactive:</text>\r\n      <text id=\"check-to-raw-shallow-reactive\">{{\r\n        checkToRawShallowReactive\r\n      }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>check toRaw shallowReadonly:</text>\r\n      <text id=\"check-to-raw-shallow-readonly\">{{\r\n        checkToRawShallowReadonly\r\n      }}</text>\r\n    </view>\r\n  </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst obj = {}\r\n\r\nconst refObj = ref(obj);\r\nconst checkToRawRef = toRaw<UTSJSONObject>(refObj) === obj;\r\n\r\nconst reactiveObj = reactive(obj);\r\nconst checkToRawReactive = toRaw<UTSJSONObject>(reactiveObj) === obj;\r\n\r\nconst readonlyObj = readonly(obj);\r\nconst checkToRawReadonly = toRaw<UTSJSONObject>(readonlyObj) === obj;\r\n\r\nconst shallowReactiveObj = shallowReactive(obj);\r\nconst checkToRawShallowReactive = toRaw<UTSJSONObject>(shallowReactiveObj) === obj;\r\n\r\nconst shallowReadonlyObj = shallowReadonly(obj);\r\nconst checkToRawShallowReadonly = toRaw<UTSJSONObject>(shallowReadonlyObj) === obj;\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/advanced/to-raw/to-raw"},"advanced_trigger-ref_trigger-ref":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/advanced/trigger-ref/trigger-ref.uvue","code":"```vue\n<template>\r\n  <view class=\"page\">\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>state.count:</text>\r\n      <text id=\"state-count\">{{ state.count }}</text>\r\n    </view>\r\n    <button\r\n      id=\"increment-state-count-btn\"\r\n      class=\"mb-10\"\r\n      @click=\"incrementStateCount\">\r\n      increment state.count\r\n    </button>\r\n    <button id=\"trigger-ref-state-btn\" @click=\"triggerRefState\">\r\n      trigger state\r\n    </button>\r\n  </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\ntype State = {\r\n  count: number\r\n}\r\nconst state = shallowRef({\r\n  count: 0\r\n} as State)\r\n\r\nconst incrementStateCount = () => {\r\n  state.value.count++\r\n}\r\n\r\nconst triggerRefState = () => {\r\n  triggerRef(state)\r\n}\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/advanced/trigger-ref/trigger-ref"},"core_computed_computed-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/core/computed/computed-composition.uvue","code":"```vue\n<template>\r\n  <view class=\"page\">\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>count:</text>\r\n      <text id=\"count\">{{ count }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>computed double count:</text>\r\n      <text id=\"double-count\">{{ doubleCount }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>obj.arr:</text>\r\n      <text id=\"obj-arr\">{{ JSON.stringify(obj.arr) }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>computed obj.arr.length:</text>\r\n      <text id=\"obj-arr-len\">{{ objArrLen }}</text>\r\n    </view>\n    <view class=\"flex justify-between flex-row mb-10\">\n        <text>computed stateText(1):</text>\n        <text id=\"computed-with-argument\">{{ stateText(1) }}</text>\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}\n\nconst stateText = computed(() => {\n  return (state: number) => {\n    const stateArr = ['未审核', '审核中', '审核通过']\n    return stateArr[state]\n  }\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>\n    <view class=\"flex justify-between flex-row mb-10\">\n        <text>computed stateText(1):</text>\n        <text id=\"computed-with-argument\">{{ stateText(1) }}</text>\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    },\n    stateText() {\n      return (state: number) => {\n        const stateArr = ['未审核', '审核中', '审核通过']\n        return stateArr[state]\n      }\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        <view class=\"flex justify-between flex-row mb-10\">\r\n            <text>count1:</text>\r\n            <text id=\"count1\">{{ count1 }}</text>\r\n        </view>\r\n        <view class=\"flex justify-between flex-row mb-10\">\r\n            <text>obj1.a.b.c:</text>\r\n            <text id=\"obj1-a-b-c\">{{ obj1.getString('a.b.c') }}</text>\r\n        </view>\r\n        <view class=\"flex justify-between flex-row mb-10\">\r\n            <text>arr1(spread):</text>\r\n            <text id=\"arr1\">{{ JSON.stringify(arr1) }}</text>\r\n        </view>\r\n        <button class='mb-10' id=\"update-count-btn\" @click=\"updateCount\">update count</button>\r\n        <button class='mb-10' id=\"update-obj-str-btn\" @click=\"updateObjStr\">update obj.str</button>\r\n        <button class='mb-10' id=\"update-obj-num-btn\" @click=\"updateObjNum\">update obj.num</button>\r\n        <button class='mb-10' id=\"update-obj-arr-btn\" @click=\"updateObjArr\">update obj.arr</button>\r\n        <button class='mb-10' id=\"update-obj1-a-b-c-btn\" @click=\"updateObj1_A_B_C\">update obj1.a.b.c</button>\r\n        <button class='mb-10' id=\"update-arr1-btn\" @click=\"updateArr1(false)\">update arr1 without reactive</button>\r\n        <button class='mb-10' id=\"update-arr1-reactive-btn\" @click=\"updateArr1(true)\">update arr1 with reactive</button>\r\n    </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n    const count = ref(0)\r\n\r\n    // TODO: 待支持后补充泛型示例\r\n    const obj = reactive({\r\n        str: 'default str',\r\n        num: count,\r\n        arr: ['a', 'b', 'c']\r\n    })\r\n\r\n    const updateObjStr = () => {\r\n        obj['str'] = 'new str';\r\n    }\r\n\r\n    const updateObjNum = () => {\r\n        obj['num'] = (obj['num'] as number) + 1\r\n    }\r\n\r\n    const updateCount = () => {\r\n        count.value++\r\n    }\r\n\r\n    const updateObjArr = () => {\r\n        (obj['arr'] as string[]).push('d')\r\n    }\r\n\r\n    const obj1 = reactive({\r\n        a: { b: { c: 'c' } }\r\n    })\r\n\r\n    const count1 = ref(0)\r\n    watchEffect(() => {\r\n        count1.value++\r\n        // 测试getString等keyPath触发依赖收集\r\n        obj1.getString(\"a.b.c\")\r\n    })\r\n    function updateObj1_A_B_C() {\r\n        ((obj1[\"a\"] as UTSJSONObject)[\"b\"] as UTSJSONObject)[\"c\"] = \"c1-\" + Date.now()\r\n    }\r\n    const arr1 = ref<number[]>([])\r\n    function test(...args : number[]) {\r\n        arr1.value = args\r\n    }\r\n    function updateArr1(isReactive : boolean) {\r\n        if (isReactive) {\r\n            test(...reactive([4, 5, 6]))\r\n        } else {\r\n            test(...[1, 2, 3])\r\n        }\r\n    }\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/core/reactive/reactive"},"core_readonly_readonly":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/core/readonly/readonly.uvue","code":"```vue\n<template>\r\n  <view class=\"page\">\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>data.str:</text>\r\n      <text id=\"data-str\">{{ data.str }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>data.num:</text>\r\n      <text id=\"data-num\">{{ data.num }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>data.arr:</text>\r\n      <text id=\"data-arr\">{{ JSON.stringify(data.arr) }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>readonly data.str:</text>\r\n      <text id=\"readonly-data-str\">{{ readonlyData.str }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>readonly data.num:</text>\r\n      <text id=\"readonly-data-num\">{{ readonlyData.num }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>readonly data.arr:</text>\r\n      <text id=\"readonly-data-arr\">{{ JSON.stringify(readonlyData.arr) }}</text>\r\n    </view>\r\n\r\n    <button id=\"update-data-btn\" class=\"mb-10\" @click=\"updateData\">\r\n      update data\r\n    </button>\r\n    <button id=\"update-readonly-data-btn\" @click=\"updateReadonlyData\">\r\n      update readonly data\r\n    </button>\r\n  </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\ntype Data = {\r\n  str : string,\r\n  num : number,\r\n  arr : string[]\r\n}\r\n// 可通过泛型指定类型\r\nconst data = reactive<Data>({\r\n  str: 'default str',\r\n  num: 0,\r\n  arr: ['a', 'b', 'c']\r\n})\r\n// 可通过泛型指定类型\r\nconst readonlyData = readonly<Data>(data)\r\n\r\nconst updateData = () => {\r\n  data.str = 'new str'\r\n  data.num++\r\n  data.arr.push('d')\r\n}\r\n\r\nconst updateReadonlyData = () => {\n  readonlyData.str = 'new readonly str'\n  readonlyData.num++\n  readonlyData.arr.push('e')\n}\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/core/readonly/readonly"},"core_ref_ref":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/core/ref/ref.uvue","code":"```vue\n<template>\r\n  <view class=\"page\">\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>count:</text>\r\n      <text id=\"count\">{{ count }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>str:</text>\r\n      <text id=\"str\">{{ str }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>bool:</text>\r\n      <text id=\"bool\">{{ bool }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>arr:</text>\r\n      <text id=\"arr\">{{ JSON.stringify(arr) }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>counter.count:</text>\r\n      <text id=\"counter-count\">{{ counter.count }}</text>\r\n    </view>\n    <view class=\"flex justify-between flex-row mb-10\">\n      <text>counters.length:</text>\n      <text id=\"counters-count\">{{ counters.length }}</text>\n    </view>\r\n    <button class='mb-10' id=\"change-count-btn\" @click=\"changeCount\">change count</button>\r\n    <button class='mb-10' id='change-str-btn' @click='changeStr'>change str</button>\r\n    <button class='mb-10' id='change-bool-btn' @click='changeBool'>change bool</button>\r\n    <button class='mb-10' id='change-arr-btn' @click='changeArr'>change arr</button>\r\n    <button class='mb-10' id='change-counter-btn' @click='changeCounter'>change counter</button>\n    <button class='mb-10' id='change-counters-btn' @click='changeCounters'>change counters</button>\r\n  </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n  // 基础数据类型可自动推导类型\r\n  const count = ref(0)\r\n  const str = ref('default str')\r\n  const bool = ref(false)\r\n\r\n  // 可通过泛型指定类型\r\n  const arr = ref<number[]>([1, 2, 3])\r\n  type Counter = {\r\n    count : number\r\n  }\r\n  // 可通过泛型指定类型\r\n  const counter = ref<Counter>({\r\n    count: 0\r\n  })\n  \n  const counters = ref<Counter[]>([])\r\n\r\n  const changeCount = () => {\r\n    count.value++\r\n  }\r\n  const changeStr = () => {\r\n    str.value = 'new str'\r\n  }\r\n  const changeBool = () => {\r\n    bool.value = !bool.value\r\n  }\r\n  const changeArr = () => {\r\n    arr.value.push(arr.value.length + 1)\r\n  }\r\n  const changeCounter = () => {\r\n    counter.value.count++\r\n  }\n  const changeCounters = () => {\n    counters.value.push({ count: 0 })\n  }\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/core/ref/ref"},"core_watch_watch-composition":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/core/watch/watch-composition.uvue","code":"```vue\n<template>\r\n  <!-- #ifdef APP -->\r\n  <scroll-view style=\"flex: 1; padding-bottom: 20px\">\r\n    <!-- #endif -->\r\n    <view class=\"page\">\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>count:</text>\r\n        <text id=\"count\" ref=\"countRef\">{{ count }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between mb-10\">\r\n        <text>watch count result:</text>\r\n        <text id=\"watch-count-res\">{{ watchCountRes }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>watch count track number:</text>\r\n        <text id=\"watch-count-track-num\">{{ watchCountTrackNum }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between mb-10\">\r\n        <text>watch count cleanup number:</text>\r\n        <text id=\"watch-count-cleanup-res\">{{ watchCountCleanupRes }}</text>\r\n      </view>\r\n\r\n      <button class=\"increment-btn mb-10\" @click=\"increment\">increment</button>\r\n      <button class=\"stop-watch-count-btn mb-10\" @click=\"triggerStopWatchCount\">\r\n        stop watch count\r\n      </button>\r\n\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>obj.str:</text>\r\n        <text id=\"obj-str\" ref=\"objStrRef\">{{ obj.str }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>watch obj.str trigger number:</text>\r\n        <text id=\"watch-obj-str-trigger-num\">{{ watchObjStrTriggerNum }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>obj.num:</text>\r\n        <text id=\"obj-num\">{{ obj.num }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>obj.bool:</text>\r\n        <text id=\"obj-bool\" ref=\"objBoolRef\">{{ obj.bool }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>obj.arr:</text>\r\n        <text id=\"obj-arr\" ref=\"objArrRef\">{{ JSON.stringify(obj.arr) }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between mb-10\">\r\n        <text>watch obj result:</text>\r\n        <text id=\"watch-obj-res\">{{ watchObjRes }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between mb-10\">\r\n        <text>watch obj.str result:</text>\r\n        <text id=\"watch-obj-str-res\">{{ watchObjStrRes }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between mb-10\">\r\n        <text>watch obj.bool result:</text>\r\n        <text id=\"watch-obj-bool-res\">{{ watchObjBoolRes }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between mb-10\">\r\n        <text>watch obj.arr result:</text>\r\n        <text id=\"watch-obj-arr-res\">{{ watchObjArrRes }}</text>\r\n      </view>\r\n\r\n      <button class=\"update-obj-btn mb-10\" @click=\"updateObj\">\r\n        update obj\r\n      </button>\r\n\r\n      <view class=\"flex justify-between mb-10\">\r\n        <text>watch count and obj.num result:</text>\r\n        <text id=\"watch-count-obj-num-res\">{{ watchCountAndObjNumRes }}</text>\r\n      </view>\r\n    </view>\r\n    <!-- #ifdef APP -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\ntype Obj = {\r\n  num : number,\r\n  str : string,\r\n  bool : boolean,\r\n  arr : number[]\r\n}\r\n\r\nconst countRef = ref<UniTextElement | null>(null)\r\nconst count = ref(0)\r\nconst watchCountRes = ref('')\r\nconst watchCountCleanupRes = ref('')\r\nconst watchCountTrackNum = ref(0)\r\n\r\nconst stopWatchCount = watch(count, (count : number, prevCount : number, onCleanup : OnCleanup) => {\r\n  // #ifdef APP\r\n  watchCountRes.value = `count: ${count}, prevCount: ${prevCount}, count ref text (flush sync): ${countRef.value!.value}`\r\n  // #endif\r\n  // #ifdef WEB\r\n  watchCountRes.value = `count: ${count}, prevCount: ${prevCount}, count ref text (flush sync): ${(countRef.value!.childNodes[0] as HTMLElement).innerText}`\r\n  // #endif\r\n  const cancel = () => {\r\n    watchCountCleanupRes.value = `watch count cleanup: ${count}`\r\n  }\r\n  onCleanup(cancel)\r\n}, {\r\n  // 侦听器在响应式依赖改变时立即触发\r\n  flush: 'sync',\r\n  // 响应属性或引用作为依赖项被跟踪时调用\r\n  onTrack(event : DebuggerEvent) {\r\n    if (event.type === 'get') {\r\n      watchCountTrackNum.value++\r\n    }\r\n  }\r\n  // TODO: vue>3.4.15 开始 监听函数、onTrack、onTrigger 同时存在修改响应式数据时,会报错 Maximum call stack size exceeded\r\n  // 所以将 onTrack 与 onTrigger 调整到两个 watch 里\r\n})\r\n\r\nconst triggerStopWatchCount = () => stopWatchCount()\r\n\r\nconst increment = () => {\r\n  count.value++\r\n}\r\n\r\nconst obj = reactive({\r\n  num: 0,\r\n  str: 'num: 0',\r\n  bool: false,\r\n  arr: [0]\r\n} as Obj)\r\n\r\n// immediate: true 第一次触发, 旧值应该是 undefined, 现在 app 是初始值\r\nconst watchObjRes = ref('')\r\nwatch(obj, (obj : Obj, prevObj ?: Obj) => {\r\n  watchObjRes.value = `obj: ${JSON.stringify(obj)}, prevObj: ${JSON.stringify(prevObj)}`\r\n}, { immediate: true })\r\n\r\nconst objStrRef = ref<UniTextElement | null>(null)\r\nconst watchObjStrRes = ref('')\r\nconst watchObjStrTriggerNum = ref(0)\r\nwatch(() : string => obj.str, (str : string, prevStr : string) => {\r\n  // #ifdef APP\r\n  watchObjStrRes.value = `str: ${str}, prevStr: ${prevStr}, obj.str ref text (flush pre): ${objStrRef.value!.value}`\r\n  // #endif\r\n  // #ifdef WEB\r\n  watchObjStrRes.value = `str: ${str}, prevStr: ${prevStr}, obj.str ref text (flush pre): ${(objStrRef.value!.childNodes[0] as HTMLElement).innerText}`\r\n  // #endif\r\n}, {\r\n  // 侦听器在组件渲染之前触发\r\n  flush: 'pre',\r\n  // 侦听器回调被依赖项的变更触发时调用\r\n  onTrigger(event : DebuggerEvent) {\r\n    if (event.type === 'set') {\r\n      watchObjStrTriggerNum.value++\r\n    }\r\n  }\r\n})\r\n\r\nconst objBoolRef = ref<UniTextElement | null>(null)\r\nconst watchObjBoolRes = ref('')\r\nwatch(() : boolean => obj.bool, (bool : boolean, prevBool : boolean) => {\r\n  // #ifdef APP\r\n  watchObjBoolRes.value = `bool: ${bool}, prevBool: ${prevBool}, obj.bool ref text (flush post): ${objBoolRef.value!.value}`\r\n  // #endif\r\n  // #ifdef WEB\r\n  watchObjBoolRes.value = `bool: ${bool}, prevBool: ${prevBool}, obj.bool ref text (flush post): ${(objBoolRef.value!.childNodes[0] as HTMLElement).innerText}`\r\n  // #endif\r\n}, {\r\n  // 侦听器延迟到组件渲染之后触发\r\n  flush: 'post'\r\n})\r\n\r\n\r\nconst watchObjArrRes = ref('')\r\nwatch(() : number[] => obj.arr, (arr : number[], prevArr : number[]) => {\r\n  watchObjArrRes.value = `arr: ${JSON.stringify(arr)}, prevArr: ${JSON.stringify(prevArr)}`\r\n}, { deep: true })\r\n\r\nconst watchCountAndObjNumRes = ref('')\r\nwatch([count, () : number => obj.num], (state : number[], preState : number[]) => {\r\n  watchCountAndObjNumRes.value = `state: ${JSON.stringify(state)}, preState: ${JSON.stringify(preState)}`\r\n})\r\n\r\nconst updateObj = () => {\r\n  obj.num++\r\n  obj.str = `num: ${obj.num}`\r\n  obj.bool = !obj.bool\r\n  obj.arr.push(obj.num)\r\n}\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/core/watch/watch-composition"},"core_watch_watch-options":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/core/watch/watch-options.uvue","code":"```vue\n<template>\r\n  <!-- #ifdef APP -->\r\n  <scroll-view style=\"flex: 1; padding-bottom: 20px\">\r\n  <!-- #endif -->\r\n    <view class=\"page\">\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>count:</text>\r\n        <text id=\"count\" ref=\"countRef\">{{ count }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between mb-10\">\r\n        <text>watch count result:</text>\r\n        <text id=\"watch-count-res\">{{ watchCountRes }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>watch count track number:</text>\r\n        <text id=\"watch-count-track-num\">{{ watchCountTrackNum }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between mb-10\">\r\n        <text>watch count cleanup number:</text>\r\n        <text id=\"watch-count-cleanup-res\">{{ watchCountCleanupRes }}</text>\r\n      </view>\r\n\r\n      <button class=\"increment-btn mb-10\" @click=\"increment\">increment</button>\r\n      <button class=\"stop-watch-count-btn mb-10\" @click=\"triggerStopWatchCount\">\r\n        stop watch count\r\n      </button>\r\n\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>obj.str:</text>\r\n        <text id=\"obj-str\" ref=\"objStrRef\">{{ obj.str }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>watch obj.str trigger number:</text>\r\n        <text id=\"watch-obj-str-trigger-num\">{{ watchObjStrTriggerNum }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>obj.num:</text>\r\n        <text id=\"obj-num\">{{ obj.num }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>obj.bool:</text>\r\n        <text id=\"obj-bool\" ref=\"objBoolRef\">{{ obj.bool }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>obj.arr:</text>\r\n        <text id=\"obj-arr\" ref=\"objArrRef\">{{ JSON.stringify(obj.arr) }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between mb-10\">\r\n        <text>watch obj result:</text>\r\n        <text id=\"watch-obj-res\">{{ watchObjRes }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between mb-10\">\r\n        <text>watch obj.str result:</text>\r\n        <text id=\"watch-obj-str-res\">{{ watchObjStrRes }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between mb-10\">\r\n        <text>watch obj.bool result:</text>\r\n        <text id=\"watch-obj-bool-res\">{{ watchObjBoolRes }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between mb-10\">\r\n        <text>watch obj.arr result:</text>\r\n        <text id=\"watch-obj-arr-res\">{{ watchObjArrRes }}</text>\r\n      </view>\r\n\r\n      <button class=\"update-obj-btn mb-10\" @click=\"updateObj\">\r\n        update obj\r\n      </button>\r\n    </view>\r\n  <!-- #ifdef APP -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n<script lang=\"uts\">\r\n  type Obj = {\r\n    num : number,\r\n    str : string,\r\n    bool : boolean,\r\n    arr : number[]\r\n  }\r\n\r\n  export default {\r\n    data() {\r\n      return {\r\n        countRef: null as UniTextElement | null,\r\n        count: 0,\r\n        watchCountRes: '',\r\n        watchCountCleanupRes: '',\r\n        watchCountTrackNum: 0,\r\n        stopWatchCount: () => { },\r\n        obj: {\r\n          num: 0,\r\n          str: 'num: 0',\r\n          bool: false,\r\n          arr: [0]\r\n        } as Obj,\r\n        watchObjRes: '',\r\n        objStrRef: null as UniTextElement | null,\r\n        watchObjStrRes: '',\r\n        watchObjStrTriggerNum: 0,\r\n        objBoolRef: null as UniTextElement | null,\r\n        watchObjBoolRes: '',\r\n        watchObjArrRes: '',\r\n      }\r\n    },\r\n    onReady() {\r\n      // TODO: app-android this.$watch 返回类型不对\r\n      // watchCountTrackNum 各端表现也不一致\r\n      const self = this\r\n      // #ifdef APP\r\n      this.$watch('count',\r\n        (count : number, prevCount : number, onCleanup : OnCleanup) => {\r\n          this.watchCountRes = `count: ${count}, prevCount: ${prevCount}, count ref text (flush sync): ${(this.$refs['countRef'] as UniTextElement).value}`\r\n          const cancel = () => {\r\n            this.watchCountCleanupRes = `watch count cleanup: ${count}`\r\n          }\r\n          onCleanup(cancel)\r\n        },\r\n        {\r\n          // 侦听器在响应式依赖改变时立即触发\r\n          flush: 'sync',\r\n          // 响应属性或引用作为依赖项被跟踪时调用\r\n          onTrack(event : DebuggerEvent) {\r\n            if (event.type === 'get') {\r\n              self.watchCountTrackNum++\r\n            }\r\n          }\r\n          // TODO: vue>3.4.15 开始 监听函数、onTrack、onTrigger 同时存在修改响应式数据时,会报错 Maximum call stack size exceeded\r\n          // 所以将 onTrack 与 onTrigger 调整到两个 watch 里\r\n        })\r\n      // #endif\r\n      // #ifdef WEB\r\n      this.stopWatchCount = this.$watch(\r\n        'count',\r\n        (count : number, prevCount : number, onCleanup : OnCleanup) => {\r\n          this.watchCountRes = `count: ${count}, prevCount: ${prevCount}, count ref text (flush sync): ${(this.$refs['countRef'] as UniTextElement).childNodes[0].getAttribute('value')}`\r\n          const cancel = () => {\r\n            this.watchCountCleanupRes = `watch count cleanup: ${count}`\r\n          }\r\n          onCleanup(cancel)\r\n        },\r\n        {\r\n          // 侦听器在响应式依赖改变时立即触发\r\n          flush: 'sync',\r\n          // 响应属性或引用作为依赖项被跟踪时调用\r\n          onTrack(event : DebuggerEvent) {\r\n            if (event.type === 'get') {\r\n              self.watchCountTrackNum++\r\n            }\r\n          }\r\n          // TODO: vue>3.4.15 开始 监听函数、onTrack、onTrigger 同时存在修改响应式数据时,会报错 Maximum call stack size exceeded\r\n          // 所以将 onTrack 与 onTrigger 调整到两个 watch 里\r\n        })\r\n      // #endif\r\n    },\r\n    watch: {\r\n      obj: {\r\n        handler(obj : Obj, prevObj ?: Obj) {\r\n          if (prevObj == null) {\r\n            this.watchObjRes = `obj: {\"num\":${obj.num},\"str\":\"${obj.str}\",\"bool\":${obj.bool},\"arr\":${JSON.stringify(obj.arr)}}, prevObj: ${JSON.stringify(prevObj)}`\r\n          } else {\r\n            // #ifdef WEB\r\n            this.watchObjRes = `obj: {\"num\":${obj.num},\"str\":\"${obj.str}\",\"bool\":${obj.bool},\"arr\":${JSON.stringify(obj.arr)}}, prevObj: {\"num\":${prevObj?.num},\"str\":\"${prevObj?.str}\",\"bool\":${prevObj?.bool},\"arr\":${JSON.stringify(prevObj?.arr)}}`\r\n            // #endif\r\n            // #ifndef WEB\r\n            this.watchObjRes = `obj: {\"num\":${obj.num},\"str\":\"${obj.str}\",\"bool\":${obj.bool},\"arr\":${JSON.stringify(obj.arr)}}, prevObj: {\"num\":${prevObj.num},\"str\":\"${prevObj.str}\",\"bool\":${prevObj.bool},\"arr\":${JSON.stringify(prevObj.arr)}}`\r\n            // #endif\r\n          }\r\n        },\r\n        // immediate: true 第一次触发, 旧值应该是 undefined, 现在 app 是初始值\r\n        immediate: true,\r\n        deep: true\r\n      },\r\n      'obj.str': function (str : string, prevStr : string) {\r\n        // #ifdef APP\r\n        this.watchObjStrRes = `str: ${str}, prevStr: ${prevStr}, obj.str ref text (flush pre): ${(this.$refs['objStrRef'] as UniTextElement).value}`\r\n        // #endif\r\n        // #ifdef WEB\r\n        this.watchObjStrRes = `str: ${str}, prevStr: ${prevStr}, obj.str ref text (flush pre): ${(this.$refs.objStrRef as UniTextElement).childNodes[0].getAttribute('value')}`\r\n        // #endif\r\n      },\r\n      'obj.bool': {\r\n        handler: function (bool : boolean, prevBool : boolean) {\r\n          // #ifdef APP\r\n          this.watchObjBoolRes = `bool: ${bool}, prevBool: ${prevBool}, obj.bool ref text (flush post): ${(this.$refs['objBoolRef'] as UniTextElement).value}`\r\n          // #endif\r\n          // #ifdef WEB\r\n          this.watchObjBoolRes = `bool: ${bool}, prevBool: ${prevBool}, obj.bool ref text (flush post): ${(this.$refs.objBoolRef as UniTextElement).childNodes[0].getAttribute('value')}`\r\n          // #endif\r\n        },\r\n        // 侦听器延迟到组件渲染之后触发\r\n        flush: 'post',\r\n        deep: true\r\n      },\r\n      'obj.arr': {\r\n        handler: function (arr : number[], prevArr : number[]) {\r\n          this.watchObjArrRes = `arr: ${JSON.stringify(arr)}, prevArr: ${JSON.stringify(prevArr)}`\r\n        },\r\n        deep: true\r\n      }\r\n    },\r\n    methods: {\r\n      triggerStopWatchCount() {\r\n        // #ifdef WEB\r\n        this.stopWatchCount()\r\n        // #endif\r\n      },\r\n      increment() {\r\n        this.count++\r\n      },\r\n      updateObj() {\r\n        this.obj.num++\r\n        this.obj.str = `num: ${this.obj.num}`\r\n        this.obj.bool = !this.obj.bool\r\n        this.obj.arr.push(this.obj.num)\r\n      }\r\n    }\r\n  }\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/core/watch/watch-options"},"core_watch-effect_watch-effect":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/core/watch-effect/watch-effect.uvue","code":"```vue\n<template>\r\n  <!-- #ifdef APP -->\r\n  <scroll-view style=\"flex: 1; padding-bottom: 20px\">\r\n    <!-- #endif -->\r\n    <view class=\"page\">\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>count:</text>\r\n        <text id=\"count\" ref=\"countRef\">{{ count }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between mb-10\">\r\n        <text>watch count result:</text>\r\n        <text id=\"watch-count-res\">{{ watchCountRes }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>watch count track number:</text>\r\n        <text id=\"watch-count-track-num\">{{ watchCountTrackNum }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between mb-10\">\r\n        <text>watch count cleanup number:</text>\r\n        <text id=\"watch-count-cleanup-res\">{{ watchCountCleanupRes }}</text>\r\n      </view>\r\n\r\n      <button class=\"increment-btn mb-10\" @click=\"increment\">increment</button>\r\n      <button class=\"stop-watch-count-btn mb-10\" @click=\"triggerStopWatchCount\">\r\n        stop watch count\r\n      </button>\r\n\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>obj.str:</text>\r\n        <text id=\"obj-str\" ref=\"objStrRef\">{{ obj.str }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>watch obj.str trigger number:</text>\r\n        <text id=\"watch-obj-str-trigger-num\">{{ watchObjStrTriggerNum }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>obj.num:</text>\r\n        <text id=\"obj-num\">{{ obj.num }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>obj.bool:</text>\r\n        <text id=\"obj-bool\" ref=\"objBoolRef\">{{ obj.bool }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>obj.arr:</text>\r\n        <text id=\"obj-arr\" ref=\"objArrRef\">{{ JSON.stringify(obj.arr) }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between mb-10\">\r\n        <text>watch obj result:</text>\r\n        <text id=\"watch-obj-res\">{{ watchObjRes }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between mb-10\">\r\n        <text>watch obj.str result:</text>\r\n        <text id=\"watch-obj-str-res\">{{ watchObjStrRes }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between mb-10\">\r\n        <text>watch obj.bool result:</text>\r\n        <text id=\"watch-obj-bool-res\">{{ watchObjBoolRes }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between mb-10\">\r\n        <text>watch obj.arr result:</text>\r\n        <text id=\"watch-obj-arr-res\">{{ watchObjArrRes }}</text>\r\n      </view>\r\n\r\n      <button class=\"update-obj-btn mb-10\" @click=\"updateObj\">\r\n        update obj\r\n      </button>\r\n\r\n      <view class=\"flex justify-between mb-10\">\r\n        <text>watch count and obj.num result:</text>\r\n        <text id=\"watch-count-obj-num-res\">{{ watchCountAndObjNumRes }}</text>\r\n      </view>\r\n    </view>\r\n    <!-- #ifdef APP -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n<script setup lang='uts'>\r\n  type Obj = {\r\n    num : number,\r\n    str : string,\r\n    bool : boolean,\r\n    arr : number[]\r\n  }\r\n\r\n  const countRef = ref<UniTextElement | null>(null)\r\n  const count = ref(0)\r\n  const watchCountRes = ref('')\r\n  const watchCountCleanupRes = ref('')\r\n  const watchCountTrackNum = ref(0)\r\n\r\n  const stopWatchCount = watchEffect((onCleanup : OnCleanup) => {\r\n    if (countRef.value !== null) {\r\n      // #ifdef APP\r\n      watchCountRes.value = `count: ${count.value}, count ref text (flush sync): ${countRef.value!.value}`\r\n      // #endif\r\n      // #ifdef WEB\r\n      watchCountRes.value = `count: ${count.value}, count ref text (flush sync): ${(countRef.value!.childNodes[0] as HTMLElement).innerText}`\r\n      // #endif \r\n    } else {\r\n      watchCountRes.value = `count: ${count.value}, count ref text (flush sync): `\r\n    }\r\n    const cancel = () => {\r\n      watchCountCleanupRes.value = `watch count cleanup: ${count.value}`\r\n    }\r\n    onCleanup(cancel)\r\n  }, {\r\n    // 侦听器在响应式依赖改变时立即触发\r\n    flush: 'sync',\r\n    // 响应属性或引用作为依赖项被跟踪时调用\r\n    onTrack(event : DebuggerEvent) {\r\n      if (event.type === 'get') {\r\n        watchCountTrackNum.value++\r\n      }\r\n    },\r\n  })\r\n\r\n  const triggerStopWatchCount = () => stopWatchCount()\r\n\r\n  const increment = () => {\r\n    count.value++\r\n  }\r\n\r\n  const obj = reactive({\r\n    num: 0,\r\n    str: 'num: 0',\r\n    bool: false,\r\n    arr: [0]\r\n  } as Obj)\r\n\r\n  const watchObjRes = ref('')\r\n  watchEffect(() => {\r\n    watchObjRes.value = `obj: ${JSON.stringify(obj)}`\r\n  })\r\n\r\n  const objStrRef = ref<UniTextElement | null>(null)\r\n  const watchObjStrRes = ref('')\r\n  const watchObjStrTriggerNum = ref(0)\r\n  \r\n  watchEffect(() => {\r\n    if (objStrRef.value !== null) {\r\n      // #ifdef APP\r\n      watchObjStrRes.value = `str: ${obj.str}, obj.str ref text (flush pre): ${objStrRef.value!.value}`\r\n      // #endif\r\n      // #ifdef WEB\r\n      watchObjStrRes.value = `str: ${obj.str}, obj.str ref text (flush pre): ${(objStrRef.value!.childNodes[0] as HTMLElement).innerText}`\r\n      // #endif \r\n    } else {\r\n      watchObjStrRes.value = `str: ${obj.str}, obj.str ref text (flush pre): `\r\n    }\r\n  }, {\r\n    // 侦听器在组件渲染之前触发\r\n    flush: 'pre',\r\n    // 侦听器回调被依赖项的变更触发时调用\r\n    onTrigger(event : DebuggerEvent) {\r\n      if (event.type === 'set') {\r\n        watchObjStrTriggerNum.value++\r\n      }\r\n    }\r\n  })\r\n\r\n  const objBoolRef = ref<UniTextElement | null>(null)\r\n  const watchObjBoolRes = ref('')\r\n  watchEffect(() => {\r\n    if (objBoolRef.value !== null) {\r\n      // #ifdef APP\r\n      watchObjBoolRes.value = `bool: ${obj.bool}, obj.bool ref text (flush post): ${objBoolRef.value!.value}`\r\n      // #endif\r\n      // #ifdef WEB\r\n      watchObjBoolRes.value = `bool: ${obj.bool}, obj.bool ref text (flush post): ${(objBoolRef.value!.childNodes[0] as HTMLElement).innerText}`\r\n      // #endif \r\n    } else {\r\n      watchObjBoolRes.value = `bool: ${obj.bool}, obj.bool ref text (flush post): `\r\n    }\r\n  }, {\r\n    // 侦听器延迟到组件渲染之后触发\r\n    flush: 'post'\r\n  })\r\n\r\n\r\n  const watchObjArrRes = ref('')\r\n  watchEffect(() => {\r\n    watchObjArrRes.value = `arr: ${JSON.stringify(obj.arr)}`\r\n  })\r\n\r\n  const watchCountAndObjNumRes = ref('')\r\n  watchEffect(() => {\r\n    watchCountAndObjNumRes.value = `count: ${count.value}, obj.num: ${obj.num}`\r\n  })\r\n\r\n  const updateObj = () => {\r\n    obj.num++\r\n    obj.str = `num: ${obj.num}`\r\n    obj.bool = !obj.bool\r\n    obj.arr.push(obj.num)\r\n  }\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/core/watch-effect/watch-effect"},"core_watch-post-effect_watch-post-effect":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/core/watch-post-effect/watch-post-effect.uvue","code":"```vue\n<template>\r\n  <!-- #ifdef APP -->\r\n  <scroll-view style=\"flex: 1; padding-bottom: 20px\">\r\n    <!-- #endif -->\r\n    <view class=\"page\">\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>count:</text>\r\n        <text id=\"count\" ref=\"countRef\">{{ count }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between mb-10\">\r\n        <text>watch count result:</text>\r\n        <text id=\"watch-count-res\">{{ watchCountRes }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>watch count track number:</text>\r\n        <text id=\"watch-count-track-num\">{{ watchCountTrackNum }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between mb-10\">\r\n        <text>watch count cleanup number:</text>\r\n        <text id=\"watch-count-cleanup-res\">{{ watchCountCleanupRes }}</text>\r\n      </view>\r\n\r\n      <button class=\"increment-btn mb-10\" @click=\"increment\">increment</button>\r\n      <button class=\"stop-watch-count-btn mb-10\" @click=\"triggerStopWatchCount\">\r\n        stop watch count\r\n      </button>\r\n\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>obj.str:</text>\r\n        <text id=\"obj-str\" ref=\"objStrRef\">{{ obj.str }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>watch obj.str trigger number:</text>\r\n        <text id=\"watch-obj-str-trigger-num\">{{ watchObjStrTriggerNum }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>obj.num:</text>\r\n        <text id=\"obj-num\">{{ obj.num }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>obj.bool:</text>\r\n        <text id=\"obj-bool\" ref=\"objBoolRef\">{{ obj.bool }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>obj.arr:</text>\r\n        <text id=\"obj-arr\" ref=\"objArrRef\">{{ JSON.stringify(obj.arr) }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between mb-10\">\r\n        <text>watch obj result:</text>\r\n        <text id=\"watch-obj-res\">{{ watchObjRes }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between mb-10\">\r\n        <text>watch obj.str result:</text>\r\n        <text id=\"watch-obj-str-res\">{{ watchObjStrRes }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between mb-10\">\r\n        <text>watch obj.arr result:</text>\r\n        <text id=\"watch-obj-arr-res\">{{ watchObjArrRes }}</text>\r\n      </view>\r\n\r\n      <button class=\"update-obj-btn mb-10\" @click=\"updateObj\">\r\n        update obj\r\n      </button>\r\n\r\n      <view class=\"flex justify-between mb-10\">\r\n        <text>watch count and obj.num result:</text>\r\n        <text id=\"watch-count-obj-num-res\">{{ watchCountAndObjNumRes }}</text>\r\n      </view>\r\n    </view>\r\n    <!-- #ifdef APP -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n<script setup lang='uts'>\r\n  type Obj = {\r\n    num : number,\r\n    str : string,\r\n    bool : boolean,\r\n    arr : number[]\r\n  }\r\n\r\n  const countRef = ref<UniTextElement | null>(null)\r\n  const count = ref<number>(0)\r\n  const watchCountRes = ref('')\r\n  const watchCountCleanupRes = ref('')\r\n  const watchCountTrackNum = ref(0)\r\n\r\n  const stopWatchCount = watchPostEffect((onCleanup : OnCleanup) => {\r\n    if (countRef.value !== null) {\r\n      // #ifdef APP\r\n      watchCountRes.value = `count: ${count.value}, count ref text: ${countRef.value!.value}`\r\n      // #endif\r\n      // #ifdef WEB\r\n      watchCountRes.value = `count: ${count.value}, count ref text: ${(countRef.value!.childNodes[0] as HTMLElement).innerText}`\r\n      // #endif \r\n    } else {\r\n      watchCountRes.value = `count: ${count.value}, count ref text: `\r\n    }\r\n    const cancel = () => {\r\n      watchCountCleanupRes.value = `watch count cleanup: ${count.value}`\r\n    }\r\n    onCleanup(cancel)\r\n  },\r\n    {\r\n      // 响应属性或引用作为依赖项被跟踪时调用\r\n      onTrack(event : DebuggerEvent) {\r\n        if (event.type === 'get') {\r\n          watchCountTrackNum.value++\r\n        }\r\n      }\r\n    },\r\n  )\r\n\r\n  const triggerStopWatchCount = () => stopWatchCount()\r\n\r\n  const increment = () => {\r\n    count.value++\r\n  }\r\n\r\n  const obj = reactive({\r\n    num: 0,\r\n    str: 'num: 0',\r\n    bool: false,\r\n    arr: [0]\r\n  } as Obj)\r\n\r\n  const watchObjRes = ref('')\r\n  watchPostEffect(() => {\r\n    watchObjRes.value = `obj: {\"num\":${obj.num},\"str\":\"${obj.str}\",\"bool\":${obj.bool},\"arr\":${JSON.stringify(obj.arr)}}`\r\n  })\r\n\r\n  const objStrRef = ref<UniTextElement | null>(null)\r\n  const watchObjStrRes = ref('')\r\n  const watchObjStrTriggerNum = ref(0)\r\n  \r\n  watchPostEffect(() => {\r\n    if (objStrRef.value !== null) {\r\n      // #ifdef APP\r\n      watchObjStrRes.value = `str: ${obj.str}, obj.str ref text: ${objStrRef.value!.value}`\r\n      // #endif\r\n      // #ifdef WEB\r\n      watchObjStrRes.value = `str: ${obj.str}, obj.str ref text: ${(objStrRef.value!.childNodes[0] as HTMLElement).innerText}`\r\n      // #endif \r\n    } else {\r\n      watchObjStrRes.value = `str: ${obj.str}, obj.str ref text: `\r\n    }\r\n  },{\r\n    // 侦听器回调被依赖项的变更触发时调用\r\n    onTrigger(event : DebuggerEvent) {\r\n      if (event.type === 'set') {\r\n        watchObjStrTriggerNum.value++\r\n      }\r\n    }\r\n  })\r\n\r\n  const watchObjArrRes = ref('')\r\n  watchPostEffect(() => {\r\n    watchObjArrRes.value = `arr: ${JSON.stringify(obj.arr)}`\r\n  })\r\n\r\n  const watchCountAndObjNumRes = ref('')\r\n  watchPostEffect(() => {\r\n    watchCountAndObjNumRes.value = `count: ${count.value}, obj.num: ${obj.num}`\r\n  })\r\n\r\n  const updateObj = () => {\r\n    obj.num++\r\n    obj.str = `num: ${obj.num}`\r\n    obj.bool = !obj.bool\r\n    obj.arr.push(obj.num)\r\n  }\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/core/watch-post-effect/watch-post-effect"},"core_watch-sync-effect_watch-sync-effect":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/core/watch-sync-effect/watch-sync-effect.uvue","code":"```vue\n<template>\r\n  <!-- #ifdef APP -->\r\n  <scroll-view style=\"flex: 1; padding-bottom: 20px\">\r\n    <!-- #endif -->\r\n    <view class=\"page\">\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>count:</text>\r\n        <text id=\"count\" ref=\"countRef\">{{ count }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between mb-10\">\r\n        <text>watch count result:</text>\r\n        <text id=\"watch-count-res\">{{ watchCountRes }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>watch count track number:</text>\r\n        <text id=\"watch-count-track-num\">{{ watchCountTrackNum }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between mb-10\">\r\n        <text>watch count cleanup number:</text>\r\n        <text id=\"watch-count-cleanup-res\">{{ watchCountCleanupRes }}</text>\r\n      </view>\r\n\r\n      <button class=\"increment-btn mb-10\" @click=\"increment\">increment</button>\r\n      <button class=\"stop-watch-count-btn mb-10\" @click=\"triggerStopWatchCount\">\r\n        stop watch count\r\n      </button>\r\n\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>obj.str:</text>\r\n        <text id=\"obj-str\" ref=\"objStrRef\">{{ obj.str }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>watch obj.str trigger number:</text>\r\n        <text id=\"watch-obj-str-trigger-num\">{{ watchObjStrTriggerNum }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>obj.num:</text>\r\n        <text id=\"obj-num\">{{ obj.num }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>obj.bool:</text>\r\n        <text id=\"obj-bool\" ref=\"objBoolRef\">{{ obj.bool }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>obj.arr:</text>\r\n        <text id=\"obj-arr\" ref=\"objArrRef\">{{ JSON.stringify(obj.arr) }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between mb-10\">\r\n        <text>watch obj result:</text>\r\n        <text id=\"watch-obj-res\">{{ watchObjRes }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between mb-10\">\r\n        <text>watch obj.str result:</text>\r\n        <text id=\"watch-obj-str-res\">{{ watchObjStrRes }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between mb-10\">\r\n        <text>watch obj.arr result:</text>\r\n        <text id=\"watch-obj-arr-res\">{{ watchObjArrRes }}</text>\r\n      </view>\r\n\r\n      <button class=\"update-obj-btn mb-10\" @click=\"updateObj\">\r\n        update obj\r\n      </button>\r\n\r\n      <view class=\"flex justify-between mb-10\">\r\n        <text>watch count and obj.num result:</text>\r\n        <text id=\"watch-count-obj-num-res\">{{ watchCountAndObjNumRes }}</text>\r\n      </view>\r\n    </view>\r\n    <!-- #ifdef APP -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n<script setup lang='uts'>\r\n  type Obj = {\r\n    num : number,\r\n    str : string,\r\n    bool : boolean,\r\n    arr : number[]\r\n  }\r\n\r\n  const countRef = ref<UniTextElement | null>(null)\r\n  const count = ref(0)\r\n  const watchCountRes = ref('')\r\n  const watchCountCleanupRes = ref('')\r\n  const watchCountTrackNum = ref(0)\r\n\r\n  const stopWatchCount = watchSyncEffect((onCleanup : OnCleanup) => {\r\n    if (countRef.value !== null) {\r\n      // #ifdef APP\r\n      watchCountRes.value = `count: ${count.value}, count ref text: ${countRef.value!.value}`\r\n      // #endif\r\n      // #ifdef WEB\r\n      watchCountRes.value = `count: ${count.value}, count ref text: ${(countRef.value!.childNodes[0] as HTMLElement).innerText}`\r\n      // #endif \r\n    } else {\r\n      watchCountRes.value = `count: ${count.value}, count ref text: `\r\n    }\r\n    const cancel = () => {\r\n      watchCountCleanupRes.value = `watch count cleanup: ${count.value}`\r\n    }\r\n    onCleanup(cancel)\r\n  },\r\n    {\r\n      // 响应属性或引用作为依赖项被跟踪时调用\r\n      onTrack(event : DebuggerEvent) {\r\n        if (event.type === 'get') {\r\n          watchCountTrackNum.value++\r\n        }\r\n      }\r\n    },\r\n  )\r\n\r\n  const triggerStopWatchCount = () => stopWatchCount()\r\n\r\n  const increment = () => {\r\n    count.value++\r\n  }\r\n\r\n  const obj = reactive({\r\n    num: 0,\r\n    str: 'num: 0',\r\n    bool: false,\r\n    arr: [0]\r\n  } as Obj)\r\n\r\n  const watchObjRes = ref('')\r\n  watchSyncEffect(() => {\r\n    watchObjRes.value = `obj: {\"num\":${obj.num},\"str\":\"${obj.str}\",\"bool\":${obj.bool},\"arr\":${JSON.stringify(obj.arr)}}`\r\n  })\r\n\r\n  const objStrRef = ref<UniTextElement | null>(null)\r\n  const watchObjStrRes = ref('')\r\n  const watchObjStrTriggerNum = ref(0)\r\n  \r\n  watchSyncEffect(() => {\r\n    if (objStrRef.value !== null) {\r\n      // #ifdef APP\r\n      watchObjStrRes.value = `str: ${obj.str}, obj.str ref text: ${objStrRef.value!.value}`\r\n      // #endif\r\n      // #ifdef WEB\r\n      watchObjStrRes.value = `str: ${obj.str}, obj.str ref text: ${(objStrRef.value!.childNodes[0] as HTMLElement).innerText}`\r\n      // #endif \r\n    } else {\r\n      watchObjStrRes.value = `str: ${obj.str}, obj.str ref text: `\r\n    }\r\n  }, {\r\n    // 侦听器回调被依赖项的变更触发时调用\r\n    onTrigger(event : DebuggerEvent) {\r\n      if (event.type === 'set') {\r\n        watchObjStrTriggerNum.value++\r\n      }\r\n    }\r\n  })\r\n\r\n  const watchObjArrRes = ref('')\r\n  watchSyncEffect(() => {\r\n    watchObjArrRes.value = `arr: ${JSON.stringify(obj.arr)}`\r\n  })\r\n\r\n  const watchCountAndObjNumRes = ref('')\r\n  watchSyncEffect(() => {\r\n    watchCountAndObjNumRes.value = `count: ${count.value}, obj.num: ${obj.num}`\r\n  })\r\n\r\n  const updateObj = () => {\r\n    obj.num++\r\n    obj.str = `num: ${obj.num}`\r\n    obj.bool = !obj.bool\r\n    obj.arr.push(obj.num)\r\n  }\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/core/watch-sync-effect/watch-sync-effect"},"utilities_is-proxy_is-proxy":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/utilities/is-proxy/is-proxy.uvue","code":"```vue\n<template>\r\n  <view class=\"page\">\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>isProxy(count):</text>\r\n      <text id=\"is-proxy-count\">{{ isProxyCount }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>isProxy(refCount):</text>\r\n      <text id=\"is-proxy-ref-count\">{{ isProxyRefCount }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>isProxy(reactiveCount):</text>\r\n      <text id=\"is-proxy-reactive-count\">{{ isProxyReactiveCount }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>isProxy(readonlyCount):</text>\r\n      <text id=\"is-proxy-readonly-count\">{{ isProxyReadonlyCount }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>isProxy(shallowReactiveCount):</text>\r\n      <text id=\"is-proxy-shallow-reactive-count\">{{\r\n        isProxyShallowReactiveCount\r\n      }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>isProxy(shallowReadonlyCount):</text>\r\n      <text id=\"is-proxy-shallow-readonly-count\">{{\r\n        isProxyShallowReadonlyCount\r\n      }}</text>\r\n    </view>\r\n  </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst count = 0;\r\nconst isProxyCount = isProxy(count);\r\n\r\nconst refCount = ref(0);\r\nconst isProxyRefCount = isProxy(refCount);\r\n\r\nconst reactiveCount = reactive({ count: 0 });\r\nconst isProxyReactiveCount = isProxy(reactiveCount);\r\n\r\nconst readonlyCount = readonly({ count: 0 });\r\nconst isProxyReadonlyCount = isProxy(readonlyCount);\r\n\r\nconst shallowReactiveCount = shallowReactive({ count: 0 });\r\nconst isProxyShallowReactiveCount = isProxy(shallowReactiveCount);\r\n\r\nconst shallowReadonlyCount = shallowReadonly({ count: 0 });\r\nconst isProxyShallowReadonlyCount = isProxy(shallowReadonlyCount);\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/utilities/is-proxy/is-proxy"},"utilities_is-reactive_is-reactive":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/utilities/is-reactive/is-reactive.uvue","code":"```vue\n<template>\r\n  <view class=\"page\">\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>isReactive(count):</text>\r\n      <text id=\"is-reactive-count\">{{ isReactiveCount }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>isReactive(count):</text>\r\n      <text id=\"is-reactive-count\">{{ isReactiveCount }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>isReactive(refCount):</text>\r\n      <text id=\"is-reactive-ref-count\">{{ isReactiveRefCount }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>isReactive(reactiveCount):</text>\r\n      <text id=\"is-reactive-reactive-count\">{{ isReactiveReactiveCount }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>isReactive(readonlyCount):</text>\r\n      <text id=\"is-reactive-readonly-count\">{{ isReactiveReadonlyCount }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>isReactive(shallowReactiveCount):</text>\r\n      <text id=\"is-reactive-shallow-reactive-count\">{{\r\n        isReactiveShallowReactiveCount\r\n      }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>isReactive(shallowReadonlyCount):</text>\r\n      <text id=\"is-reactive-shallow-readonly-count\">{{\r\n        isReactiveShallowReadonlyCount\r\n      }}</text>\r\n    </view>\r\n  </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst count = 0;\r\nconst isReactiveCount = isReactive(count);\r\n\r\nconst refCount = ref(0);\r\nconst isReactiveRefCount = isReactive(refCount);\r\n\r\nconst reactiveCount = reactive({ count: 0 });\r\nconst isReactiveReactiveCount = isReactive(reactiveCount);\r\n\r\nconst readonlyCount = readonly({ count: 0 });\r\nconst isReactiveReadonlyCount = isReactive(readonlyCount);\r\n\r\nconst shallowReactiveCount = shallowReactive({ count: 0 });\r\nconst isReactiveShallowReactiveCount = isReactive(shallowReactiveCount);\r\n\r\nconst shallowReadonlyCount = shallowReadonly({ count: 0 });\r\nconst isReactiveShallowReadonlyCount = isReactive(shallowReadonlyCount);\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/utilities/is-reactive/is-reactive"},"utilities_is-readonly_is-readonly":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/utilities/is-readonly/is-readonly.uvue","code":"```vue\n<template>\r\n  <view class=\"page\">\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>isReadonly(count):</text>\r\n      <text id=\"is-readonly-count\">{{ isReadonlyCount }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>isReadonly(refCount):</text>\r\n      <text id=\"is-readonly-ref-count\">{{ isReadonlyRefCount }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>isReadonly(reactiveCount):</text>\r\n      <text id=\"is-readonly-reactive-count\">{{ isReadonlyReactiveCount }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>isReadonly(readonlyCount):</text>\r\n      <text id=\"is-readonly-readonly-count\">{{ isReadonlyReadonlyCount }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>isReadonly(shallowReactiveCount):</text>\r\n      <text id=\"is-readonly-shallow-reactive-count\">{{\r\n        isReadonlyShallowReactiveCount\r\n      }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>isReadonly(shallowReadonlyCount):</text>\r\n      <text id=\"is-readonly-shallow-readonly-count\">{{\r\n        isReadonlyShallowReadonlyCount\r\n      }}</text>\r\n    </view>\r\n  </view>\r\n</template>\r\n\r\n<script setup lang='uts'>\r\n  const count = 0;\r\n  const isReadonlyCount = isReadonly(count);\r\n\r\n  const refCount = ref(0);\r\n  const isReadonlyRefCount = isReadonly(refCount);\r\n\r\n  const reactiveCount = reactive({ count: 0 });\r\n  const isReadonlyReactiveCount = isReadonly(reactiveCount);\r\n\r\n  const readonlyCount = readonly({ count: 0 });\r\n  const isReadonlyReadonlyCount = isReadonly(readonlyCount);\r\n\r\n  const shallowReactiveCount = shallowReactive({ count: 0 });\r\n  const isReadonlyShallowReactiveCount = isReadonly(shallowReactiveCount);\r\n\r\n  const shallowReadonlyCount = shallowReadonly({ count: 0 });\r\n  const isReadonlyShallowReadonlyCount = isReadonly(shallowReadonlyCount);\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/utilities/is-readonly/is-readonly"},"utilities_is-ref_is-ref":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/utilities/is-ref/is-ref.uvue","code":"```vue\n<template>\r\n  <view class=\"page\">\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>ref count:</text>\r\n      <text id=\"ref-count\">{{ refCount }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>isRef ref count:</text>\r\n      <text id=\"is-ref-ref-count\">{{ isRefRefCount }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>count:</text>\r\n      <text id=\"count\">{{ count }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>isRef count:</text>\r\n      <text id=\"is-ref-count\">{{ isRefCount }}</text>\r\n    </view>\r\n  </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst refCount = ref(0);\r\nconst count = 0;\r\nconst isRefRefCount = isRef(refCount);\r\nconst isRefCount = isRef(count);\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/utilities/is-ref/is-ref"},"utilities_to-ref_to-ref":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/utilities/to-ref/to-ref.uvue","code":"```vue\n<template>\r\n  <view class=\"page\">\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>count:</text>\r\n      <text id=\"count\">{{ count }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>isRef count:</text>\r\n      <text id=\"is-ref-count\">{{ isRefCount }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>ref count:</text>\r\n      <text id=\"ref-count\">{{ refCount }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>isRef ref count:</text>\r\n      <text id=\"is-ref-ref-count\">{{ isRefRefCount }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>obj.num:</text>\r\n      <text id=\"obj-num\">{{ obj.num }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>toRef(obj, \"num\"):</text>\r\n      <text id=\"to-ref-obj-num\">{{ objNum }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>toRef(() => obj.num):</text>\r\n      <text id=\"to-ref-fn-obj-num\">{{ readonlyObjNum }}</text>\r\n    </view>\r\n\r\n    <button class=\"mt-10\" id=\"increment-btn\" @click=\"increment\">\r\n      increment obj.num\r\n    </button>\r\n  </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst count = 0;\r\nconst isRefCount = isRef(count);\r\nconst refCount = toRef<number>(count);\r\nconst isRefRefCount = isRef(refCount);\r\n\r\ntype Obj = {\r\n  num : number\r\n}\r\nconst obj = reactive({\r\n  num: 0\r\n} as Obj)\r\n\r\nconst objNum = toRef<number>(obj, 'num')\r\n\r\nconst readonlyObjNum = toRef<number>(() : number => obj.num)\r\n\r\nconst increment = () => {\r\n  obj.num++;\r\n  objNum.value++;\r\n  readonlyObjNum.value++;\r\n}\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/utilities/to-ref/to-ref"},"utilities_to-refs_to-refs":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/utilities/to-refs/to-refs.uvue","code":"```vue\n<template>\r\n  <view class=\"page\">\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>state.num:</text>\r\n      <text id=\"state-num\">{{ state['num'] }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>state.str:</text>\r\n      <text id=\"state-str\">{{ state['str'] }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>stateAsRefs.num:</text>\r\n      <text id=\"state-as-refs-num\">{{ (stateAsRefs['num'] as Ref<number>).value }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>stateAsRefs.str:</text>\r\n      <text id=\"state-as-refs-str\">{{ (stateAsRefs['str'] as Ref<string>).value }}</text>\r\n    </view>\r\n    <button class=\"mt-10\" id=\"update-state-btn\" @click=\"updateState\">update state</button>\r\n  </view>\r\n</template>\r\n\r\n<script setup lang='uts'>\r\n  // toRefs 仅支持 array 和 UTSJSONObject, 不支持自定义类型\r\n  const state = reactive({\r\n    num: 0,\r\n    str: 'str-0'\r\n  })\r\n\r\n  const stateAsRefs = toRefs(state)\r\n\r\n  const updateState = () => {\r\n    state['num'] = (state['num'] as number) + 1;\r\n    (stateAsRefs['str'] as Ref<string>).value = `str-${(stateAsRefs['num'] as Ref<number>).value}`\r\n  }\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/utilities/to-refs/to-refs"},"utilities_to-value_to-value":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/utilities/to-value/to-value.uvue","code":"```vue\n<template>\r\n  <view class=\"page\">\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>ref count:</text>\r\n      <text id=\"ref-count\">{{ refCount }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>isRef ref count:</text>\r\n      <text id=\"is-ref-ref-count\">{{ isRefRefCount }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>count:</text>\r\n      <text id=\"count\">{{ count }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>isRef count:</text>\r\n      <text id=\"is-ref-count\">{{ isRefCount }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>obj.num:</text>\r\n      <text id=\"obj-num\">{{ obj.num }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>toValue(() => obj.num):</text>\r\n      <text id=\"to-value-obj-num\">{{ toValueObjNum }}</text>\r\n    </view>\r\n    <button class=\"mt-10\" id=\"increment-btn\" @click=\"increment\">\r\n      increment obj.num\r\n    </button>\r\n  </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst refCount = ref<number>(0);;\r\nconst isRefRefCount = isRef(refCount);\r\nconst count = toValue(refCount);\r\nconst isRefCount = isRef(count);\r\n\r\ntype Obj = {\r\n  num : number\r\n}\r\nconst obj = reactive({\r\n  num: 0\r\n} as Obj)\r\n\r\nlet toValueObjNum = toValue(() : number => 0)\r\n\r\nconst increment = () => {\r\n  obj.num++;\r\n  toValueObjNum++;\r\n}\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/utilities/to-value/to-value"},"utilities_un-ref_un-ref":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/utilities/un-ref/un-ref.uvue","code":"```vue\n<template>\r\n  <view class=\"page\">\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>ref count:</text>\r\n      <text id=\"ref-count\">{{ refCount }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>ref count type:</text>\r\n      <text id=\"ref-count-type\">{{ refCountType }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>count:</text>\r\n      <text id=\"count\">{{ count }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>count type:</text>\r\n      <text id=\"count-type\">{{ countType }}</text>\r\n    </view>\r\n  </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst refCount = ref<number>(0);\r\nconst refCountType = typeof refCount;\r\nconst count = unref(refCount);\r\nconst countType = typeof count;\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/utilities/un-ref/un-ref"}},"E_components":{"Bar":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/hello-uvue/components/Bar.uvue","code":"```vue\n<template>\n\t<text class=\"component-bar\">this is component Bar</text>\n</template>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/hello-uvue/components/Bar"},"CompForAppComponent":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/hello-uvue/components/CompForAppComponent.uvue","code":"```vue\n<template>\n  <text class=\"uni-common-mt bold\">component for app.component</text>\n</template>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/hello-uvue/components/CompForAppComponent"},"CompForAppUse":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/hello-uvue/components/CompForAppUse.uvue","code":"```vue\n<template>\n  <view>\n    <text class=\"uni-common-mt bold\">component for app.use</text>\n    <text class=\"uni-common-mt plugin1\">plugin1: {{ plugin1 }}</text>\n    <text class=\"uni-common-mt plugin2\">plugin2: {{ plugin2 }}</text>\n    <text class=\"uni-common-mt plugin3\">plugin3: {{ plugin3 }}</text>\n    <text class=\"uni-common-mt plugin4\">plugin4: {{ plugin4 }}</text>\n    <CompForPlugin1 />\n    <CompForPlugin2 />\n  </view>\n</template>\n\n<script lang=\"uts\">\nexport default {\n  inject: ['plugin3', 'plugin4'],\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/hello-uvue/components/CompForAppUse"},"CompForHFunction":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/hello-uvue/components/CompForHFunction.uvue","code":"```vue\n<template>\r\n  <view>\r\n    <text class=\"uni-common-mt bold component-for-h-function\">component for h()</text>\r\n    <text id=\"comp-for-h-function-msg\">{{msg}}</text>\r\n  </view>\r\n</template>\r\n\r\n<script>\r\n  export default {\r\n    props: {\r\n      msg: {\r\n        type: String\r\n      }\r\n    }\r\n  }\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/hello-uvue/components/CompForHFunction"},"CompForHFunctionWithSlot":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/hello-uvue/components/CompForHFunctionWithSlot.uvue","code":"```vue\n<template>\r\n  <view>\r\n    <text class=\"uni-common-mt bold component-for-h-function\">component for h() with slot</text>\r\n    <slot />\r\n  </view>\r\n</template>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/hello-uvue/components/CompForHFunctionWithSlot"},"CompForPlugin":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/hello-uvue/components/CompForPlugin.uvue","code":"```vue\n<template>\n  <text class=\"uni-common-mt component-for-plugin\">component for plugin</text>\n</template>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/hello-uvue/components/CompForPlugin"},"CompForPluginCopy":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/hello-uvue/components/CompForPluginCopy.uvue","code":"```vue\n<template>\n  <text class=\"uni-common-mt component-for-plugin\">component for plugin</text>\n</template>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/hello-uvue/components/CompForPluginCopy"},"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"},"custom-call-easy-method":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/hello-uvue/components/custom-call-easy-method.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            foo() : string {\r\n                this.result = \"custom foo\"\r\n                return this.result\r\n            }\r\n        }\r\n    }\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/hello-uvue/components/custom-call-easy-method"},"define-expose-foo_define-expose-foo":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/hello-uvue/components/define-expose-foo/define-expose-foo.uvue","code":"```vue\n<script setup lang='uts'>\n  const str = 'foo str'\n  const num = ref(0)\n  const increment = () => {\n    num.value++\n  }\n  \n  defineExpose({\n    str,\n    num,\n    increment\n  })\n  \n</script>\n\n<template>\n  <!-- #ifdef MP -->\n  <view></view>\n  <!-- #endif -->\n</template>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/hello-uvue/components/define-expose-foo/define-expose-foo"},"keep-alive_Counter":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/hello-uvue/components/keep-alive/Counter.uvue","code":"```vue\n<template>\r\n\t<view>\r\n\t\t<text class=\"counter-text\">count: {{ count }}</text>\r\n\t\t<button class=\"uni-common-mt counter-btn\" @click=\"increment\">+</button>\n\t\t<text class=\"uni-common-mt\" id=\"activated-num\">activated num: {{ activatedNum }}</text>\n\t\t<text class=\"uni-common-mt\" id=\"deactivated-num\">deactivated num: {{ deactivatedNum }}</text>\r\n\t</view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\n\texport default {\r\n\t\tname: 'Counter',\r\n\t\tdata() {\r\n\t\t\treturn {\r\n\t\t\t\tcount: 0,\r\n\t\t\t\tactivatedNum: 0,\r\n\t\t\t\tdeactivatedNum: 0,\r\n\t\t\t}\r\n\t\t},\r\n\t\tactivated() { this.activatedNum++ },\r\n\t\tdeactivated() { this.deactivatedNum++ },\r\n\t\tmethods: {\r\n\t\t\tincrement() {\n\t\t\t\tconsole.log('this.count: ',this.count);\r\n\t\t\t\tthis.count++\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n</script>\r\n\r\n<style>\r\n\t.counter-btn {\r\n\t\theight: 40px;\r\n\t\tline-height: 40px;\r\n\t\tborder: 1px solid #ccc;\r\n\t\tborder-radius: 4px;\r\n\t\ttext-align: center;\r\n\t}\r\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/hello-uvue/components/keep-alive/Counter"},"keep-alive_Message":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/hello-uvue/components/keep-alive/Message.uvue","code":"```vue\n<template>\r\n\t<view>\r\n\t\t<text class=\"uni-common-mt message-text\">msg: {{msg}}</text>\r\n\t\t<text class=\"uni-common-mt change-message\" @click=\"changeMessage\">change message</text>\r\n\t</view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\n\texport default {\r\n\t\tname: 'Message',\r\n\t\tdata() {\r\n\t\t\treturn {\r\n\t\t\t\tmsg: 'default message'\r\n\t\t\t}\r\n\t\t},\r\n\t\tmethods: {\r\n\t\t\tchangeMessage() {\r\n\t\t\t\tthis.msg = 'message changed'\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n</script>\r\n\r\n<style>\r\n\t.change-message {\r\n\t\theight: 40px;\r\n\t\tline-height: 40px;\r\n\t\tborder: 1px solid #ccc;\r\n\t\tborder-radius: 4px;\r\n\t\ttext-align: center;\r\n\t}\r\n</style>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/hello-uvue/components/keep-alive/Message"},"keep-alive_ShouldExclude":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/hello-uvue/components/keep-alive/ShouldExclude.uvue","code":"```vue\n<template>\r\n\t<view>\n\t\t<text>should not be keep-alive</text>\r\n\t\t<text class=\"uni-common-mt should-exclude-text\">count: {{ count }}</text>\r\n\t\t<button class=\"uni-common-mt should-exclude-btn\" @click=\"increment\">+</button>\r\n\t</view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\n\texport default {\n\t\tname: 'ShouldExclude',\r\n\t\tdata() {\r\n\t\t\treturn {\r\n\t\t\t\tcount: 0\r\n\t\t\t}\r\n\t\t},\r\n\t\tmethods: {\r\n\t\t\tincrement() {\r\n\t\t\t\tthis.count++\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n</script>\n\n<style>\n\t.should-exclude-btn{\n\t\theight: 40px;\n\t\tline-height: 40px;\n\t\tborder: 1px solid #ccc;\n\t\tborder-radius: 4px;\n\t\ttext-align: center;\n\t}\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/hello-uvue/components/keep-alive/ShouldExclude"},"test-type_test-type":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/hello-uvue/components/test-type/test-type.uvue","code":"```vue\n<template>\n\t<view>\n\t\ttest-type\n\t</view>\n</template>\n\n<script>\n\texport default {\n\t\tname:\"test-type\",\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\t\n\t\t\t};\n\t\t}\n\t}\n</script>\n\n<style>\n\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/hello-uvue/components/test-type/test-type"},"test-type1_test-type1":{"gitUrl":"https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/hello-uvue/components/test-type1/test-type1.uvue","code":"```vue\n<template>\n\t<view>\n\t\ttest-type1\n\t</view>\n</template>\n\n<script>\n\texport default {\n\t\tname:\"test-type1\",\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\t\n\t\t\t};\n\t\t}\n\t}\n</script>\n\n<style>\n\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/hello-uvue/components/test-type1/test-type1"}}}