tmui-cli 2.0.4 → 2.0.5

package/data/uni-app-x-docs/.vuepress/utils/vueJson.json

@@ -1 +1 @@
-{"template":{"name":"::: sourceCode\n#### template\n:::","originName":"#### template","description":"> 组件类型：string \n\n 当我们想要使用内置指令而不在 DOM 中渲染元素时，\\<template> 标签可以作为占位符使用。","readme":"","fileFormats":"","compatibility":"\n##### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | √ | 3.9 | 4.11 | 4.61 |\n","attribute":"##### 属性 \n| 名称 | 类型 | 兼容性 |\n| :- | :- |  :-: |\n| lang | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"√\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| html | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.11\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | html |\n@| pug | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | pug |","event":"","example":"","children":"","reference":"\n##### 参见\n- [Reference](https://cn.vuejs.org/api/built-in-special-elements.html#template)"},"slot":{"name":"::: sourceCode\n#### slot\n:::","originName":"#### slot","description":"> 组件类型：string \n\n \\<slot> 元素作为组件模板之中的内容分发插槽。\\<slot> 元素自身将被替换。","readme":"","fileFormats":"","compatibility":"\n##### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | 4.11 | 3.9 | 4.11 | 4.61 |\n","attribute":"##### 属性 \n| 名称 | 类型 | 兼容性 | 描述 |\n| :- | :- |  :-: | :- |\n| name | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"√\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 用于命名插槽。 |","event":"","example":"","children":"","reference":"\n##### 参见\n- [Reference](https://cn.vuejs.org/api/built-in-special-elements.html#slot)"},"script":{"name":"::: sourceCode\n#### script\n:::","originName":"#### script","description":"","readme":"","fileFormats":"","compatibility":"\n##### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | √ | 3.9 | 4.11 | 4.61 |\n","attribute":"##### 属性 \n| 名称 | 类型 | 兼容性 |\n| :- | :- |  :-: |\n| setup | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"√\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| lang | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"√\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| ts | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"√\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | typescript |\n@| uts | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"√\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | uts |","event":"","example":"","children":"","reference":"\n##### 参见\n"},"style":{"name":"::: sourceCode\n#### style\n:::","originName":"#### style","description":"","readme":"","fileFormats":"","compatibility":"\n##### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | √ | 3.9 | 4.11 | 4.61 |\n","attribute":"##### 属性 \n| 名称 | 类型 | 兼容性 |\n| :- | :- |  :-: |\n| lang | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"√\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n@| 合法值 | 兼容性 |\n@| :- |  :-: |\n@| scss | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"√\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n@| less | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"√\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n@| stylus | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"√\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| scoped | boolean | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| module | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |","event":"","example":"","children":"","reference":"\n##### 参见\n"},"keep-alive":{"name":"::: sourceCode\n#### keep-alive\n:::","originName":"#### keep-alive","description":"> 组件类型：string \n\n \\<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 \\<transition> 相似，\\<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。","readme":"","fileFormats":"","compatibility":"\n##### 兼容性 <Help />\n| Web | 微信小程序 | Android(VDOM) | Android(Vapor) | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) |\n| :- | :- | :- | :- | :- | :- | :- | :- |\n| 4.0 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 4.0 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 4.11 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 4.61 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> |\n","attribute":"##### 属性 \n| 名称 | 类型 | 兼容性 | 描述 |\n| :- | :- |  :-: | :- |\n| include | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"x\",\"4.0\",\"x\",\"4.11\",\"x\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 字符串或正则表达式。只有名称匹配的组件会被缓存。 |\n| exclude | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"x\",\"4.0\",\"x\",\"4.11\",\"x\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 字符串或正则表达式。任何名称匹配的组件都不会被缓存。 |\n| max | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"x\",\"4.0\",\"x\",\"4.11\",\"x\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 最多可以缓存多少组件实例。 |","event":"","example":"","children":"","reference":"\n##### 参见\n- [Reference](https://v3.cn.vuejs.org/api/built-in-components.html#keep-alive)"},"component":{"name":"::: sourceCode\n#### component\n:::","originName":"#### component","description":"> 组件类型：string \n\n 渲染一个“元组件”为动态组件。依 is 的值，来决定哪个组件被渲染。","readme":"","fileFormats":"","compatibility":"\n##### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 3.99 | 4.11 | 4.61 |\n","attribute":"##### 属性 \n| 名称 | 类型 | 兼容性 |\n| :- | :- |  :-: |\n| is | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.99\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| inline-template | boolean | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.99\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |","event":"","example":"","children":"","reference":"\n##### 参见\n- [Reference](https://cn.vuejs.org/api/built-in-special-elements.html#component)"},"transition":{"name":"::: sourceCode\n#### transition\n:::","originName":"#### transition","description":"> 组件类型：string \n\n \\<transition> 元素作为单个元素/组件的过渡效果。\\<transition> 只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在检测过的组件层级中。","readme":"","fileFormats":"","compatibility":"\n##### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> |\n","attribute":"##### 属性 \n| 名称 | 类型 | 兼容性 | 描述 |\n| :- | :- |  :-: | :- |\n| name | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 用于自动生成 CSS 过渡类名。例如：name: 'fade' 将自动拓展为.fade-enter，.fade-enter-active等。默认类名为 \"v\" |\n| appear | boolean | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否在初始渲染时使用过渡。默认为 false。 |\n| css | boolean | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否使用 CSS 过渡类。默认为 true。如果设置为 false，将只通过组件事件触发注册的 JavaScript 钩子。 |\n| type | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 指定过渡事件类型，侦听过渡何时结束。有效值为 \"transition\" 和 \"animation\"。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。 |\n@| 合法值 |\n@| :- |\n@| transition |\n@| animation |\n| mode | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 控制离开/进入的过渡时间序列。有效的模式有 \"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\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 指定过渡的持续时间。默认情况下，Vue 会等待过渡所在根元素的第一个 transitionend 或 animationend 事件。 |\n| enter-class | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| leave-class | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| appear-class | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| enter-to-class | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| leave-to-class | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| appear-to-class | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| enter-active-class | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| leave-active-class | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| appear-active-class | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| @before-enter | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| @before-leave | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| @before-appear | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| @enter | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| @leave | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| @appear | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| @after-enter | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| @after-leave | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| @after-appear | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| @enter-cancelled | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| @leave-cancelled | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 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":"::: sourceCode\n#### transition-group\n:::","originName":"#### transition-group","description":"> 组件类型：string \n\n \\<transition-group> 元素作为多个元素/组件的过渡效果。\\<transition-group> 渲染一个真实的 DOM 元素。默认渲染 \\<span>，可以通过 tag 属性配置哪个元素应该被渲染。","readme":"","fileFormats":"","compatibility":"\n##### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> |\n","attribute":"##### 属性 \n| 名称 | 类型 | 兼容性 | 描述 |\n| :- | :- |  :-: | :- |\n| tag | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 默认为 span。 |\n| move-class | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 覆盖移动过渡期间应用的 CSS 类。 |\n| name | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 用于自动生成 CSS 过渡类名。例如：name: 'fade' 将自动拓展为.fade-enter，.fade-enter-active等。默认类名为 \"v\" |\n| appear | boolean | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否在初始渲染时使用过渡。默认为 false。 |\n| css | boolean | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否使用 CSS 过渡类。默认为 true。如果设置为 false，将只通过组件事件触发注册的 JavaScript 钩子。 |\n| type | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 指定过渡事件类型，侦听过渡何时结束。有效值为 \"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\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 指定过渡的持续时间。默认情况下，Vue 会等待过渡所在根元素的第一个 transitionend 或 animationend 事件。 |\n| enter-class | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| leave-class | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| appear-class | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| enter-to-class | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| leave-to-class | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| appear-to-class | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| enter-active-class | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| leave-active-class | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| appear-active-class | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| @before-enter | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| @before-leave | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| @before-appear | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| @enter | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| @leave | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| @appear | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| @after-enter | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| @after-leave | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| @after-appear | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| @enter-cancelled | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| @leave-cancelled | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | v-show only |\n| @appear-cancelled | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |","event":"","example":"","children":"","reference":"\n##### 参见\n- [Reference](https://v3.cn.vuejs.org/api/built-in-components.html#transition-group)"},"teleport":{"name":"::: sourceCode\n#### teleport\n:::","originName":"#### teleport","description":"> 组件类型：string \n\n Teleport 提供了一种干净的方法，允许我们控制在 DOM 中哪个父节点下呈现 HTML，而不必求助于全局状态或将其拆分为两个组件。","readme":"","fileFormats":"","compatibility":"\n##### 兼容性 <Help />\n| Web | 微信小程序 | Android(VDOM) | Android(Vapor) | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) |\n| :- | :- | :- | :- | :- | :- | :- | :- |\n| 4.0 | 5.14 | 4.0 | 5.25 | 4.11 | 5.25 | 4.61 | 5.25 |\n","attribute":"##### 属性 \n| 名称 | 类型 | 兼容性 | 描述 |\n| :- | :- |  :-: | :- |\n| to | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"x\",\"4.0\",\"5.25\",\"4.11\",\"5.25\",\"4.61\",\"5.25\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 必须是有效的查询选择器或 HTMLElement (如果在浏览器环境中使用)。指定将在其中移动 \\<teleport> 内容的目标元素 |\n| disabled | boolean | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"5.14\",\"4.0\",\"5.25\",\"4.11\",\"5.25\",\"4.61\",\"5.25\"]],\"status\":\"SUPPORTED\"}' /> | 此可选属性可用于禁用 \\<teleport> 的功能，这意味着其插槽内容将不会移动到任何位置，而是在您在周围父组件中指定了 \\<teleport> 的位置渲染。 |","event":"","example":"","children":"","reference":"\n##### 参见\n- [Reference](https://v3.vuejs.org/api/built-in-components.html#teleport)"},"application":{"compatibility":"|  | 兼容性 |\n| :- | :- |\n| createApp() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"√\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| createSSRApp() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"√\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| app.mount() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"√\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| app.unmount() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"√\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| app.component() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"√\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| app.use() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.99\",\"x\",\"4.11\",\"x\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| app.mixin() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.99\",\"x\",\"4.11\",\"x\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| app.provide() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.99\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| app.version | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"√\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| app.config | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"√\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| app.config.errorHandler | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"5.21\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| app.config.globalProperties | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.99\",\"x\",\"4.11\",\"x\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| globalData | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.0\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| onLaunch() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.0\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| onShow() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.0\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| onHide() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.0\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| onLastPageBackPress() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"3.9\",\"x\",\"4.71\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| onExit() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"3.9\",\"x\",\"4.72\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| onError() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.21\",\"4.21\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| onPageNotFound() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| onUniNViewMessage() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| onThemeChange() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |","example":"","onLaunch":{"name":"### onLaunch(options: OnLaunchOptions): void; @onlaunch","originName":"onLaunch","description":"生命周期回调，监听应用初始化，应用初始化完成时触发，全局只触发一次。\n","compatibility":"#### onLaunch 兼容性 <Help /> \n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | 4.41 | 3.9 | 4.0 | 4.61 |\n","param":"#### 参数 \n\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| options | **OnLaunchOptions** | 是 |\n@| 名称 | 类型 | 必备 | 兼容性 | 描述 |\n@| :- | :- | :- |  :-: | :- |\n@| path | string | 是 |   | 应用启动页面路径 |\n@| appScheme | string | 否 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"4.25\",\"5.25\",\"4.25\",\"5.25\",\"4.81\",\"5.25\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 首次启动时的Scheme。返回值与App.onLaunch的回调参数一致<br/> |\n@| appLink | string | 否 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\",\"4.25\",\"5.25\",\"4.81\",\"5.25\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 首次启动时的appLink。返回值与App.onLaunch的回调参数一致<br/> | \n","fileFormats":"","returnValue":"","tutorial":"#### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.net.cn/collocation/App.html#applifecycle)\n\n"},"onShow":{"name":"### onShow(options: OnShowOptions): void; @onshow","originName":"onShow","description":"生命周期回调 监听应用显示\n\n应用启动，或从后台进入前台显示时触发\n","compatibility":"#### onShow 兼容性 <Help /> \n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | 4.41 | 3.9 | 4.0 | 4.61 |\n","param":"#### 参数 \n\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| options | **OnShowOptions** | 是 |\n@| 名称 | 类型 | 必备 | 兼容性 | 描述 |\n@| :- | :- | :- |  :-: | :- |\n@| path | string | 是 |   | 应用启动页面路径 |\n@| appScheme | string | 否 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"4.25\",\"5.25\",\"4.25\",\"5.25\",\"4.81\",\"5.25\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 本次启动时的Scheme。返回值与App.onShow的回调参数一致<br/> |\n@| appLink | string | 否 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\",\"4.25\",\"5.25\",\"4.81\",\"5.25\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 本次启动时的appLink。返回值与App.onShow的回调参数一致<br/> | \n","fileFormats":"","returnValue":"","tutorial":"#### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.net.cn/collocation/App.html#applifecycle)\n\n"},"onHide":{"name":"### onHide(): void; @onhide","originName":"onHide","description":"生命周期回调 监听应用隐藏\n\n应用从前台进入后台时触发\n","compatibility":"#### onHide 兼容性 <Help /> \n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | 4.41 | 3.9 | 4.0 | 4.61 |\n","param":"","fileFormats":"","returnValue":"","tutorial":"#### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.net.cn/collocation/App.html#applifecycle)\n\n"},"onError":{"name":"### onError(error: any): void; @onerror","originName":"onError","description":"错误监听函数\n应用发生脚本错误或 API 调用报错时触发\n4.33+ App 端支持监听异步逻辑中的错误","compatibility":"#### onError 兼容性 <Help /> \n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | 4.41 | 4.21 | 4.21 | 4.61 |\n","param":"#### 参数 \n\n| 名称 | 类型 | 必填 | 描述 |\n| :- | :- | :- | :- |\n| error | any | 是 | 错误信息 | \n","fileFormats":"","returnValue":"","tutorial":"#### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.net.cn/collocation/App.html#applifecycle)\n\n"},"onPageNotFound":{"name":"### onPageNotFound(options: OnPageNotFoundOption): void; @onpagenotfound","originName":"onPageNotFound","description":"页面不存在监听函数\n\n应用要打开的页面不存在时触发，会带上页面信息回调该函数\n\n**注意：**\n1. 如果开发者没有添加 `onPageNotFound` 监听，当跳转页面不存在时，将推入微信客户端原生的页面不存在提示页面。\n2. 如果 `onPageNotFound` 回调中又重定向到另一个不存在的页面，将推入微信客户端原生的页面不存在提示页面，并且不再回调 `onPageNotFound`。\n","compatibility":"#### onPageNotFound 兼容性 <Help /> \n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | 4.41 | x | x | x |\n","param":"#### 参数 \n\n| 名称 | 类型 | 必填 | 兼容性 |\n| :- | :- | :- |  :-: |\n| options | **OnPageNotFoundOption** | 是 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n@| 名称 | 类型 | 必备 | 兼容性 | 描述 |\n@| :- | :- | :- |  :-: | :- |\n@| path | string | 是 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 不存在页面的路径 |\n@| query | AnyObject | 是 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 打开不存在页面的 query |\n@| isEntryPage | boolean | 是 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否本次启动的首个页面（例如从分享等入口进来，首个页面是开发者配置的分享页面） | \n","fileFormats":"","returnValue":"","tutorial":"#### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.net.cn/collocation/App.html#applifecycle)\n\n"},"onUniNViewMessage":{"name":"### onUniNViewMessage(options: AnyObject): void; @onuninviewmessage","originName":"onUniNViewMessage","description":"监听 nvue 页面消息\n\nnvue 页面使用 `uni.postMessage` 发送消息时触发\n","compatibility":"#### onUniNViewMessage 兼容性 <Help /> \n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x |\n","param":"#### 参数 \n\n| 名称 | 类型 | 必填 | 兼容性 |\n| :- | :- | :- |  :-: |\n| options | AnyObject | 是 | <CompatibilityTable table='{\"headers\":[{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | \n","fileFormats":"","returnValue":"","tutorial":"#### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.net.cn/collocation/App.html#applifecycle)\n\n"},"onExit":{"name":"### onExit(): void; @onexit","originName":"onExit","description":"监听应用退出。app-uvue-android 3.9+\n","compatibility":"#### onExit 兼容性 <Help /> \n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| x | x | 3.9 | x | 4.72 |\n","param":"","fileFormats":"","returnValue":"","tutorial":""},"onLastPageBackPress":{"name":"### onLastPageBackPress(): void; @onlastpagebackpress","originName":"onLastPageBackPress","description":"最后一个页面按下Android back键，常用于自定义退出。\n","compatibility":"#### onLastPageBackPress 兼容性 <Help /> \n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| x | x | 3.9 | x | 4.71 |\n","param":"","fileFormats":"","returnValue":"","tutorial":"#### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.net.cn/collocation/App.html#applifecycle)\n\n"},"onUnhandledRejection":{"name":"### onUnhandledRejection(): void; @onunhandledrejection","originName":"onUnhandledRejection","description":"未处理的 Promise 拒绝事件监听函数\n","compatibility":"#### onUnhandledRejection 兼容性 <Help /> \n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | 4.41 | x | x | x |\n","param":"","fileFormats":"","returnValue":"","tutorial":"#### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.net.cn/collocation/App.html#applifecycle)\n\n"},"onThemeChange":{"name":"### onThemeChange(): void; @onthemechange","originName":"onThemeChange","description":"监听系统主题变化\n","compatibility":"#### onThemeChange 兼容性 <Help /> \n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| x | 4.41 | x | x | x |\n","param":"","fileFormats":"","returnValue":"","tutorial":"#### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.net.cn/collocation/App.html#applifecycle)\n\n"}},"general":{"compatibility":"|  | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- | :- |\n| version | 4.0 | 4.41 | √ | 4.11 | 4.61 |\n| nextTick() | 4.0 | 4.41 | √ | 4.11 | 4.61 |\n| defineComponent() | 4.0 | 4.41 | x | x | x |","example":""},"reactivity_core":{"compatibility":"|  | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- | :- |\n| ref() | 4.0 | 4.41 | √ | 4.11 | 4.61 |\n| computed() | 4.0 | 4.41 | √ | 4.11 | 4.61 |\n| reactive() | 4.0 | 4.41 | √ | 4.11 | 4.61 |\n| readonly() | 4.0 | 4.41 | 4.0 | 4.11 | 4.61 |\n| watchEffect() | 4.0 | 4.41 | 4.0 | 4.11 | 4.61 |\n| watchPostEffect() | 4.0 | 4.41 | 4.0 | 4.11 | 4.61 |\n| watchSyncEffect() | 4.0 | 4.41 | 4.0 | 4.11 | 4.61 |\n| watch() | 4.0 | 4.41 | 4.0 | 4.11 | 4.61 |","example":""},"reactivity_utilities":{"compatibility":"|  | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- | :- |\n| isRef() | 4.0 | 4.41 | 4.0 | 4.11 | 4.61 |\n| unref() | 4.0 | 4.41 | 4.0 | 4.11 | 4.61 |\n| toRef() | 4.11 | 4.41 | 4.0 | 4.11 | 4.61 |\n| toValue() | 4.11 | 4.41 | 4.0 | 4.11 | 4.61 |\n| toRefs() | 4.11 | 4.41 | 4.0 | 4.11 | 4.61 |\n| isProxy() | 4.0 | 4.41 | 4.0 | 4.11 | 4.61 |\n| isReactive() | 4.0 | 4.41 | 4.0 | 4.11 | 4.61 |\n| isReadonly() | 4.0 | 4.41 | 4.0 | 4.11 | 4.61 |","example":""},"reactivity_advanced":{"compatibility":"|  | 兼容性 |\n| :- | :- |\n| shallowRef() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| triggerRef() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| customRef() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| shallowReactive() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| shallowReadonly() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| toRaw() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| markRaw() |   |\n| effectScope() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| getCurrentScope() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| onScopeDispose() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |","example":""},"composition_lifecycle":{"compatibility":"|  | 兼容性 | 描述 |\n| :- | :- | :- |\n| onMounted() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。<br/>如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。 |\n| onUpdated() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。 |\n| onUnmounted() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 在一个组件实例被卸载之后调用。 |\n| onBeforeMount() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 在挂载开始之前被调用：相关的 render 函数首次被调用。 |\n| onBeforeUpdate() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 数据更新时调用，发生在虚拟 DOM 打补丁之前。<br/>这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。 |\n| onBeforeUnmount() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 在一个组件实例被卸载之前调用。 |\n| onErrorCaptured() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 注册一个钩子，在捕获了后代组件传递的错误时调用。 |\n| onRenderTracked() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 注册一个调试钩子，当组件渲染过程中追踪到响应式依赖时调用。 |\n| onRenderTriggered() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 注册一个调试钩子，当响应式依赖的变更触发了组件渲染时调用。 |\n| onActivated() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | keep-alive 组件激活时调用。 |\n| onDeactivated() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | keep-alive 组件停用时调用。 |\n| onServerPrefetch() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 注册一个异步函数，在组件实例在服务器上被渲染之前调用。<br/>如果这个钩子返回了一个 Promise，服务端渲染会在渲染该组件前等待该 Promise 完成。<br/>这个钩子仅会在服务端渲染中执行，可以用于执行一些仅存在于服务端的数据抓取过程。 |\n| onRecycle() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\",\"5.21\",\"x\",\"5.11\",\"x\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 组件回收时的生命周期钩子 |\n| onReuse() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\",\"5.21\",\"x\",\"5.11\",\"x\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 组件复用时的生命周期钩子 |\n| onLoad() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 生命周期回调 监听页面加载<br/><br/>页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。 |\n| onReady() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 生命周期回调 监听页面初次渲染完成<br/><br/>页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。<br/> |\n| onUnload() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 生命周期回调 监听页面卸载<br/><br/>页面卸载时触发。如 `redirectTo` 或 `navigateBack` 到其他页面时。<br/> |\n| onPageShow() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 生命周期回调 监听页面显示<br/><br/>页面显示/切入前台时触发。<br/> |\n| onPageHide() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 生命周期回调 监听页面隐藏<br/><br/>页面隐藏/切入后台时触发。 如 `navigateTo` 或底部 `tab` 切换到其他页面，应用切入后台等。<br/> |\n| onPageScroll() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.13\",\"5.21\",\"4.61\",\"5.08\"]],\"status\":\"SUPPORTED\"}' /> | 页面滚动触发事件的处理函数<br/><br/>监听用户滑动页面事件。 |\n| onBackPress() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 监听页面返回 |\n| onReachBottom() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\",\"5.08\"]],\"status\":\"SUPPORTED\"}' /> | 页面上拉触底事件的处理函数<br/>- 可以在 `pages.json` 的页面配置中设置触发距离 `onReachBottomDistance` 。<br/>- 在触发距离内滑动期间，本事件只会被触发一次。<br/> |\n| onPullDownRefresh() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"5.21\",\"4.61\",\"5.21\"]],\"status\":\"SUPPORTED\"}' /> | 监听用户下拉动作<br/>- 需要在 `pages.json` 的页面配置中开启 `enablePullDownRefresh` 。<br/>- 可以通过 `uni.startPullDownRefresh` 触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。<br/>- 当处理完数据刷新后，`uni.stopPullDownRefresh` 可以停止当前页面的下拉刷新。<br/> |\n| onResize() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 页面尺寸改变时触发 |","example":""},"composition_injection":{"compatibility":"|  | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- | :- |\n| provide() | 4.0 | 4.41 | 4.0 | 4.11 | 4.61 |\n| inject() | 4.0 | 4.41 | 4.0 | 4.11 | 4.61 |\n| hasInjectionContext() | 4.11 | 4.41 | 4.0 | 4.11 | 4.61 |","example":""},"options_state":{"compatibility":"|  | Web | 微信小程序 | Android(VDOM) | Android(Vapor) | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) |\n| :- | :- | :- | :- | :- | :- | :- | :- | :- |\n| data | 4.0 | 4.41 | 3.9 | x | 4.11 | x | 4.61 | x |\n| props | 4.0 | 4.41 | 3.9 | x | 4.11 | x | 4.61 | x |\n| computed | 4.0 | 4.41 | 3.9 | x | 4.11 | x | 4.61 | x |\n| methods | 4.0 | 4.41 | 3.9 | x | 4.11 | x | 4.61 | x |\n| watch | 4.0 | 4.41 | 3.9 | x | 4.11 | x | 4.61 | x |\n| emits | 4.0 | 4.41 | 3.9 | x | 4.11 | x | 4.61 | x |\n| expose | 4.0 | 4.41 | x | x | x | x | x | x |","example":""},"options_rendering":{"compatibility":"|  | Web | 微信小程序 | Android(VDOM) | Android(Vapor) | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) |\n| :- | :- | :- | :- | :- | :- | :- | :- | :- |\n| template | x | x | x | x | x | x | 4.61 | x |\n| render | 4.0 | x | 3.9 | x | 4.11 | x | 4.61 | x |\n| compilerOptions | x | x | x | x | x | x | 4.61 | x |\n| slots | 4.0 | 4.41 | 3.9 | 5.21 | 4.11 | 5.11 | 4.61 | 5.0 |","example":""},"options_lifecycle":{"compatibility":"|  | 兼容性 | 描述 |\n| :- | :- | :- |\n| beforeCreate | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 在组件实例初始化完成之后立即调用。<br/>在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 |\n| created | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 在组件实例处理完所有与状态相关的选项后调用。<br/>在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。<br/>然而，此时挂载阶段还未开始，因此 $el 属性仍不可用。 |\n| beforeMount | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 在组件被挂载之前调用。<br/>相关的 render 函数首次被调用。<br/>当这个钩子被调用时，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点。<br/>它即将首次执行 DOM 渲染过程。 |\n| mounted | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 在组件被挂载之后调用。<br/>el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。<br/>如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。 |\n| beforeUpdate | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 在组件即将因为一个响应式状态变更而更新其 DOM 树之前调用。<br/>数据更新时调用，发生在虚拟 DOM 打补丁之前。<br/>这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。 |\n| updated | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 在组件因为一个响应式状态变更而更新其 DOM 树之后调用。<br/>父组件的更新钩子将在其子组件的更新钩子之后调用。<br/>这个钩子会在组件的任意 DOM 更新后被调用，这些更新可能是由不同的状态变更导致的。<br/>如果你需要在某个特定的状态更改后访问更新后的 DOM，请使用 nextTick() 作为替代。 |\n| beforeUnmount | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 在一个组件实例被卸载之前调用。<br/>当这个钩子被调用时，组件实例依然还保有全部的功能。 |\n| unmounted | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 在一个组件实例被卸载之后调用。<br/>可以在这个钩子中手动清理一些副作用，例如计时器、DOM 事件监听器或者与服务器的连接。 |\n| errorCaptured | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 在捕获了后代组件传递的错误时调用。<br/>这个钩子带有三个实参：错误对象、触发该错误的组件实例，以及一个说明错误来源类型的信息字符串。<br/>这个钩子可以通过返回 false 来阻止错误继续向上传递。 |\n| renderTracked | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 在一个响应式依赖被组件的渲染作用追踪后调用。<br/>跟踪虚拟 DOM 重新渲染时调用。钩子接收 debugger event 作为参数。<br/>此事件告诉你哪个操作跟踪了组件以及该操作的目标对象和键。 |\n| renderTriggered | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 在一个响应式依赖被组件触发了重新渲染之后调用。<br/>当虚拟 DOM 重新渲染为 triggered.Similarly 为renderTracked，接收 debugger event 作为参数。<br/>此事件告诉你是什么操作触发了重新渲染，以及该操作的目标对象和键。 |\n| activated | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 若组件实例是 \\<KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。<br/>keep-alive 组件激活时调用。 |\n| deactivated | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 若组件实例是 \\<KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。<br/>keep-alive 组件停用时调用。 |\n| serverPrefetch | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 当组件实例在服务器上被渲染之前要完成的异步函数。<br/>如果这个钩子返回了一个 Promise，服务端渲染会在渲染该组件前等待该 Promise 完成。 |","example":""},"options_composition":{"compatibility":"|  | Web | 微信小程序 | Android(VDOM) | Android(Vapor) | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) |\n| :- | :- | :- | :- | :- | :- | :- | :- | :- |\n| provide | 4.0 | 4.41 | 3.99 | 5.21 | 4.11 | 5.11 | 4.61 | 5.0 |\n| inject | 4.0 | 4.41 | 3.99 | 5.21 | 4.11 | 5.11 | 4.61 | 5.0 |\n| mixins | 4.0 | 4.41 | 3.99 | x | 4.11 | x | 4.61 | x |","example":""},"options_misc":{"compatibility":"|  | Web | 微信小程序 | Android(VDOM) | Android(Vapor) | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) |\n| :- | :- | :- | :- | :- | :- | :- | :- | :- |\n| name | 4.0 | 4.41 | 3.9 | x | 4.11 | x | 4.61 | x |\n| inheritAttrs | 4.0 | √ | 3.9 | 5.21 | 4.11 | 5.11 | 4.61 | 5.0 |\n| components | 4.0 | 4.41 | 3.9 | x | 4.11 | x | 4.61 | x |","example":""},"component_instance":{"compatibility":"|  | 兼容性 |\n| :- | :- |\n| $data | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"iOS(VDOM) UTS 插件\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"√\",\"4.11\",\"x\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| $props | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"iOS(VDOM) UTS 插件\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"√\",\"4.11\",\"x\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| $attrs | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"iOS(VDOM) UTS 插件\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"√\",\"4.11\",\"x\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| $slots | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"iOS(VDOM) UTS 插件\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"√\",\"4.11\",\"x\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| $refs | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"iOS(VDOM) UTS 插件\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"√\",\"4.11\",\"x\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| $parent | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"iOS(VDOM) UTS 插件\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"√\",\"4.11\",\"x\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| $root | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"iOS(VDOM) UTS 插件\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"√\",\"4.11\",\"x\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| $options | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"iOS(VDOM) UTS 插件\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"√\",\"4.11\",\"x\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| $nextTick | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"iOS(VDOM) UTS 插件\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"√\",\"4.11\",\"x\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| $forceUpdate | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"iOS(VDOM) UTS 插件\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"4.41\",\"√\",\"x\",\"4.11\",\"x\",\"x\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| $el | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"iOS(VDOM) UTS 插件\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"√\",\"4.11\",\"x\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| $callMethod | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"iOS(VDOM) UTS 插件\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"√\",\"4.11\",\"x\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| $emit | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"iOS(VDOM) UTS 插件\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"√\",\"4.11\",\"x\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| $watch | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"iOS(VDOM) UTS 插件\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"√\",\"4.11\",\"x\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| $page | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"iOS(VDOM) UTS 插件\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.31\",\"√\",\"4.31\",\"4.31\",\"x\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |","example":""},"directives":{"compatibility":"|  | 兼容性 |\n| :- | :- |\n| v-text | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| v-html | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.99\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| v-show | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.11\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| v-if | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.11\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| v-else | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.11\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| v-else-if | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.11\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| v-for | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.11\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| v-on | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.11\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| v-bind | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.11\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| v-model | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.11\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| v-slot | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.11\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| v-pre | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.99\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| v-once | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"3.99\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| v-memo | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"3.99\",\"x\",\"4.11\",\"x\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| v-cloak | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |","example":""},"special_attributes":{"compatibility":"|  | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- | :- |\n| key | 4.0 | √ | 3.9 | 4.11 | 4.61 |\n| ref | 4.0 | √ | 3.9 | 4.11 | 4.61 |\n| is | 4.0 | √ | 3.99 | 4.11 | 4.61 |","example":""},"render_function":{"compatibility":"|  | Web | 微信小程序 | Android(VDOM) | Android(Vapor) | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) |\n| :- | :- | :- | :- | :- | :- | :- | :- | :- |\n| h() | 4.0 | x | 3.99 | x | 4.11 | x | 4.61 | x |\n| mergeProps() | 4.0 | x | 4.0 | x | 4.11 | x | 4.61 | x |\n| cloneVNode() | 4.0 | x | 4.0 | x | x | x | x | x |\n| isVNode() | 4.0 | x | √ | x | 4.11 | x | 4.61 | x |\n| resolveComponent() | 4.0 | x | √ | x | 4.11 | x | 4.61 | x |\n| withDirectives() | 4.0 | 4.41 | x | x | 4.11 | x | 4.61 | x |\n| withModifiers() | 4.0 | x | √ | x | 4.11 | x | 4.61 | x |","example":""},"single_file_component_script":{"compatibility":"|  | 兼容性 |\n| :- | :- |\n| defineProps() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| defineEmits() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| defineModel() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.11\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| defineExpose() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| defineOptions() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.11\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| defineSlots() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| useSlots() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| useAttrs() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| useRecycleState() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\",\"5.21\",\"x\",\"5.11\",\"x\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |","example":""},"eventModifiers":{"stop":{"name":"### stop\n","description":"单击事件将停止传递","compatibility":"**兼容性 <Help />** \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | √ | 3.9 | 4.11 | 4.61 |"},"prevent":{"name":"### prevent\n","description":"阻止事件的默认行为（例如阻止链接跳转或表单提交）","compatibility":"**兼容性 <Help />** \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | √ | 4.51 | 4.51 | x |"},"capture":{"name":"### capture\n","description":"添加事件监听器时，使用 `capture` 捕获模式（例如：指向内部元素的事件，在被内部元素处理前，先被外部处理）","compatibility":"**兼容性 <Help />** \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x |"},"self":{"name":"### self\n","description":"仅当 event.target 是元素本身时才会触发事件处理器（仅当 event.target 是元素本身时才会触发事件处理器）","compatibility":"**兼容性 <Help />** \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x |"},"once":{"name":"### once\n","description":"点击事件最多被触发一次","compatibility":"**兼容性 <Help />** \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | x | 3.9 | x | x |"},"passive":{"name":"### passive\n","description":"滚动事件的默认行为 (scrolling) 将立即发生而非等待 `onScroll` 完成（滚动事件的默认行为 (scrolling) 将立即发生而非等待 `onScroll` 完成）","compatibility":"**兼容性 <Help />** \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x |"}},"keyModifiers":{"enter":{"name":"### enter\n","description":"仅在 `key` 为 `Enter` 时调用事件处理器（keycode 为 13）","compatibility":"**兼容性 <Help />** \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x |"},"tab":{"name":"### tab\n","description":"仅在 `key` 为 `Tab` 时调用事件处理器（keycode 为 9）","compatibility":"**兼容性 <Help />** \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x |"},"delete":{"name":"### delete\n","description":"仅在 `key` 为 `Delete` 或 `Backspace` 时调用事件处理器","compatibility":"**兼容性 <Help />** \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x |"},"esc":{"name":"### esc\n","description":"仅在 `key` 为 `Escape` 时调用事件处理器（keycode 为 27）","compatibility":"**兼容性 <Help />** \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x |"},"space":{"name":"### space\n","description":"仅在 `key` 为 `Space` 时调用事件处理器（keycode 为 32）","compatibility":"**兼容性 <Help />** \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x |"},"up":{"name":"### up\n","description":"仅在 `key` 为 `ArrowUp` 时调用事件处理器（keycode 为 38）","compatibility":"**兼容性 <Help />** \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x |"},"down":{"name":"### down\n","description":"仅在 `key` 为 `ArrowDown` 时调用事件处理器（keycode 为 40）","compatibility":"**兼容性 <Help />** \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x |"},"left":{"name":"### left\n","description":"仅在 `key` 为 `ArrowLeft` 时调用事件处理器（keycode 为 37）","compatibility":"**兼容性 <Help />** \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x |"},"right":{"name":"### right\n","description":"仅在 `key` 为 `ArrowRight` 时调用事件处理器（keycode 为 39）","compatibility":"**兼容性 <Help />** \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x |"}},"mouseModifiers":{"left":{"name":"### left\n","description":"单击鼠标左键时触发鼠标事件。","compatibility":"**兼容性 <Help />** \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x |"},"right":{"name":"### right\n","description":"单击鼠标右键时触发鼠标事件","compatibility":"**兼容性 <Help />** \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x |"},"middle":{"name":"### middle\n","description":"单击鼠标中键（滚轮）时触发鼠标事件","compatibility":"**兼容性 <Help />** \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x |"}},"systemModifiers":{"ctrl":{"name":"### ctrl\n","description":"当按下 \\<Control> 时触发鼠标或键盘事件。","compatibility":"**兼容性 <Help />** \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x |"},"alt":{"name":"### alt\n","description":"当按下 \\<Alt> 时触发鼠标或键盘事件。","compatibility":"**兼容性 <Help />** \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x |"},"shift":{"name":"### shift\n","description":"当按下 \\<Shift> 时触发鼠标或键盘事件。","compatibility":"**兼容性 <Help />** \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x |"},"meta":{"name":"### meta\n","description":"当按下 \\<Meta> 时触发鼠标或键盘事件。","compatibility":"**兼容性 <Help />** \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x |"},"exact":{"name":"### exact\n","description":"`.exact` 修饰符允许控制触发事件所需的系统修饰符的精确组合。","compatibility":"**兼容性 <Help />** \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x |"}},"propsModifiers":{"sync":{"name":"### sync\n","description":"","compatibility":""}},"vModelModifiers":{"lazy":{"name":"### lazy\n","description":"默认情况下，`v-model` 会在每次 `input` 事件后更新数据 (IME 拼字阶段的状态例外)。你可以添加 `lazy` 修饰符来改为在每次 `change` 事件后更新数据","compatibility":"**兼容性 <Help />** \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| x | x | 3.9 | x | x |"},"number":{"name":"### number\n","description":"如果你想让用户输入自动转换为数字，你可以在 `v-model` 后添加 `.number` 修饰符来管理输入","compatibility":"**兼容性 <Help />** \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | √ | 3.9 | x | x |"},"trim":{"name":"### trim\n","description":"如果你想要默认自动去除用户输入内容中两端的空格，你可以在 `v-model` 后添加 `.trim` 修饰符","compatibility":"**兼容性 <Help />** \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | √ | 3.9 | x | x |"}},"E_App":{"example":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/App.uvue","code":"```vue\n<script setup lang=\"uts\">\r\n  import { state, setLifeCycleNum, setAppLaunchPath, setAppShowPath } from './store/index.uts'\r\n\r\n  // #ifdef APP-ANDROID || APP-HARMONY\r\n  let firstBackTime = 0\r\n  // #endif\r\n\r\n  defineOptions({\r\n\t\tglobalData: {\r\n\t\t\tstr: 'globalData str',\r\n\t\t\tnum: 1,\r\n\t\t\tboolean: true\r\n\t\t}\r\n  \t// #ifndef APP-ANDROID || VUE3-VAPOR\r\n\t\t,mixins: [{\r\n      data() {\r\n        return {\r\n          appMixinDataMsg: 'App.uvue mixin data msg'\r\n        }\r\n      }\r\n    }]\r\n  \t// #endif\r\n  })\r\n\tonLaunch((options) => {\r\n\t\t// 自动化测试\r\n\t\tsetLifeCycleNum(state.lifeCycleNum + 1000)\r\n\t\tsetAppLaunchPath(options.path)\r\n\t\tconsole.log('App Launch')\r\n\t})\r\n\tonAppShow((options) => {\r\n\t\t// 自动化测试\r\n\t\tsetLifeCycleNum(state.lifeCycleNum + 100)\r\n\t\tsetAppShowPath(options.path)\r\n  // #ifndef VUE3-VAPOR\r\n\t\tnextTick(() => {\r\n      if(getApp()?.vm?.globalPropertiesStr === 'default string'){\r\n        setLifeCycleNum(state.lifeCycleNum + 10)\r\n      }\r\n    })\r\n  // #endif\r\n\t\tconsole.log('App Show')\r\n\t})\r\n\tonAppHide(() => {\r\n\t\t// 自动化测试\r\n\t\tsetLifeCycleNum(state.lifeCycleNum - 100)\r\n\t\tconsole.log('App Hide')\r\n\t})\r\n\t// #ifdef APP-ANDROID || APP-HARMONY\r\n\tonLastPageBackPress(() => {\r\n\t\t// 自动化测试\r\n\t\tsetLifeCycleNum(state.lifeCycleNum - 1000)\r\n\t\tconsole.log('App LastPageBackPress')\r\n\t\tif (firstBackTime == 0) {\r\n\t\t\tuni.showToast({\r\n\t\t\t\ttitle: '再按一次退出应用',\r\n\t\t\t\tposition: 'bottom',\r\n\t\t\t})\r\n\t\t\tfirstBackTime = Date.now()\r\n\t\t\tsetTimeout(() => {\r\n\t\t\t\tfirstBackTime = 0\r\n\t\t\t}, 2000)\r\n\t\t} else if (Date.now() - firstBackTime < 2000) {\r\n\t\t\tfirstBackTime = Date.now()\r\n\t\t\tuni.exit()\r\n\t\t}\r\n\t})\r\n\tonExit(() => {\r\n\t\tconsole.log('App Exit')\r\n\t})\r\n\t// #endif\r\n\tonError((err: any) => {\r\n\t\tconsole.log('App Error', err)\r\n\t\tsetLifeCycleNum(state.lifeCycleNum + 100)\r\n\t})\r\n\tconst checkLaunchPath = () : boolean => {\r\n\t\tconst HOME_PATH = 'pages/index/index'\r\n\t\tif (state.appLaunchPath != HOME_PATH) {\r\n\t\t\treturn false\r\n\t\t}\r\n\t\tif (state.appShowPath != HOME_PATH) {\r\n\t\t\treturn false\r\n\t\t}\r\n\t\treturn true\r\n\t}\r\n  // #ifndef APP-ANDROID || VUE3-VAPOR\r\n  const checkAppMixin = () : boolean => {\r\n    if(getApp()?.vm?.globalMixinDataMsg1 != '通过 defineMixin 定义全局 mixin data') {\r\n      return false\r\n    }\r\n    if(getApp()?.vm?.appMixinDataMsg != 'App.uvue mixin data msg') {\r\n      return false\r\n    }\r\n    return true\r\n  }\r\n  // #endif\r\n\tdefineExpose({\r\n\t\tcheckLaunchPath,\r\n    // #ifndef APP-ANDROID || VUE3-VAPOR\r\n    checkAppMixin,\r\n    // #endif\r\n\t})\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_pages":{"i18n_i18n":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/i18n/i18n.uvue","code":"```vue\n<template>\n  <view class=\"page\">\n    <view class=\"section\">\n      <text class=\"title\">{{ t('i18n.title') }}</text>\n      <text class=\"description\">{{ t('i18n.description') }}</text>\n      <text class=\"locale-label\">{{ t('i18n.currentLocale') }}: {{ locale }}</text>\n    </view>\n\n    <view class=\"section\">\n      <text class=\"message greeting\">{{ t('i18n.greeting') }}</text>\n      <text class=\"message named\">{{ t('i18n.named', { framework: 'uni-app x' } as UTSJSONObject) }}</text>\n    </view>\n\n    <view class=\"button-group\">\n      <button class=\"locale-btn locale-btn-zh-hans\" @click=\"changeLocale('zh-Hans')\">\n        {{ t('i18n.switchToZhHans') }}\n      </button>\n      <button class=\"locale-btn locale-btn-zh-hant\" @click=\"changeLocale('zh-Hant')\">\n        {{ t('i18n.switchToZhHant') }}\n      </button>\n      <button class=\"locale-btn locale-btn-en\" @click=\"changeLocale('en')\">\n        {{ t('i18n.switchToEn') }}\n      </button>\n    </view>\n  </view>\n</template>\n\n<script setup lang=\"uts\">\nimport { useI18n } from 'vue-i18n'\n\nconst { t, locale } = useI18n()\n\nconst syncLocale = (newLocale : string) => {\n  locale.value = newLocale\n}\n\n// #ifdef WEB || MP\nuni.onLocaleChange((res : UniNamespace.OnLocaleChangeCallbackResult) => {\n  if (res.locale != null) {\n    syncLocale(res.locale!)\n  }\n})\n// #endif\n\nconst changeLocale = (newLocale : string) => {\n  // #ifdef WEB || MP\n  uni.setLocale(newLocale)\n  // #endif\n  syncLocale(newLocale)\n}\n\nconst getContentSnapshot = () : UTSJSONObject => {\n  return {\n    locale: locale.value,\n    title: t('i18n.title'),\n    description: t('i18n.description'),\n    greeting: t('i18n.greeting'),\n    named: t('i18n.named', { framework: 'uni-app x' } as UTSJSONObject)\n  } as UTSJSONObject\n}\n\ndefineExpose({\n  changeLocale,\n  getContentSnapshot\n})\n</script>\n\n<style>\n.page {\n  flex: 1;\n  padding: 16px;\n}\n\n.section {\n  margin-bottom: 16px;\n}\n\n.title {\n  font-size: 22px;\n  font-weight: 700;\n  color: #1f2937;\n  margin-bottom: 8px;\n}\n\n.description,\n.locale-label,\n.message {\n  font-size: 16px;\n  color: #374151;\n  margin-top: 8px;\n}\n\n.button-group {\n  margin-top: 8px;\n}\n\n.locale-btn {\n  margin-top: 10px;\n}\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/i18n/i18n"},"pinia_pinia":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/pinia/pinia.uvue","code":"```vue\n<template>\n  <view class=\"page\">\n    <view class=\"flex justify-between flex-row mb-10\">\n      <text>name:</text>\n      <text id=\"store-name\">{{ name }}</text>\n    </view>\n    <view class=\"flex justify-between flex-row mb-10\">\n      <text>count:</text>\n      <text id=\"store-count\">{{ count }}</text>\n    </view>\n    <view class=\"flex justify-between flex-row mb-10\">\n      <text>double count:</text>\n      <text id=\"store-double-count\">{{ doubleCount }}</text>\n    </view>\n    <view class=\"flex justify-between flex-row mb-10\">\n      <text>count text:</text>\n      <text id=\"store-count-text\">{{ countText }}</text>\n    </view>\n    <button class=\"mb-10\" id=\"increment-btn\" @click=\"increment\">increment</button>\n    <button class=\"mb-10\" id=\"decrement-btn\" @click=\"decrement\">decrement</button>\n    <button class=\"mb-10\" id=\"rename-btn\" @click=\"rename\">rename</button>\n    <button id=\"reset-btn\" @click=\"reset\">reset</button>\n  </view>\n</template>\n\n<script setup lang=\"uts\">\nimport { defineStore, storeToRefs } from 'pinia'\n\nconst useCounterStore = defineStore('piniaCounter', () => {\n  const name = ref('Pinia')\n  const count = ref(0)\n\n  const doubleCount = computed(() : number => {\n    return count.value * 2\n  })\n\n  const countText = computed(() : string => {\n    return `${name.value}: ${count.value}`\n  })\n\n  const increment = () => {\n    count.value++\n  }\n\n  const decrement = () => {\n    count.value--\n  }\n\n  const rename = () => {\n    name.value = name.value == 'Pinia' ? 'Pinia Store' : 'Pinia'\n  }\n\n  const reset = () => {\n    name.value = 'Pinia'\n    count.value = 0\n  }\n\n  return {\n    name,\n    count,\n    doubleCount,\n    countText,\n    increment,\n    decrement,\n    rename,\n    reset\n  }\n})\n\nconst counterStore = useCounterStore()\nconst { name, count, doubleCount, countText } = storeToRefs(counterStore)\n\nconst increment = () => {\n  counterStore.increment()\n}\n\nconst decrement = () => {\n  counterStore.decrement()\n}\n\nconst rename = () => {\n  counterStore.rename()\n}\n\nconst reset = () => {\n  counterStore.reset()\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/pinia/pinia"},"reactivity_render-effect-guard":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/reactivity/render-effect-guard.uvue","code":"```vue\n<template>\r\n    <view class=\"page\">\r\n        <text class=\"title\">渲染副作用守卫</text>\r\n        <text id=\"case-desc\" class=\"desc\">验证同一个渲染 effect 中，只有 scrollIntoView 变化时，不应重放 scrollTop=0 等未变更的宿主副作用。</text>\r\n        <text id=\"case-steps\" class=\"desc\">点击按钮后先滚到 target；300ms 后只清空 scrollIntoView，页面应继续停留在 target 附近。</text>\r\n        <text id=\"case-fail\" class=\"desc\">如果缺少 guard，会在清空 scrollIntoView 时重放 scrollTop=0，导致滚回顶部。</text>\r\n\r\n        <button id=\"btn\" class=\"button\" @click=\"run\">滚到 target</button>\r\n\r\n        <text id=\"state\" class=\"state\">state: {{ state }}</text>\r\n        <text id=\"current-top\" class=\"state\">currentTop: {{ currentTop }}</text>\r\n\r\n        <scroll-view id=\"scroller\" class=\"scroller\" scroll-y=\"true\" :scroll-top=\"scrollTop\"\r\n            :scroll-into-view=\"scrollIntoView\" @scroll=\"onScroll\">\r\n            <view id=\"top\" class=\"item\">top</view>\r\n            <view id=\"target\" class=\"item target\">target</view>\r\n            <view id=\"bottom\" class=\"item\">bottom</view>\r\n        </scroll-view>\r\n    </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n    const scrollTop = ref(0)\r\n    const scrollIntoView = ref('')\r\n    const currentTop = ref(0)\r\n    const state = ref('ready')\r\n\r\n    function run() {\r\n        scrollIntoView.value = 'target'\r\n        state.value = 'scrollIntoView=target'\r\n\r\n        setTimeout(() => {\r\n            // 只清空 scroll-into-view，不改 scroll-top。\r\n            // 错误实现会重放 scroll-top=0，导致 currentTop 回到 0。\r\n            scrollIntoView.value = ''\r\n            state.value = 'scrollIntoView=empty'\r\n        }, 300)\r\n    }\r\n\r\n    function onScroll(e : UniScrollEvent) {\r\n        currentTop.value = e.detail.scrollTop\r\n    }\r\n\r\n    defineExpose({\r\n        currentTop\r\n    })\r\n</script>\r\n\r\n<style>\r\n    .page {\r\n        padding: 20px;\r\n    }\r\n\r\n    .title {\r\n        font-size: 20px;\r\n        font-weight: bold;\r\n        margin-bottom: 8px;\r\n    }\r\n\r\n    .desc {\r\n        font-size: 14px;\r\n        color: #555555;\r\n        margin-bottom: 6px;\r\n        line-height: 22px;\r\n    }\r\n\r\n    .button {\r\n        margin-top: 10px;\r\n        margin-bottom: 10px;\r\n    }\r\n\r\n    .state {\r\n        font-size: 14px;\r\n        margin-bottom: 4px;\r\n    }\r\n\r\n    .scroller {\r\n        height: 160px;\r\n        border: 1px solid #cccccc;\r\n        margin-top: 12px;\r\n    }\r\n\r\n    .item {\r\n        height: 160px;\r\n        line-height: 160px;\r\n        text-align: center;\r\n        background-color: #f5f5f5;\r\n    }\r\n\r\n    .target {\r\n        background-color: #bde7ff;\r\n    }\r\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/render-effect-guard"},"type_type":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/type/type.uvue","code":"```vue\n<template>\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\r\n  <scroll-view style=\"flex: 1\">\r\n  <!-- #endif -->\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n<script setup lang='uts'>\r\n  // 仅引用类型，模板中不使用，也要保证不报错\r\n  let testType: TestTypeComponentPublicInstance | null = null;\r\n  onLoad(() => {\r\n    console.log('testType', testType)\r\n  })\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/type/type"}},"E_app-instance":{"component_component":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/alpha/pages/app-instance/globalProperties/globalProperties-composition.uvue","code":"```vue\n<template>\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\r\n  <scroll-view style=\"flex: 1;\">\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 && !VUE3-VAPOR -->\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 10px 40px 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.com/dcloud/hello-uvue/blob/alpha/pages/app-instance/globalProperties/globalProperties-options.uvue","code":"```vue\n<template>\r\n  <!-- #ifdef APP -->\r\n  <scroll-view style=\"flex: 1;\">\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 10px 40px 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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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      style='background-color: lightblue;'\n      @childClick=\"() => {}\" />\n\n    <child-multi-tag\n      class=\"child-class\"\n      str=\"str from parent\"\n      style='background-color: lightblue;'\n      @childClick=\"() => {}\" />\n  </view>\n</template>\n\n<script setup lang=\"uts\">\nimport child from './child-composition.uvue'\nimport childMultiTag from './child-composition-multi-tag.uvue'\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/attrs/attrs-composition"},"attrs_attrs-options":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/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      style=\"background-color: lightblue;\"\n      @childClick=\"() => {}\" />\n\n    <child-multi-tag\n      class=\"child-class\"\n      str=\"str from parent\"\n      style='background-color: lightblue;'\n      @childClick=\"() => {}\" />\n  </view>\n</template>\n\n<script lang=\"uts\">\nimport child from './child-options.uvue'\nimport childMultiTag from './child-composition-multi-tag.uvue'\nexport default {\n  components: {\n    child,\n    childMultiTag\n  },\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/attrs/attrs-options"},"attrs_child-composition-multi-tag":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/attrs/child-composition-multi-tag.uvue","code":"```vue\n<template>\n    <text>多跟节点继承 $attrs.style 只有 hasStyleAttr 设置天蓝色背景</text>\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 class=\"mb-10 flex flex-row justify-between\" :style=\"$attrs['style']!\">\n      <text>hasStyleAttr</text>\n      <text id=\"has-style-attr\">{{ hasStyleAttr }}</text>\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\nconst hasStyleAttr = computed(():boolean=>{\n  return attrs['style'] != null\n})\n\n// const backgroundColor = computed((): string => {\n//   const styleObj = attrs['style'] as UTSJSONObject\n//   return (styleObj?.['background-color'] as string) ?? ''\n// })\n\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/attrs/child-composition-multi-tag"},"attrs_child-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/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 class=\"mb-10 flex flex-row justify-between\">\n      <text>hasStyleAttr</text>\n      <text id=\"has-class-attr\">{{ hasStyleAttr }}</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\nconst hasStyleAttr = computed(():boolean=>{\n  return attrs['style'] != null\n})\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/attrs/child-composition"},"attrs_child-options-multi-tag":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/attrs/child-options-multi-tag.uvue","code":"```vue\n<template>\n   <text>多跟节点继承 $attrs.style 只有 hasStyleAttr 设置天蓝色背景</text>\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 class=\"mb-10 flex flex-row justify-between\" :style=\"$attrs['style']!\">\n      <text>hasStyleAttr</text>\n      <text id=\"has-class-attr\">{{ hasStyleAttr }}</text>\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\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    hasStyleAttr(): boolean {\n      return this.$attrs['style'] != null\n    },\n  },\n  methods:{\n    getAttr(_e: PointerEvent) {\n      console.log(this.$attrs['styles']);\n    }\n  }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/attrs/child-options-multi-tag"},"attrs_child-options":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/attrs/child-options.uvue","code":"```vue\n<template>\n  <view>\n    <text>单一节点继承 $attrs.style 整个组件设置天蓝色背景</text>\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 class=\"mb-10 flex flex-row justify-between\">\n      <text>hasStyleAttr</text>\n      <text id=\"has-class-attr\" class=\"has-class-attr\">{{ hasStyleAttr }}</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    hasStyleAttr(): boolean {\n      return this.$attrs['style'] != null\n    },\n  },\n  methods:{\n    getAttr(_e: PointerEvent) {\n      console.log(this.$attrs['styles']);\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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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 class=\"emit-function-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\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/emit-function/emit-function-composition"},"emit-function_emit-function-options":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/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 class=\"emit-function-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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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=\"mt-10 time\">Date.now(): {{ Date.now() }}</text>\n    <button\n      class=\"mt-10 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"},"inherit-attrs_comp-inherit-attrs-false-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/inherit-attrs/comp-inherit-attrs-false-composition.uvue","code":"```vue\n<template>\n\t<view id=\"container\" class=\"p-10 comp-inherit-attrs-false-composition\">\n\t\t<text>inheritAttrs: false</text>\n\t\t<view class=\"flex flex-row\">\n\t\t\t<text>id: </text>\n\t\t\t<text id=\"comp-inherit-attrs-false-composition-id\">{{ id }}</text>\n\t\t</view>\n\t\t<view class=\"flex flex-row\">\n\t\t\t<text>class: </text>\n\t\t\t<text id=\"comp-inherit-attrs-false-composition-class\">{{\n\t\t\t\tclassName\n\t\t\t}}</text>\n\t\t</view>\n\t\t<view class=\"flex flex-row\">\n\t\t\t<text>data-test: </text>\n\t\t\t<text id=\"comp-inherit-attrs-false-composition-data-test\">{{\n\t\t\t\tdataTest\n\t\t\t}}</text>\n\t\t</view>\n\t</view>\n</template>\n\n<script setup lang=\"uts\">\ndefineOptions({\n\tinheritAttrs: false\n})\n\nconst id = ref('')\nconst className = ref('')\nconst dataTest = ref('')\n\nonMounted(() => {\n\tconst container = getCurrentInstance()!.proxy!.$el as UniElement\n\tid.value = container.getAttribute('id') ?? ''\n\tclassName.value = container.classList.toString()\n\tdataTest.value = container.getAttribute('data-test') ?? ''\n})\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/inherit-attrs/comp-inherit-attrs-false-composition"},"inherit-attrs_comp-inherit-attrs-false-options":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/inherit-attrs/comp-inherit-attrs-false-options.uvue","code":"```vue\n<template>\n\t<view id=\"container\" class=\"p-10 comp-inherit-attrs-false-options\">\n\t\t<text>inheritAttrs: false</text>\n\t\t<view class=\"flex flex-row\">\n\t\t\t<text>id: </text>\n\t\t\t<text id=\"comp-inherit-attrs-false-options-id\">{{ id }}</text>\n\t\t</view>\n\t\t<view class=\"flex flex-row\">\n\t\t\t<text>class: </text>\n\t\t\t<text id=\"comp-inherit-attrs-false-options-class\">{{ className }}</text>\n\t\t</view>\n\t\t<view class=\"flex flex-row\">\n\t\t\t<text>data-test: </text>\n\t\t\t<text id=\"comp-inherit-attrs-false-options-data-test\">{{ dataTest }}</text>\n\t\t</view>\n\t</view>\n</template>\n\n<script>\nexport default {\n\tinheritAttrs: false,\n\tdata(){\n\t\treturn {\n\t\t\tid: '',\n\t\t\tclassName: '',\n\t\t\tdataTest: ''\n\t\t}\n\t},\n\tmounted() {\n\t\tconst container = this.$el!\n\t\tthis.id = container.getAttribute('id') ?? ''\n\t\tthis.className = container.classList.toString()\n\t\tthis.dataTest = container.getAttribute('data-test') ?? ''\n\t}\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/inherit-attrs/comp-inherit-attrs-false-options"},"inherit-attrs_comp-inherit-attrs-true-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/inherit-attrs/comp-inherit-attrs-true-composition.uvue","code":"```vue\n<template>\n\t<view id=\"container\" class=\"p-10\" @click=\"handleClickInComp\">\n\t\t<text>inheritAttrs: true</text>\n\t\t<view class=\"flex flex-row\">\n\t\t\t<text>id: </text>\n\t\t\t<text id=\"comp-inherit-attrs-true-composition-id\">{{ id }}</text>\n\t\t</view>\n\t\t<view class=\"flex flex-row\">\n\t\t\t<text>class: </text>\n\t\t\t<text id=\"comp-inherit-attrs-true-composition-class\">{{ className }}</text>\n\t\t</view>\n\t\t<view class=\"flex flex-row\">\n\t\t\t<text>data-test: </text>\n\t\t\t<text id=\"comp-inherit-attrs-true-composition-data-test\">{{ dataTest }}</text>\n\t\t</view>\n\t\t<view class=\"flex flex-row\">\n\t\t\t<text>count in comp: </text>\n\t\t\t<text id=\"comp-inherit-attrs-true-composition-count\">{{ count }}</text>\n\t\t</view>\n\t</view>\n</template>\n\n<script setup lang=\"uts\">\n\tdefineOptions({\n\t\tinheritAttrs: true\n\t})\n\n\tconst id = ref('')\n\tconst className = ref('')\n\tconst dataTest = ref('')\n\n\tconst count = ref(0)\n\n\tonMounted(() => {\n\t\tconst container = getCurrentInstance()!.proxy!.$el as UniElement\n\t\tid.value = container.getAttribute('id') ?? ''\n\t\tclassName.value = container.classList.toString()\n\t\tdataTest.value = container.getAttribute('data-test') ?? ''\n\t})\n\n\tconst handleClickInComp = () => {\n\t\tcount.value++\n\t}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/inherit-attrs/comp-inherit-attrs-true-composition"},"inherit-attrs_comp-inherit-attrs-true-options":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/inherit-attrs/comp-inherit-attrs-true-options.uvue","code":"```vue\n<template>\n\t<view id=\"container\" class=\"p-10\" @click=\"handleClickInComp\">\n\t\t<text>inheritAttrs: true</text>\n\t\t<view class=\"flex flex-row\">\n\t\t\t<text>id: </text>\n\t\t\t<text id=\"comp-inherit-attrs-true-options-id\">{{ id }}</text>\n\t\t</view>\n\t\t<view class=\"flex flex-row\">\n\t\t\t<text>class: </text>\n\t\t\t<text id=\"comp-inherit-attrs-true-options-class\">{{ className }}</text>\n\t\t</view>\n\t\t<view class=\"flex flex-row\">\n\t\t\t<text>data-test: </text>\n\t\t\t<text id=\"comp-inherit-attrs-true-options-data-test\">{{ dataTest }}</text>\n\t\t</view>\n\t\t<view class=\"flex flex-row\">\n\t\t\t<text>count in comp: </text>\n\t\t\t<text id=\"comp-inherit-attrs-true-options-count\">{{ count }}</text>\n\t\t</view>\n\t</view>\n</template>\n\n<script>\nexport default {\n\tinheritAttrs: true,\n\tdata(){\n\t\treturn {\n\t\t\tid: '',\n\t\t\tclassName: '',\n\t\t\tdataTest: '',\n\t\t\tcount: 0\n\t\t}\n\t},\n\tmounted() {\n\t\tconst container = this.$el!\n\t\tthis.id = container.getAttribute('id') ?? ''\n\t\tthis.className = container.classList.toString()\n\t\tthis.dataTest = container.getAttribute('data-test') ?? ''\n\t},\n\tmethods: {\n\t\thandleClickInComp() {\n\t\t\tthis.count++\n\t\t}\n\t},\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/inherit-attrs/comp-inherit-attrs-true-options"},"inherit-attrs_inherit-attrs-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/inherit-attrs/inherit-attrs-composition.uvue","code":"```vue\n<template>\n\t<view class=\"p-10\">\n\t\t<text>inheritAttrs 组合式 API</text>\n\t\t<view class=\"flex flex-row\">\n\t\t\t<text>count in page: </text>\n\t\t\t<text id=\"inherit-attrs-composition-count\">{{ count }}</text>\n\t\t</view>\n\t\t<CompInheritAttrsTrueComposition id=\"comp-inherit-attrs-true-composition\" class=\"bg-red\" data-test=\"comp-inherit-attrs-true-composition\" @click=\"handleClickInPage\" />\n\t\t<CompInheritAttrsFalseComposition id=\"comp-inherit-attrs-false-composition\" class=\"bg-red\" data-test=\"comp-inherit-attrs-false-composition\" @click=\"handleClickInPage\" />\n\t</view>\n</template>\n\n<script setup lang=\"uts\">\n\timport CompInheritAttrsTrueComposition from './comp-inherit-attrs-true-composition.uvue'\n\timport CompInheritAttrsFalseComposition from './comp-inherit-attrs-false-composition.uvue'\n\n\tconst count = ref(0)\n\n\tconst handleClickInPage = () => {\n\t\tcount.value++\n\t}\n</script>\n\n<style>\n\t.bg-red {\n\t\tbackground-color: red;\n\t}\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/inherit-attrs/inherit-attrs-composition"},"inherit-attrs_inherit-attrs-options":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/inherit-attrs/inherit-attrs-options.uvue","code":"```vue\n<template>\n\t<view class=\"p-10\">\n\t\t<text>inheritAttrs 选项式 API</text>\n\t\t<view class=\"flex flex-row\">\n\t\t\t<text>count in page: </text>\n\t\t\t<text id=\"inherit-attrs-options-count\">{{ count }}</text>\n\t\t</view>\n\t\t<CompInheritAttrsTrueOptions id=\"comp-inherit-attrs-true-options\" class=\"bg-red\" data-test=\"comp-inherit-attrs-true-options\" @click=\"handleClickInPage\" />\n\t\t<CompInheritAttrsFalseOptions id=\"comp-inherit-attrs-false-options\" class=\"bg-red\" data-test=\"comp-inherit-attrs-false-options\" @click=\"handleClickInPage\" />\n\t</view>\n</template>\n\n<script>\nimport CompInheritAttrsTrueOptions from './comp-inherit-attrs-true-options.uvue'\nimport CompInheritAttrsFalseOptions from './comp-inherit-attrs-false-options.uvue'\nexport default {\n\tcomponents: {\n\t\tCompInheritAttrsTrueOptions,\n\t\tCompInheritAttrsFalseOptions\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tcount: 0\n\t\t}\n\t},\n\tmethods: {\n\t\thandleClickInPage() {\n\t\t\tthis.count++\n\t\t}\n\t}\n}\n</script>\n\n<style>\n.bg-red{\n\tbackground-color: red;\n}\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/inherit-attrs/inherit-attrs-options"},"inject_inject-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/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>\n    <text class=\"mt-10 fn\">notFoundWithWarning: {{notFoundWithWarning}}</text>\n    <text class=\"mt-10 fn\">notFoundWithDefaultValue: {{notFoundWithDefaultValue}}</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  }\n  \n  const notFoundWithWarning = inject(\"notFoundWithWarning\")\n  const notFoundWithDefaultValue = inject(\"notFoundWithDefaultValue\", null)\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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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    <test-getter-setter-composition ref=\"getterAndSetterComposition\"></test-getter-setter-composition>\n    <!-- #ifndef VUE3-VAPOR -->\n    <test-getter-setter-options ref=\"getterAndSetterOptions\"></test-getter-setter-options>\n    <!-- #endif -->\n    <view>\n        <text>getter-setter: <text id=\"getterAndSetter\">{{JSON.stringify(getterAndSetterResult)}}</text></text>\n    </view>\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 getterAndSetterComposition = ref<TestGetterSetterCompositionComponentPublicInstance | null>(null)\n// #ifndef VUE3-VAPOR\nconst getterAndSetterOptions = ref<TestGetterSetterOptionsComponentPublicInstance | null>(null)\n// #endif\nconst getterAndSetterResult = ref<number[]>([])\n\nconst callGetterAndSetterCompositionGetCount = (): number => {\n    return getterAndSetterComposition.value!.getCount()\n}\nconst callGetterAndSetterCompositionGetCountWithCallMethod = (): number => {\n    return getterAndSetterComposition.value!.$callMethod('getCount') as number\n}\n// #ifndef VUE3-VAPOR\nconst callGetterAndSetterOptionsGetCount = (): number => {\n    return getterAndSetterOptions.value!.getCount()\n}\nconst callGetterAndSetterOptionsGetCountWithCallMethod = (): number => {\n    return getterAndSetterOptions.value!.$callMethod('getCount') as number\n}\n// #endif\nconst callGetterAndSetterCompositionSetCount = (count: number) => {\n    getterAndSetterComposition.value!.setCount(count)\n}\nconst callGetterAndSetterCompositionSetCountWithCallMethod = (count: number) => {\n    getterAndSetterComposition.value!.$callMethod('setCount', count)\n}\n// #ifndef VUE3-VAPOR\nconst callGetterAndSetterOptionsSetCount = (count: number) => {\n    getterAndSetterOptions.value!.setCount(count)\n}\nconst callGetterAndSetterOptionsSetCountWithCallMethod = (count: number) => {\n    getterAndSetterOptions.value!.$callMethod('setCount', count)\n}\n// #endif\n\nconst callGetterAndSetter = (): number[] => {\n    const result: number[] = []\n    callGetterAndSetterCompositionSetCount(1)\n    result.push(callGetterAndSetterCompositionGetCount())\n    callGetterAndSetterCompositionSetCountWithCallMethod(2)\n    result.push(callGetterAndSetterCompositionGetCountWithCallMethod())\n    // #ifndef VUE3-VAPOR\n    callGetterAndSetterOptionsSetCount(3)\n    result.push(callGetterAndSetterOptionsGetCount())\n    callGetterAndSetterOptionsSetCountWithCallMethod(4)\n    result.push(callGetterAndSetterOptionsGetCountWithCallMethod())\n    // #endif\n    getterAndSetterResult.value = result\n    return result\n}\nconst delay = (): Promise<string> =>\n  new Promise((resolve, _) => {\n    setTimeout(() => {\n      resolve('')\n    }, 1000)\n  })\n\nconst call = async (): Promise<void> => {\n  callGetterAndSetter()\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.com/dcloud/hello-uvue/blob/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    <test-getter-setter-composition ref=\"getterAndSetterComposition\"></test-getter-setter-composition>\n    <test-getter-setter-options ref=\"getterAndSetterOptions\"></test-getter-setter-options>\n    <view>\n        <text>getter-setter: <text id=\"getterAndSetter\">{{JSON.stringify(getterAndSetterResult)}}</text></text>\n    </view>\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      getterAndSetterComposition: null as TestGetterSetterCompositionComponentPublicInstance | null,\n      getterAndSetterOptions: null as TestGetterSetterOptionsComponentPublicInstance | null,\n      getterAndSetterResult: [] as number[]\n    }\n  },\n  onReady() {\n    // 通过组件 ref 属性获取组件实例, 组件标签名首字母大写，驼峰+ComponentPublicInstance\n    this.callEasyMethod1 = this.$refs['callEasyMethod1'] as CallEasyMethodComponentPublicInstance\n    this.customCallEasyMethod1 = this.$refs['customCallEasyMethod1'] as CustomCallEasyMethodComponentPublicInstance\n    \n    this.getterAndSetterComposition = this.$refs['getterAndSetterComposition'] as TestGetterSetterCompositionComponentPublicInstance\n    this.getterAndSetterOptions = this.$refs['getterAndSetterOptions'] as TestGetterSetterOptionsComponentPublicInstance\n    this.call()\n  },\n  methods: {\n    async call(): Promise<void> {\n      this.callGetterAndSetter()\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    callGetterAndSetter(): number[] {\n        const result:number[] = []\n        this.callGetterAndSetterCompositionSetCount(1)\n        result.push(this.callGetterAndSetterCompositionGetCount())\n        this.callGetterAndSetterCompositionSetCountWithCallMethod(2)\n        result.push(this.callGetterAndSetterCompositionGetCountWithCallMethod())\n        this.callGetterAndSetterOptionsSetCount(3)\n        result.push(this.callGetterAndSetterOptionsGetCount())\n        this.callGetterAndSetterOptionsSetCountWithCallMethod(4)\n        result.push(this.callGetterAndSetterOptionsGetCountWithCallMethod())\n        this.getterAndSetterResult = result\n        return result\n    },\n    callGetterAndSetterCompositionGetCount(): number {\n        return this.getterAndSetterComposition!.getCount()\n    },\n    callGetterAndSetterCompositionGetCountWithCallMethod(): number {\n        return this.getterAndSetterComposition!.$callMethod('getCount') as number\n    },\n    callGetterAndSetterOptionsGetCount(): number {\n        return this.getterAndSetterOptions!.getCount()\n    },\n    callGetterAndSetterOptionsGetCountWithCallMethod(): number {\n        return this.getterAndSetterOptions!.$callMethod('getCount') as number\n    },\n    callGetterAndSetterCompositionSetCount(count: number) {\n        this.getterAndSetterComposition!.setCount(count)\n    },\n    callGetterAndSetterCompositionSetCountWithCallMethod(count: number) {\n        this.getterAndSetterComposition!.$callMethod('setCount', count)\n    },\n    callGetterAndSetterOptionsSetCount(count: number) {\n        this.getterAndSetterOptions!.setCount(count)\n    },\n    callGetterAndSetterOptionsSetCountWithCallMethod(count: number) {\n        this.getterAndSetterOptions!.$callMethod('setCount', count)\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.com/dcloud/hello-uvue/blob/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-ANDROID || APP-IOS) && !VUE3-VAPOR -->\n    <!-- 在兼容组件中 ios 返回非普通对象数据，比如 Map 数据时候会被 jscore 统一处理为 object，和安卓产生了差异 -->\n    <!-- 测试用例用来验证返回数据特殊，安卓和其他平台无此限制 -->\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\n  // #ifdef (APP-ANDROID || APP-IOS) && !VUE3-VAPOR\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 && !VUE3-VAPOR\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 && !VUE3-VAPOR\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    isNumListValid.value = isArray && isLengthGt0\n  }\n  // #endif\n\n\n  // #ifdef APP-ANDROID && !VUE3-VAPOR\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 && !VUE3-VAPOR\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    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.com/dcloud/hello-uvue/blob/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-IOS || APP-ANDROID || APP-HARMONY -->\n    <!-- 在兼容组件中 ios 返回非普通对象数据，比如 Map 数据时候会被 jscore 统一处理为 object，和安卓产生了差异 -->\n    <!-- 测试用例用来验证返回数据特殊，安卓和其他平台无此限制 -->\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 || APP-HARMONY\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 || APP-HARMONY\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.com/dcloud/hello-uvue/blob/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\nfunction callMethodFooWithDefaultParameter(): any | null{\n  return componentRef.value?.$callMethod('fooWithDefaultParameter', 10)\n}\n\nfunction callMethodFooWithRestParameter(): any | null{\n  return componentRef.value?.$callMethod('fooWithRestParameter', \"test\", 10, 11)\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  await delay()\n  callMethodFooWithDefaultParameter()\n  await delay()\n  callMethodFooWithRestParameter()  \n}\n\nonReady(() => {\n  call()\n})\n\ndefineExpose({\n  callMethodTest,\n  callMethodFooWithDefaultParameter,\n  callMethodFooWithRestParameter\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.com/dcloud/hello-uvue/blob/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      await delay()\n      // callMethod时，不支持默认参数，必须主动传入\n      this.callMethodFooWithDefaultParameter()\n      await delay()\n      this.callMethodFooWithGenericParameter()\n      await delay()\n      this.callMethodFooWithRestParameter()\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    callMethodFooWithDefaultParameter(): any | null{\n      return this.component1?.$callMethod('fooWithDefaultParameter', 10)\n    },\n    callMethodFooWithGenericParameter(): any | null{\n      return this.component1?.$callMethod('fooWithGenericParameter', 10)\n    },\n    callMethodFooWithRestParameter(): any | null{\n      return this.component1?.$callMethod('fooWithRestParameter', \"test\", 10, 11)\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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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\nfunction fooWithDefaultParameter(n = 1): number {\n  result.value = \"fooWithDefaultParameter=\" + n\n  return n\n}\n\nfunction fooWithGenericParameter<T>(n: T): T{\n  result.value = \"fooWithGeneric=\" + n\n  return n\n}\n\nfunction fooWithRestParameter(name: string, ...n: number[]): string {\n  const res = JSON.stringify([name, ...n])\n  result.value = \"fooWithRestParameter=\" + res\n  return res\n}\n\ndefineExpose({\n  foo1,\n  foo2,\n  foo3,\n  foo4,\n  foo5,\n  fooWithDefaultParameter: fooWithDefaultParameter,\n  // 不支持导出泛型函数\n  // fooWithGenericParameter: fooWithGenericParameter,\n  fooWithRestParameter: fooWithRestParameter\n})\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/methods/component1-composition"},"methods_component1":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/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      fooWithDefaultParameter(n = 1): number {\n        this.result = \"fooWithDefaultParameter=\" + n\n        return n\n      },\n      fooWithGenericParameter<T>(n: T): T{\n        this.result = \"fooWithGeneric=\" + n\n        return n\n      },\n      fooWithRestParameter(name: string, ...n: number[]): string {\n        const res = JSON.stringify([name, ...n])\n        this.result = \"fooWithRestParameter=\" + res\n        return res\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.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/mixins/mixins-app-page-namesake.uvue","code":"```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\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 && !VUE3-VAPOR -->\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.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/mixins/mixins-app.uvue","code":"```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\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 && !VUE3-VAPOR -->\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.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/mixins/mixins-web.uvue","code":"```vue\n<template>\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\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 && !VUE3-VAPOR -->\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.com/dcloud/hello-uvue/blob/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 setup>\nconst mpRenderer = ref('')\nconst ins = getCurrentInstance()?.proxy\n\nonLoad(() => {\n  mpRenderer.value = ins?.$scope?.renderer || ''\n})\n</script>\n\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/mp-instance/mp-instance"},"nextTick_child-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/nextTick/child-composition.uvue","code":"```vue\n<template>\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\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 && !VUE3-VAPOR -->\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 as UniTextElement).value\r\n    // #endif\r\n    // #ifndef APP\r\n    // @ts-ignore\r\n    dataInfo.beforeNextTickTitle = childText.textContent\r\n    // #endif\r\n    \r\n    await nextTick()\r\n    \r\n    // #ifdef APP\r\n    dataInfo.afterNextTickTitle = (childText as UniTextElement).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.com/dcloud/hello-uvue/blob/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 as UniTextElement).value\r\n        // #endif\r\n        // #ifndef APP\r\n        // @ts-ignore\r\n        this.dataInfo.beforeNextTickCallbackTitle = childText.textContent\r\n        // #endif\r\n        \r\n        this.$nextTick(() => {\r\n          // #ifdef APP\r\n          this.dataInfo.afterNextTickCallbackTitle = (childText as UniTextElement).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 as UniTextElement).value\r\n        // #endif\r\n        // #ifndef APP\r\n        // @ts-ignore\r\n        this.dataInfo.beforeNextTickPromiseTitle = childText.textContent\r\n        // #endif\r\n        \r\n        this.$nextTick().then(() => {\r\n          // #ifdef APP\r\n          this.dataInfo.afterNextTickPromiseTitle = (childText as UniTextElement).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.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/nextTick/nextTick-composition.uvue","code":"```vue\n<template>\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\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      <button class=\"mt-10\" id=\"after-next-tick-get-text-btn\" @click=\"afterNextTickGetText\">toggle v-if text</button>\r\n      <text v-if=\"dataInfo.showTestText\" class=\"mt-10\" id=\"v-if-next-tick-should-getable\">测试 v-if & nextTick 后获取元素</text>\r\n    </view>\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\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    showTestText: boolean\r\n    vIfNextTickTestTextGetAble: boolean\r\n  }\r\n\r\n  const dataInfo = reactive({\r\n    title: 'default title',\r\n    beforeNextTickTitle: '',\r\n    afterNextTickTitle: '',\r\n    showTestText: false,\r\n    vIfNextTickTestTextGetAble: false,\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 as UniTextElement).value\r\n    // #endif\r\n    // #ifndef APP\r\n    // @ts-ignore\r\n    dataInfo.beforeNextTickTitle = pageText.textContent\r\n    // #endif\r\n    \r\n    await nextTick()\r\n    \r\n    // #ifdef APP\r\n    dataInfo.afterNextTickTitle = (pageText as UniTextElement).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  const afterNextTickGetText = () => {\r\n    dataInfo.showTestText = !dataInfo.showTestText\r\n    nextTick(() => {\r\n      const text = uni.getElementById('v-if-next-tick-should-getable')\r\n      dataInfo.vIfNextTickTestTextGetAble = text != null\r\n      console.log('after v-if nextTick should getable text:', dataInfo.vIfNextTickTestTextGetAble)\r\n    })\r\n  }\r\n\r\n  defineExpose({\r\n    dataInfo,\r\n    afterNextTickGetText\r\n  })\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/nextTick/nextTick-composition"},"nextTick_nextTick-options":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/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 title123:</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      <button class=\"mt-10\" id=\"after-next-tick-get-text-btn\" @click=\"afterNextTickGetText\">toggle v-if text</button>\r\n      <text v-if=\"showTestText\" class=\"mt-10\" id=\"v-if-next-tick-should-getable\">测试 v-if & nextTick 后获取元素</text>\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        showTestText: false,\r\n        vIfNextTickTestTextGetAble: false\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 as UniTextElement).value\r\n        // #endif\r\n        // #ifdef WEB\r\n        // @ts-ignore\r\n        this.dataInfo.beforeNextTickCallbackTitle = pageText.textContent\r\n        // #endif\r\n        \r\n        this.$nextTick(() => {\r\n          // #ifdef APP\r\n          this.dataInfo.afterNextTickCallbackTitle = (pageText as UniTextElement).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 as UniTextElement).value\r\n        // #endif\r\n        // #ifdef WEB\r\n        // @ts-ignore\r\n        this.dataInfo.beforeNextTickPromiseTitle = pageText.textContent\r\n        // #endif\r\n        \r\n        this.$nextTick().then(() => {\r\n          // #ifdef APP\r\n          this.dataInfo.afterNextTickPromiseTitle = (pageText as UniTextElement).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      afterNextTickGetText(){\r\n        this.showTestText = !this.showTestText\r\n        this.$nextTick(() => {\r\n          const text = uni.getElementById('v-if-next-tick-should-getable')\r\n          this.vIfNextTickTestTextGetAble = text != null\r\n          console.log('after v-if nextTick should getable text:', this.vIfNextTickTestTextGetAble)\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.com/dcloud/hello-uvue/blob/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 && !VUE3-VAPOR -->\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    <!-- #ifndef VUE3-VAPOR -->\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    <!-- #endif -->\r\n  </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n// #ifndef VUE3-VAPOR\r\nimport mixins from \"./mixins.uts\"\r\n// #endif\r\n\r\ndefineOptions({\r\n  // #ifndef VUE3-VAPOR\r\n  mixins: [mixins],\r\n  // #endif\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  // #ifdef VUE3-VAPOR\r\n  mixinDataStr: string\r\n  // #endif\r\n}\r\n\r\nconst dataInfo = reactive({\r\n  name: \"\",\r\n  customKey: \"\",\r\n  // #ifdef VUE3-VAPOR\r\n  mixinDataStr: \"\"\r\n  // #endif\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 && !VUE3-VAPOR\r\n  dataInfo.customKey = instance.$options._customKey\r\n  // #ifndef VUE3-VAPOR\r\n  dataInfo.mixinDataStr = instance.$options.data!({})!['str']\r\n  // #endif\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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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 && !VUE3-VAPOR\r\n    parentStr.value = (instance.$parent!.$exposed['str'] as Ref<string>).value\r\n    // #endif\r\n    // #ifndef APP-ANDROID && !VUE3-VAPOR\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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/parent/parent-composition.uvue","code":"```vue\n<template>\r\n  <view class=\"page\">\r\n    <child ref=\"childRef\" class=\"parent-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 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>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/parent/parent-composition"},"parent_parent-options":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/parent/parent-options.uvue","code":"```vue\n<template>\n  <view class=\"page\">\n    <child ref='child' class=\"parent-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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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>obj.age: </text>\r\n      <text id=\"object-type-obj-age\">{{ obj.age }}</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  nullableStr: {\r\n    // 必须as PropType<string | null>，否则会影响类型的自动推导，导致setup函数内的ctx是any类型\r\n    type: [String, null] as PropType<string | null>,\r\n  },\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.com/dcloud/hello-uvue/blob/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>obj.age: </text>\r\n      <text id=\"object-type-obj-age\">{{ obj.age }}</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\tnullableStr: {\r\n\t\t\t\t// 必须as PropType<string | null>，否则会影响类型的自动推导，导致setup函数内的ctx是any类型\r\n\t\t\t\ttype: [String, null] as PropType<string | null>,\r\n\t\t\t},\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_page-props-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/props/page-props-composition.uvue","code":"```vue\n<template>\n\t<view class=\"p-10\">\n\t\t<text id=\"page-props-composition-title\" class=\"text\">{{title}}</text>\n\t\t<text id=\"page-props-composition-from\" class=\"text\">{{from}}</text>\n\t\t<text id=\"page-props-composition-number\" class=\"text\">{{number}}</text>\n\t\t<text id=\"page-props-composition-boolean\" class=\"text\">{{boolean}}</text>\n\t\t<text id=\"page-props-composition-object\" class=\"text\">{{JSON.stringify(object)}}</text>\n\t\t<text id=\"page-props-composition-array\" class=\"text\">{{JSON.stringify(array)}}</text>\n\t</view>\n</template>\n\n<script setup>\n\timport { setLifeCycleNum, state } from '@/store/index.uts'\n\t\n\tdefineProps({\n\t\tfrom: {\n\t\t\ttype: String,\n\t\t\tdefault: 'bbb'\n\t\t},\n\t\tnumber: {\n\t\t\ttype: Number,\n\t\t\tdefault: 1,\n\t\t\tvalidator(value: number) {\n\t\t\t\treturn value > 0\n\t\t\t}\n\t\t},\n\t\tboolean: {\n\t\t\ttype: Boolean,\n\t\t\trequired: true,\n\t\t},\n\t\tobject: {\n\t\t\ttype: UTSJSONObject,\n\t\t\tdefault: () => {\n\t\t\t\treturn {\n\t\t\t\t\ta: 'a',\n\t\t\t\t\tb: 'b'\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\tarray: {\n\t\t\ttype: Array as PropType<string[]>,\n\t\t\tdefault: () => {\n\t\t\t\treturn ['a','b','c']\n\t\t\t}\n\t\t}\n\t})\n\t\n\tonBeforeMount(() => {\n\t\tconsole.log('page-props-composition onBeforeMount')\n\t\t// 自动化测试\n\t\tsetLifeCycleNum(state.lifeCycleNum + 1)\n\t})\n\t\n\tonMounted(() => {\n\t\tconsole.log('page-props-composition mounted')\n\t\t// 自动化测试\n\t\tsetLifeCycleNum(state.lifeCycleNum + 1)\n\t})\n\t\n\tonBeforeUpdate(() => {\n\t\tconsole.log('page-props-composition beforeUpdate')\n\t\t// 自动化测试\n\t\tsetLifeCycleNum(state.lifeCycleNum + 1)\n\t})\n\t\n\tonUpdated(() => {\n\t\tconsole.log('page-props-composition updated')\n\t\t// 自动化测试\n\t\tsetLifeCycleNum(state.lifeCycleNum + 1)\n\t})\n\t\n\tonBeforeUnmount(() => {\n\t\tconsole.log('page-props-composition beforeUnmount')\n\t\t// 自动化测试\n\t\tsetLifeCycleNum(state.lifeCycleNum + 1)\n\t})\n\t\n\tonUnmounted(() => {\n\t\tconsole.log('page-props-composition unmounted')\n\t\t// 自动化测试\n\t\tsetLifeCycleNum(state.lifeCycleNum + 1)\n\t})\n\t// 组合式 API 且作为组件使用时会触发页面生命周期, 但监听到的是作为组件时所在页面的，而非它自身的\n\tonLoad((options: OnLoadOptions) => {\n\t\tconsole.log('page-props-composition onLoad options', options)\n\t\t// 自动化测试\n\t\tif (options['name'] == 'page-props') {\n\t\t\tsetLifeCycleNum(state.lifeCycleNum + 5)\n\t\t}\n\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\n\t})\n\tonPageShow(() => {\n\t\tconsole.log('page-props-composition onPageShow')\n\t\t// 自动化测试\n\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\n\t})\n\tonReady(() => {\n\t\tconsole.log('page-props-composition onReady')\n\t\t// 自动化测试\n\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\n\t})\n\tonHide(() => {\n\t\tconsole.log('page-props-composition onHide')\n\t\t// 自动化测试\n\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\n\t})\n\tonUnload(() => {\n\t\tconsole.log('page-props-composition onUnload')\n\t\t// 自动化测试\n\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\n\t})\n\n\tconst title = ref('page-props-composition')\n\n\t// 自动化测试\n  const pageSetLifeCycleNum = (num: number) => {\n    state.lifeCycleNum = num\n  }\n  const pageGetLifeCycleNum = () : number => {\n    return state.lifeCycleNum\n  }\n  defineExpose({\n\t\tpageSetLifeCycleNum,\n\t\tpageGetLifeCycleNum\n  })\n</script>\n\n<style>\n\t.text {\n\t\tfont-size: 18px;\n\t\tcolor: #8f8f94;\n    text-align: center;\n\t}\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/props/page-props-composition"},"props_page-props-options":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/props/page-props-options.uvue","code":"```vue\n<template>\n\t<view class=\"p-10\">\n\t\t<text id=\"page-props-options-title\" class=\"text\">{{title}}</text>\n\t\t<text id=\"page-props-options-from\" class=\"text\">{{from}}</text>\n\t\t<text id=\"page-props-options-number\" class=\"text\">{{number}}</text>\n\t\t<text id=\"page-props-options-boolean\" class=\"text\">{{boolean}}</text>\n\t\t<text id=\"page-props-options-object\" class=\"text\">{{JSON.stringify(object)}}</text>\n\t\t<text id=\"page-props-options-array\" class=\"text\">{{JSON.stringify(array)}}</text>\n\t</view>\n</template>\n\n<script>\n\timport { setLifeCycleNum, state } from '@/store/index.uts'\n\t\n\texport default {\n\t\tprops: {\n\t\t\tfrom: {\n\t\t\t\ttype: String,\n\t\t\t\tdefault: 'aaa'\n\t\t\t},\n\t\t\tnumber: {\n\t\t\t\ttype: Number,\n\t\t\t\tdefault: 1,\n\t\t\t\tvalidator(value: number) {\n\t\t\t\t\treturn value > 0\n\t\t\t\t}\n\t\t\t},\n\t\t\tboolean: {\n\t\t\t\ttype: Boolean,\n\t\t\t\trequired: true,\n\t\t\t},\n\t\t\tobject: {\n\t\t\t\ttype: UTSJSONObject,\n\t\t\t\tdefault: () => {\n\t\t\t\t\treturn {\n\t\t\t\t\t\ta: 1,\n\t\t\t\t\t\tb: 2\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\t\t\tarray: {\n\t\t\t\ttype: Array as PropType<number[]>,\n\t\t\t\tdefault: () => {\n\t\t\t\t\treturn [1, 2, 3]\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttitle: 'page-props-options'\n\t\t\t}\n\t\t},\n\t\tbeforeCreate() {\n\t\t\tconsole.log('page-props-options beforeCreate')\n\t\t\t// 自动化测试\n\t\t\tsetLifeCycleNum(state.lifeCycleNum + 1)\n\t\t},\n\t\tcreated() {\n\t\t\tconsole.log('page-props-options created')\n\t\t\t// 自动化测试\n\t\t\tsetLifeCycleNum(state.lifeCycleNum + 1)\n\t\t},\n\t\tbeforeMount(){\n\t\t\tconsole.log('page-props-options beforeMount')\n\t\t\t// 自动化测试\n\t\t\tsetLifeCycleNum(state.lifeCycleNum + 1)\n\t\t},\n\t\tmounted(){\n\t\t\tconsole.log('page-props-options mounted')\n\t\t\t// 自动化测试\n\t\t\tsetLifeCycleNum(state.lifeCycleNum + 1)\n\t\t},\n\t\tbeforeUnmount(){\n\t\t\tconsole.log('page-props-options beforeUnmount')\n\t\t\t// 自动化测试\n\t\t\tsetLifeCycleNum(state.lifeCycleNum + 1)\n\t\t},\n\t\tunmounted(){\n\t\t\tconsole.log('page-props-options unmounted')\n\t\t\t// 自动化测试\n\t\t\tsetLifeCycleNum(state.lifeCycleNum + 1)\n\t\t},\n\t\tonLoad(options: OnLoadOptions) {\n\t\t\tconsole.log('page-props-options onLoad options', options)\n\t\t\t// 自动化测试\n\t\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\n\t\t},\n\t\tonShow() {\n\t\t\tconsole.log('page-props-options onShow')\n\t\t\t// 自动化测试\n\t\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\n\t\t},\n\t\tonReady() {\n\t\t\tconsole.log('page-props-options onReady')\n\t\t\t// 自动化测试\n\t\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\n\t\t},\n\t\tonHide() {\n\t\t\tconsole.log('page-props-options onHide')\n\t\t\t// 自动化测试\n\t\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\n\t\t},\n\t\tonUnload() {\n\t\t\tconsole.log('page-props-options onUnload')\n\t\t\t// 自动化测试\n\t\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\n\t\t},\n\t\tmethods: {\n\t\t\t// 自动化测试\n\t\t\tpageSetLifeCycleNum(num: number) {\n\t\t\t\tsetLifeCycleNum(num)\n\t\t\t},\n\t\t\t// 自动化测试\n\t\t\tpageGetLifeCycleNum(): number {\n\t\t\t\treturn state.lifeCycleNum\n\t\t\t}\n\t\t}\n\t}\n</script>\n\n<style>\n\t.text {\n\t\tfont-size: 18px;\n\t\tcolor: #8f8f94;\n    text-align: center;\n\t}\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/props/page-props-options"},"props_page-props":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/props/page-props.uvue","code":"```vue\n<template>\n\t<view class=\"p-10\">\n\t\t<text>测试页面作为组件引入</text>\n\t\t<!-- #ifndef MP-ALIPAY -->\n\t\t<!-- #ifndef VUE3-VAPOR -->\n\t\t<PagePropsOptions class=\"page-props-options-component\" from=\"page\" :number='10' :boolean='true' :object='{c: 10, d: 20}' :array='[4,5,6]' />\n    <!-- #endif -->\n\t\t<PagePropsComposition class=\"page-props-composition-component\" from=\"page\" :number='10' :boolean='true' :object='{c: 10, d: 20}' :array='[4,5,6]' />\n\t\t<!-- #endif -->\n\t\t<!-- #ifndef VUE3-VAPOR -->\n\t\t<button id='go-options-page' class=\"mt-10\" @click=\"navigateToPage('/pages/component-instance/props/page-props-options?from=page-navigateTo')\">goOptionsPage</button>\n    <!-- #endif -->\n\t\t<button id=\"go-composition-page\" class=\"mt-10\" @click=\"navigateToPage('/pages/component-instance/props/page-props-composition?from=page-navigateTo')\">goCompositionPage</button>\n\t</view>\n</template>\n\n<script setup>\nimport { setLifeCycleNum, state } from '@/store/index.uts'\n// #ifndef MP-ALIPAY\n// #ifndef VUE3-VAPOR\n\timport PagePropsOptions from './page-props-options'\n// #endif\n\timport PagePropsComposition from './page-props-composition'\n// #endif\n\t\n\tconst navigateToPage = (url: string) => {\n\t\tuni.navigateTo({\n\t\t\turl\n\t\t})\n\t}\n\t// 自动化测试\n\tconst pageSetLifeCycleNum = (num : number) => {\n\t\tsetLifeCycleNum(num)\n\t}\n\t// 自动化测试\n\tconst pageGetLifeCycleNum = () : number => {\n\t\treturn state.lifeCycleNum\n\t}\n\n\tdefineExpose({\n\t\tpageSetLifeCycleNum,\n\t\tpageGetLifeCycleNum\n\t})\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/props/page-props"},"props_props-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/props/props-composition.uvue","code":"```vue\n<template>\r\n  <view class=\"page\">\r\n    <array-literal class=\"array-literal-component\" :str=\"str\" :num=\"num\" :bool=\"bool\" :obj=\"obj\" :arr=\"arr\" />\r\n    <object-type class=\"object-type-component\" str=\"str\" :num=\"num\" :bool=\"bool\" :obj=\"obj\" :arr=\"arr\" />\r\n    <same-name-prop-default-value class=\"same-name-prop-default-value-component\" />\r\n    <props-with-defaults class=\"props-with-defaults-component\" />\r\n    <!-- #ifdef APP-ANDROID -->\r\n    <reference-types class=\"reference-types-component\" :list=\"[1,2,3]\" />\r\n    <!-- #endif -->\r\n    <!-- #ifndef APP-ANDROID -->\r\n    <reference-types class=\"reference-types-component\" :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>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/props/props-composition"},"props_props-options":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/props/props-options.uvue","code":"```vue\n<template>\r\n  <view class=\"page\">\r\n    <array-literal class=\"array-literal-component\" :str=\"str\" :num=\"num\" :bool=\"bool\" :obj=\"obj\" :arr=\"arr\" />\r\n    <object-type class=\"object-type-component\" str=\"str\" :num=\"num\" :bool=\"bool\" :obj=\"obj\" :arr=\"arr\" />\r\n    <same-name-prop-default-value class=\"same-name-prop-default-value-component\" />\r\n    <props-with-defaults class=\"props-with-defaults-component\" />\r\n    <!-- #ifdef APP-ANDROID -->\r\n    <reference-types class=\"reference-types-component\" :list=\"[1,2,3]\" />\r\n    <!-- #endif -->\r\n    <!-- #ifndef APP-ANDROID -->\r\n    <reference-types class=\"reference-types-component\" :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>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/props/props-options"},"props_props-with-defaults":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/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\">\ntype CustomPropsTestType = {\n  a?: number\n}  \ninterface CustomProps {\n  msg: string\n  labels : string[]\n  test: CustomPropsTestType\n  testArr1?: CustomPropsTestType[]\n  testArr2?: Array<CustomPropsTestType>\n}\n\nconst props = withDefaults(defineProps<CustomProps>(), {\n  msg: 'hello',\n  labels: ():string[] => ['a', 'b'],\n  test: {} as CustomPropsTestType\n})\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/props/props-with-defaults"},"props_reactive-props-destructure-child":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/props/reactive-props-destructure-child.uvue","code":"```vue\n<script setup lang=\"uts\">\ntype Props = {\n  testId : string\n  count ?: number\n  label ?: string\n}\n\nconst {\n  testId,\n  count = 0,\n  label = 'default label'\n} = defineProps<Props>()\n\nconst watchedCount = ref<number>(-1)\n\nwatch(() => count, (value : number) => {\n  watchedCount.value = value\n}, {\n  immediate: true,\n  flush: 'sync'\n})\n</script>\n\n<template>\n  <view class=\"example-card\">\n    <view class=\"row\">\n      <text>count:</text>\n      <text :id=\"testId + '-count'\">{{ count }}</text>\n    </view>\n    <view class=\"row\">\n      <text>label:</text>\n      <text :id=\"testId + '-label'\">{{ label }}</text>\n    </view>\n    <view class=\"row\">\n      <text>watched count:</text>\n      <text :id=\"testId + '-watched-count'\">{{ watchedCount }}</text>\n    </view>\n  </view>\n</template>\n\n<style>\n.example-card {\n  padding: 12px;\n  margin-bottom: 12px;\n  border-width: 1px;\n  border-style: solid;\n  border-color: #dddddd;\n  border-radius: 6px;\n}\n\n.row {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  margin-bottom: 8px;\n}\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/props/reactive-props-destructure-child"},"props_reactive-props-destructure":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/props/reactive-props-destructure.uvue","code":"```vue\n<script setup lang=\"uts\">\nimport ReactivePropsDestructureChild from './reactive-props-destructure-child.uvue'\n\nconst count = ref<number>(1)\nconst label = ref<string>('initial label')\n\nfunction updateProps() {\n  count.value++\n  label.value = `updated label ${count.value}`\n}\n\ndefineExpose({\n  updateProps\n})\n</script>\n\n<template>\n  <view class=\"page\">\n    <text class=\"section-title\">响应式 Props 解构</text>\n    <ReactivePropsDestructureChild\n      test-id=\"custom\"\n      :count=\"count\"\n      :label=\"label\"\n    />\n    <ReactivePropsDestructureChild test-id=\"default\" />\n    <button id=\"update-props-btn\" @click=\"updateProps\">更新 Props</button>\n  </view>\n</template>\n\n<style>\n.section-title {\n  margin-bottom: 12px;\n  font-size: 18px;\n  font-weight: bold;\n}\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/props/reactive-props-destructure"},"props_reference-types-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/provide/provide-composition.uvue","code":"```vue\n<template>\n  <view class=\"page\">\n    <inject-comp class=\"component-for-inject\" />\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.com/dcloud/hello-uvue/blob/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 class=\"component-for-inject\" />\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.com/dcloud/hello-uvue/blob/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 class=\"component-for-inject\" />\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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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 class=\"mt-10\">\n      <text class=\"section-title\">getCurrentInstance() + $refs</text>\n    </view>\n    <view class=\"row\">\n      <text>$refs 获取 nodeRef:</text>\n      <text>{{ dataInfo.existRefByRefs }}</text>\n    </view>\n    <view class=\"row\">\n      <text>$refs 获取 childRef:</text>\n      <text>{{ dataInfo.existChildRefByRefs }}</text>\n    </view>\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  existRefByRefs: boolean\n  existChildRefByRefs: boolean\n}\n\nconst dataInfo = reactive<DataInfo>({\n  existRef: false,\n  existChildRef: false,\n  textItemsExpectNum: 3,\n  existTextItems: false,\n  existRefByRefs: false,\n  existChildRefByRefs: 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  // 通过 getCurrentInstance() 获取实例，然后通过 $refs 获取 ref\n  const instance = getCurrentInstance()!.proxy!\n  dataInfo.existRefByRefs = instance.$refs['nodeRef'] != null\n  dataInfo.existChildRefByRefs = instance.$refs['childRef'] != null\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.section-title {\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.com/dcloud/hello-uvue/blob/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"},"refs_use-template-ref":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/refs/use-template-ref.uvue","code":"```vue\n<script setup lang=\"uts\">\nimport {useTemplateRef} from 'vue'\n\nconst showTarget = ref<boolean>(true)\nconst targetElement = useTemplateRef<UniTextElement>('target')\nconst hasTarget = computed<boolean>(() : boolean => targetElement.value != null)\n\nfunction toggleTarget() {\n  showTarget.value = !showTarget.value\n}\n\ndefineExpose({\n  toggleTarget\n})\n</script>\n\n<template>\n  <view class=\"page\">\n    <text class=\"section-title\">useTemplateRef</text>\n    <view class=\"row\">\n      <text>target exists:</text>\n      <text id=\"has-template-ref\">{{ hasTarget }}</text>\n    </view>\n    <text v-if=\"showTarget\" id=\"template-ref-target\" ref=\"target\">template ref target</text>\n    <button id=\"toggle-template-ref-btn\" class=\"mt-10\" @click=\"toggleTarget\">切换目标节点</button>\n  </view>\n</template>\n\n<style>\n.section-title {\n  margin-bottom: 12px;\n  font-size: 18px;\n  font-weight: bold;\n}\n\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/use-template-ref"},"root_child-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/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 && !VUE3-VAPOR\n  rootStr.value = (instance.$root!.$exposed['str'] as Ref<string>).value as string\n  // #endif\n\t// #ifdef !APP-ANDROID || (APP-ANDROID && VUE3-VAPOR)\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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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 class=\"root-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!\r\n    // TODO: 确认 android 与 ios 的差异， ios 与标准 vue 相同\r\n    // #ifdef APP-ANDROID && !VUE3-VAPOR\r\n    rootStr.value = (instance.$root!.$exposed['str'] as Ref<string>).value as string\r\n    // #endif\r\n    // #ifdef !APP-ANDROID || (APP-ANDROID && VUE3-VAPOR)\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>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/root/root-composition"},"root_root-options":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/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 class=\"root-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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/setup-function/setup-function.uvue","code":"```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\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 id=\"component-foo\">\n        <text class=\"mt-10\" id=\"default-slot-in-foo\">default slot in Foo</text>\n      </Foo>\n    </view>\n    <!-- #ifdef APP && !VUE3-VAPOR -->\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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/slots/slot-options"},"slots_slots-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/slots/slots-composition.uvue","code":"```vue\n<template>\n  <view class=\"page\">\n    <SlotComp id=\"slot-comp\">\n      <template v-slot:header>\n        <text>header</text>\n      </template>\n      <template v-slot:default>\n        <text>default</text>\n      </template>\n      <template v-slot:footer>\n        <text>footer</text>\n      </template>\n    </SlotComp>\n  </view>\n</template>\n\n<script setup lang=\"uts\">\n  import SlotComp from './slot-composition.uvue'\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/slots/slots-composition"},"slots_slots-options":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/slots/slots-options.uvue","code":"```vue\n<template>\n  <view class=\"page\">\n    <SlotComp id=\"slot-comp\">\n      <template v-slot:header>\n        <text>header</text>\n      </template>\n      <template v-slot:default>\n        <text>default</text>\n      </template>\n      <template v-slot:footer>\n        <text>footer</text>\n      </template>\n    </SlotComp>\n  </view>\n</template>\n\n<script lang=\"uts\">\n  import SlotComp from './slot-options.uvue'\n\n  export default {\n    components: {\n      SlotComp\n    }\n  }\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/slots/slots-options"},"mixins_components_ChildMixinComp1":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/alpha/pages/directive/v-bind/v-bind-composition.uvue","code":"```vue\n<template>\r\n<!-- #ifdef APP && !VUE3-VAPOR -->\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>\n    <view class=\"mb-10 p-10\">\n        <text id=\"bind-raw-object-style\" :style=\"rawObjectStyle\">rawObjectStyle</text>\n    </view>\n    <!-- 目前仅android平台在内部重新调用了normalizeStyle，其他端暂时没有，这应该是vue的bug -->\n    <view class=\"mb-10 p-10\">\n        <text id=\"bind-raw-array-style\" :style=\"rawArrayStyle\">rawArrayStyle</text>\n    </view>\r\n\r\n    <!-- v-bind props -->\r\n    <Foo class=\"foo-props\" :title=\"dataInfo.fooProps.title\" :num=\"dataInfo.fooProps.num\" :obj=\"dataInfo.fooProps.obj\" />\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 && !VUE3-VAPOR -->\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  })\n  \n  const rawObjectStyle = {\n      width: '100%',\n      height: '30px',\n      'background-color': 'red'\n  }\n  \n  const rawArrayStyle = [\n      {\n        width: '100%',\n        height: '30px'\n      },\n      {\n        'background-color': 'red'\n      }\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\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-bind/v-bind-composition"},"v-bind_v-bind-options":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/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>\n    <view class=\"mb-10 p-10\">\n        <text id=\"bind-raw-object-style\" :style=\"rawObjectStyle\">rawObjectStyle</text>\n    </view>\n    <view class=\"mb-10 p-10\">\n        <text id=\"bind-raw-array-style\" :style=\"rawArrayStyle\">rawArrayStyle</text>\n    </view>\r\n\r\n    <!-- v-bind props -->\r\n    <Foo class=\"foo-props\" :title=\"dataInfo.fooProps.title\" :num=\"dataInfo.fooProps.num\" :obj=\"dataInfo.fooProps.obj\" />\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        },\n        rawObjectStyle: {\n            width: '100%',\n            height: '30px',\n            'background-color': 'red'\n        },\n        rawArrayStyle: [\n            {\n              width: '100%',\n              height: '30px'\n            },\n            {\n              'background-color': 'red'\n            }\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\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-bind/v-bind-options"},"v-for_v-for-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/directive/v-for/v-for-composition.uvue","code":"```vue\n<template>\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\r\n  <scroll-view style=\"flex: 1\">\r\n    <!-- #endif -->\r\n    <view class=\"page\">\r\n      <text class=\"bold mb-10\">v-for number</text>\r\n      <view class=\"mb-10\" v-for=\"item in 3\" :key=\"item\">\r\n        <text :id=\"`number-${item}`\">{{ item }}</text>\r\n      </view>\r\n      \r\n      <view class=\"mb-10\" v-for=\"item in utsNumber\" :key=\"item\">\r\n        <text :id=\"`uts-number-${item}`\">{{ item }}</text>\r\n      </view>\r\n\r\n      <view class=\"bold mb-10\">v-for object</view>\r\n      <view\r\n        v-for=\"(value, key) in object\"\r\n        :key=\"key\"\r\n        class=\"mb-10 flex justify-between flex-row\">\r\n        <text :id=\"key\">{{ key }}</text>\r\n        <text :id=\"value\">{{ value }}</text>\r\n      </view>\r\n\r\n      <view class=\"bold mb-10\">v-for & v-if list items</view>\r\n      <view\r\n        id=\"v-for-v-if-list-items\"\r\n        v-for=\"item in listItems\"\r\n        :key=\"item.name\">\r\n        <template v-if=\"item.show\">\r\n          <view class=\"mb-10 flex justify-between flex-row\">\r\n            <text :id=\"item.name\">{{ item.name }}</text>\r\n            <text @click=\"item.count++\" :id=\"`v-if-${item.name}-count`\">{{\r\n              item.count\r\n            }}</text>\r\n          </view>\r\n          <template v-for=\"child in item.items\">\r\n            <view\r\n              v-if=\"child.show\"\r\n              :key=\"child.name\"\r\n              class=\"mb-10 flex justify-between flex-row\">\r\n              <text :id=\"child.name\">{{ child.name }}</text>\r\n              <text @click=\"child.count++\" :id=\"`v-if-${child.name}-count`\">{{\r\n                child.count\r\n              }}</text>\r\n            </view>\r\n          </template>\r\n        </template>\r\n      </view>\r\n\r\n      <view class=\"bold mb-10\">v-for & v-show list items</view>\r\n      <view\r\n        id=\"v-for-v-if-list-items\"\r\n        v-for=\"item in listItems\"\r\n        :key=\"item.name\"\r\n        v-show=\"item.show\">\r\n        <view class=\"mb-10 flex justify-between flex-row\">\r\n          <text :id=\"item.name\">{{ item.name }}</text>\r\n          <text @click=\"item.count++\" :id=\"`v-show-${item.name}-count`\">{{\r\n            item.count\r\n          }}</text>\r\n        </view>\r\n        <view\r\n          v-for=\"child in item.items\"\r\n          v-show=\"child.show\"\r\n          :key=\"child.name\"\r\n          class=\"mb-10 flex justify-between flex-row\">\r\n          <text :id=\"child.name\">{{ child.name }}</text>\r\n          <text @click=\"child.count++\" :id=\"`v-show-${child.name}-count`\">{{\r\n            child.count\r\n          }}</text>\r\n        </view>\r\n      </view>\r\n\r\n      <view\r\n        class=\"mb-10 flex justify-between flex-row\"\r\n        v-for=\"item in mapList\"\r\n        :key=\"item[0]\">\r\n        <text>{{ item[0] }}</text>\r\n        <text :id=\"item[0]\">{{ item[1] }}</text>\r\n      </view>\r\n\r\n      <view class=\"mb-10\" v-for=\"(item, index) in setList\" :key=\"index\">\r\n        <text :id=\"`set-value-${index + 1}`\">{{ item }}</text>\r\n      </view>\r\n\r\n      <view class=\"bold mb-10\">v-for UTSJSONObject</view>\r\n      <view\r\n        v-for=\"(value, key) in utsJSONObject\"\r\n        :key=\"key\"\r\n        class=\"mb-10 flex justify-between flex-row\">\r\n        <text :id=\"key\">{{ key }}</text>\r\n        <text :id=\"value\">{{ value }}</text>\r\n      </view>\r\n    </view>\r\n    <!-- #ifdef APP && !VUE3-VAPOR -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\ntype VForObject = {\r\n  key1 : string\r\n  key2 : string\r\n  key3 : string\r\n}\r\n\r\ntype ListItem = {\r\n  name: string\r\n  count : number\r\n  show: boolean\r\n  items?: ListItem[]\r\n}\r\n\r\n// 可通过泛型指定类型\r\nconst object = reactive<VForObject>({ key1: 'value1', key2: 'value2', key3: 'value3' })\r\nconst listItems = ref<ListItem[]>([\r\n  { name: '1',\r\n    count: 0,\r\n    show: true,\r\n    items:[\r\n      { name: '1-1', count: 0, show: false },\r\n      { name: '1-2', count: 0, show: true },\r\n    ]\r\n  },\r\n  { name: '2',\r\n    count: 0,\r\n    show: true,\r\n    items:[\r\n      { name: '2-1', count: 0, show: true },\r\n      { name: '2-2', count: 0, show: false },\r\n    ]\r\n  },\r\n  { name: '3',\r\n    count: 0,\r\n    show: false,\r\n    items:[\r\n      { name: '3-1', count: 0, show: true },\r\n      { name: '3-2', count: 0, show: true },\r\n    ]\r\n  },\r\n])\r\n\r\nconst mapList = new Map<string, string>([\r\n  ['map-key-1', 'map value 1'],\r\n  ['map-key-2', 'map value 2'],\r\n  ['map-key-3', 'map value 3'],\r\n])\r\n\r\nconst setList = new Set<string>(['set value 1', 'set value 2', 'set value 3'])\r\n\r\nconst utsJSONObject = reactive({ utsKey1: 'UTSJSONObject-value1', utsKey2: 'UTSJSONObject-value2', utsKey3: 'UTSJSONObject-value3' })\r\n\r\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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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_child":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/directive/v-if/child.uvue","code":"```vue\n<template>\n  <view class=\"child-component\">\n    <text>Child Component</text>\n  </view>\n</template>\n\n<script setup lang=\"uts\">\n</script>\n\n<style>\n.child-component {\n  padding: 10px;\n  background-color: #f0f0f0;\n  border-radius: 5px;\n}\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-if/child"},"v-if_v-if-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/directive/v-if/v-if-composition.uvue","code":"```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view style=\"flex: 1\">\n  <!-- #endif -->\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\n        <!-- 测试标题 -->\n        <view class=\"mt-10\">\n          <text class=\"section-title\">多层嵌套v-if测试</text>\n        </view>\n\n        <!-- view 普通版本 -->\n        <view class=\"mt-10\">\n          <text class=\"test-label\">1. view 普通版本 </text>\n          <view class=\"test-item\" v-if=\"viewNormalChild1\">\n            <view v-if=\"viewNormalChild1\" id=\"view-normal-child1\">\n              <text>view二层嵌套内容</text>\n              <view v-if=\"viewNormalChild2\" id=\"view-normal-child2\">\n                <text>view三层嵌套内容</text>\n              </view>\n              <button id=\"toggle-view-normal-child2\" @click=\"viewNormalChild2 = !viewNormalChild2\">内层切换显示</button>\n            </view>\n          </view>\n          <button id=\"toggle-view-normal-child1\" @click=\"viewNormalChild1 = !viewNormalChild1\">外层切换显示</button>\n        </view>\n\n        <!-- view 拍平版本 -->\n        <view class=\"mt-10\">\n          <text class=\"test-label\">2. view 拍平版本 </text>\n          <view class=\"test-item\" v-if=\"viewFlattenChild1\">\n            <view flatten v-if=\"viewFlattenChild1\" id=\"view-flatten-child1\">\n              <view flatten v-if=\"viewFlattenChild1\">\n                <text>view拍平三层嵌套内容（应该能消失）</text>\n              </view>\n            </view>\n          </view>\n          <button id=\"toggle-view-flatten-child1\" @click=\"viewFlattenChild1 = !viewFlattenChild1\">\n            切换显示\n          </button>\n        </view>\n\n        <!-- text 普通版本 -->\n        <view class=\"mt-10\">\n          <text class=\"test-label\">3. text 普通版本 </text>\n          <view class=\"test-item\">\n            <text v-if=\"textNormalChild1\">\n              <text v-if=\"textNormalChild1\" id=\"text-normal-child1\">text二层嵌套内容（应该能消失）</text>\n            </text>\n          </view>\n          <button id=\"toggle-text-normal-child1\" @click=\"textNormalChild1 = !textNormalChild1\">\n            切换显示\n          </button>\n        </view>\n\n        <!-- text 拍平版本 -->\n        <view class=\"mt-10\">\n          <text class=\"test-label\">4. text 拍平版本 </text>\n          <view flatten class=\"test-item\">\n            <text flatten v-if=\"textFlattenChild1\">\n              <text flatten v-if=\"textFlattenChild1\" id=\"text-flatten-child1\">text拍平二层嵌套内容（应该能消失）</text>\n            </text>\n          </view>\n          <button id=\"toggle-text-flatten-child1\" @click=\"textFlattenChild1 = !textFlattenChild1\">\n            切换显示\n          </button>\n        </view>\n\n        <!-- image 普通版本 -->\n        <view class=\"mt-10\">\n          <text class=\"test-label\">5. image 普通版本 </text>\n          <view class=\"test-item\">\n              <image v-if=\"imageNormalChild1\" id=\"image-normal-child1\" src=\"/static/logo.png\" class=\"test-image\"></image>\n          </view>\n          <button id=\"toggle-image-normal-child1\" @click=\"imageNormalChild1 = !imageNormalChild1\">\n            切换显示\n          </button>\n        </view>\n\n        <!-- image 拍平版本 -->\n        <view class=\"mt-10\">\n          <text class=\"test-label\">6. image 拍平版本（多层嵌套v-if）</text>\n          <view flatten class=\"test-item\">\n              <image flatten v-if=\"imageFlattenChild1\" id=\"image-flatten-child1\" src=\"/static/logo.png\" class=\"test-image\"></image>\n          </view>\n          <button id=\"toggle-image-flatten-child1\" @click=\"imageFlattenChild1 = !imageFlattenChild1\">\n            切换显示\n          </button>\n        </view>\n        \n        <!-- scroll-view：动态切换 -->\n        <view class=\"mt-10\">\n          <text class=\"test-label\">8. scroll-view（动态v-if）</text>\n          <view class=\"test-item\">\n            <scroll-view v-if=\"scrollViewChild1\" id=\"scroll-view-child1\" class=\"scroll-view-test\">\n              <text>scroll-view内容1（应该能消失）</text>\n              <view><text>scroll-view内容2（应该能消失）</text></view>\n            </scroll-view>\n            <button id=\"toggle-scroll-view-child1\" @click=\"scrollViewChild1 = !scrollViewChild1\">\n              切换scroll-view显示\n            </button>\n          </view>\n        </view>\n\n        <!-- 自定义 child 组件 -->\n        <view class=\"mt-10\">\n          <text class=\"test-label\">9. child 组件（子child动态v-if普通版本➕拍平版本）</text>\n          <view class=\"test-item\">\n            <child v-if=\"childComponent1\" id=\"child-component1\"></child>\n            <view flatten>\n                <child v-if=\"childComponent1\" id=\"child-component2\" flatten></child>\n            </view>\n            <button id=\"toggle-child-component1\" @click=\"childComponent1 = !childComponent1\">\n              切换child组件显示\n            </button>\n          </view>\n        </view>\n\n      </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\nimport child from './child.uvue'\n\n// 原有变量\nconst show = ref(true)\nconst num = ref(1)\n\n// view 测试变量\nconst viewNormalChild1 = ref(true)\nconst viewNormalChild2 = ref(true)\nconst viewFlattenChild1 = ref(true)\n\n// text 测试变量\nconst textNormalChild1 = ref(true)\nconst textFlattenChild1 = ref(true)\n\n// image 测试变量\nconst imageNormalChild1 = ref(true)\nconst imageFlattenChild1 = ref(true)\n\n// scroll-view 测试变量\nconst scrollViewChild1 = ref(true)\n\n// child 组件测试变量\nconst childComponent1 = ref(true)\n\nconst changeNum = () => {\n  if(num.value<3) {\n    num.value++\n  } else {\n    num.value = 1\n  }\n}\n</script>\n\n<style>\n.section-title {\n  font-size: 16px;\n  font-weight: bold;\n  margin-bottom: 10px;\n}\n\n.test-label {\n  font-size: 14px;\n  color: #666;\n  margin-bottom: 5px;\n}\n\n.test-item {\n  padding: 10px;\n  background-color: #f5f5f5;\n  border-radius: 5px;\n}\n\n.test-image {\n  width: 50px;\n  height: 50px;\n}\n\n.scroll-view-test {\n  height: 100px;\n  background-color: #e0e0e0;\n  padding: 10px;\n}\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-if/v-if-composition"},"v-if_v-if-options":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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_ArrayModelChild":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/directive/v-model/ArrayModelChild.uvue","code":"```vue\n<template>\n  <view class=\"array-model-container\">\n    <text id=\"array-model-value\">{{ modelValue.length }}</text>\n    <button class=\"btn\" id=\"array-model-btn\" @click=\"addItem\">add item</button>\n  </view>\n</template>\n\n<script setup lang=\"uts\">\nconst props = defineProps({\n  modelValue: {\n    type: Array,\n    default: () => [] as string[]\n  }\n})\n\nconst emit = defineEmits(['update:modelValue'])\n\nconst addItem = () => {\n  const list = props.modelValue as string[]\n  const newVal = [...list, 'Item ' + (list.length + 1)]\n  emit('update:modelValue', newVal)\n}\n</script>\n\n<style>\n.array-model-container {\n  border: 1px solid #ccc;\n  padding: 10px;\n  margin: 10px 0;\n  border-radius: 4px;\n}\n.btn {\n  margin-top: 10px;\n}\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-model/ArrayModelChild"},"v-model_Foo-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/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    <view class=\"mb-10 flex justify-between flex-row\">\n      <text>defineModel utsObj.value:</text>\n      <text id=\"model-uts-obj-value-text\">{{ utsObjModelValue }}</text>\n    </view>\n    <view class=\"mb-10 flex justify-between flex-row\">\n      <text>defineModel typeObj.value:</text>\n      <text id=\"model-type-obj-value-text\">{{ typeObjModelValue }}</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 utsObjModelValue = defineModel('utsObjModelValue', { type: String })\nconst typeObjModelValue = defineModel('typeObjModelValue', { type: String })\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  utsObjModelValue.value += '1'\n  typeObjModelValue.value += '1'\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-model/Foo-composition"},"v-model_Parent":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/directive/v-model/Parent.uvue","code":"```vue\n<template>\r\n    <Son class=\"son-component\" 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>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-model/Parent"},"v-model_Son":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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      v-model:utsObjModelValue=\"utsObj['modelValue']\"\n      v-model:typeObjModelValue=\"typeObj.modelValue\"\n      @update:modelValue=\"handleModelValueUpdate\"\n      @update:msg=\"handleModelMsgUpdate\"\n       />\n    <input class=\"mb-10 input\" id=\"model-value-input\" v-model=\"str\" @input=\"onInput\" />\n    <input class=\"mb-10 input\" id=\"model-msg-input\" v-model=\"msg\" />\n    <input class=\"mb-10 input\" id=\"model-uts-obj-value-input\" v-model=\"utsObj['modelValue']\" />\n    <input class=\"mb-10 input\" id=\"model-type-obj-value-input\" v-model=\"typeObj.modelValue\" />\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 class=\"mb-10 flex justify-between flex-row\">\n      <text>arrayValue:</text>\n      <text id=\"array-value\">{{ arrayValue.region }}</text>\n    </view>\n    <ArrayModelChild v-model=\"arrayValue.region\"></ArrayModelChild>\n  </view>\n</template>\n\n<script setup lang=\"uts\">\nimport Foo from './Foo-composition.uvue'\nimport Parent from './Parent.uvue'\nimport ArrayModelChild from './ArrayModelChild.uvue'\nimport { VModelObj } from './types.uts'\n\nconst str = ref('str')\nconst msg = ref('msg')\nconst strArr = ref<string[]>(['0'])\nconst numArr = ref<number[]>([0])\nconst value = ref(\"nested\");\nconst arrayValue = reactive({\n\tregion: [] as string[]\n});\nconst handleModelValueUpdateRes = ref('')\nconst handleModelValueUpdate = (val : string) => {\n  handleModelValueUpdateRes.value = val\n}\nconst handleModelMsgUpdateRes = ref('')\nconst handleModelMsgUpdate = (val : string) => {\n  handleModelMsgUpdateRes.value = val\n}\n\nconst utsObj = reactive({ modelValue: 'utsObj.value' })\nconst typeObj = reactive({ modelValue: 'typeObj.value' } as VModelObj)\n\nfunction onInput(){\n  // noop\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.com/dcloud/hello-uvue/blob/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\" @input=\"onInput\" />\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 id=\"parent-component\" v-model=\"value\"></Parent>\n    <Parent v-model=\"utsObj['modelValue']\"></Parent>\n    <Parent v-model=\"typeObj.modelValue\"></Parent>\n    <Parent v-model=\"typeObj.modelValue as string\"></Parent>\n  </view>\n</template>\n\n<script lang=\"uts\">\nimport Parent from './Parent.uvue'\nimport { VModelObj } from './types.uts'\nexport default {\n  data(){\n    return {\n      str: 'str',\n      num: 1,\n      strForTrim: ' abc ',\n      value: 'nested',\n      utsObj: {\n        modelValue: 'utsObj.value'\n      },\n      typeObj: {\n        modelValue: 'typeObj.value'\n      } as VModelObj\n    }\n  },\n  components: {\n      Parent\n  },\n  methods: {\n    onInput(){\n      // noop\n    }\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.com/dcloud/hello-uvue/blob/alpha/pages/directive/v-on/v-on-composition.uvue","code":"```vue\n<template>\r\n  <view class=\"page\">\r\n    <text class=\"bold mb-10\">下方按钮点击累加 count</text>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>count:</text>\r\n      <text id=\"count\">{{ count }}</text>\r\n    </view>\r\n    <button class=\"mb-10 btn\" @click=\"handleClick\">\r\n      @click=\"handleClick\" 缩写\r\n    </button>\r\n    <button class=\"mb-10 btn\" v-on:click=\"handleClick\">\r\n      v-on:click=\"handleClick\" 方法处理函数\r\n    </button>\r\n    <button class=\"mb-10 btn\" v-on:click=\"count++\">\r\n      v-on:click=\"count++\" 内联事件\r\n    </button>\r\n    <button class=\"mb-10 btn\" v-on:click=\"handleClick($event as MouseEvent)\">\r\n      v-on:click=\"handleClick($event as MouseEvent)\"\r\n      内联声明，注意要显式声明$event的类型\r\n    </button>\r\n    <!-- #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>\r\n    <!-- #endif -->\r\n    <!-- TODO: ios 不支持 -->\r\n    <!-- #ifndef APP-IOS || MP || APP-HARMONY -->\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    <button class=\"mb-10\" id=\"btn-prevent\" @touchstart.prevent=\"handleTouchstart\" @click=\"handleClick\">@touch prevent</button>\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\ntype BtnPreventRect = {\r\n  value: DOMRect | null\r\n}\r\n\r\nlet btnPreventRect = reactive({\r\n  value: null\r\n} as BtnPreventRect)\r\n// #ifdef APP\r\nonReady(() => {\r\n  const btnPrevent = uni.getElementById(\"btn-prevent\")\r\n  btnPreventRect.value = btnPrevent!.getBoundingClientRect()\r\n  btnPreventRect.value!.y += uni.getSystemInfoSync().safeArea.top + 44\r\n})\r\n// #endif\r\n\r\nconst handleTouchstart = () => {\r\n  console.log('handleTouchstart')\r\n}\r\n\r\nconst handleClick = (e : MouseEvent) => {\r\n  count.value++\r\n  console.log('handleClick', e)\r\n}\r\n\r\ndefineExpose({\r\n  btnPreventRect\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.com/dcloud/hello-uvue/blob/alpha/pages/directive/v-on/v-on-options.uvue","code":"```vue\n<template>\r\n  <view class=\"page\">\r\n    <text class=\"bold mb-10\">下方按钮点击累加 count</text>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>count:</text>\r\n      <text id=\"count\">{{ count }}</text>\r\n    </view>\r\n    <button class=\"mb-10 btn\" @click=\"handleClick\">@click=\"handleClick\" 缩写</button>\r\n    <button class=\"mb-10 btn\" v-on:click=\"handleClick\">\r\n      v-on:click=\"handleClick\" 方法处理函数\r\n    </button>\r\n    <button class=\"mb-10 btn\" v-on:click=\"count++\">\r\n      v-on:click=\"count++\" 内联事件\r\n    </button>\r\n    <button class=\"mb-10 btn\" v-on:click=\"handleClick($event as MouseEvent)\">\r\n      v-on:click=\"handleClick($event as MouseEvent)\"\r\n      内联声明，注意要显式声明$event的类型\r\n    </button>\r\n    <!-- #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>\r\n    <!-- #endif -->\r\n    <!-- TODO: ios 不支持 -->\r\n    <!-- #ifndef APP-IOS || MP || APP-HARMONY -->\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    <button class=\"mb-10\" id=\"btn-prevent\" @touchstart.prevent=\"handleTouchstart\" @click=\"handleClick\">@touch prevent</button>\r\n  </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\ntype BtnPreventRect = {\r\n  value: DOMRect | null\r\n}\r\n  \r\nexport default {\r\n  data() {\r\n    return {\r\n      count: 0,\r\n      event: 'click',\r\n      btnPreventRect: {\r\n        value: null as DOMRect | null\r\n      } as BtnPreventRect\r\n    }\r\n  },\r\n\t// #ifdef APP\r\n  onReady(){\r\n    const btnPrevent = uni.getElementById(\"btn-prevent\")\r\n    console.log('btnPrevent', btnPrevent);\r\n    this.btnPreventRect.value = btnPrevent?.getBoundingClientRect()\r\n    console.log('btnPreventRect', this.btnPreventRect.value);\r\n    this.btnPreventRect.value!.y += uni.getSystemInfoSync().safeArea.top + 44\r\n  },\r\n\t// #endif\r\n  methods: {\r\n    handleTouchstart(){\r\n      console.log('handleTouchstart')\r\n    },\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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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>\r\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.com/dcloud/hello-uvue/blob/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    <template v-for=\"item in 2\">\n      <slot name=\"withFor\" :item=\"item\"></slot>\n    </template>\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.com/dcloud/hello-uvue/blob/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    <template v-for=\"item in 2\">\n      <slot name=\"withFor\" :item=\"item\"></slot>\n    </template>\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_issue-29737":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/directive/v-slot/issue-29737.uvue","code":"```vue\n<template>\n  <scroll-view class=\"page\" direction=\"vertical\">\n    <view class=\"header\">\n      <text class=\"title\">#29737 最小复现</text>\n      <text class=\"desc\">点击“打开懒渲染内容”。弹层里应该看到绿色“正常”和 JSON；如果内容为空，就是复现旧问题。</text>\n    </view>\n\n    <view class=\"card\">\n      <text class=\"case-title\">components easycom 最小 picker + 跨组件懒挂载</text>\n      <text class=\"case-desc\">判断标准：绿色“正常”表示父级 item 插槽首次懒渲染成功；内容为空表示旧 bug 复现。当前保留跨组件默认插槽懒挂载这一必要条件。</text>\n      <x-picker-selected\n        id=\"x-picker-selected\"\n        ref=\"pickerRef\"\n        label-key=\"name\"\n        :lazyContent=\"true\"\n        :list=\"list\"\n      >\n        <button id=\"open-panel\">打开懒渲染内容</button>\n        <template v-slot:item=\"{ item }\">\n          <Issue29737Text text-id=\"slot-pass-text\" color=\"#18a058\" font-size=\"18\" line-height=\"1.2\" :lines=\"3\">\n            正常：{{ JSON.stringify(item) }}\n          </Issue29737Text>\n        </template>\n      </x-picker-selected>\n    </view>\n  </scroll-view>\n</template>\n\n<script setup lang=\"uts\">\n  import Issue29737Text from '@/components/issue-29737/Issue29737Text.uvue'\n\n  const list = ref<UTSJSONObject[]>([\n    { id: 29737, lid: '1001', name: '深圳市创明展览设计有限公司' }\n  ])\n  const pickerRef = ref<ComponentPublicInstance | null>(null)\n\n  const openPanel = () => {\n    pickerRef.value?.$callMethod('open')\n  }\n\n  defineExpose({\n    openPanel\n  })\n</script>\n\n<style>\n  .page {\n    flex: 1;\n    padding: 12px;\n  }\n\n  .header {\n    margin-bottom: 12px;\n  }\n\n  .title {\n    color: #111111;\n    font-size: 18px;\n    font-weight: bold;\n    margin-bottom: 8px;\n  }\n\n  .desc {\n    color: #666666;\n    font-size: 13px;\n    margin-bottom: 12px;\n  }\n\n  .card {\n    padding: 12px;\n    border-width: 1px;\n    border-style: solid;\n    border-color: #dddddd;\n    border-radius: 8px;\n  }\n\n  .case-title {\n    color: #111111;\n    font-size: 16px;\n    font-weight: bold;\n    margin-bottom: 6px;\n  }\n\n  .case-desc {\n    color: #666666;\n    font-size: 12px;\n    margin-bottom: 10px;\n  }\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-slot/issue-29737"},"v-slot_v-slot-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/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>\n      <template #withFor=\"{ item }\">\n        <view class=\"mb-10 flex justify-between flex-row\">\n          <text>v-for slot item:</text>\n          <text :id=\"`slot-for-${item}`\">{{ item }}</text>\n        </view>\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.com/dcloud/hello-uvue/blob/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      <template #withFor=\"{ item }\">\n        <view class=\"mb-10 flex justify-between flex-row\">\n          <text>v-for slot item:</text>\n          <text :id=\"`slot-for-${item}`\">{{ item }}</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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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"},"v-bind_dataset_DatasetChild":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/directive/v-bind/dataset/DatasetChild.uvue","code":"```vue\n<template>\n  <view\n    id=\"dataset-child-root\"\n    class=\"custom-child\"\n    data-type=\"custom-own\"\n    data-child-only=\"child\"\n    :data-shared=\"childShared\"\n    :data-child-count=\"childCount\"\n  >\n    <text class=\"custom-title\">点击自定义组件根节点</text>\n    <text class=\"custom-desc\">验证 fallthrough dataset 合并与事件 dataset</text>\n  </view>\n</template>\n\n<script setup lang=\"uts\">\nconst childShared = ref('child-shared')\nconst childCount = ref(10)\n</script>\n\n\n<style>\n.custom-child {\n  margin-top: 10px;\n  padding: 10px;\n  border-width: 1px;\n  border-style: solid;\n  border-color: #cfded4;\n  border-radius: 8px;\n  background-color: #f9fffb;\n}\n.custom-title {\n  font-weight: bold;\n}\n.custom-desc {\n  margin-top: 4px;\n  color: #647067;\n}\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-bind/dataset/DatasetChild"},"v-bind_dataset_dataset-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/directive/v-bind/dataset/dataset-composition.uvue","code":"```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view style=\"flex: 1\">\n  <!-- #endif -->\n  <view class=\"page\">\n    <view\n      id=\"dataset-observer-target\"\n      class=\"summary-card\"\n      data-type=\"observer\"\n      data-observer=\"intersection\"\n    >\n      <text class=\"summary-title\">dataset 全链路验证</text>\n      <text class=\"summary-tip\">覆盖元素直读、Map API、动态更新、自定义组件透传、事件对象和 selector API。</text>\n      <text class=\"summary-tip\">绿色结果区展示当前页面读到的实际 dataset，异常时可以直接从界面定位是哪条链路失败。</text>\n    </view>\n\n    <view class=\"section control-section\">\n      <text class=\"section-title\">操作</text>\n      <button id=\"update-dataset-btn\" class=\"primary-button\" @click=\"updateDataset\">更新动态 dataset</button>\n      <text class=\"hint\">点击下方元素可刷新事件对象 dataset；input 输入时会触发 input 事件。</text>\n    </view>\n\n    <view class=\"section\">\n      <text class=\"section-title\">元素 dataset</text>\n\n      <input\n        id=\"dataset-input\"\n        class=\"dataset-item input\"\n        placeholder=\"输入内容查看 input 事件 dataset\"\n        data-type=\"input\"\n        :data-count=\"count\"\n        @input=\"recordInputEvent\"\n      />\n\n      <DatasetChild\n        data-type=\"custom-fallthrough\"\n        data-parent-only=\"parent\"\n        :data-count=\"count\"\n        :data-shared=\"parentShared\"\n        @click=\"recordEvent('custom', $event as MouseEvent)\"\n      />\n\n      <view\n        id=\"dataset-view\"\n        class=\"dataset-item\"\n        data-type=\"view\"\n        :data-count=\"count\"\n        :data-enabled=\"enabled\"\n        :data-complex=\"complexObj\"\n        :data-array=\"complexArray\"\n        @click=\"recordEvent('view', $event as MouseEvent)\"\n      >\n        <text class=\"item-title\">view</text>\n        <text class=\"item-desc\">动态值、复杂对象、数组</text>\n      </view>\n\n      <text\n        id=\"dataset-text\"\n        class=\"dataset-item\"\n        data-type=\"text\"\n        :data-count=\"count\"\n        @click=\"recordEvent('text', $event as MouseEvent)\"\n      >\n        text：点击查看事件 dataset\n      </text>\n\n      <button\n        id=\"dataset-button\"\n        class=\"secondary-button\"\n        data-type=\"button\"\n        :data-null-value=\"nullValue\"\n        :data-undefined-value=\"undefinedValue\"\n        @click=\"recordEvent('button', $event as MouseEvent)\"\n      >\n        button：null / undefined\n      </button>\n    </view>\n\n    <view class=\"section\">\n      <text class=\"section-title\">API dataset</text>\n      <button class=\"secondary-button\" @click=\"refreshApiDatasetTexts\">刷新 API dataset 结果</button>\n      <view\n        id=\"dataset-query-target\"\n        class=\"dataset-item api-item\"\n        data-type=\"query\"\n        data-query=\"selector\"\n        data-get=\"conflict-get\"\n        data-set=\"conflict-set\"\n        data-has=\"conflict-has\"\n        data-delete=\"conflict-delete\"\n        data-clear=\"conflict-clear\"\n      >\n        <text class=\"item-title\">selector query</text>\n        <text class=\"item-desc\">同时验证 get/set/has/delete/clear 冲突 key</text>\n      </view>\n\n      <scroll-view\n        id=\"dataset-scroll-target\"\n        class=\"scroll-box\"\n        scroll-y=\"true\"\n        data-type=\"scroll\"\n        data-scroll=\"offset\"\n      >\n        <view class=\"scroll-content\">scrollOffset dataset 目标</view>\n      </scroll-view>\n\n      <view\n        class=\"dataset-item api-item\"\n        data-type=\"observer\"\n        data-observer=\"intersection\"\n      >\n        <text class=\"item-title\">intersection observer</text>\n        <text class=\"item-desc\">仅 Web / 小程序自动化覆盖</text>\n      </view>\n    </view>\n\n    <view class=\"result-panel\">\n      <text class=\"section-title\">页面读取结果</text>\n      <view class=\"result-row\">\n        <text class=\"result-label\">view</text>\n        <text id=\"view-dataset-text\" class=\"result-value\">{{ datasetTexts.view }}</text>\n      </view>\n      <view class=\"result-row\">\n        <text class=\"result-label\">text</text>\n        <text id=\"text-dataset-text\" class=\"result-value\">{{ datasetTexts.text }}</text>\n      </view>\n      <view class=\"result-row\">\n        <text class=\"result-label\">input</text>\n        <text id=\"input-dataset-text\" class=\"result-value\">{{ datasetTexts.input }}</text>\n      </view>\n      <view class=\"result-row\">\n        <text class=\"result-label\">button</text>\n        <text id=\"button-dataset-text\" class=\"result-value\">{{ datasetTexts.button }}</text>\n      </view>\n      <text id=\"custom-dataset-text\" class=\"result-line\">custom: {{ datasetTexts.custom }}</text>\n      <text id=\"complex-dataset-text\" class=\"result-line\">complex: {{ datasetTexts.complex }}</text>\n      <text id=\"map-api-dataset-text\" class=\"result-line\">map api: {{ datasetTexts.mapApi }}</text>\n      <text id=\"selector-api-dataset-text\" class=\"result-line\">selector api: {{ datasetTexts.selectorApi }}</text>\n      <text id=\"observer-api-dataset-text\" class=\"result-line\">observer api: {{ datasetTexts.observerApi }}</text>\n      <text id=\"event-dataset-text\" class=\"result-line event-line\">event: {{ eventDatasetText }}</text>\n    </view>\n  </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\nimport DatasetChild from './DatasetChild.uvue'\n\n// #ifdef WEB || MP\nconst componentInstance = getCurrentInstance()!.proxy!\n// #endif\nconst count = ref(1)\nconst enabled = ref(true)\nconst parentShared = ref('parent-shared')\nconst nullValue = null\n// Android VDOM 编译到 KT，不支持 undefined 字面量。\n// #ifdef APP-ANDROID && !VUE3-VAPOR\nconst undefinedValue = null\n// #endif\n// #ifndef APP-ANDROID && !VUE3-VAPOR\nconst undefinedValue = undefined\n// #endif\nconst complexObj = reactive({\n  name: 'complex',\n  nested: {\n    value: 1,\n  } as UTSJSONObject,\n} as UTSJSONObject)\nconst complexArray = ref<any[]>([1, 'a'])\nconst eventDatasetSnapshots = reactive({} as UTSJSONObject)\nconst eventDatasetText = ref('输入或点击下方元素后展示事件 dataset')\nconst datasetTexts = reactive({\n  view: '',\n  text: '',\n  input: '',\n  button: '',\n  custom: '',\n  complex: '',\n  mapApi: '',\n  selectorApi: '',\n  observerApi: '',\n} as UTSJSONObject)\n\n// 小程序 X 不验证 getElementById().dataset，只覆盖事件对象和 selector/intersection API 返回的 dataset。\n// #ifdef MP\nconst isMP = true\n// #endif\n// #ifndef MP\nconst isMP = false\n// #endif\n\n\nfunction getDatasetValue(dataset: any | null, key: string): any | null {\n  if (dataset == null) {\n    return null\n  }\n  const map = dataset as Map<string, any>\n  return map.has(key) ? map.get(key) : null\n}\n\nfunction normalizeDataset(dataset: any | null): UTSJSONObject {\n  const complex = getDatasetValue(dataset, 'complex') as UTSJSONObject | null\n  const complexNested = complex == null ? null : complex['nested'] as UTSJSONObject | null\n  const array = getDatasetValue(dataset, 'array') as any[] | null\n  const nullDatasetValue = getDatasetValue(dataset, 'nullValue')\n  const undefinedDatasetValue = getDatasetValue(dataset, 'undefinedValue')\n  return {\n    type: getDatasetValue(dataset, 'type'),\n    count: getDatasetValue(dataset, 'count'),\n    enabled: getDatasetValue(dataset, 'enabled'),\n    parentOnly: getDatasetValue(dataset, 'parentOnly'),\n    childOnly: getDatasetValue(dataset, 'childOnly'),\n    shared: getDatasetValue(dataset, 'shared'),\n    childCount: getDatasetValue(dataset, 'childCount'),\n    nullIsNull: nullDatasetValue == null,\n    undefinedIsUndefined: undefinedDatasetValue == undefinedValue,\n    complexName: complex == null ? null : complex['name'],\n    complexNestedValue: complexNested == null ? null : complexNested['value'],\n    arrayFirst: array == null ? null : array[0],\n    arraySecond: array == null ? null : array[1],\n    query: getDatasetValue(dataset, 'query'),\n    scroll: getDatasetValue(dataset, 'scroll'),\n    observer: getDatasetValue(dataset, 'observer'),\n    conflictGet: getDatasetValue(dataset, 'get'),\n    conflictSet: getDatasetValue(dataset, 'set'),\n    conflictHas: getDatasetValue(dataset, 'has'),\n    conflictDelete: getDatasetValue(dataset, 'delete'),\n    conflictClear: getDatasetValue(dataset, 'clear'),\n  } as UTSJSONObject\n}\n\nfunction getElementDataset(id: string): UTSJSONObject {\n  const el = uni.getElementById(id)\n  if (el == null) {\n    return {} as UTSJSONObject\n  }\n  return normalizeDataset((el as UniElement).dataset)\n}\n\nfunction collectDatasetSnapshot(): UTSJSONObject {\n  const snapshot = {} as UTSJSONObject\n  snapshot['view'] = getElementDataset('dataset-view')\n  snapshot['text'] = getElementDataset('dataset-text')\n  snapshot['input'] = getElementDataset('dataset-input')\n  snapshot['button'] = getElementDataset('dataset-button')\n  snapshot['custom'] = getElementDataset('dataset-child-root')\n  return snapshot\n}\n\nfunction collectElementDatasetSnapshot(name: string): UTSJSONObject {\n  if (name == 'view') {\n    return getElementDataset('dataset-view')\n  }\n  if (name == 'text') {\n    return getElementDataset('dataset-text')\n  }\n  if (name == 'input') {\n    return getElementDataset('dataset-input')\n  }\n  if (name == 'button') {\n    return getElementDataset('dataset-button')\n  }\n  if (name == 'custom') {\n    return getElementDataset('dataset-child-root')\n  }\n  return {} as UTSJSONObject\n}\n\nfunction collectDatasetMapApiSnapshot(): UTSJSONObject {\n  const el = uni.getElementById('dataset-view')\n  if (el == null) {\n    return {} as UTSJSONObject\n  }\n  const dataset = (el as UniElement).dataset as any\n  const map = dataset as Map<string, any>\n\n  map.set('mapSet', 'map-value')\n  dataset['bracketSet'] = 'bracket-value'\n  map.set('get', 'reserved-value')\n  const mapSetByBracket = dataset['mapSet']\n  const deleteResult = map.delete('mapSet')\n\n  return {\n    getType: map.get('type'),\n    getCount: map.get('count'),\n    hasType: map.has('type'),\n    mapSetByBracket,\n    bracketSetByGet: map.get('bracketSet'),\n    bracketSetByBracket: dataset['bracketSet'],\n    deleteResult,\n    hasMapSetAfterDelete: map.has('mapSet'),\n    reservedGetByMap: map.get('get'),\n    getIsFunction: map.get('get') == 'reserved-value',\n  } as UTSJSONObject\n}\n\nfunction normalizeApiNodeDataset(result: any | null): UTSJSONObject {\n  if (result == null) {\n    return {} as UTSJSONObject\n  }\n  const dataset = (result as NodeInfo).dataset\n  const normalized = normalizeDataset(dataset)\n  const map = dataset as Map<string, any> | null\n  normalized['isMap'] = map != null && map.has('type')\n  normalized['getIsFunction'] = map != null && map.get('type') == normalized['type']\n  return normalized\n}\n\nfunction collectSelectorQueryDatasetSnapshot(): Promise<UTSJSONObject> {\n  return new Promise((resolve, _) => {\n    const snapshot = {} as UTSJSONObject\n    const query = uni.createSelectorQuery()\n    query.select('#dataset-query-target').boundingClientRect((result: any) => {\n      snapshot['bounding'] = normalizeApiNodeDataset(result)\n    })\n    query\n      .select('#dataset-query-target')\n      .fields({ dataset: true }, (result: any) => {\n        snapshot['fields'] = normalizeApiNodeDataset(result)\n      })\n    query.select('#dataset-scroll-target').scrollOffset((result: any) => {\n      snapshot['scrollOffset'] = normalizeApiNodeDataset(result)\n    })\n    query.exec((result: any) => {\n      snapshot['execLength'] = result == null ? 0 : (result as any[]).length\n      resolve(snapshot)\n    })\n  })\n}\n\nfunction collectIntersectionObserverDatasetSnapshot(): Promise<UTSJSONObject> {\n  // #ifdef WEB || MP\n  return new Promise((resolve, _) => {\n    // 传入当前组件实例，确保选择器在当前组件范围内查询节点。\n    const observer = uni.createIntersectionObserver(\n      componentInstance,\n      {} as UTSJSONObject,\n    )\n    // 固定观察首屏顶部节点，确保初始相交比例会触发回调。\n    observer.relativeToViewport({ bottom: 100 } as UTSJSONObject)\n    observer.observe('#dataset-observer-target', (result: any) => {\n      const snapshot = normalizeApiNodeDataset(result)\n      observer.disconnect()\n      resolve(snapshot)\n    })\n  })\n  // #endif\n  // #ifdef APP\n  return Promise.resolve({} as UTSJSONObject)\n  // #endif\n}\n\nfunction valueToText(value: any | null): string {\n  return value == null ? 'null' : `${value}`\n}\n\nfunction datasetToText(dataset: UTSJSONObject): string {\n  return `type=${valueToText(dataset['type'])}, count=${valueToText(dataset['count'])}, shared=${valueToText(dataset['shared'])}`\n}\n\nfunction refreshApiDatasetTexts(): void {\n  collectSelectorQueryDatasetSnapshot().then((snapshot: UTSJSONObject) => {\n    const fields = snapshot['fields'] as UTSJSONObject\n    const scrollOffset = snapshot['scrollOffset'] as UTSJSONObject\n    const fieldsText = `${valueToText(fields['type'])}/${valueToText(fields['query'])}`\n    const scrollText = `${valueToText(scrollOffset['type'])}/${valueToText(scrollOffset['scroll'])}`\n    datasetTexts['selectorApi'] = `fields=${fieldsText}, scroll=${scrollText}`\n  })\n  collectIntersectionObserverDatasetSnapshot().then((snapshot: UTSJSONObject) => {\n    const type = snapshot['type']\n    if (type == null) {\n      datasetTexts['observerApi'] = '当前平台不覆盖 intersection observer dataset'\n    } else {\n      datasetTexts['observerApi'] = `type=${valueToText(type)}, observer=${valueToText(snapshot['observer'])}`\n    }\n  })\n}\n\nfunction updateDatasetTexts(): void {\n  if (isMP) {\n    const message = '小程序 X 通过事件对象和 selector/intersection API 验证 dataset'\n    datasetTexts['view'] = message\n    datasetTexts['text'] = message\n    datasetTexts['input'] = message\n    datasetTexts['button'] = message\n    datasetTexts['custom'] = message\n    datasetTexts['complex'] = message\n    datasetTexts['mapApi'] = message\n    datasetTexts['selectorApi'] = '读取中'\n    datasetTexts['observerApi'] = '读取中'\n    refreshApiDatasetTexts()\n    return\n  }\n\n  const snapshot = collectDatasetSnapshot()\n  const view = snapshot['view'] as UTSJSONObject\n  const text = snapshot['text'] as UTSJSONObject\n  const input = snapshot['input'] as UTSJSONObject\n  const button = snapshot['button'] as UTSJSONObject\n  const custom = snapshot['custom'] as UTSJSONObject\n  datasetTexts['view'] = datasetToText(view)\n  datasetTexts['text'] = datasetToText(text)\n  datasetTexts['input'] = datasetToText(input)\n  datasetTexts['button'] = `type=${valueToText(button['type'])}, null=${valueToText(button['nullIsNull'])}, undefined=${valueToText(button['undefinedIsUndefined'])}`\n  datasetTexts['custom'] = `type=${valueToText(custom['type'])}, parentOnly=${valueToText(custom['parentOnly'])}, childOnly=${valueToText(custom['childOnly'])}, shared=${valueToText(custom['shared'])}, count=${valueToText(custom['count'])}`\n  datasetTexts['complex'] = `name=${valueToText(view['complexName'])}, nested=${valueToText(view['complexNestedValue'])}, array=${valueToText(view['arrayFirst'])}/${valueToText(view['arraySecond'])}`\n  const mapApi = collectDatasetMapApiSnapshot()\n  datasetTexts['mapApi'] = `get=${valueToText(mapApi['getType'])}, set=${valueToText(mapApi['bracketSetByGet'])}, delete=${valueToText(mapApi['hasMapSetAfterDelete'])}, reserved=${valueToText(mapApi['getIsFunction'])}`\n  datasetTexts['selectorApi'] = '读取中'\n  datasetTexts['observerApi'] = '读取中'\n  refreshApiDatasetTexts()\n}\n\nfunction updateDataset(): void {\n  count.value++\n  enabled.value = false\n  parentShared.value = 'parent-shared-updated'\n  complexObj['name'] = 'complex-updated'\n  const nested = complexObj['nested'] as UTSJSONObject\n  nested['value'] = 2\n  complexArray.value = [2, 'b']\n  nextTick(() => {\n    updateDatasetTexts()\n  })\n}\n\nfunction recordEvent(name: string, event: MouseEvent): void {\n  const target = event.target as UniElement | null\n  const currentTarget = event.currentTarget as UniElement | null\n  if (currentTarget == null) {\n    return\n  }\n  const snapshot = {\n    // Harmony App click 事件可能没有 target，本用例重点验证 currentTarget.dataset。\n    target: target == null ? ({} as UTSJSONObject) : normalizeDataset(target.dataset),\n    currentTarget: normalizeDataset(currentTarget.dataset),\n  } as UTSJSONObject\n  eventDatasetSnapshots[name] = snapshot\n  const currentTargetDataset = snapshot['currentTarget'] as UTSJSONObject\n  eventDatasetText.value = `${name}: type=${valueToText(currentTargetDataset['type'])}, count=${valueToText(currentTargetDataset['count'])}, parentOnly=${valueToText(currentTargetDataset['parentOnly'])}`\n}\n\nfunction recordInputEvent(event: any): void {\n  recordEvent('input', event as MouseEvent)\n}\n\nfunction getEventDatasetSnapshots(): UTSJSONObject {\n  return eventDatasetSnapshots\n}\n\nonReady(() => {\n  updateDatasetTexts()\n})\n\ndefineExpose({\n  collectDatasetSnapshot,\n  collectElementDatasetSnapshot,\n  collectDatasetMapApiSnapshot,\n  collectSelectorQueryDatasetSnapshot,\n  collectIntersectionObserverDatasetSnapshot,\n  updateDataset,\n  getEventDatasetSnapshots,\n})\n</script>\n\n<style>\n.page {\n  padding: 12px;\n  background-color: #f7faf7;\n}\n.summary-card {\n  margin-bottom: 12px;\n  padding: 14px;\n  border-radius: 10px;\n  border-width: 1px;\n  border-style: solid;\n  border-color: #2f855a;\n  background-color: #ecfdf3;\n}\n.summary-title {\n  font-size: 18px;\n  font-weight: bold;\n  color: #1f5132;\n}\n.summary-tip {\n  margin-top: 6px;\n  color: #4a5f50;\n}\n.section {\n  margin-bottom: 12px;\n  padding: 12px;\n  border-radius: 10px;\n  border-width: 1px;\n  border-style: solid;\n  border-color: #d7e6da;\n  background-color: #ffffff;\n}\n.control-section {\n  background-color: #fffaf0;\n  border-color: #f0d49a;\n}\n.section-title {\n  font-weight: bold;\n  margin-bottom: 8px;\n  color: #243b2b;\n}\n.hint {\n  margin-top: 8px;\n  color: #6a6a6a;\n}\n.dataset-item {\n  margin-top: 10px;\n  padding: 10px;\n  border-radius: 8px;\n  border-width: 1px;\n  border-style: solid;\n  border-color: #cfded4;\n  background-color: #f9fffb;\n}\n.api-item {\n  background-color: #f7fbff;\n  border-color: #c8d8ea;\n}\n.item-title {\n  font-weight: bold;\n  color: #263d2b;\n}\n.item-desc {\n  margin-top: 4px;\n  color: #647067;\n}\n.input {\n  height: 40px;\n}\n.scroll-box {\n  margin-top: 10px;\n  height: 48px;\n  border-radius: 8px;\n  border-width: 1px;\n  border-style: solid;\n  border-color: #c8d8ea;\n  background-color: #f7fbff;\n}\n.scroll-content {\n  height: 96px;\n  padding: 10px;\n}\n.primary-button {\n  margin-top: 8px;\n  background-color: #2f855a;\n  color: #ffffff;\n}\n.secondary-button {\n  margin-top: 10px;\n}\n.result-panel {\n  margin-bottom: 12px;\n  padding: 12px;\n  border-radius: 10px;\n  border-width: 1px;\n  border-style: solid;\n  border-color: #9fd3af;\n  background-color: #f0fff4;\n}\n.result-row {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  margin-top: 6px;\n}\n.result-label {\n  width: 64px;\n  font-weight: bold;\n  color: #2f5137;\n}\n.result-value {\n  flex: 1;\n  color: #1f2933;\n}\n.result-line {\n  margin-top: 6px;\n  color: #1f2933;\n}\n.event-line {\n  color: #7c4a03;\n}\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-bind/dataset/dataset-composition"}},"E_error":{"runtime-error_runtime-error-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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) => {\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    setLifeCycleNum\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.com/dcloud/hello-uvue/blob/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":{"issue-27027_CompA":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/examples/issue-27027/CompA.uvue","code":"```vue\n<script setup>\nimport { ref } from 'vue'\nimport CompB from './CompB.uvue'\nconst msg = ref('CompA msg')\n</script>\n<template>\n  <!-- CompA -->\n  <view>\n    <CompB>\n      <template #default=\"{ item }\">\n        <text>{{ msg }}</text>\n        <slot :item=\"item\"></slot>\n      </template>\n    </CompB>\n  </view>\n</template>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/examples/issue-27027/CompA"},"issue-27027_CompB":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/examples/issue-27027/CompB.uvue","code":"```vue\n<script setup></script>\n<template>\n  <!-- CompB -->\n  <view>\n    <view v-for=\"item in 4\" :key=\"item\">\n      <slot :item=\"item\"></slot>\n    </view>\n  </view>\n</template>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/examples/issue-27027/CompB"},"issue-27027_issue-27027":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/examples/issue-27027/issue-27027.uvue","code":"```vue\n<script setup vapor>\r\n  import CompA from './CompA.uvue'\r\n  import CompB from './CompB.uvue'\r\n</script>\r\n\r\n<template>\r\n  <!-- page -->\r\n  <view style=\"flex: 1\">\r\n    <view class=\"section\">\r\n      <view>\r\n        <text>单层v-for+scopedSlot</text>\r\n      </view>\r\n      <CompB>\r\n        <template #default=\"{ item }\">\r\n          <text :id=\"'s-' + item\">{{ item }}</text>\r\n        </template>\r\n      </CompB>\r\n    </view>\r\n    <!-- #ifndef MP -->\n    <!-- 小程序平台对此场景支持不完善 -->\r\n    <view class=\"section\">\r\n      <view>\r\n        <text>深层v-for+scopedSlot</text>\r\n      </view>\r\n      <CompA>\r\n        <template #default=\"{ item }\">\r\n          <text :id=\"'d-' + item\">{{ item }}</text>\r\n        </template>\r\n      </CompA>\r\n    </view>\n    <!-- #endif -->\r\n  </view>\r\n</template>\n\n<style>\n  .section {\n    padding: 10px;\n  }\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/examples/issue-27027/issue-27027"},"issue-27239_issue-27239":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/examples/issue-27239/issue-27239.uvue","code":"```vue\n<template>\n  <view>\n    <button @click=\"toggle\">toggle</button>\n    <view v-for=\"(item, index) in innerList\" :key=\"idList[index]\">\n      <view>\n        <text :id=\"'t-' + index\">{{item}}</text>\n      </view>\n    </view>\n  </view>\n</template>\n\n<script setup>\n  const innerList = ref([1, 2])\n  const idList = ref([0, 1])\n  const toggle = () => {\n    const id1 = idList.value[0]\n    idList.value[0] = idList.value[1]\n    idList.value[1] = id1\n    const list1 = innerList.value[0]\n    innerList.value[0] = innerList.value[1]\n    innerList.value[1] = list1\n  }\n  defineExpose({\n    toggle\n  })\n</script>\n\n<style>\n\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/examples/issue-27239/issue-27239"},"issue-30373_issue-30373":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/examples/issue-30373/issue-30373.uvue","code":"```vue\n<script setup vapor>\n  function forceGarbage(): string {\n    const list: string[] = []\n    for (let i = 0; i < 40000; i++) {\n      list.push('issue-30373-garbage-' + i)\n    }\n    return 'gc-' + list.length\n  }\n</script>\n\n<template>\n  <view class=\"page\">\n    <text class=\"title\">#30373 插槽中 v-for 渲染</text>\n    <text class=\"desc\">静态 v-for 放在组件插槽中，内容应该稳定显示。</text>\n\n    <issue-30373-shell>\n      <issue-30373-item\n        v-for=\"i in 5\"\n        :key=\"'default-' + i\"\n        :text-id=\"'issue-30373-default-' + i\"\n        :label=\"'default-' + i\"\n      />\n\n      <template #footer>\n        <issue-30373-item\n          v-for=\"i in 5\"\n          :key=\"'footer-' + i\"\n          :text-id=\"'issue-30373-footer-' + i\"\n          :label=\"'footer-' + i\"\n        />\n      </template>\n\n      <template #scoped=\"{ suffix }\">\n        <issue-30373-item\n          v-for=\"i in 5\"\n          :key=\"'scoped-' + i\"\n          :text-id=\"'issue-30373-scoped-' + i\"\n          :label=\"'' + suffix + '-' + i\"\n        />\n      </template>\n    </issue-30373-shell>\n    <text id=\"issue-30373-gc\" class=\"gc-text\">{{ forceGarbage() }}</text>\n  </view>\n</template>\n\n<style>\n  .page {\n    flex: 1;\n    padding: 12px;\n  }\n\n  .title {\n    color: #111111;\n    font-size: 18px;\n    font-weight: bold;\n    margin-bottom: 8px;\n  }\n\n  .desc {\n    color: #666666;\n    font-size: 13px;\n    margin-bottom: 12px;\n  }\n\n  .gc-text {\n    color: #eeeeee;\n    font-size: 1px;\n  }\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/examples/issue-30373/issue-30373"},"multiple-style-script_multiple-style-script":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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 class=\"nested-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\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.com/dcloud/hello-uvue/blob/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 class=\"nested-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"},"root-node-custom-component_root-node-custom-component":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/examples/root-node-custom-component/root-node-custom-component.uvue","code":"```vue\n<template>\n  <Bar />\n</template>\n\n<script setup lang=\"uts\">\n  import Bar from '@/components/Bar.uvue'\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/examples/root-node-custom-component/root-node-custom-component"},"set-custom-child-component-root-node-class_child":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/alpha/pages/examples/nested-component-communication/components/child.uvue","code":"```vue\n<template>\n  <view class=\"child\">\n    <view class=\"flex-row\">\n      <text>子组件:</text>\n      <text class=\"child-msg\">{{ msg }}</text>\n    </view>\n    <grand-child class=\"nested-grand-child\"></grand-child>\n  </view>\n</template>\n\n<script setup>\nimport grandChild from './grandChild.uvue'\nimport { state } from '@/store/index.uts'\n  \nconst msg = computed((): number => state.componentMsg)\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.com/dcloud/hello-uvue/blob/alpha/pages/examples/nested-component-communication/components/grandChild.uvue","code":"```vue\n<template>\n  <view class=\"child\">\n    <view class=\"flex-row\">\n      <text>孙组件:</text>\n      <text class=\"grandchild-msg\">{{ msg }}</text>\n    </view>\n    <button class=\"grandchild-btn\" @click=\"change\">孙组件清空数据</button>\n  </view>\n</template>\n\n<script setup>\nimport { state, setComponentMsg } from '@/store/index.uts'\n\nconst msg = computed((): number => state.componentMsg)\nconst change = () => {\n\tsetComponentMsg(0)\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_helpers":{"useComputedStyle_CompUseComputedStyle":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/helpers/useComputedStyle/CompUseComputedStyle.uvue","code":"```vue\n<template>\r\n\t<view>\r\n\t\t<text :style=\"{ 'font-size': style.get('font-size'), color: style.get('color') }\" style=\"line-height: 100px;\">hello world</text>\r\n\t</view>\r\n</template>\r\n\r\n<script setup>\r\n\tconst style = useComputedStyle({\r\n\t\tproperties: ['font-size', 'color'],\r\n\t\tfilterProperties: true\r\n\t} as UseComputedStyleOptions)\r\n\twatchEffect(() => {\r\n\t\tconsole.log(`style.fontSize = ${style.get('font-size')}`)\r\n\t})\r\n</script>\r\n\r\n<style></style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/helpers/useComputedStyle/CompUseComputedStyle"},"useComputedStyle_useComputedStyle":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/helpers/useComputedStyle/useComputedStyle.uvue","code":"```vue\n<template>\n  <view>\n    <CompUseComputedStyle :class=\"classChanged ? 'test-comp-changed' : 'test-comp'\"\n      :style=\"{'font-size': styleChanged ? '40px' : '14px' }\"></CompUseComputedStyle>\n    <button class=\"toggle-class-btn\" @click=\"toggleClass\">toggleClass</button>\n    <button class=\"toggle-style-btn\" @click=\"toggleStyle\">toggleStyle</button>\n  </view>\n</template>\n\n<script setup>\n  import CompUseComputedStyle from './CompUseComputedStyle.uvue'\n  const styleChanged = ref(false)\n  const classChanged = ref(false)\n  function toggleClass(){\n    classChanged.value = !classChanged.value\n  }\n  function toggleStyle(){\n    styleChanged.value = !styleChanged.value\n  }\n</script>\n\n<style>\n  .test-comp {\n    color: green;\n    background-color: yellow;\n  }\n\n  .test-comp-changed {\n    color: yellow;\n    background-color: green;\n  }\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/helpers/useComputedStyle/useComputedStyle"},"useId_useId":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/helpers/useId/useId.uvue","code":"```vue\n<script setup vapor lang=\"uts\">\nimport {useId} from 'vue'\n\nconst usernameId = useId()\nconst descriptionId = useId()\nconst updateCount = ref<number>(0)\n\nfunction updatePage() {\n  updateCount.value++\n}\n\ndefineExpose({\n  updatePage\n})\n</script>\n\n<template>\n  <view class=\"page\">\n    <text class=\"section-title\">useId</text>\n    <view class=\"row\">\n      <text>username id:</text>\n      <text id=\"username-id-value\">{{ usernameId }}</text>\n    </view>\n    <view class=\"row\">\n      <text>description id:</text>\n      <text id=\"description-id-value\">{{ descriptionId }}</text>\n    </view>\n    <view class=\"row\">\n      <text>ids are unique:</text>\n      <text id=\"use-id-unique\">{{ usernameId != descriptionId }}</text>\n    </view>\n    <label :for=\"usernameId\">username:</label>\n    <input :id=\"usernameId\" class=\"input\" />\n    <text :id=\"descriptionId\">enter a username</text>\n    <view class=\"row mt-10\">\n      <text>update count:</text>\n      <text id=\"use-id-update-count\">{{ updateCount }}</text>\n    </view>\n    <button id=\"update-use-id-page-btn\" @click=\"updatePage\">更新页面</button>\n  </view>\n</template>\n\n<style>\n.section-title {\n  margin-bottom: 12px;\n  font-size: 18px;\n  font-weight: bold;\n}\n\n.row {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  margin-bottom: 10px;\n}\n\n.input {\n  height: 40px;\n  margin: 8px 0;\n  padding: 0 8px;\n  border-width: 1px;\n  border-style: solid;\n  border-color: #dddddd;\n  border-radius: 4px;\n}\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/helpers/useId/useId"}},"E_lifecycle":{"component_ChildComponentComposition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/lifecycle/component/ChildComponentComposition.uvue","code":"```vue\n<template>\r\n\t<!-- #ifndef VUE3-VAPOR -->\r\n  title: {{ title }}\r\n\t<!-- #endif -->\r\n\t<!-- #ifdef VUE3-VAPOR -->\r\n\t<text>title: {{ title }}</text>\r\n\t<!-- #endif -->\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  console.log('child component composition onLoad')\r\n  // 自动化测试\r\n  setLifeCycleNum(state.lifeCycleNum + 100)\r\n})\r\nonPageShow(() => {\r\n  console.log('child component composition onPageShow')\r\n  // 自动化测试\r\n  setLifeCycleNum(state.lifeCycleNum + 10)\r\n})\r\nonReady(() => {\r\n  console.log('child component composition onReady')\r\n  // 自动化测试\r\n  // TODO: onReady 未触发\r\n  setLifeCycleNum(state.lifeCycleNum + 10)\r\n})\r\n\r\nonPullDownRefresh(() => {\r\n  console.log('child component composition onPullDownRefresh')\r\n  // 自动化测试\r\n  setLifeCycleNum(state.lifeCycleNum + 10)\r\n})\r\nonPageScroll((_) => {\r\n  console.log('child component composition onPageScroll')\r\n  // 自动化测试\r\n  emit('updateIsScroll', true)\r\n})\r\nonReachBottom(() => {\r\n  console.log('child component composition onReachBottom')\r\n  // 自动化测试\r\n  setLifeCycleNum(state.lifeCycleNum + 10)\r\n})\r\nonBackPress((_ : OnBackPressOptions) : boolean | null => {\r\n  console.log('child component composition onBackPress')\r\n  // 自动化测试\r\n  setLifeCycleNum(state.lifeCycleNum - 10)\r\n  return null\r\n})\r\nonPageHide(() => {\r\n  console.log('child component composition onPageHide')\r\n  // 自动化测试\r\n  setLifeCycleNum(state.lifeCycleNum - 10)\r\n})\r\nonUnload(() => {\r\n  console.log('child component composition onUnload')\r\n  // 自动化测试\r\n  setLifeCycleNum(state.lifeCycleNum - 100)\r\n})\r\n\r\nonBeforeMount(() => {\r\n  console.log('child component composition onBeforeMount')\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  console.log('child component composition onMounted')\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  console.log('child component composition onBeforeUpdate')\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  console.log('child component composition onUpdated')\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  console.log('child component composition onBeforeUnmount')\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  console.log('child component composition onUnmounted')\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  console.log('child component composition onActivated')\r\n  // 自动化测试\r\n  setLifeCycleNum(state.lifeCycleNum + 1)\r\n  console.log('component for lifecycle test onActivated')\r\n})\r\nonDeactivated(() => {\r\n  console.log('child component composition onDeactivated')\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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/alpha/pages/lifecycle/component/component-composition.uvue","code":"```vue\n<template>\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\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      <!-- #ifndef VUE3-VAPOR -->\r\n      <keep-alive>\r\n        <component :is=\"aliveComponent\"  @updateIsScroll=\"updateIsScroll\" />\r\n      </keep-alive>\r\n       <!-- #endif -->\r\n      <!-- #ifdef VUE3-VAPOR -->\r\n        <child-component @updateIsScroll=\"updateIsScroll\" />\r\n       <!-- #endif -->\r\n      <button class=\"mt-10\" @click=\"scrollToBottom\">scrollToBottom</button>\r\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 && !VUE3-VAPOR -->\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) => {\r\n    setLifeCycleNum(num)\r\n  }\r\n\r\n  // 自动化测试\r\n  const pullDownRefresh = () => {\r\n    uni.startPullDownRefresh({\r\n      success() {\r\n        setTimeout(() => {\r\n          uni.stopPullDownRefresh()\r\n        }, 1500)\r\n      },\r\n    })\r\n  }\r\n\r\n  const scrollToBottom = () => {\r\n    uni.pageScrollTo({\r\n      scrollTop: 3000,\r\n    })\r\n  }\r\n  \r\n  const 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  }\r\n  \r\n  const navigateToHome = () => {\r\n    uni.navigateTo({\r\n      url: '/pages/index/index'\r\n    })\r\n  }\r\n\r\n  defineExpose({\r\n    pageGetLifeCycleNum,\r\n    pageSetLifeCycleNum,\r\n    pullDownRefresh,\r\n    scrollToBottom,\r\n    getIsScrolled\r\n  })\r\n</script>\r\n\r\n<style>\r\n  .container {\r\n    height: 2200px;\r\n  }\r\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/lifecycle/component/component-composition"},"component_component-options":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/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_dialog-page":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/lifecycle/page/dialog-page.uvue","code":"```vue\n<template>\n  <view class=\"dialog-page\">\n    <view class=\"dialog-content\">\n      <text>page lifecycle dialogPage</text>\n      <button class=\"mt-10\" @click=\"closeDialogPage\">closeDialogPage</button>\n    </view>\n  </view>\n</template>\n\n<script setup lang=\"uts\">\nconst closeDialogPage = () => {\n  uni.closeDialogPage()\n}\n</script>\n\n<style>\n.dialog-page {\n  flex: 1;\n  align-items: center;\n  justify-content: center;\n  background-color: rgba(0,0,0,0.5);\n}\n\n.dialog-content {\n  width: 260px;\n  padding: 20px;\n  border-radius: 8px;\n  background-color: #ffffff;\n}\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/lifecycle/page/dialog-page"},"page_monitor-app-lifecycle-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/lifecycle/page/monitor-app-lifecycle-composition.uvue","code":"```vue\n<script lang=\"uts\" setup>\n// 增加显式导入生命周期，测试 https://issues.dcloud.net.cn/pages/issues/detail?id=31456\nimport { onAppShow } from '@dcloudio/uni-app'\nimport { state, setLifeCycleNum } from '@/store/index.uts'\n\nonAppShow((onShowOptions: OnShowOptions) => {\n\tconsole.log('组合式组件监听应用生命周期 => onAppShow => onShowOptions', onShowOptions)\n\t// 自动化测试\n\tsetLifeCycleNum(state.lifeCycleNum + 10)\n})\nonAppHide(() => {\n\tconsole.log('组合式组件监听应用生命周期 => onAppHide')\n\t// 自动化测试\n\tsetLifeCycleNum(state.lifeCycleNum - 100)\n})\nonError((err: any) => {\n\tconsole.log('组合式组件监听应用生命周期 => onError', err)\n\tsetLifeCycleNum(state.lifeCycleNum + 10)\n})\nconst triggerError = () => {\n\tthrow new Error('trigger error in monitor app lifecycle composition')\n}\n</script>\n\n<template>\n\t<text id=\"trigger-monitor-app-error\" style=\"margin: 10px 0;\" @click=\"triggerError\">组件监听应用生命周期（组合式 API）</text>\n</template>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/lifecycle/page/monitor-app-lifecycle-composition"},"page_monitor-app-lifecycle-options":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/lifecycle/page/monitor-app-lifecycle-options.uvue","code":"```vue\n<script lang=\"uts\">\nimport { state, setLifeCycleNum } from '@/store/index.uts'\nexport default {\n\tsetup() {\n\t\tonAppShow((onShowOptions: OnShowOptions) => {\n\t\t\tconsole.log('选项式组件监听应用生命周期 => onAppShow => onShowOptions', onShowOptions)\n\t\t\t// 自动化测试\n\t\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\n\t\t})\n\t\tonAppHide(() => {\n\t\t\tconsole.log('选项式组件监听应用生命周期 => onAppHide')\n\t\t\t// 自动化测试\n\t\t\tsetLifeCycleNum(state.lifeCycleNum - 100)\n\t\t})\n\t\tonError((err: any) => {\n\t\t\tconsole.log('选项式组件监听应用生命周期 => onError', err)\n\t\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\n\t\t})\n\t\tconst triggerError = () => {\n\t\t\tthrow new Error('trigger error in monitor app lifecycle options')\n\t\t}\n\t\treturn {\n\t\t\ttriggerError\n\t\t}\n\t}\n}\n</script>\n\n<template>\n\t<text id=\"trigger-monitor-app-error\" style=\"margin: 10px 0;\" @click=\"triggerError\">组件监听应用生命周期（选项式 API）</text>\n</template>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/lifecycle/page/monitor-app-lifecycle-options"},"page_monitor-page-lifecycle-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/lifecycle/page/monitor-page-lifecycle-composition.uvue","code":"```vue\n<script lang=\"uts\" setup>\r\n\timport { state, setLifeCycleNum } from '@/store/index.uts'\n\r\n\tconst isScrolled = ref(false)\r\n\r\n\tonLoad((options : OnLoadOptions) => {\r\n\t\tconsole.log('组合式组件监听页面生命周期 => onLoad', options)\r\n\t\t// 自动化测试\r\n\t\tsetLifeCycleNum(state.lifeCycleNum + 100)\r\n\t})\r\n\tonPageShow(() => {\r\n\t\tconsole.log('组合式组件监听页面生命周期 => onPageShow')\r\n\t\t// 自动化测试\r\n\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\r\n\t})\r\n\tonReady(() => {\r\n\t\tconsole.log('组合式组件监听页面生命周期 => onReady')\r\n\t\t// 自动化测试\r\n\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\r\n\t})\r\n\tonPullDownRefresh(() => {\r\n\t\tconsole.log('组合式组件监听页面生命周期 => onPullDownRefresh')\r\n\t\t// 自动化测试\r\n\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\r\n\t})\r\n\tonPageScroll((options : OnPageScrollOptions) => {\r\n\t\tconsole.log('组合式组件监听页面生命周期 => onPageScroll', options)\r\n\t\tisScrolled.value = true\r\n\t})\r\n\tonReachBottom(() => {\r\n\t\tconsole.log('组合式组件监听页面生命周期 => onReachBottom')\r\n\t\t// 自动化测试\r\n\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\r\n\t})\r\n\tonBackPress((options : OnBackPressOptions) : boolean | null => {\r\n\t\tconsole.log('组合式组件监听页面生命周期 => onBackPress', options)\r\n\t\t// 自动化测试\r\n\t\tsetLifeCycleNum(state.lifeCycleNum - 10)\r\n\t\treturn null\r\n\t})\r\n\tonPageHide(() => {\r\n\t\tconsole.log('组合式组件监听页面生命周期 => onPageHide')\r\n\t\t// 自动化测试\r\n\t\tsetLifeCycleNum(state.lifeCycleNum - 10)\r\n\t})\r\n\tonResize((options : OnResizeOptions) => {\r\n\t\tconsole.log('组合式组件监听页面生命周期 => onResize', options)\r\n\t\t// 自动化测试\r\n\t\tsetLifeCycleNum(state.lifeCycleNum + 1)\r\n\t})\r\n\tonUnload(() => {\r\n\t\tconsole.log('组合式组件监听页面生命周期 => onUnload')\r\n\t\t// 自动化测试\r\n\t\tsetLifeCycleNum(state.lifeCycleNum - 10)\r\n\t})\r\n</script>\r\n\r\n<template>\r\n\t<view>\r\n\t\t<text class=\"mb-10\">选项式组件监听页面生命周期（组合式 API）</text>\r\n\t\t<view class=\"justify-between flex-row mb-10\">\r\n\t\t\t<text>组件中监听到页面滚动:</text>\r\n\t\t\t<text>{{isScrolled}}</text>\r\n\t\t</view>\r\n\t</view>\r\n</template>\n\n<style>\n\t.mb-10{\n\t\tmargin-bottom: 10px;\n\t}\n\t.justify-between{\n\t\tjustify-content: space-between;\n\t}\n\t.flex-row{\n\t\tflex-direction: row;\n\t}\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/lifecycle/page/monitor-page-lifecycle-composition"},"page_monitor-page-lifecycle-options":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/lifecycle/page/monitor-page-lifecycle-options.uvue","code":"```vue\n<script lang=\"uts\">\r\n\timport { state, setLifeCycleNum } from '@/store/index.uts'\r\n\r\n\texport default {\r\n\t\tsetup() {\n\t\t\tconst isScrolled = ref(false)\n\t\t\t\r\n\t\t\tonLoad((options : OnLoadOptions) => {\r\n\t\t\t\tconsole.log('选项式组件监听页面生命周期 => onLoad', options)\r\n\t\t\t\t// 自动化测试\r\n\t\t\t\tsetLifeCycleNum(state.lifeCycleNum + 100)\r\n\t\t\t})\r\n\t\t\tonPageShow(() => {\r\n\t\t\t\tconsole.log('选项式组件监听页面生命周期 => onPageShow')\r\n\t\t\t\t// 自动化测试\r\n\t\t\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\r\n\t\t\t})\r\n\t\t\tonReady(() => {\r\n\t\t\t\tconsole.log('选项式组件监听页面生命周期 => onReady')\r\n\t\t\t\t// 自动化测试\r\n\t\t\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\r\n\t\t\t})\r\n\t\t\tonPullDownRefresh(() => {\r\n\t\t\t\tconsole.log('选项式组件监听页面生命周期 => onPullDownRefresh')\r\n\t\t\t\t// 自动化测试\r\n\t\t\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\r\n\t\t\t})\r\n\t\t\tonPageScroll((options: OnPageScrollOptions) => {\r\n\t\t\t\tconsole.log('选项式组件监听页面生命周期 => onPageScroll', options)\r\n\t\t\t\tisScrolled.value = true\r\n\t\t\t})\r\n\t\t\tonReachBottom(() => {\r\n\t\t\t\tconsole.log('选项式组件监听页面生命周期 => onReachBottom')\r\n\t\t\t\t// 自动化测试\r\n\t\t\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\r\n\t\t\t})\r\n\t\t\tonBackPress((options : OnBackPressOptions) : boolean | null => {\r\n\t\t\t\tconsole.log('选项式组件监听页面生命周期 => onBackPress', options)\r\n\t\t\t\t// 自动化测试\r\n\t\t\t\tsetLifeCycleNum(state.lifeCycleNum - 10)\r\n\t\t\t\treturn null\r\n\t\t\t})\r\n\t\t\tonPageHide(() => {\r\n\t\t\t\tconsole.log('选项式组件监听页面生命周期 => onPageHide')\r\n\t\t\t\t// 自动化测试\r\n\t\t\t\tsetLifeCycleNum(state.lifeCycleNum - 10)\r\n\t\t\t})\r\n\t\t\tonResize((options : OnResizeOptions) => {\r\n\t\t\t\tconsole.log('选项式组件监听页面生命周期 => onResize', options)\r\n\t\t\t\t// 自动化测试\r\n\t\t\t\tsetLifeCycleNum(state.lifeCycleNum + 1)\r\n\t\t\t})\r\n\t\t\tonUnload(() => {\r\n\t\t\t\tconsole.log('选项式组件监听页面生命周期 => onUnload')\r\n\t\t\t\t// 自动化测试\r\n\t\t\t\tsetLifeCycleNum(state.lifeCycleNum - 10)\r\n\t\t\t})\n\t\t\t\n\t\t\treturn {\n\t\t\t\tisScrolled\n\t\t\t}\r\n\t\t}\r\n\t}\r\n</script>\r\n\r\n<template>\r\n\t<view>\r\n\t\t<text class=\"mb-10\">选项式组件监听页面生命周期（选项式 API）</text>\r\n\t\t<view class=\"justify-between flex-row mb-10\">\r\n\t\t\t<text>组件中监听到页面滚动:</text>\r\n\t\t\t<text>{{isScrolled}}</text>\r\n\t\t</view>\r\n\t</view>\r\n</template>\n\n<style>\n\t.mb-10{\n\t\tmargin-bottom: 10px;\n\t}\n\t.justify-between{\n\t\tjustify-content: space-between;\n\t}\n\t.flex-row{\n\t\tflex-direction: row;\n\t}\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/lifecycle/page/monitor-page-lifecycle-options"},"page_page-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/lifecycle/page/page-composition.uvue","code":"```vue\n<template>\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\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>onPageScroll 触发：</text>\r\n        <text>{{ isOnPageScrollTriggered }}</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=\"mt-10\">\r\n        <MonitorAppLifecycleComposition class=\"monitor-app-lifecycle\" />\n      </view>\r\n      <view class=\"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      <!-- #ifndef MP -->\r\n      <button class=\"mt-10\" @click=\"openLifecycleDialogPage\">\r\n        openDialogPage\r\n      </button>\r\n      <button class=\"mt-10\" @click=\"closeLifecycleDialogPage\">\r\n        closeDialogPage\r\n      </button>\r\n      <!-- #endif -->\r\n      <button class=\"mt-10\" @click=\"goOnBackPress\">\r\n        跳转 onBackPress 示例\r\n      </button>\r\n    </view>\r\n    <!-- #ifdef APP && !VUE3-VAPOR -->\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 MonitorAppLifecycleComposition from './monitor-app-lifecycle-composition.uvue'\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('onResize', 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 resetPageScrollStatus = () => {\r\n  isOnPageScrollTriggered.value = false\r\n  dataInfo.isScrolled = false\r\n}\r\n\r\n// #ifndef MP\r\nconst openLifecycleDialogPage = () => {\r\n  uni.openDialogPage({\r\n    url: '/pages/lifecycle/page/dialog-page',\r\n  })\r\n}\r\n\r\nconst closeLifecycleDialogPage = () => {\r\n  uni.closeDialogPage()\r\n}\r\n// #endif\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  resetPageScrollStatus,\r\n  // #ifndef MP\r\n  openLifecycleDialogPage,\r\n  closeLifecycleDialogPage,\r\n  // #endif\r\n})\r\n</script>\r\n\r\n<style>\r\n.container {\r\n  height: 2200px;\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.com/dcloud/hello-uvue/blob/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>onPageScroll 触发：</text>\n        <text>{{ isOnPageScrollTriggered }}</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<MonitorAppLifecycleOptions class=\"monitor-app-lifecycle\" />\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      <!-- #ifndef MP -->\n      <button class=\"mt-10\" @click=\"openLifecycleDialogPage\">\n        openDialogPage\n      </button>\n      <button class=\"mt-10\" @click=\"closeLifecycleDialogPage\">\n        closeDialogPage\n      </button>\n      <!-- #endif -->\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 MonitorAppLifecycleOptions from './monitor-app-lifecycle-options.uvue'\nimport MonitorPageLifecycleOptions from './monitor-page-lifecycle-options.uvue'\n type DataInfo = {\n \tisScrolled: boolean\n }\nexport default {\n\tcomponents: { MonitorAppLifecycleOptions, 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('onResize', 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\tresetPageScrollStatus() {\n\t\t\tthis.isOnPageScrollTriggered = false\n\t\t\tthis.dataInfo.isScrolled = false\n\t\t},\n\t\t// #ifndef MP\n\t\topenLifecycleDialogPage() {\n\t\t\tuni.openDialogPage({\n\t\t\t\turl: '/pages/lifecycle/page/dialog-page',\n\t\t\t})\n\t\t},\n\t\tcloseLifecycleDialogPage() {\n\t\t\tuni.closeDialogPage()\n\t\t},\n\t\t// #endif\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: 2200px;\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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/alpha/pages/render-function/render/render-composition.uvue","code":"```vue\n<script setup lang=\"uts\">\nimport CompForHFunction from '@/components/CompForHFunction.uvue'\nimport CompForHFunctionWithSlot from '@/components/CompForHFunctionWithSlot.uvue'\nimport Foo from './Foo.uvue'\nconst msg = ref('default msg')\nconst list = ref(['a','b'])\n// 故意外部声明为UTSJSONObject\nconst msgProps = { class: 'mt-10 msg', style: { color: 'blue' } }\n// #ifdef APP-ANDROID\nconst render = computed(():VNode => {\n// #endif\n// #ifndef APP-ANDROID\nconst render = ():VNode => {\n// #endif\n  const textList: VNode[] = []\n  list.value.forEach((item) => {\n    textList.push(h('text', { class: 'text-item' }, item))\n  })\n  return 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('view', null, textList),\n    h(\n      'button',\n      {\n        class: 'mt-10 btn',\n        type: 'primary',\n        onClick: () => {\n          msg.value = 'new msg'\n          list.value.push('c')\n        }\n      },\n      'click'\n    )\n  ])\n}\n// #ifdef APP-ANDROID\n)\n// #endif\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.com/dcloud/hello-uvue/blob/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: 'mt-10 msg', style: { color: 'blue' } }\r\nexport default {\r\n  data() {\r\n    return {\r\n      msg: 'default msg',\r\n      list: ['a','b']\r\n    }\r\n  },\r\n  render() : VNode {\r\n    const textList: VNode[] = []\r\n    this.list.forEach((item) => {\r\n      textList.push(h('text', { class: 'text-item' }, item))\r\n    })\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('view', null, textList),\r\n      h(\r\n        'button',\r\n        {\r\n          class: 'mt-10 btn',\r\n          type: 'primary',\r\n          onClick: () => {\r\n            this.msg = 'new msg'\r\n            this.list.push('c')\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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/alpha/pages/render-function/withDirectives/withDirectives-composition.uvue","code":"```vue\n<script setup>\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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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_template-syntax":{"text-interpolation_text-interpolation-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/template-syntax/text-interpolation/text-interpolation-composition.uvue","code":"```vue\n<template>\r\n    <view>\r\n        <text id=\"text1\">hello {{ 'world' }}</text>\r\n        <text id=\"text2\">hello {{ world }}</text>\r\n        <text id=\"text3\">hello{{' '}}{{ world }}</text>\r\n        <text id=\"text4\">hello{{' '}}{{ w }}{{'o'}}{{'rld'}}</text>\r\n        <!-- 之所以增加 button 测试例，是因为 button 在底层是 uvue 实现的，跟 text 是两套机制，需要分别测试 -->\r\n        <button id=\"btn1\">hello {{ 'world' }}</button>\r\n        <button id=\"btn2\">hello {{ world }}</button>\r\n        <button id=\"btn3\">hello{{' '}}{{ world }}</button>\r\n        <button id=\"btn4\">hello{{' '}}{{ w }}{{'o'}}{{'rld'}}</button>\r\n    </view>\r\n</template>\r\n\r\n<script setup>\r\n    const w = 'w'\r\n    const world = 'world'\r\n</script>\r\n\r\n<style>\r\n\r\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/template-syntax/text-interpolation/text-interpolation-composition"}},"E_built-in":{"component_keep-alive_keep-alive-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/built-in/component/keep-alive/keep-alive-composition.uvue","code":"```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\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 && !VUE3-VAPOR -->\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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/alpha/pages/built-in/component/teleport/teleport-composition.uvue","code":"```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\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 && !VUE3-VAPOR -->\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-defer":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/built-in/component/teleport/teleport-defer.uvue","code":"```vue\n<template>\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\r\n  <scroll-view style=\"flex: 1\">\r\n  <!-- #endif -->\r\n    <view class=\"defer-page\">\r\n\r\n      <view class=\"intro-box\">\r\n        <text class=\"intro-title\">defer 专项测试</text>\r\n        <text class=\"intro-desc\">切换目标位置和 defer 后点击按钮同时创建 Teleport 与目标节点，观察内容是否进入目标。</text>\r\n      </view>\r\n\r\n      <view class=\"control-panel\">\r\n        <view class=\"control-row\">\r\n          <view class=\"control-copy\">\r\n            <text class=\"control-title\">defer</text>\r\n            <text class=\"control-desc\">{{ useDefer ? '延迟查找后置目标' : '立即查找目标' }}</text>\n          </view>\r\n          <switch :checked=\"useDefer\" @change=\"onDeferChange\" />\n        </view>\r\n        <view class=\"control-row\">\r\n          <view class=\"control-copy\">\r\n            <text class=\"control-title\">目标位置</text>\r\n            <text class=\"control-desc\">{{ targetAfter ? '后置目标' : '前置目标' }}</text>\n          </view>\r\n          <switch :checked=\"targetAfter\" @change=\"onTargetAfterChange\" />\n        </view>\r\n        <view class=\"button-row\">\r\n          <button class=\"action-button\" size=\"mini\" type=\"primary\"\r\n            @click=\"toggleTeleport\">{{ showTeleport ? '销毁 Teleport' : '创建 Teleport' }}</button>\n        </view>\r\n      </view>\r\n\r\n      <view class=\"status-box\">\r\n        <text class=\"status-text\">当前：defer = {{ useDefer }}</text>\n        <text class=\"status-tip\">目标 #teleport-defer-target 与 Teleport\r\n          同时创建，当前为{{ targetAfter ? '后置目标' : '前置目标' }}。</text>\n      </view>\r\n\r\n      <view class=\"case-box\">\r\n        <view v-if=\"targetVisible && !targetAfter\" id=\"teleport-defer-target\" class=\"target-box\">\n          <text class=\"target-title\">前置目标</text>\r\n          <text class=\"target-desc\">id=\"teleport-defer-target\"，该节点在 Teleport 前方。</text>\r\n        </view>\r\n\r\n        <view class=\"origin-box\">\r\n          <text class=\"box-title\">Teleport 声明位置</text>\r\n          <text class=\"box-desc\">Teleport 固定声明在这里，目标节点可切换到前方或后方。</text>\r\n\r\n          <Teleport v-if=\"showTeleport\" to=\"#teleport-defer-target\" :defer=\"useDefer\">\n            <view id=\"teleport-defer-content\" class=\"teleport-card\">\r\n              <text class=\"card-title\">Teleport 内容</text>\r\n              <text class=\"card-desc\">to: #teleport-defer-target</text>\r\n            </view>\r\n          </Teleport>\r\n\r\n          <view v-if=\"!showTeleport\" class=\"empty-box\">\n            <text class=\"empty-text\">Teleport 已销毁</text>\r\n          </view>\r\n        </view>\r\n\r\n        <view v-if=\"targetVisible && targetAfter\" id=\"teleport-defer-target\" class=\"target-box\">\n          <text class=\"target-title\">后置目标</text>\r\n          <text class=\"target-desc\">id=\"teleport-defer-target\"，该节点在 Teleport 后方。</text>\r\n        </view>\r\n      </view>\r\n\r\n    </view>\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n  const useDefer = ref<boolean>(true)\n  const targetAfter = ref<boolean>(true)\n  const targetVisible = ref<boolean>(false)\n  const showTeleport = ref<boolean>(false)\n\n  function onDeferChange(e : UniSwitchChangeEvent) {\n    useDefer.value = e.detail.value\n  }\n\n  function onTargetAfterChange(e : UniSwitchChangeEvent) {\n    targetAfter.value = e.detail.value\n  }\n\n  function setUseDefer(value : boolean) {\n    useDefer.value = value\n  }\n\n  function setTargetAfter(value : boolean) {\n    targetAfter.value = value\n  }\n\n  function setTargetVisible(value : boolean) {\n    targetVisible.value = value\n  }\n\n  function setShowTeleport(value : boolean) {\n    showTeleport.value = value\n    if (!value) {\n      targetVisible.value = false\n    }\n  }\n\n  function toggleTeleport() {\n    const visible = !showTeleport.value\n    targetVisible.value = visible\n    showTeleport.value = visible\n  }\n\r\n  function getBoundingClientRectForTest(id : string) : DOMRect | null {\r\n    return uni.getElementById(id)?.getBoundingClientRect() ?? null\r\n  }\r\n\r\n  defineExpose({\n    setUseDefer,\n    setTargetAfter,\n    setTargetVisible,\n    setShowTeleport,\n    getBoundingClientRectForTest\n  })\n</script>\r\n\r\n<style>\r\n  .defer-page {\r\n    padding: 16px;\r\n    background-color: #f5f7fb;\r\n  }\r\n\r\n  .intro-box {\r\n    display: flex;\r\n    flex-direction: column;\r\n    padding: 12px;\r\n    margin-top: 12px;\r\n    border-radius: 12px;\r\n    background-color: #ffffff;\r\n  }\r\n\r\n  .intro-title {\r\n    font-size: 18px;\r\n    color: #111827;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .intro-desc {\r\n    margin-top: 6px;\r\n    font-size: 13px;\r\n    color: #4b5563;\r\n  }\r\n\r\n  .control-panel {\r\n    display: flex;\r\n    flex-direction: column;\r\n    padding: 12px;\r\n    margin-top: 12px;\r\n    border-radius: 12px;\r\n    background-color: #ffffff;\r\n  }\r\n\r\n  .control-row {\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n  }\r\n\r\n  .control-copy {\r\n    display: flex;\r\n    flex-direction: column;\r\n    flex: 1;\r\n    margin-right: 12px;\r\n  }\r\n\r\n  .control-title {\r\n    font-size: 16px;\r\n    color: #1f2937;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .control-desc {\r\n    margin-top: 4px;\r\n    font-size: 12px;\r\n    color: #6b7280;\r\n  }\r\n\r\n  .button-row {\r\n    display: flex;\r\n    flex-direction: row;\r\n    margin-top: 12px;\r\n  }\r\n\r\n  .action-button {\r\n    margin-right: 8px;\r\n  }\r\n\r\n  .status-box {\r\n    display: flex;\r\n    flex-direction: column;\r\n    padding: 12px;\r\n    margin-top: 12px;\r\n    border-radius: 12px;\r\n    background-color: #eef6ff;\r\n  }\r\n\r\n  .status-text {\r\n    font-size: 14px;\r\n    color: #0052cc;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .status-tip {\r\n    margin-top: 4px;\r\n    font-size: 12px;\r\n    color: #4b5563;\r\n  }\r\n\r\n  .case-box {\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n\r\n  .origin-box {\r\n    display: flex;\r\n    flex-direction: column;\r\n    min-height: 136px;\r\n    padding: 12px;\r\n    margin-top: 12px;\r\n    border-radius: 12px;\r\n    background-color: #fff7ed;\r\n  }\r\n\r\n  .box-title {\r\n    font-size: 16px;\r\n    color: #9a3412;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .box-desc {\r\n    margin-top: 4px;\r\n    margin-bottom: 10px;\r\n    font-size: 12px;\r\n    color: #9a3412;\r\n  }\r\n\r\n  .teleport-card {\r\n    display: flex;\r\n    flex-direction: column;\r\n    padding: 12px;\r\n    margin-top: 10px;\r\n    border-radius: 10px;\r\n    background-color: #007aff;\r\n  }\r\n\r\n  .card-title {\r\n    font-size: 16px;\r\n    color: #ffffff;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .card-desc {\r\n    margin-top: 4px;\r\n    font-size: 12px;\r\n    color: #dbeafe;\r\n  }\r\n\r\n  .target-box {\r\n    display: flex;\r\n    flex-direction: column;\r\n    min-height: 116px;\r\n    padding: 12px;\r\n    margin-top: 12px;\r\n    border-width: 1px;\r\n    border-style: dashed;\r\n    border-color: #007aff;\r\n    border-radius: 12px;\r\n    background-color: #f0f7ff;\r\n  }\r\n\r\n  .target-title {\r\n    font-size: 16px;\r\n    color: #111827;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .target-desc {\r\n    margin-top: 4px;\r\n    font-size: 12px;\r\n    color: #6b7280;\r\n  }\r\n\r\n  .empty-box {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: center;\r\n    min-height: 80px;\r\n    margin-top: 12px;\r\n    border-radius: 12px;\r\n    background-color: #ffffff;\r\n  }\r\n\r\n  .empty-text {\r\n    font-size: 13px;\r\n    color: #9ca3af;\r\n  }\r\n</style>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/built-in/component/teleport/teleport-defer"},"component_teleport_teleport-options":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/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"},"component_teleport_teleport-props":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/built-in/component/teleport/teleport-props.uvue","code":"```vue\n<template>\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\r\n  <scroll-view style=\"flex: 1\">\r\n  <!-- #endif -->\r\n    <view class=\"teleport-page\">\r\n      <view class=\"control-panel\">\r\n        <view class=\"control-row\">\r\n          <view class=\"control-copy\">\r\n            <text class=\"control-title\">target</text>\r\n            <text class=\"control-desc\">{{ currentTarget.description }}</text>\r\n          </view>\r\n          <view class=\"target-actions\">\r\n            <button v-for=\"item in targetList\" :key=\"item.title\" class=\"target-button\" size=\"mini\"\r\n              :type=\"currentTarget.title == item.title ? 'primary' : 'default'\"\r\n              @click=\"setTarget(item)\">{{ item.title }}</button>\r\n          </view>\r\n        </view>\r\n        <view class=\"control-row\">\r\n          <view class=\"control-copy\">\r\n            <text class=\"control-title\">disabled</text>\r\n            <text class=\"control-desc\">{{ teleportDisabled ? '原位置渲染' : '传送到目标' }}</text>\n          </view>\r\n          <switch :checked=\"teleportDisabled\" @change=\"onDisabledChange\" />\n        </view>\r\n        <view class=\"control-row\">\r\n          <view class=\"control-copy\">\r\n            <text class=\"control-title\">v-if</text>\r\n            <text class=\"control-desc\">{{ showTeleport ? '创建 Teleport' : '销毁 Teleport' }}</text>\n          </view>\r\n          <switch :checked=\"showTeleport\" @change=\"onShowChange\" />\n        </view>\r\n        <button class=\"defer-link-button\" size=\"mini\" type=\"primary\" @click=\"goDeferPage\">defer 专项测试</button>\r\n      </view>\r\n\r\n      <view class=\"status-box\">\r\n        <text class=\"status-text\">当前：{{ teleportStatus }}</text>\r\n        <text class=\"status-tip\">切换 target 时通过 key 重建 Teleport。</text>\r\n      </view>\r\n\r\n      <view id=\"teleport-origin-box\" class=\"origin-box\">\r\n        <text class=\"origin-title\">Teleport 声明位置</text>\r\n        <text class=\"origin-desc\">disabled 开启时，内容会留在这里。</text>\r\n\r\n        <Teleport v-if=\"showTeleport\" :key=\"currentTarget.title\" :to=\"currentTarget.value\" :disabled=\"teleportDisabled\" :defer=\"true\">\n          <view id=\"teleport-content\" class=\"teleport-card\">\r\n            <text class=\"card-title\">Teleport 内容</text>\r\n            <text class=\"card-desc\">to: {{ currentTarget.description }}</text>\r\n          </view>\r\n        </Teleport>\r\n\r\n        <view v-if=\"!showTeleport\" class=\"empty-box\">\n          <text class=\"empty-text\">Teleport 已销毁</text>\r\n        </view>\r\n      </view>\r\n\r\n      <view class=\"target-box\" :class=\"currentTarget.title == 'page' ? 'target-box-active' : ''\">\r\n        <text class=\"target-title\">page</text>\r\n        <text class=\"target-desc\">to=\"page\" 指向页面根节点，此区域仅用于说明当前状态。</text>\r\n      </view>\r\n\r\n      <view id=\"teleport-id-target\" class=\"target-box\" :class=\"currentTarget.title == '#id' ? 'target-box-active' : ''\">\r\n        <text class=\"target-title\">#id</text>\r\n        <text class=\"target-desc\">to=\"#teleport-id-target\" 指向当前容器。</text>\r\n      </view>\r\n\r\n      <view id=\"teleport-ref-target\" ref=\"teleportRefTarget\" class=\"target-box\" :class=\"currentTarget.title == 'ref' ? 'target-box-active' : ''\">\n        <text class=\"target-title\">ref</text>\n        <text class=\"target-desc\">:to=\"teleportRefTarget\" 指向这个 ref 容器。</text>\n      </view>\n\n      <view id=\"teleport-page-bottom-anchor\" class=\"page-bottom-anchor\"></view>\n    </view>\n    <!-- #ifdef APP && !VUE3-VAPOR -->\r\n    </scroll-view>\n    <!-- #endif -->\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n  type TargetValue = string | Ref<UniElement | null>\r\n\n  type TargetItem = {\n    title : string\n    value : TargetValue\n    description : string\r\n  }\r\n\r\n  const teleportRefTarget = ref<UniElement | null>(null)\n  const instance = getCurrentInstance()!.proxy!\n  const teleportDisabled = ref<boolean>(false)\n  const showTeleport = ref<boolean>(false)\n\n  const targetList = [\n    { title: '#id', value: '#teleport-id-target', description: '指定 id 容器' },\n    { title: 'ref', value: teleportRefTarget, description: '模板 ref 容器' },\n    <!-- #ifdef APP && VUE3-VAPOR -->\n    { title: 'page', value: 'page', description: '页面根节点' }\n    <!-- #endif -->\n  ] as TargetItem[]\n\n  const currentTarget = ref<TargetItem>(targetList[0])\n\n  const teleportStatus = computed(() : string => {\n    if (!showTeleport.value) {\n      return 'v-if = false，Teleport 已销毁'\n    }\n    if (teleportDisabled.value) {\n      return 'disabled = true，内容留在声明位置'\n    }\n    return '传送到 ' + currentTarget.value.title\n  })\n\n  function setTarget(target : TargetItem) {\n    currentTarget.value = target\n  }\n\n  function setTargetByIndex(index : number) {\n    if (index < 0 || index >= targetList.length) {\n      return\n    }\n    currentTarget.value = targetList[index]\n  }\n\n  function setTeleportDisabled(disabled : boolean) {\n    teleportDisabled.value = disabled\n  }\n\n  function setShowTeleport(show : boolean) {\n    showTeleport.value = show\n  }\n\n  function onDisabledChange(e : UniSwitchChangeEvent) {\n    teleportDisabled.value = e.detail.value\n  }\n\n  function onShowChange(e : UniSwitchChangeEvent) {\n    showTeleport.value = e.detail.value\n  }\n\r\n  function goDeferPage() {\r\n    uni.navigateTo({ url: './teleport-defer' })\r\n  }\r\n\r\n  function getBoundingClientRectForTest(id : string) : DOMRect | null {\n    return uni.getElementById(id)?.getBoundingClientRect() ?? null\n  }\n\r\n  defineExpose({\n    setTargetByIndex,\n    setTeleportDisabled,\n    setShowTeleport,\n    getBoundingClientRectForTest\n  })\n</script>\r\n\r\n<style>\r\n  .teleport-page {\r\n    padding: 16px;\r\n    background-color: #f5f7fb;\r\n  }\r\n\r\n  .control-panel {\r\n    display: flex;\r\n    flex-direction: column;\r\n    padding: 12px;\r\n    margin-top: 12px;\r\n    border-radius: 12px;\r\n    background-color: #ffffff;\r\n  }\r\n\r\n  .control-row {\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    padding-top: 8px;\r\n    padding-bottom: 8px;\r\n  }\r\n\r\n  .control-copy {\r\n    display: flex;\r\n    flex-direction: column;\r\n    flex: 1;\r\n    margin-right: 12px;\r\n  }\r\n\r\n  .control-title {\r\n    font-size: 16px;\r\n    color: #1f2937;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .control-desc {\r\n    margin-top: 4px;\r\n    font-size: 12px;\r\n    color: #6b7280;\r\n  }\r\n\r\n  .target-actions {\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n  }\r\n\r\n  .target-button {\r\n    width: 62px;\r\n    margin-left: 6px;\r\n  }\r\n\r\n  .status-box {\r\n    display: flex;\r\n    flex-direction: column;\r\n    padding: 12px;\r\n    margin-top: 12px;\r\n    border-radius: 12px;\r\n    background-color: #eef6ff;\r\n  }\r\n\r\n  .status-text {\r\n    font-size: 14px;\r\n    color: #0052cc;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .status-tip {\r\n    margin-top: 4px;\r\n    font-size: 12px;\r\n    color: #4b5563;\r\n  }\r\n\r\n  .defer-link-button {\r\n    margin-top: 10px;\r\n  }\r\n\r\n  .target-box {\r\n    display: flex;\r\n    flex-direction: column;\r\n    min-height: 116px;\r\n    padding: 12px;\r\n    margin-top: 12px;\r\n    border-width: 1px;\r\n    border-style: dashed;\r\n    border-color: #c7d2fe;\r\n    border-radius: 12px;\r\n    background-color: #ffffff;\r\n  }\r\n\r\n  .target-box-active {\r\n    border-color: #007aff;\r\n    background-color: #f0f7ff;\r\n  }\r\n\r\n  .target-title {\r\n    font-size: 16px;\r\n    color: #111827;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .target-desc {\n    margin-top: 4px;\n    font-size: 12px;\n    color: #6b7280;\n  }\n\n  .page-bottom-anchor {\n    height: 1px;\n  }\n\n  .origin-box {\n    display: flex;\r\n    flex-direction: column;\r\n    min-height: 136px;\r\n    padding: 12px;\r\n    margin-top: 12px;\r\n    border-radius: 12px;\r\n    background-color: #fff7ed;\r\n  }\r\n\r\n  .origin-title {\r\n    font-size: 16px;\r\n    color: #9a3412;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .origin-desc {\r\n    margin-top: 4px;\r\n    margin-bottom: 10px;\r\n    font-size: 12px;\r\n    color: #9a3412;\r\n  }\r\n\r\n  .teleport-card {\r\n    display: flex;\r\n    flex-direction: column;\r\n    padding: 12px;\r\n    margin-top: 10px;\r\n    border-radius: 10px;\r\n    background-color: #007aff;\r\n  }\r\n\r\n  .card-title {\r\n    font-size: 16px;\r\n    color: #ffffff;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .card-desc {\r\n    margin-top: 4px;\r\n    font-size: 12px;\r\n    color: #dbeafe;\r\n  }\r\n\r\n  .empty-box {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: center;\r\n    min-height: 52px;\r\n    margin-top: 10px;\r\n    border-radius: 8px;\r\n    background-color: #ffffff;\r\n  }\r\n\r\n  .empty-text {\r\n    font-size: 13px;\r\n    color: #9ca3af;\r\n  }\r\n</style>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/built-in/component/teleport/teleport-props"},"special-attributes_key_child-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/built-in/special-attributes/key/child-composition.uvue","code":"```vue\n  <template>\r\n      <view style=\"padding: 12px; background-color: #eeeeee;\">\r\n          <text>props id: </text>\r\n          <text id=\"child-id\">{{ id }}</text>\r\n          <text>created id: </text>\r\n          <text id=\"child-created-id\" style=\"margin-top: 8px;\">{{ createdId }}</text>\r\n      </view>\r\n  </template>\r\n\r\n  <script setup lang=\"uts\">\r\n    const props = defineProps({\r\n        id: { type: String, default: '' }\r\n    })\r\n\r\n    const createdId = ref(props.id)\r\n  </script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/built-in/special-attributes/key/child-composition"},"special-attributes_key_key-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/built-in/special-attributes/key/key-composition.uvue","code":"```vue\n<template>\r\n    <view style=\"flex: 1; padding: 20px;\">\r\n        <button id=\"btn\" @click=\"switchItem\">切换详情</button>\r\n\r\n        <text>页面当前 currentId: </text>\r\n        <text id=\"current-id\">{{ currentId }}</text>\r\n\r\n        <!-- 小程序平台不支持 :key，该页面已在页面注册和入口处通过条件编译屏蔽 -->\r\n        <view v-if=\"currentId != ''\" style=\"margin-top: 20px;\">\r\n            <Child :key=\"currentId\" :id=\"currentId\" />\r\n        </view>\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 currentId = ref('a')\r\n\r\n    function switchItem() {\r\n        currentId.value = currentId.value == 'a' ? 'b' : 'a'\r\n    }\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/built-in/special-attributes/key/key-composition"},"special-elements_component_component-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/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 = shallowRef(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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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    <!-- vapor button 调整实现，自动化测试无法通过 innerText 获取文本内容，重构为 text  -->\n    <text class=\"mt-10 btn\" id=\"show-botton\" @click=\"handleShow\">{{ dataInfo.isShow ? '点击隐藏' : '点击显示' }}</text>\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.btn{\n  border: 1px solid #eee;\n  border-radius: 4px;\n  text-align: center;\n  padding-top: 8px;\n  padding-bottom: 8px;\n}\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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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    <text class=\"mt-10 btn\" id=\"show-botton\" @click=\"handleShow\">{{ dataInfo.isShow ? '点击隐藏' : '点击显示' }}</text>\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.btn{\n  border: 1px solid #eee;\n  border-radius: 4px;\n  text-align: center;\n  padding-top: 8px;\n  padding-bottom: 8px;\n}\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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/alpha/pages/reactivity/advanced/mark-raw/mark-raw.uvue","code":"```vue\n<template>\n\t<view class=\"page\">\n\t\tmarkRaw 暂不支持\n\t</view>\n</template>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/advanced/mark-raw/mark-raw"},"advanced_on-scope-dispose_on-scope-dispose":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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\">{{ 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.com/dcloud/hello-uvue/blob/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    <!-- #ifndef VUE3-VAPOR -->\r\n    <button id=\"update-page-render-btn\" @click=\"updatePageRender\">\r\n      update page render\r\n    </button>\r\n    <!-- #endif -->\r\n  </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nlet pageKey = ref<number>(0)\r\n\r\ntype StateNested = {\r\n  count : number\r\n}\r\ntype State = {\r\n  count : number,\r\n  nested : StateNested\r\n}\r\n// 可通过泛型指定类型\r\nconst state = shallowReadonly<State>({\r\n  count: 0,\r\n  nested: {\r\n    count: 0\r\n  }\r\n})\r\n\r\nconst reactiveState = reactive<State>(state)\r\n\r\n// #ifdef APP\r\nconst incrementStateCount = () => {\r\n  state.count++\r\n}\r\n\r\nconst incrementStateNestedCount = () => {\r\n  state.nested.count++\r\n}\r\n// #endif\r\n\r\nconst updatePageRender = () => {\r\n  pageKey.value = Date.now()\r\n}\r\n\r\ndefineExpose({\r\n  reactiveState,\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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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>\n    <view class=\"flex justify-between flex-row mb-10\">\n      <text>computed triple count:</text>\n      <text id=\"triple-count\">{{ tripleCount }}</text>\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\nfunction useTripleCount() {\n    return computed(() => count.value * 3)\n}\nconst tripleCount = useTripleCount()\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.com/dcloud/hello-uvue/blob/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>\n    <view class=\"flex justify-between flex-row mb-10\">\n      <text>computed triple count:</text>\n      <text id=\"triple-count\">{{ tripleCount }}</text>\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    },\n    tripleCount(): number {\n      return this.count * 3\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.com/dcloud/hello-uvue/blob/alpha/pages/reactivity/core/reactive/reactive.uvue","code":"```vue\n<template>\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\r\n  <scroll-view style=\"flex: 1;\">\r\n    <!-- #endif -->\r\n\t\t<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      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>arr2ForEachEffectCount:</text>\r\n        <text id=\"arr2\">{{ arr2ForEachEffectCount }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>arr3(reverse):</text>\r\n        <text id=\"arr3\">{{ JSON.stringify(arr3) }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>arr4(sort):</text>\r\n        <text id=\"arr4\">{{ JSON.stringify(computedArr4) }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>arr5:</text>\r\n        <text id=\"arr5\">{{ JSON.stringify(arr5Result) }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>map2ForEachEffectCount:</text>\r\n        <text id=\"map2\">{{ map2ForEachEffectCount }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>map3ForOfEffectCount:</text>\r\n        <text id=\"map3\">{{ map3ForOfEffectCount }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>set2ForEachEffectCount:</text>\r\n        <text id=\"set2\">{{ set2ForEachEffectCount }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>set3ForOfEffectCount:</text>\r\n        <text id=\"set3\">{{ set3ForOfEffectCount }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>response.data.success:</text>\r\n        <text id=\"generic\">{{ response.data.success }}</text>\r\n      </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>reactive-str-id:</text>\r\n      <text id=\"reactive-str-id\">{{ r1.getString(('id')) }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>reactive-str-boolean :</text>\r\n      <text id=\"reactive-str-boolean\">{{ r1.getBoolean(('bl')) }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>reactive-str-number :</text>\r\n      <text id=\"reactive-str-number\">{{ r1.getNumber(('n')) }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>reactive-str-any :</text>\r\n      <text id=\"reactive-str-any\">{{ r1.getAny(('id')) }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>reactive-str-arr :</text>\r\n      <text id=\"reactive-str-arr\">{{ r1.getArray(('arr'))![0] }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>reactive-str-json :</text>\r\n      <text id=\"reactive-str-json\">{{ r1.getJSON(('cars[0]'))!['name'] }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>reactive-str:</text>\r\n      <text id=\"reactive-str\">{{ r2.getString(\"msg\") }}</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      <button class='mb-10' id=\"update-arr2-forEach-effect-btn\" @click=\"updateArr2()\">update arr2</button>\r\n      <button class='mb-10' id=\"update-arr4-btn\" @click=\"updateArr4()\">update arr4</button>\r\n      <button class='mb-10' id=\"update-map2-forEach-effect-btn\" @click=\"updateMap2()\">update map2 for each</button>\r\n      <button class='mb-10' id=\"update-map3-forOf-effect-btn\" @click=\"updateMap3()\">update map3 for of</button>\r\n      <button class='mb-10' id=\"update-set2-forEach-effect-btn\" @click=\"updateSet2()\">update set2 for each</button>\r\n      <button class='mb-10' id=\"update-set3-forOf-effect-btn\" @click=\"updateSet3()\">update set3 for of</button>\r\n      <button class='mb-10' id=\"update-generic\" @click=\"updateResponse()\">response.data.success</button>\r\n      \r\n      <!-- 复杂场景测试 -->\r\n      <view class=\"flex justify-between flex-row mb-10 mt-20\">\r\n        <text class=\"section-title\">复杂场景</text>\r\n      </view>\r\n      \r\n      <!-- 1. 数组嵌套对象测试 -->\r\n      <view class=\"mb-10\">\r\n        <text>arrWithObj[0].name:</text>\r\n        <text id=\"arr-with-obj-name\">{{ arrWithObj[0].name }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>arrWithObj[0].count:</text>\r\n        <text id=\"arr-with-obj-count\">{{ arrWithObj[0].count }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>arrWithObj length:</text>\r\n        <text id=\"arr-with-obj-length\">{{ arrWithObj.length }}</text>\r\n      </view>\r\n      <button class='mb-10' id=\"update-arr-with-obj-name-btn\" @click=\"updateArrWithObjName()\">update arrWithObj[0].name</button>\r\n      <button class='mb-10' id=\"update-arr-with-obj-count-btn\" @click=\"updateArrWithObjCount()\">update arrWithObj[0].count</button>\r\n      <button class='mb-10' id=\"push-arr-with-obj-btn\" @click=\"pushArrWithObj()\">push new obj to arrWithObj</button>\r\n      \r\n      <!-- 2. 对象嵌套数组测试 -->\r\n      <view class=\"mb-10\">\r\n        <text>objWithArr.items:</text>\r\n        <text id=\"obj-with-arr-items\">{{ JSON.stringify(objWithArr.items) }}</text>\r\n      </view>\r\n      <view class=\"mb-10\">\r\n        <text>objWithArr.items[0]:</text>\r\n        <text id=\"obj-with-arr-items-0\">{{ (objWithArr['items'] as string[])[0] }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>objWithArr.items.length:</text>\r\n        <text id=\"obj-with-arr-items-length\">{{ (objWithArr['items'] as string[]).length }}</text>\r\n      </view>\r\n      <button class='mb-10' id=\"update-obj-with-arr-items-0-btn\" @click=\"updateObjWithArrItems0()\">update objWithArr.items[0]</button>\r\n      <button class='mb-10' id=\"push-obj-with-arr-items-btn\" @click=\"pushObjWithArrItems()\">push to objWithArr.items</button>\r\n      \r\n      <!-- 3. JSON.parse + reactive 联合测试 -->\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>jsonParsedData.user.name:</text>\r\n        <text id=\"json-parsed-user-name\">{{ jsonParsedData.getString('user.name') }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>jsonParsedData.user.age:</text>\r\n        <text id=\"json-parsed-user-age\">{{ jsonParsedData.getNumber('user.age') }}</text>\r\n      </view>\r\n      <view class=\"mb-10\">\r\n        <text>jsonParsedData.tags:</text>\r\n        <text id=\"json-parsed-tags\">{{ JSON.stringify(jsonParsedData.tags) }}</text>\r\n      </view>\r\n      <view class=\"mb-10\">\r\n        <text>jsonParsedData.items[0].title:</text>\r\n        <text id=\"json-parsed-items-0-title\">{{ jsonParsedData.getJSON('items[0]')!.title }}</text>\r\n      </view>\r\n      <button class='mb-10' id=\"update-json-parsed-user-name-btn\" @click=\"updateJsonParsedUserName()\">update jsonParsedData.user.name</button>\r\n      <button class='mb-10' id=\"update-json-parsed-user-age-btn\" @click=\"updateJsonParsedUserAge()\">update jsonParsedData.user.age</button>\r\n      <button class='mb-10' id=\"push-json-parsed-tags-btn\" @click=\"pushJsonParsedTags()\">push to jsonParsedData.tags</button>\r\n      <button class='mb-10' id=\"update-json-parsed-items-0-title-btn\" @click=\"updateJsonParsedItems0Title()\">update jsonParsedData.items[0].title</button>\r\n      \r\n      <!-- 4. 多层嵌套复杂结构测试 -->\r\n      <view class=\"mb-10\">\r\n        <text>complexData.users[0].profile.name:</text>\r\n        <text id=\"complex-users-0-profile-name\">{{ ((complexData['users'] as UTSJSONObject[])[0] as UTSJSONObject).getString('profile.name') }}</text>\r\n      </view>\r\n      <view class=\"mb-10\">\r\n        <text>complexData.users[0].hobbies[0]:</text>\r\n        <text id=\"complex-users-0-hobbies-0\">{{ (((complexData['users'] as UTSJSONObject[])[0] as UTSJSONObject)['hobbies'] as string[])[0] }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>complexData.users[0].hobbies.length:</text>\r\n        <text id=\"complex-users-0-hobbies-length\">{{ (((complexData['users'] as UTSJSONObject[])[0] as UTSJSONObject)['hobbies'] as string[]).length }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>complexData.meta.count:</text>\r\n        <text id=\"complex-meta-count\">{{ (complexData['meta'] as UTSJSONObject)['count'] }}</text>\r\n      </view>\r\n      <button class='mb-10' id=\"update-complex-users-0-profile-name-btn\" @click=\"updateComplexUsers0ProfileName()\">update complexData.users[0].profile.name</button>\r\n      <button class='mb-10' id=\"update-complex-users-0-hobbies-0-btn\" @click=\"updateComplexUsers0Hobbies0()\">update complexData.users[0].hobbies[0]</button>\r\n      <button class='mb-10' id=\"push-complex-users-0-hobbies-btn\" @click=\"pushComplexUsers0Hobbies()\">push to complexData.users[0].hobbies</button>\r\n      <button class='mb-10' id=\"update-complex-meta-count-btn\" @click=\"updateComplexMetaCount()\">update complexData.meta.count</button>\r\n      \r\n      <!-- 5. watchEffect 追踪复杂结构 -->\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>complexEffectCount:</text>\r\n        <text id=\"complex-effect-count\">{{ complexEffectCount }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>jsonParsedEffectCount:</text>\r\n        <text id=\"json-parsed-effect-count\">{{ jsonParsedEffectCount }}</text>\r\n      </view>\r\n      <button class='mb-10' id=\"trigger-complex-effect-btn\" @click=\"triggerComplexEffect()\">trigger complex effect</button>\r\n      <button class='mb-10' id=\"trigger-json-parsed-effect-btn\" @click=\"triggerJsonParsedEffect()\">trigger jsonParsed effect</button>\r\n      \r\n      <!-- 6. 数组嵌套对象 + forEach 响应式 -->\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>arrWithObjForEachCount:</text>\r\n        <text id=\"arr-with-obj-forEach-count\">{{ arrWithObjForEachCount }}</text>\r\n      </view>\r\n      <button class='mb-10' id=\"update-arr-with-obj-forEach-btn\" @click=\"updateArrWithObjForEach()\">update arrWithObj (forEach effect)</button>\r\n      \r\n      <!-- 7. 对象嵌套数组 + JSON.parse 联合测试 -->\r\n      <view class=\"mb-10\">\r\n        <text>jsonObjWithArr.data.list:</text>\r\n        <text id=\"json-obj-with-arr-list\">{{ JSON.stringify((jsonObjWithArr['data'] as UTSJSONObject)['list']) }}</text>\r\n      </view>\r\n      <view class=\"mb-10\">\r\n        <text>jsonObjWithArr.data.list[0].value:</text>\r\n        <text id=\"json-obj-with-arr-list-0-value\">{{ (((jsonObjWithArr['data'] as UTSJSONObject)['list'] as UTSJSONObject[])[0] as UTSJSONObject)['value'] }}</text>\r\n      </view>\r\n      <button class='mb-10' id=\"update-json-obj-with-arr-list-0-value-btn\" @click=\"updateJsonObjWithArrList0Value()\">update jsonObjWithArr.data.list[0].value</button>\r\n      <button class='mb-10' id=\"push-json-obj-with-arr-list-btn\" @click=\"pushJsonObjWithArrList()\">push to jsonObjWithArr.data.list</button>\r\n    </view>\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\r\n\t</scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n\tconst count = ref(0)\r\n\r\n\t// TODO: 待支持后补充泛型示例\r\n\tconst obj = reactive({\r\n\t\tstr: 'default str',\r\n\t\tnum: count,\r\n\t\tarr: ['a', 'b', 'c']\r\n\t})\r\n\r\n\tconst updateObjStr = () => {\r\n\t\tobj['str'] = 'new str';\r\n\t}\r\n\r\n\tconst updateObjNum = () => {\r\n\t\tobj['num'] = (obj['num'] as number) + 1\r\n\t}\r\n\r\n\tconst updateCount = () => {\r\n\t\tcount.value++\r\n\t}\r\n\r\n\tconst updateObjArr = () => {\r\n\t\t(obj['arr'] as string[]).push('d')\r\n\t}\r\n\r\n\tconst obj1 = reactive({\r\n\t\ta: { b: { c: 'c' } }\r\n\t})\r\n\r\n\tconst count1 = ref(0)\r\n\twatchEffect(() => {\r\n\t\tcount1.value++\r\n\t\t// 测试getString等keyPath触发依赖收集\r\n\t\tobj1.getString(\"a.b.c\")\r\n\t})\r\n\tfunction updateObj1_A_B_C() {\r\n\t\t((obj1[\"a\"] as UTSJSONObject)[\"b\"] as UTSJSONObject)[\"c\"] = \"c1-\" + Date.now()\r\n\t}\r\n\tconst arr1 = ref<number[]>([])\r\n\tfunction test(...args : number[]) {\r\n\t\tarr1.value = args\r\n\t}\r\n\tfunction updateArr1(isReactive : boolean) {\r\n\t\tif (isReactive) {\r\n\t\t\ttest(...reactive([4, 5, 6]))\r\n\t\t} else {\r\n\t\t\ttest(...[1, 2, 3])\r\n\t\t}\r\n\t}\r\n\r\n\tconst arr2 = reactive<number[]>([1])\r\n\tconst arr2ForEachEffectCount = ref(0)\r\n\twatchEffect(() => {\r\n\t\tarr2ForEachEffectCount.value++\r\n\t\tarr2.forEach((item) => {\r\n\t\t\tconsole.log('arr2', item)\r\n\t\t})\r\n\t})\r\n\tfunction updateArr2() {\r\n\t\tarr2.push(Date.now())\r\n\t}\r\n\r\n\tconst arr3 = reactive([1, 2, 3, 4, 5]).reverse()\r\n\r\n\tconst arr4 = reactive<number[]>([5, 3, 4, 1, 2])\r\n\tconst computedArr4 = computed(() => arr4.sort())\r\n\tfunction updateArr4() {\r\n\t\tarr4.push(arr4.length + 1)\r\n\t\tconsole.log(arr4)\r\n\t}\r\n\r\n\tconst arr5 = reactive<UTSJSONObject[]>([{ id: 1 }, { id: 2 }])\r\n\tconst arr5FirstObj = arr5[0]\r\n\tconst arr5FirstRawObj = toRaw<UTSJSONObject>(arr5[0])\r\n\tconst arr5Result = {\r\n\t\tincludes: [arr5.includes(arr5FirstObj), arr5.includes(arr5FirstRawObj)],\r\n\t\tindexOf: [arr5.indexOf(arr5FirstObj), arr5.indexOf(arr5FirstRawObj)],\r\n\t\tlastIndexOf: [arr5.lastIndexOf(arr5FirstObj), arr5.lastIndexOf(arr5FirstRawObj)],\r\n\t}\r\n\r\n\tconst map2 = reactive(new Map<string, number>([[\"a\", 1]]))\r\n\tconst map2ForEachEffectCount = ref(0)\r\n\twatchEffect(() => {\r\n\t\tmap2ForEachEffectCount.value++\r\n\t\tmap2.forEach((item : number) => {\r\n\t\t\tconsole.log('map2', item)\r\n\t\t})\r\n\t})\r\n\tfunction updateMap2() {\r\n\t\tmap2.set(\"c-\" + Date.now(), Date.now())\r\n\t}\r\n\r\n\tconst map3 = reactive(new Map<string, number>([[\"a\", 1]]))\r\n\tconst map3ForOfEffectCount = ref(0)\r\n\twatchEffect(() => {\r\n\t\tmap3ForOfEffectCount.value++\r\n\t\tfor (const item of map3) {\r\n\t\t\tconsole.log(\"map3\", item)\r\n\t\t}\r\n\t})\r\n\tfunction updateMap3() {\r\n\t\tmap3.set(\"c-\" + Date.now(), Date.now())\r\n\t}\r\n\r\n\tconst set2 = reactive(new Set<number>([1]))\r\n\tconst set2ForEachEffectCount = ref(0)\r\n\twatchEffect(() => {\r\n\t\tset2ForEachEffectCount.value++\r\n\t\tset2.forEach((item : number) => {\r\n\t\t\tconsole.log('set2', item)\r\n\t\t})\r\n\t})\r\n\tfunction updateSet2() {\r\n\t\tset2.add(Date.now())\r\n\t}\r\n\r\n\tconst set3 = reactive(new Set<number>([1]))\r\n\tconst set3ForOfEffectCount = ref(0)\r\n\twatchEffect(() => {\r\n\t\tset3ForOfEffectCount.value++\r\n\t\tfor (const item of set3) {\r\n\t\t\tconsole.log(\"set3\", item)\r\n\t\t}\r\n\t})\r\n\tfunction updateSet3() {\r\n\t\tset3.add(Date.now())\r\n\t}\r\n  \r\n  type BaseResponse<T> = {\r\n  \tcode : number\r\n  \tdata : T\r\n  }\r\n  const response = reactive<BaseResponse<UTSJSONObject>>({\r\n  \tcode: 1,\r\n  \tdata: {\r\n      success: true\r\n    } as UTSJSONObject\r\n  })\r\n  function updateResponse() {\r\n  \tresponse.data.success = response.data.success != true\r\n  }\r\n  \r\n  let r1 = reactive({})\r\n  let result = JSON.parse(`{ \"result\": { \"data\": { \"id\": \"1\", \"bl\": false, \"n\": 2, \"arr\": [\"1\"], \"cars\": [ { \"name\": \"car1\", \"value\": 100} ] } } }`) as UTSJSONObject\r\n  r1 = result.getJSON('result.data', {} as UTSJSONObject)\r\n  let r2 = reactive({})\r\n  r2 = { msg: '1' }\r\n  \r\n  // ========== 复杂场景测试 ==========\r\n  \r\n  // 1. 数组嵌套对象测试\r\n  const arrWithObj = reactive<UTSJSONObject[]>([\r\n    { name: 'item1', count: 0 } as UTSJSONObject,\r\n    { name: 'item2', count: 1 } as UTSJSONObject\r\n  ])\r\n  \r\n  function updateArrWithObjName() {\r\n    (arrWithObj[0] as UTSJSONObject)['name'] = 'updated-item1-' + Date.now()\r\n  }\r\n  \r\n  function updateArrWithObjCount() {\r\n    const currentCount = (arrWithObj[0] as UTSJSONObject)['count'] as number;\r\n    (arrWithObj[0] as UTSJSONObject)['count'] = currentCount + 1\r\n  }\r\n  \r\n  function pushArrWithObj() {\r\n    arrWithObj.push({ name: 'item' + arrWithObj.length, count: arrWithObj.length } as UTSJSONObject)\r\n  }\r\n  \r\n  // 2. 对象嵌套数组测试\r\n  const objWithArr = reactive({\r\n    items: ['a', 'b', 'c'] as string[]\r\n  })\r\n  \r\n  function updateObjWithArrItems0() {\r\n    const items = objWithArr['items'] as string[]\r\n    items[0] = 'updated-' + Date.now()\r\n  }\r\n  \r\n  function pushObjWithArrItems() {\r\n    const items = objWithArr['items'] as string[]\r\n    items.push('item' + items.length)\r\n  }\r\n  \r\n  // 3. JSON.parse + reactive 联合测试\r\n  const jsonString = `{\r\n    \"user\": {\r\n      \"name\": \"John\",\r\n      \"age\": 30\r\n    },\r\n    \"tags\": [\"tag1\", \"tag2\"],\r\n    \"items\": [\r\n      { \"title\": \"item1\", \"value\": 100 },\r\n      { \"title\": \"item2\", \"value\": 200 }\r\n    ]\r\n  }`\r\n  const jsonParsed = JSON.parse(jsonString) as UTSJSONObject\r\n  const jsonParsedData = reactive(jsonParsed)\r\n  \r\n  function updateJsonParsedUserName() {\r\n    ((jsonParsedData['user'] as UTSJSONObject) as UTSJSONObject)['name'] = 'Updated-' + Date.now()\r\n  }\r\n  \r\n  function updateJsonParsedUserAge() {\r\n    const currentAge = ((jsonParsedData['user'] as UTSJSONObject) as UTSJSONObject)['age'] as number;\r\n    ((jsonParsedData['user'] as UTSJSONObject) as UTSJSONObject)['age'] = currentAge + 1\r\n  }\r\n  \r\n  function pushJsonParsedTags() {\r\n    const tags = jsonParsedData['tags'] as string[]\r\n    tags.push('tag' + tags.length)\r\n  }\r\n  \r\n  function updateJsonParsedItems0Title() {\r\n    const items = jsonParsedData['items'] as UTSJSONObject[];\r\n    (items[0] as UTSJSONObject)['title'] = 'updated-item1-' + Date.now()\r\n  }\r\n  \r\n  // 4. 多层嵌套复杂结构测试\r\n  const complexData = reactive({\r\n    users: [\r\n      {\r\n        profile: {\r\n          name: 'Alice',\r\n          age: 25\r\n        },\r\n        hobbies: ['reading', 'coding'] as string[]\r\n      } as UTSJSONObject\r\n    ] as UTSJSONObject[],\r\n    meta: {\r\n      count: 1\r\n    } as UTSJSONObject\r\n  })\r\n  \r\n  function updateComplexUsers0ProfileName() {\r\n    (((complexData['users'] as UTSJSONObject[])[0] as UTSJSONObject)['profile'] as UTSJSONObject)['name'] = 'Updated-Alice-' + Date.now()\r\n  }\r\n  \r\n  function updateComplexUsers0Hobbies0() {\r\n    (((complexData['users'] as UTSJSONObject[])[0] as UTSJSONObject)['hobbies'] as string[])[0] = 'updated-hobby-' + Date.now()\r\n  }\r\n  \r\n  function pushComplexUsers0Hobbies() {\r\n    const hobbies = (((complexData['users'] as UTSJSONObject[])[0] as UTSJSONObject)['hobbies'] as string[])\r\n    hobbies.push('hobby' + hobbies.length)\r\n  }\r\n  \r\n  function updateComplexMetaCount() {\r\n    const meta = complexData['meta'] as UTSJSONObject\r\n    const currentCount = meta['count'] as number;\r\n    meta['count'] = currentCount + 1\r\n  }\r\n  \r\n  // 5. watchEffect 追踪复杂结构\r\n  const complexEffectCount = ref(0)\r\n  watchEffect(() => {\r\n    complexEffectCount.value++\r\n    // 追踪复杂嵌套结构\r\n    const users = complexData['users'] as UTSJSONObject[]\r\n    const user = users[0] as UTSJSONObject\r\n    const profile = user['profile'] as UTSJSONObject\r\n    const userName = profile['name']\r\n    const hobbies = user['hobbies'] as string[]\r\n    const hobby = hobbies[0]\r\n    const meta = complexData['meta'] as UTSJSONObject\r\n    const metaCount = meta['count']\r\n    console.log('complex effect:', userName, hobby, metaCount)\r\n  })\r\n  \r\n  const jsonParsedEffectCount = ref(0)\r\n  watchEffect(() => {\r\n    jsonParsedEffectCount.value++\r\n    // 追踪 JSON.parse 后的响应式数据\r\n    const userName = jsonParsedData.getString('user.name')\r\n    const tags = jsonParsedData['tags']\r\n    const items = jsonParsedData['items'] as UTSJSONObject[]\r\n    const itemTitle = (items[0] as UTSJSONObject)['title']\r\n    console.log('jsonParsed effect:', userName, tags, itemTitle)\r\n  })\r\n  \r\n  function triggerComplexEffect() {\r\n    updateComplexUsers0ProfileName()\r\n    updateComplexMetaCount()\r\n  }\r\n  \r\n  function triggerJsonParsedEffect() {\r\n    updateJsonParsedUserName()\r\n    pushJsonParsedTags()\r\n  }\r\n  \r\n  // 6. 数组嵌套对象 + forEach 响应式\r\n  const arrWithObjForEachCount = ref(0)\r\n  watchEffect(() => {\r\n    arrWithObjForEachCount.value++\r\n    arrWithObj.forEach((item) => {\r\n      const name = (item as UTSJSONObject)['name']\r\n      const count = (item as UTSJSONObject)['count']\r\n      // console.log('arrWithObj forEach:', name, count)\r\n    })\r\n  })\r\n  \r\n  function updateArrWithObjForEach() {\r\n    updateArrWithObjName()\r\n    pushArrWithObj()\r\n  }\r\n  \r\n  // 7. 对象嵌套数组 + JSON.parse 联合测试\r\n  const jsonObjWithArrString = `{\r\n    \"data\": {\r\n      \"list\": [\r\n        { \"id\": 1, \"value\": \"value1\" },\r\n        { \"id\": 2, \"value\": \"value2\" }\r\n      ]\r\n    }\r\n  }`\r\n  const jsonObjWithArrParsed = JSON.parse(jsonObjWithArrString) as UTSJSONObject\r\n  const jsonObjWithArr = reactive(jsonObjWithArrParsed)\r\n  \r\n  function updateJsonObjWithArrList0Value() {\r\n    const data = jsonObjWithArr['data'] as UTSJSONObject\r\n    const list = data['list'] as UTSJSONObject[];\r\n    (list[0] as UTSJSONObject)['value'] = 'updated-value1-' + Date.now()\r\n  }\r\n  \r\n  function pushJsonObjWithArrList() {\r\n    const data = jsonObjWithArr['data'] as UTSJSONObject\r\n    const list = data['list'] as UTSJSONObject[]\r\n    list.push({ id: list.length + 1, value: 'value' + (list.length + 1) } as UTSJSONObject)\r\n  }\r\n</script>\r\n<style>\r\n    .section-title {\r\n      font-size: 16px;\r\n      font-weight: bold;\r\n      margin-bottom: 10px;\r\n    }\r\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/core/reactive/reactive"},"core_readonly_readonly":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/alpha/pages/reactivity/core/ref/ref.uvue","code":"```vue\n<template>\r\n\t<view class=\"page\">\r\n\t\t<view class=\"flex justify-between flex-row mb-10\">\r\n\t\t\t<text>count:</text>\r\n\t\t\t<text id=\"count\">{{ count }}</text>\r\n\t\t</view>\r\n\t\t<view class=\"flex justify-between flex-row mb-10\">\r\n\t\t\t<text>str:</text>\r\n\t\t\t<text id=\"str\">{{ str }}</text>\r\n\t\t</view>\r\n\t\t<view class=\"flex justify-between flex-row mb-10\">\r\n\t\t\t<text>bool:</text>\r\n\t\t\t<text id=\"bool\">{{ bool }}</text>\r\n\t\t</view>\r\n\t\t<view class=\"flex justify-between flex-row mb-10\">\r\n\t\t\t<text>arr:</text>\r\n\t\t\t<text id=\"arr\">{{ JSON.stringify(arr) }}</text>\r\n\t\t</view>\r\n\t\t<view class=\"flex justify-between flex-row mb-10\">\r\n\t\t\t<text>counter.count:</text>\r\n\t\t\t<text id=\"counter-count\">{{ counter.count }}</text>\r\n\t\t</view>\r\n\t\t<view class=\"flex justify-between flex-row mb-10\">\r\n\t\t\t<text>counters.length:</text>\r\n\t\t\t<text id=\"counters-count\">{{ counters.length }}</text>\r\n\t\t</view>\r\n\t\t<view class=\"flex justify-between flex-row mb-10\">\r\n\t\t\t<text>issue15557:</text>\r\n\t\t\t<text id=\"issue-15557\">{{ issue15557?.['a'] }}</text>\r\n\t\t</view>\r\n\t\t<view class=\"flex justify-between flex-row mb-10\">\r\n\t\t\t<text>issue20323:</text>\r\n\t\t\t<text id=\"issue-20323-1\">{{ issue20323_1_a }}</text>\r\n\t\t\t<text id=\"issue-20323-2\">{{ issue20323_2_a }}</text>\r\n\t\t</view>\r\n\t\t<view class=\"flex justify-between flex-row mb-10\">\r\n\t\t\t<text>ref-str-id:</text>\r\n\t\t\t<text id=\"ref-str-id\">{{ r1.getString(('id')) }}</text>\r\n\t\t</view>\r\n\t\t<view class=\"flex justify-between flex-row mb-10\">\r\n\t\t\t<text>ref-str-boolean :</text>\r\n\t\t\t<text id=\"ref-str-boolean\">{{ r1.getBoolean(('bl')) }}</text>\r\n\t\t</view>\r\n\t\t<view class=\"flex justify-between flex-row mb-10\">\r\n\t\t\t<text>ref-str-number :</text>\r\n\t\t\t<text id=\"ref-str-number\">{{ r1.getNumber(('n')) }}</text>\r\n\t\t</view>\r\n\t\t<view class=\"flex justify-between flex-row mb-10\">\r\n\t\t\t<text>ref-str-any :</text>\r\n\t\t\t<text id=\"ref-str-any\">{{ r1.getAny(('id')) }}</text>\r\n\t\t</view>\r\n\t\t<view class=\"flex justify-between flex-row mb-10\">\r\n\t\t\t<text>ref-str-arr :</text>\r\n\t\t\t<text id=\"ref-str-arr\">{{ r1.getArray(('arr'))![0] }}</text>\r\n\t\t</view>\r\n\t\t<view class=\"flex justify-between flex-row mb-10\">\r\n\t\t\t<text>ref-str-json :</text>\r\n\t\t\t<text id=\"ref-str-json\">{{ r1.getJSON(('cars[0]'))!['name'] }}</text>\r\n\t\t</view>\r\n\t\t<view class=\"flex justify-between flex-row mb-10\">\r\n\t\t\t<text>ref-str:</text>\r\n\t\t\t<text id=\"ref-str\">{{ r2.msg }}</text>\r\n\t\t</view>\r\n\t\t<button class='mb-10' id=\"change-count-btn\" @click=\"changeCount\">change count</button>\r\n\t\t<button class='mb-10' id='change-str-btn' @click='changeStr'>change str</button>\r\n\t\t<button class='mb-10' id='change-bool-btn' @click='changeBool'>change bool</button>\r\n\t\t<button class='mb-10' id='change-arr-btn' @click='changeArr'>change arr</button>\r\n\t\t<button class='mb-10' id='change-counter-btn' @click='changeCounter'>change counter</button>\r\n\t\t<button class='mb-10' id='change-counters-btn' @click='changeCounters'>change counters</button>\r\n\t</view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n\t// 基础数据类型可自动推导类型\r\n\tconst count = ref(0)\r\n\tconst str = ref('default str')\r\n\tconst bool = ref(false)\r\n\r\n\t// 可通过泛型指定类型\r\n\tconst arr = ref<number[]>([1, 2, 3])\r\n\ttype Counter = {\r\n\t\tcount : number\r\n\t}\r\n\t// 可通过泛型指定类型\r\n\tconst counter = ref<Counter>({\r\n\t\tcount: 0\r\n\t})\r\n\r\n\tconst counters = ref<Counter[]>([])\r\n\r\n\tconst changeCount = () => {\r\n\t\tcount.value++\r\n\t}\r\n\tconst changeStr = () => {\r\n\t\tstr.value = 'new str'\r\n\t}\r\n\tconst changeBool = () => {\r\n\t\tbool.value = !bool.value\r\n\t}\r\n\tconst changeArr = () => {\r\n\t\tarr.value.push(arr.value.length + 1)\r\n\t}\r\n\tconst changeCounter = () => {\r\n\t\tcounter.value.count++\r\n\t}\r\n\tconst changeCounters = () => {\r\n\t\tcounters.value.push({ count: 0 })\r\n\t}\r\n\r\n\t// issue/15557\r\n\tconst issue15557 = ref<UTSJSONObject | null>(null)\r\n\tissue15557.value = {\r\n\t\ta: 1\r\n\t}\r\n\tissue15557.value!.set('a', 2)\r\n\r\n\t// issue/20323\r\n\tconst issue20323_1 = ref<UTSJSONObject>({\r\n\t\ta: \"abc\"\r\n\t})\r\n\tconst issue20323_1_a = ref<string | null>(issue20323_1.value.getString('a'))\r\n\r\n\tlet _issue20323_2_a : string | null = null\r\n\tconst issue20323_2 = ref<UTSJSONObject>({\r\n\t\ta: _issue20323_2_a ?? \"abc\"\r\n\t})\r\n\tconst issue20323_2_a = ref<string | null>(issue20323_2.value.getString('a'))\r\n\t\r\n\tconst r1 = ref({})\r\n\tlet result = JSON.parse(`{ \"result\": { \"data\": { \"id\": \"1\", \"bl\": false, \"n\": 2, \"arr\": [\"1\"], \"cars\": [ { \"name\": \"car1\", \"value\": 100} ] } } }`) as UTSJSONObject\r\n\tr1.value = result.getJSON('result.data', {} as UTSJSONObject)\r\n\tconst r2 = ref({ msg: '1' })\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/core/ref/ref"},"core_watch_on-watcher-cleanup":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/reactivity/core/watch/on-watcher-cleanup.uvue","code":"```vue\n<script setup lang=\"uts\">\nimport {onWatcherCleanup} from 'vue'\n\nconst source = ref<number>(0)\nconst runCount = ref<number>(0)\nconst cleanupCount = ref<number>(0)\nconst activeValue = ref<number>(-1)\nconst cleanedValue = ref<number>(-1)\nconst watcherStatus = ref<string>('active')\nconst eventOrder = ref<string>('')\n\nfunction recordEvent(event : string) {\n  eventOrder.value = eventOrder.value.length == 0\n    ? event\n    : `${eventOrder.value} -> ${event}`\n}\n\nconst watchHandle = watch(source, (value : number) => {\n  runCount.value++\n  activeValue.value = value\n  recordEvent(`run:${value}`)\n\n  onWatcherCleanup(() => {\n    cleanupCount.value++\n    cleanedValue.value = value\n    recordEvent(`cleanup:${value}`)\n  })\n}, {\n  immediate: true,\n  flush: 'sync'\n})\n\nfunction increment() {\n  source.value++\n}\n\nfunction stopWatcher() {\n  watchHandle.stop()\n  watcherStatus.value = 'stopped'\n}\n\ndefineExpose({\n  increment,\n  stopWatcher\n})\n</script>\n\n<template>\n  <view class=\"page\">\n    <text class=\"section-title\">onWatcherCleanup</text>\n    <view class=\"row\">\n      <text>run count:</text>\n      <text id=\"cleanup-run-count\">{{ runCount }}</text>\n    </view>\n    <view class=\"row\">\n      <text>cleanup count:</text>\n      <text id=\"cleanup-count\">{{ cleanupCount }}</text>\n    </view>\n    <view class=\"row\">\n      <text>active value:</text>\n      <text id=\"cleanup-active-value\">{{ activeValue }}</text>\n    </view>\n    <view class=\"row\">\n      <text>cleaned value:</text>\n      <text id=\"cleaned-value\">{{ cleanedValue }}</text>\n    </view>\n    <view class=\"row\">\n      <text>status:</text>\n      <text id=\"cleanup-watcher-status\">{{ watcherStatus }}</text>\n    </view>\n    <view class=\"row\">\n      <text>event order:</text>\n      <text id=\"cleanup-event-order\">{{ eventOrder }}</text>\n    </view>\n    <button id=\"cleanup-increment-btn\" class=\"mb-10\" @click=\"increment\">更新数据源</button>\n    <button id=\"stop-cleanup-watcher-btn\" @click=\"stopWatcher\">停止 Watcher</button>\n  </view>\n</template>\n\n<style>\n.section-title {\n  margin-bottom: 12px;\n  font-size: 18px;\n  font-weight: bold;\n}\n\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/reactivity/core/watch/on-watcher-cleanup"},"core_watch_watch-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/reactivity/core/watch/watch-composition.uvue","code":"```vue\n<template>\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\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 && !VUE3-VAPOR -->\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    // #ifndef VUE3-VAPOR\r\n    // 蒸汽模式放开下面这行会报错 Stack overflow! 已知Bug:[support for trigger responsive getters in onTrack](https://github.com/vuejs/core/pull/12266)\r\n    watchCountTrackNum.value++\r\n    // #endif\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\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// TODO: 设置 immediate: true 第一次触发时，app 端原始值不对\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.com/dcloud/hello-uvue/blob/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: 3.5.22 以上代码也会报错 Maximum call stack size exceeded，因为页面渲染读取 count，count 被 $watch 侦听，这个读取操作会触发 onTrack 钩子函数\r\n          // onTrack 中修改了响应式数据 watchCountTrackNum，响应式数据的修改都会通知 Vue 进行重新渲染，再次读取 count，形成死循环\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,\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_watch-pause-resume":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/reactivity/core/watch/watch-pause-resume.uvue","code":"```vue\n<script setup lang=\"uts\">\nconst source = ref<number>(0)\nconst watchedValue = ref<number>(0)\nconst triggerCount = ref<number>(0)\nconst watcherStatus = ref<string>('active')\n\nconst watchHandle = watch(source, (value : number) => {\n  watchedValue.value = value\n  triggerCount.value++\n}, {\n  flush: 'sync'\n})\n\nfunction increment() {\n  source.value++\n}\n\nfunction pauseWatcher() {\n  watchHandle.pause()\n  watcherStatus.value = 'paused'\n}\n\nfunction resumeWatcher() {\n  watchHandle.resume()\n  watcherStatus.value = 'active'\n}\n\ndefineExpose({\n  increment,\n  pauseWatcher,\n  resumeWatcher\n})\n</script>\n\n<template>\n  <view class=\"page\">\n    <text class=\"section-title\">Watcher 暂停与恢复</text>\n    <view class=\"row\">\n      <text>source:</text>\n      <text id=\"watch-source\">{{ source }}</text>\n    </view>\n    <view class=\"row\">\n      <text>watched value:</text>\n      <text id=\"watched-value\">{{ watchedValue }}</text>\n    </view>\n    <view class=\"row\">\n      <text>trigger count:</text>\n      <text id=\"watch-trigger-count\">{{ triggerCount }}</text>\n    </view>\n    <view class=\"row\">\n      <text>status:</text>\n      <text id=\"watcher-status\">{{ watcherStatus }}</text>\n    </view>\n    <button id=\"increment-source-btn\" class=\"mb-10\" @click=\"increment\">更新数据源</button>\n    <button id=\"pause-watcher-btn\" class=\"mb-10\" @click=\"pauseWatcher\">暂停 Watcher</button>\n    <button id=\"resume-watcher-btn\" @click=\"resumeWatcher\">恢复 Watcher</button>\n  </view>\n</template>\n\n<style>\n.section-title {\n  margin-bottom: 12px;\n  font-size: 18px;\n  font-weight: bold;\n}\n\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/reactivity/core/watch/watch-pause-resume"},"core_watch-effect_watch-effect":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/reactivity/core/watch-effect/watch-effect.uvue","code":"```vue\n<template>\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\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 && !VUE3-VAPOR -->\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        // #ifndef VUE3-VAPOR\r\n        watchCountTrackNum.value++\r\n        // #endif\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.com/dcloud/hello-uvue/blob/alpha/pages/reactivity/core/watch-post-effect/watch-post-effect.uvue","code":"```vue\n<template>\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\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 && !VUE3-VAPOR -->\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          // #ifndef VUE3-VAPOR\r\n          watchCountTrackNum.value++\r\n          // #endif\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.com/dcloud/hello-uvue/blob/alpha/pages/reactivity/core/watch-sync-effect/watch-sync-effect.uvue","code":"```vue\n<template>\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\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 && !VUE3-VAPOR -->\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          // #ifndef VUE3-VAPOR\r\n          watchCountTrackNum.value++\r\n          // #endif\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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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":{"components_Bar":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/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/#/components/Bar"},"components_CompForAppComponent":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/components/CompForAppComponent.uvue","code":"```vue\n<template>\n  <text class=\"mt-10 bold\">component for app.component</text>\n</template>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/components/CompForAppComponent"},"components_CompForAppUse":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/components/CompForAppUse.uvue","code":"```vue\n<template>\n  <view>\n    <text class=\"mt-10 bold\">component for app.use</text>\n    <!-- #ifndef VUE3-VAPOR -->\n    <text class=\"mt-10 plugin1\" id=\"plugin1\">plugin1: {{ plugin1 }}</text>\n    <text class=\"mt-10 plugin2\">plugin2: {{ plugin2 }}</text>\n    <!-- #endif -->\n    <text class=\"mt-10 plugin3\">plugin3: {{ plugin3 }}</text>\n    <text class=\"mt-10 plugin4\">plugin4: {{ plugin4 }}</text>\n    <CompForPlugin1 class=\"component-for-plugin\" />\n    <CompForPlugin2 class=\"component-for-plugin\" />\n  </view>\n</template>\n\n<script setup lang=\"uts\">\n  const plugin3 = inject('plugin3')\n\tconst plugin4 = inject('plugin4')\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/components/CompForAppUse"},"components_CompForHFunction":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/components/CompForHFunction.uvue","code":"```vue\n<template>\r\n  <view>\r\n    <text class=\"mt-10 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 setup>\r\ndefineProps({\r\n\tmsg: {\r\n\t\ttype: String\r\n\t}\r\n})\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/components/CompForHFunction"},"components_CompForHFunctionWithSlot":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/components/CompForHFunctionWithSlot.uvue","code":"```vue\n<template>\r\n  <view>\r\n    <text class=\"mt-10 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/#/components/CompForHFunctionWithSlot"},"components_CompForPlugin":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/components/CompForPlugin.uvue","code":"```vue\n<template>\n  <text class=\"mt-10\">component for plugin</text>\n</template>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/components/CompForPlugin"},"components_CompForPluginCopy":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/components/CompForPluginCopy.uvue","code":"```vue\n<template>\n  <text class=\"mt-10 component-for-plugin\">component for plugin</text>\n</template>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/components/CompForPluginCopy"},"components_Foo":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/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/#/components/Foo"},"components_custom-call-easy-method":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/components/custom-call-easy-method.uvue","code":"```vue\n<template>\r\n\t<view>{{ result }}</view>\r\n</template>\r\n\r\n<script setup>\r\nconst result = ref('')\r\n\r\nconst foo = (): string => {\r\n\tresult.value = 'custom foo'\r\n\treturn result.value\r\n}\r\ndefineExpose({\r\n\tfoo\r\n})\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/components/custom-call-easy-method"},"call-easy-method_call-easy-method":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/components/call-easy-method/call-easy-method.vue","code":"```vue\n<template>\n  <view>{{result}}</view>\n</template>\n\n<script setup>\nconst result = ref('')\n\nconst foo1 = () => {\n  result.value = \"foo1\"\n}\nconst foo2 = (date1 : number) => {\n  result.value = \"foo2=\" + date1\n}\nconst foo3 = (date1 : number, date2 : number) => {\n  result.value = \"foo3=\" + date1 + \" \" + date2\n}\nconst foo4 = (callback : (() => void)) => {\n  callback()\n}\nconst foo5 = (text1 : string) : any | null => {\n  return text1\n}\n\ndefineExpose({\n  foo1,\n  foo2,\n  foo3,\n  foo4,\n  foo5\n})\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/components/call-easy-method/call-easy-method"},"define-expose-foo_define-expose-foo":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/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  <view></view>\n</template>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/components/define-expose-foo/define-expose-foo"},"issue-29737_Issue29737Text":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/components/issue-29737/Issue29737Text.uvue","code":"```vue\n<script setup>\n  defineOptions({ name: 'Issue29737Text' })\n\n  defineProps({\n    textId: {\n      type: String,\n      default: ''\n    },\n    color: {\n      type: String,\n      default: '#111111'\n    },\n    fontSize: {\n      type: String,\n      default: '15'\n    },\n    lineHeight: {\n      type: String,\n      default: '1.2'\n    },\n    lines: {\n      type: Number,\n      default: 2\n    }\n  })\n</script>\n\n<template>\n  <text\n    :id=\"textId\"\n    :style=\"{\n      color: color,\n      fontSize: fontSize + 'px',\n      lineHeight: lineHeight\n    }\"\n    :max-lines=\"lines\"\n  >\n    <slot></slot>\n  </text>\n</template>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/components/issue-29737/Issue29737Text"},"issue-30373-item_issue-30373-item":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/components/issue-30373-item/issue-30373-item.uvue","code":"```vue\n<script setup>\n  defineProps({\n    textId: {\n      type: String,\n      default: ''\n    },\n    label: {\n      type: String,\n      default: ''\n    }\n  })\n</script>\n\n<template>\n  <text :id=\"textId\" class=\"issue-30373-item\">{{ label }}</text>\n</template>\n\n<style>\n  .issue-30373-item {\n    color: #111111;\n    font-size: 14px;\n    line-height: 22px;\n  }\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/components/issue-30373-item/issue-30373-item"},"issue-30373-shell_issue-30373-shell":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/components/issue-30373-shell/issue-30373-shell.uvue","code":"```vue\n<template>\n  <view class=\"issue-30373-shell\">\n    <view class=\"slot-block\">\n      <slot></slot>\n    </view>\n    <view class=\"slot-block\">\n      <slot name=\"footer\"></slot>\n    </view>\n    <view class=\"slot-block\">\n      <slot name=\"scoped\" suffix=\"scoped\"></slot>\n    </view>\n  </view>\n</template>\n\n<style>\n  .issue-30373-shell {\n    padding: 8px;\n    border-width: 1px;\n    border-style: solid;\n    border-color: #cccccc;\n    border-radius: 6px;\n  }\n\n  .slot-block {\n    margin-bottom: 8px;\n  }\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/components/issue-30373-shell/issue-30373-shell"},"keep-alive_Counter":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/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=\"mt-10 counter-btn\" @click=\"increment\">+</button>\r\n\t\t<text class=\"mt-10\" id=\"activated-num\">activated num: {{ activatedNum }}</text>\r\n\t\t<text class=\"mt-10\" id=\"deactivated-num\">deactivated num: {{ deactivatedNum }}</text>\r\n\t</view>\r\n</template>\r\n\r\n// android 改为组合式式 API 之后，组件的生命周期函数 activated 和 deactivated 不触发\r\n// #ifdef APP-ANDROID\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() {\r\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// #endif\r\n// #ifndef APP-ANDROID\r\n<script setup lang=\"uts\">\r\nconst count = ref(0)\r\nconst activatedNum = ref(0)\r\nconst deactivatedNum = ref(0)\r\n\r\nonActivated(() => { activatedNum.value++ })\r\nonDeactivated(() => { deactivatedNum.value++ })\r\n\r\nconst increment = () => {\r\n\tcount.value++\r\n}\r\n</script>\r\n// #endif\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/#/components/keep-alive/Counter"},"keep-alive_Message":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/components/keep-alive/Message.uvue","code":"```vue\n<template>\r\n\t<view>\r\n\t\t<text class=\"mt-10 message-text\">msg: {{msg}}</text>\r\n\t\t<text class=\"mt-10 change-message\" @click=\"changeMessage\">change message</text>\r\n\t</view>\r\n</template>\r\n// android 改为组合式式 API 之后，组件的生命周期函数 activated 和 deactivated 不触发\r\n// #ifdef APP-ANDROID\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// #endif\r\n// #ifndef APP-ANDROID\r\n<script setup lang=\"uts\">\r\n\tconst msg = ref('default message')\r\n\r\n\tconst changeMessage = () => {\r\n\t\tmsg.value = 'message changed'\r\n\t}\r\n</script>\r\n// #endif\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/#/components/keep-alive/Message"},"keep-alive_ShouldExclude":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/components/keep-alive/ShouldExclude.uvue","code":"```vue\n<template>\r\n\t<view>\r\n\t\t<text>should not be keep-alive</text>\r\n\t\t<text class=\"mt-10 should-exclude-text\">count: {{ count }}</text>\r\n\t\t<button class=\"mt-10 should-exclude-btn\" @click=\"increment\">+</button>\r\n\t</view>\r\n</template>\r\n// android 改为组合式式 API 之后，组件的生命周期函数 activated 和 deactivated 不触发\r\n// #ifdef APP-ANDROID\r\n<script lang=\"uts\">\r\n\texport default {\r\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>\r\n// #endif\r\n// #ifndef APP-ANDROID\r\n<script setup lang=\"uts\">\r\nconst\tcount = ref(0)\r\n\r\nconst increment = () => {\r\n\tcount.value++\r\n}\r\n</script>\r\n// #endif\r\n\r\n<style>\r\n\t.should-exclude-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>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/components/keep-alive/ShouldExclude"},"test-getter-setter-composition_test-getter-setter-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/components/test-getter-setter-composition/test-getter-setter-composition.uvue","code":"```vue\n<template>\r\n    <text>\r\n        count: {{count}}\r\n    </text>\r\n</template>\r\n\r\n<script setup>\r\n    const count = ref(0)\r\n    function getCount() : number {\r\n        return count.value\r\n    }\r\n    function setCount(newCount : number) {\r\n        count.value = newCount * 2\r\n    }\r\n    defineExpose({\r\n        count,\r\n        getCount,\r\n        setCount\r\n    })\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/components/test-getter-setter-composition/test-getter-setter-composition"},"test-getter-setter-options_test-getter-setter-options":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/components/test-getter-setter-options/test-getter-setter-options.uvue","code":"```vue\n<template>\r\n    <text>\r\n        count: {{count}}\r\n    </text>\r\n</template>\r\n\r\n<script>\r\n    export default {\r\n        name: \"test-getter-setter-options\",\r\n        data() {\r\n            return {\r\n                count: 0\r\n            };\r\n        },\r\n        methods: {\r\n            getCount() : number {\r\n                return this.count\r\n            },\r\n            setCount(newCount : number) {\r\n                this.count = newCount * 2\r\n            }\r\n        }\r\n    }\r\n</script>\r\n\r\n<style>\r\n\r\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/components/test-getter-setter-options/test-getter-setter-options"},"test-type_test-type":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/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/#/components/test-type/test-type"},"test-type1_test-type1":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/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/#/components/test-type1/test-type1"},"uni-collapse_uni-collapse":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/components/uni-collapse/uni-collapse.uvue","code":"```vue\n<template>\n\t<!-- 父组件暂时无用，后续子组件联动需要使用到父组件 -->\n\t<view>\n\t\t<slot></slot>\n\t</view>\n</template>\n\n<script setup lang=\"uts\">\nconst props = defineProps({\n\t// 是否开启手风琴效果\n\taccordion: {\n\t\ttype: Boolean,\n\t\tdefault: true\n\t}\n});\nconst child_nodes = ref([] as Array<ComponentPublicInstance>)\n\nconst init = (child: ComponentPublicInstance) => {\n\tchild_nodes.value.push(child)\n}\n// 关闭所有\nconst closeAll = () => {\n\t// 开启手风琴效果才回关闭其他\n\tif (props.accordion && child_nodes.value.length > 0) {\n\t\tchild_nodes.value.forEach((item) => {\n\t\t\titem.$callMethod('openOrClose', false)\n\t\t})\n\t}\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/components/uni-collapse/uni-collapse"},"uni-collapse-item_uni-collapse-item":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/components/uni-collapse-item/uni-collapse-item.uvue","code":"```vue\n<template>\r\n\t<view class=\"uni-collapse-item\" :class=\"{ 'open': is_open }\">\r\n\t\t<view class=\"uni-collapse-item__title\" @click=\"openCollapse(!is_open)\">\r\n\t\t\t<text class=\"uni-collapse-item__title-text\" :class=\"{'is-disabled':disabled,'open--active':is_open}\">{{title}}</text>\r\n\t\t\t<view class=\"down_arrow\" :class=\"{'down_arrow--active': is_open}\"></view>\r\n\t\t</view>\r\n\t\t<view class=\"uni-collapse-item__content\" :class=\"{ 'uni-collapse-item__content--open': is_open }\">\n\t\t\t<view class=\"uni-collapse-item__content-box\" :class=\"{ 'uni-collapse-item__content-box--open': is_open }\">\n\t\t\t\t<slot></slot>\r\n\t\t\t</view>\r\n\t\t</view>\r\n\t</view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nimport { $dispatch } from './util.uts'\r\n\r\nconst instance = getCurrentInstance()!.proxy!;\r\n\r\nconst props = defineProps({\r\n\t\t// 列表标题\r\n\t\ttitle: {\r\n\t\t\ttype: String,\r\n\t\t\tdefault: ''\r\n\t\t},\r\n\t\topen: {\r\n\t\t\ttype: Boolean,\r\n\t\t\tdefault: false\r\n\t\t},\r\n\t\tdisabled: {\r\n\t\t\ttype: Boolean,\r\n\t\t\tdefault: false\r\n\t\t}\r\n\t})\n\tconst is_open = ref<boolean>(props.open)\n\n\tonMounted(() => {\n\t\tnextTick(() => {\n\t\t\t$dispatch(instance, 'UniCollapse', 'init', instance)\n\t\t});\n\t})\n\n\tconst openOrClose = (open: boolean) => {\n\t\tis_open.value = open\n\t}\n\t// 开启或关闭折叠面板\n\tconst openCollapse = (open: boolean) => {\n\t\tif (props.disabled) return\n\t\t// 关闭其他已打开\n\t\t$dispatch(instance, 'UniCollapse', 'closeAll')\n\t\topenOrClose(open)\n\t}\n\n\twatch(():boolean => props.open, (value: boolean) => {\n\t\topenCollapse(value)\n\t})\n</script>\n\r\n<style scoped>\r\n\t.uni-collapse-item {\r\n\t\tbackground-color: #fff;\r\n\t}\r\n\t.uni-collapse-item__title {\r\n\t\tflex-direction: row;\r\n\t\talign-items: center;\r\n\t\tpadding: 12px;\r\n\t\tbackground-color: #fff;\r\n\t}\r\n\r\n\t.down_arrow {\r\n\t\twidth: 8px;\r\n\t\theight: 8px;\r\n\t\ttransform: rotate(45deg);\r\n\t\tborder-right: 1px #999 solid;\r\n\t\tborder-bottom: 1px #999 solid;\r\n\t\tmargin-top: -3px;\r\n\t\ttransition-property: transform;\r\n\t\ttransition-duration: 0.2s;\r\n\t}\r\n\r\n\t.down_arrow--active {\r\n\t\ttransform: rotate(-135deg);\r\n\t\tmargin-top: 0px;\r\n\t}\r\n\r\n\t.uni-collapse-item__title-text {\r\n\t\tflex: 1;\r\n\t\tcolor: #333;\r\n\t\tfont-size: 14px;\r\n\t\tfont-weight: 400;\r\n\t}\r\n\r\n\t.open--active {\r\n\t\t/* background-color: #f0f0f0; */\r\n\t\tcolor: #bbb;\r\n\t}\r\n\r\n\t.is-disabled {\r\n\t\tcolor: #999;\r\n\t}\r\n\r\n\t.uni-collapse-item__content {\n\t\tdisplay: none;\n\t\tposition: relative;\n\t}\n\n\t.uni-collapse-item__content--open {\n\t\tdisplay: flex;\n\t}\n\n\t.uni-collapse-item__content-box {\n\t\twidth: 100%;\n/* \t\ttransition-property: transform , opacity;\n\t\ttransition-duration: 0.2s; */\n\t\ttransform: translateY(-100%);\n\t\topacity: 0;\n\t}\n\n\t.uni-collapse-item__content-box--open {\n\t\ttransform: translateY(0);\n\t\topacity: 1;\n\t}\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/components/uni-collapse-item/uni-collapse-item"},"x-drawer_x-drawer":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/components/x-drawer/x-drawer.uvue","code":"```vue\n<script setup>\n  import { ref, watch, onBeforeUnmount } from 'vue'\n\n  defineOptions({ name: 'xDrawer' })\n\n  const props = withDefaults(defineProps<{\n    show: boolean\n  }>(), {\n    show: false\n  })\n\n  const emit = defineEmits(['open', 'close'])\n  const mounted = ref(false)\n  const contentVisible = ref(false)\n  let tid = 0\n\n  function close(): void {\n    mounted.value = false\n    contentVisible.value = false\n    clearTimeout(tid)\n    emit('close')\n  }\n\n  function open(): void {\n    mounted.value = true\n    contentVisible.value = false\n    clearTimeout(tid)\n    tid = setTimeout((): void => {\n      emit('open')\n      contentVisible.value = true\n    }, 60)\n  }\n\n  watch((): boolean => props.show, (value: boolean) => {\n    if (value) {\n      open()\n    }\n  })\n\n  onBeforeUnmount(() => {\n    clearTimeout(tid)\n  })\n</script>\n\n<template>\n  <view v-if=\"mounted\" class=\"drawer\">\n    <button class=\"close-btn\" @click=\"close\">关闭</button>\n    <view v-if=\"contentVisible\" class=\"content\">\n      <slot></slot>\n    </view>\n  </view>\n</template>\n\n<style scoped>\n  .drawer {\n    position: fixed;\n    left: 0;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    background-color: #ffffff;\n    padding: 12px;\n  }\n\n  .close-btn {\n    margin-bottom: 12px;\n  }\n\n  .content {\n    flex: 1;\n  }\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/components/x-drawer/x-drawer"},"x-picker-selected_x-picker-selected":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/components/x-picker-selected/x-picker-selected.uvue","code":"```vue\n<script setup>\n  import { ref, computed, onMounted, onBeforeUnmount } from 'vue'\n\n  type PickerItem = {\n    title: string,\n    item: UTSJSONObject\n  }\n\n  defineOptions({ name: 'xPickerSelected' })\n  defineSlots<{\n    item(props: { item: UTSJSONObject }): any\n    default(): any\n  }>()\n\n  const props = withDefaults(defineProps<{\n    list: UTSJSONObject[],\n    labelKey: string,\n    lazyContent: boolean,\n    lazyDuration: number\n  }>(), {\n    list: () => [] as UTSJSONObject[],\n    labelKey: 'text',\n    lazyContent: false,\n    lazyDuration: 100\n  })\n\n  const show = ref(false)\n  const lazyReady = ref(false)\n  let tid = 0\n\n  const renderList = computed((): PickerItem[] => {\n    return props.list.map((el: UTSJSONObject): PickerItem => {\n      return {\n        title: el.getString(props.labelKey)!,\n        item: el\n      } as PickerItem\n    })\n  })\n\n  function openShow(): void {\n    if (show.value) {\n      show.value = false\n    }\n    show.value = true\n  }\n\n  function onClose(): void {\n    show.value = false\n    lazyReady.value = props.lazyContent ? false : true\n    clearTimeout(tid)\n  }\n\n  function onOpen(): void {\n    clearTimeout(tid)\n    tid = setTimeout((): void => {\n      lazyReady.value = true\n    }, props.lazyDuration)\n  }\n\n  onMounted(() => {\n    lazyReady.value = props.lazyContent ? false : true\n  })\n\n  onBeforeUnmount(() => {\n    clearTimeout(tid)\n  })\n\n  defineExpose({\n    open: () => openShow()\n  })\n</script>\n\n<template>\n  <view>\n    <view @click=\"openShow\">\n      <slot></slot>\n    </view>\n    <x-drawer @open=\"onOpen\" @close=\"onClose\" :show=\"show\">\n      <text v-if=\"!lazyReady\" class=\"loading\">加载中...</text>\n      <view v-if=\"renderList.length > 0 && lazyReady\">\n        <view v-for=\"(item, index) in renderList\" :key=\"index\" class=\"item\">\n          <slot name=\"item\" :item=\"item.item\">\n            <x-text>{{ item.title }}</x-text>\n          </slot>\n        </view>\n      </view>\n    </x-drawer>\n  </view>\n</template>\n\n<style scoped>\n  .item {\n    min-height: 50px;\n    justify-content: center;\n  }\n\n  .loading {\n    color: #666666;\n    font-size: 14px;\n  }\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/components/x-picker-selected/x-picker-selected"},"x-text_x-text":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/components/x-text/x-text.uvue","code":"```vue\n<script setup>\n  defineOptions({ name: 'xText' })\n</script>\n\n<template>\n  <text>\n    <slot></slot>\n  </text>\n</template>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/components/x-text/x-text"}}}
+{"template":{"name":"::: sourceCode\n#### template\n:::","originName":"#### template","description":"> 组件类型：string \n\n 当我们想要使用内置指令而不在 DOM 中渲染元素时，\\<template> 标签可以作为占位符使用。","readme":"","fileFormats":"","compatibility":"\n##### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | √ | 3.9 | 4.11 | 4.61 |\n","attribute":"##### 属性 \n| 名称 | 类型 | 兼容性 |\n| :- | :- |  :-: |\n| lang | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"√\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| html | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.11\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | html |\n@| pug | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | pug |","event":"","example":"","children":"","reference":"\n##### 参见\n- [Reference](https://cn.vuejs.org/api/built-in-special-elements.html#template)"},"slot":{"name":"::: sourceCode\n#### slot\n:::","originName":"#### slot","description":"> 组件类型：string \n\n \\<slot> 元素作为组件模板之中的内容分发插槽。\\<slot> 元素自身将被替换。","readme":"","fileFormats":"","compatibility":"\n##### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | 4.11 | 3.9 | 4.11 | 4.61 |\n","attribute":"##### 属性 \n| 名称 | 类型 | 兼容性 | 描述 |\n| :- | :- |  :-: | :- |\n| name | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"√\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 用于命名插槽。 |","event":"","example":"","children":"","reference":"\n##### 参见\n- [Reference](https://cn.vuejs.org/api/built-in-special-elements.html#slot)"},"script":{"name":"::: sourceCode\n#### script\n:::","originName":"#### script","description":"","readme":"","fileFormats":"","compatibility":"\n##### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | √ | 3.9 | 4.11 | 4.61 |\n","attribute":"##### 属性 \n| 名称 | 类型 | 兼容性 |\n| :- | :- |  :-: |\n| setup | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"√\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| lang | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"√\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n@| 合法值 | 兼容性 | 描述 |\n@| :- |  :-: | :- |\n@| ts | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"√\",\"x\",\"5.31\",\"x\",\"5.31\",\"x\",\"5.31\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | TypeScript |\n@| uts | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"√\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | uts |\n@| js | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\",\"5.31\",\"x\",\"5.31\",\"x\",\"5.31\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | JavaScript |","event":"","example":"","children":"","reference":"\n##### 参见\n"},"style":{"name":"::: sourceCode\n#### style\n:::","originName":"#### style","description":"","readme":"","fileFormats":"","compatibility":"\n##### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | √ | 3.9 | 4.11 | 4.61 |\n","attribute":"##### 属性 \n| 名称 | 类型 | 兼容性 |\n| :- | :- |  :-: |\n| lang | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"√\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n@| 合法值 | 兼容性 |\n@| :- |  :-: |\n@| scss | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"√\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n@| less | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"√\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n@| stylus | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"√\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| scoped | boolean | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| module | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |","event":"","example":"","children":"","reference":"\n##### 参见\n"},"keep-alive":{"name":"::: sourceCode\n#### keep-alive\n:::","originName":"#### keep-alive","description":"> 组件类型：string \n\n \\<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 \\<transition> 相似，\\<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。","readme":"","fileFormats":"","compatibility":"\n##### 兼容性 <Help />\n| Web | 微信小程序 | Android(VDOM) | Android(Vapor) | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) |\n| :- | :- | :- | :- | :- | :- | :- | :- |\n| 4.0 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 4.0 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 4.11 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 4.61 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> |\n","attribute":"##### 属性 \n| 名称 | 类型 | 兼容性 | 描述 |\n| :- | :- |  :-: | :- |\n| include | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"x\",\"4.0\",\"x\",\"4.11\",\"x\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 字符串或正则表达式。只有名称匹配的组件会被缓存。 |\n| exclude | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"x\",\"4.0\",\"x\",\"4.11\",\"x\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 字符串或正则表达式。任何名称匹配的组件都不会被缓存。 |\n| max | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"x\",\"4.0\",\"x\",\"4.11\",\"x\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 最多可以缓存多少组件实例。 |","event":"","example":"","children":"","reference":"\n##### 参见\n- [Reference](https://v3.cn.vuejs.org/api/built-in-components.html#keep-alive)"},"component":{"name":"::: sourceCode\n#### component\n:::","originName":"#### component","description":"> 组件类型：string \n\n 渲染一个“元组件”为动态组件。依 is 的值，来决定哪个组件被渲染。","readme":"","fileFormats":"","compatibility":"\n##### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | 3.99 | 4.11 | 4.61 |\n","attribute":"##### 属性 \n| 名称 | 类型 | 兼容性 |\n| :- | :- |  :-: |\n| is | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.99\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| inline-template | boolean | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.99\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |","event":"","example":"","children":"","reference":"\n##### 参见\n- [Reference](https://cn.vuejs.org/api/built-in-special-elements.html#component)"},"transition":{"name":"::: sourceCode\n#### transition\n:::","originName":"#### transition","description":"> 组件类型：string \n\n \\<transition> 元素作为单个元素/组件的过渡效果。\\<transition> 只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在检测过的组件层级中。","readme":"","fileFormats":"","compatibility":"\n##### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> |\n","attribute":"##### 属性 \n| 名称 | 类型 | 兼容性 | 描述 |\n| :- | :- |  :-: | :- |\n| name | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 用于自动生成 CSS 过渡类名。例如：name: 'fade' 将自动拓展为.fade-enter，.fade-enter-active等。默认类名为 \"v\" |\n| appear | boolean | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否在初始渲染时使用过渡。默认为 false。 |\n| css | boolean | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否使用 CSS 过渡类。默认为 true。如果设置为 false，将只通过组件事件触发注册的 JavaScript 钩子。 |\n| type | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 指定过渡事件类型，侦听过渡何时结束。有效值为 \"transition\" 和 \"animation\"。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。 |\n@| 合法值 |\n@| :- |\n@| transition |\n@| animation |\n| mode | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 控制离开/进入的过渡时间序列。有效的模式有 \"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\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 指定过渡的持续时间。默认情况下，Vue 会等待过渡所在根元素的第一个 transitionend 或 animationend 事件。 |\n| enter-class | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| leave-class | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| appear-class | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| enter-to-class | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| leave-to-class | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| appear-to-class | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| enter-active-class | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| leave-active-class | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| appear-active-class | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| @before-enter | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| @before-leave | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| @before-appear | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| @enter | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| @leave | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| @appear | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| @after-enter | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| @after-leave | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| @after-appear | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| @enter-cancelled | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| @leave-cancelled | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 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":"::: sourceCode\n#### transition-group\n:::","originName":"#### transition-group","description":"> 组件类型：string \n\n \\<transition-group> 元素作为多个元素/组件的过渡效果。\\<transition-group> 渲染一个真实的 DOM 元素。默认渲染 \\<span>，可以通过 tag 属性配置哪个元素应该被渲染。","readme":"","fileFormats":"","compatibility":"\n##### 兼容性 <Help />\n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> | <a style=\"color:unset;\" href=\"https://vote.dcloud.net.cn/#/?name=uni-app%20x\">x</a> |\n","attribute":"##### 属性 \n| 名称 | 类型 | 兼容性 | 描述 |\n| :- | :- |  :-: | :- |\n| tag | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 默认为 span。 |\n| move-class | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 覆盖移动过渡期间应用的 CSS 类。 |\n| name | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 用于自动生成 CSS 过渡类名。例如：name: 'fade' 将自动拓展为.fade-enter，.fade-enter-active等。默认类名为 \"v\" |\n| appear | boolean | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否在初始渲染时使用过渡。默认为 false。 |\n| css | boolean | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否使用 CSS 过渡类。默认为 true。如果设置为 false，将只通过组件事件触发注册的 JavaScript 钩子。 |\n| type | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 指定过渡事件类型，侦听过渡何时结束。有效值为 \"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\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 指定过渡的持续时间。默认情况下，Vue 会等待过渡所在根元素的第一个 transitionend 或 animationend 事件。 |\n| enter-class | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| leave-class | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| appear-class | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| enter-to-class | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| leave-to-class | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| appear-to-class | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| enter-active-class | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| leave-active-class | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| appear-active-class | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| @before-enter | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| @before-leave | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| @before-appear | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| @enter | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| @leave | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| @appear | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| @after-enter | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| @after-leave | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| @after-appear | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| @enter-cancelled | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |\n| @leave-cancelled | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | v-show only |\n| @appear-cancelled | Any | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |   |","event":"","example":"","children":"","reference":"\n##### 参见\n- [Reference](https://v3.cn.vuejs.org/api/built-in-components.html#transition-group)"},"teleport":{"name":"::: sourceCode\n#### teleport\n:::","originName":"#### teleport","description":"> 组件类型：string \n\n Teleport 提供了一种干净的方法，允许我们控制在 DOM 中哪个父节点下呈现 HTML，而不必求助于全局状态或将其拆分为两个组件。","readme":"","fileFormats":"","compatibility":"\n##### 兼容性 <Help />\n| Web | 微信小程序 | Android(VDOM) | Android(Vapor) | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) |\n| :- | :- | :- | :- | :- | :- | :- | :- |\n| 4.0 | 5.14 | 4.0 | 5.25 | 4.11 | 5.25 | 4.61 | 5.25 |\n","attribute":"##### 属性 \n| 名称 | 类型 | 兼容性 | 描述 |\n| :- | :- |  :-: | :- |\n| to | string | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"x\",\"4.0\",\"5.25\",\"4.11\",\"5.25\",\"4.61\",\"5.25\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 必须是有效的查询选择器或 HTMLElement (如果在浏览器环境中使用)。指定将在其中移动 \\<teleport> 内容的目标元素 |\n| disabled | boolean | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"5.14\",\"4.0\",\"5.25\",\"4.11\",\"5.25\",\"4.61\",\"5.25\"]],\"status\":\"SUPPORTED\"}' /> | 此可选属性可用于禁用 \\<teleport> 的功能，这意味着其插槽内容将不会移动到任何位置，而是在您在周围父组件中指定了 \\<teleport> 的位置渲染。 |","event":"","example":"","children":"","reference":"\n##### 参见\n- [Reference](https://v3.vuejs.org/api/built-in-components.html#teleport)"},"application":{"compatibility":"|  | 兼容性 |\n| :- | :- |\n| createApp() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"√\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| createSSRApp() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"√\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| app.mount() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"√\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| app.unmount() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"√\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| app.component() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"√\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| app.use() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.99\",\"x\",\"4.11\",\"x\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| app.mixin() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.99\",\"x\",\"4.11\",\"x\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| app.provide() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.99\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| app.version | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"√\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| app.config | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"√\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| app.config.errorHandler | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"5.21\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| app.config.globalProperties | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.99\",\"x\",\"4.11\",\"x\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| globalData | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.0\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| onLaunch() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.0\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| onShow() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.0\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| onHide() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.0\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| onLastPageBackPress() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"3.9\",\"x\",\"4.71\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| onExit() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"3.9\",\"x\",\"4.72\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| onError() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.21\",\"4.21\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| onPageNotFound() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| onUniNViewMessage() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| onThemeChange() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |","example":"","onLaunch":{"name":"### onLaunch(options: OnLaunchOptions): void; @onlaunch","originName":"onLaunch","description":"生命周期回调，监听应用初始化，应用初始化完成时触发，全局只触发一次。\n","compatibility":"#### onLaunch 兼容性 <Help /> \n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | 4.41 | 3.9 | 4.0 | 4.61 |\n","param":"#### 参数 \n\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| options | **OnLaunchOptions** | 是 |\n@| 名称 | 类型 | 必备 | 兼容性 | 描述 |\n@| :- | :- | :- |  :-: | :- |\n@| path | string | 是 |   | 应用启动页面路径 |\n@| appScheme | string | 否 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"4.25\",\"5.25\",\"4.25\",\"5.25\",\"4.81\",\"5.25\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 首次启动时的Scheme。返回值与App.onLaunch的回调参数一致<br/> |\n@| appLink | string | 否 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\",\"4.25\",\"5.25\",\"4.81\",\"5.25\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 首次启动时的appLink。返回值与App.onLaunch的回调参数一致<br/> | \n","fileFormats":"","returnValue":"","tutorial":"#### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.net.cn/collocation/App.html#applifecycle)\n\n"},"onShow":{"name":"### onShow(options: OnShowOptions): void; @onshow","originName":"onShow","description":"生命周期回调 监听应用显示\n\n应用启动，或从后台进入前台显示时触发\n","compatibility":"#### onShow 兼容性 <Help /> \n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | 4.41 | 3.9 | 4.0 | 4.61 |\n","param":"#### 参数 \n\n| 名称 | 类型 | 必填 |\n| :- | :- | :- |\n| options | **OnShowOptions** | 是 |\n@| 名称 | 类型 | 必备 | 兼容性 | 描述 |\n@| :- | :- | :- |  :-: | :- |\n@| path | string | 是 |   | 应用启动页面路径 |\n@| appScheme | string | 否 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"4.25\",\"5.25\",\"4.25\",\"5.25\",\"4.81\",\"5.25\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 本次启动时的Scheme。返回值与App.onShow的回调参数一致<br/> |\n@| appLink | string | 否 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\",\"4.25\",\"5.25\",\"4.81\",\"5.25\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 本次启动时的appLink。返回值与App.onShow的回调参数一致<br/> | \n","fileFormats":"","returnValue":"","tutorial":"#### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.net.cn/collocation/App.html#applifecycle)\n\n"},"onHide":{"name":"### onHide(): void; @onhide","originName":"onHide","description":"生命周期回调 监听应用隐藏\n\n应用从前台进入后台时触发\n","compatibility":"#### onHide 兼容性 <Help /> \n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | 4.41 | 3.9 | 4.0 | 4.61 |\n","param":"","fileFormats":"","returnValue":"","tutorial":"#### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.net.cn/collocation/App.html#applifecycle)\n\n"},"onError":{"name":"### onError(error: any): void; @onerror","originName":"onError","description":"错误监听函数\n应用发生脚本错误或 API 调用报错时触发\n4.33+ App 端支持监听异步逻辑中的错误","compatibility":"#### onError 兼容性 <Help /> \n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | 4.41 | 4.21 | 4.21 | 4.61 |\n","param":"#### 参数 \n\n| 名称 | 类型 | 必填 | 描述 |\n| :- | :- | :- | :- |\n| error | any | 是 | 错误信息 | \n","fileFormats":"","returnValue":"","tutorial":"#### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.net.cn/collocation/App.html#applifecycle)\n\n"},"onPageNotFound":{"name":"### onPageNotFound(options: OnPageNotFoundOption): void; @onpagenotfound","originName":"onPageNotFound","description":"页面不存在监听函数\n\n应用要打开的页面不存在时触发，会带上页面信息回调该函数\n\n**注意：**\n1. 如果开发者没有添加 `onPageNotFound` 监听，当跳转页面不存在时，将推入微信客户端原生的页面不存在提示页面。\n2. 如果 `onPageNotFound` 回调中又重定向到另一个不存在的页面，将推入微信客户端原生的页面不存在提示页面，并且不再回调 `onPageNotFound`。\n","compatibility":"#### onPageNotFound 兼容性 <Help /> \n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | 4.41 | x | x | x |\n","param":"#### 参数 \n\n| 名称 | 类型 | 必填 | 兼容性 |\n| :- | :- | :- |  :-: |\n| options | **OnPageNotFoundOption** | 是 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n@| 名称 | 类型 | 必备 | 兼容性 | 描述 |\n@| :- | :- | :- |  :-: | :- |\n@| path | string | 是 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 不存在页面的路径 |\n@| query | AnyObject | 是 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 打开不存在页面的 query |\n@| isEntryPage | boolean | 是 | <CompatibilityTable table='{\"headers\":[{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 是否本次启动的首个页面（例如从分享等入口进来，首个页面是开发者配置的分享页面） | \n","fileFormats":"","returnValue":"","tutorial":"#### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.net.cn/collocation/App.html#applifecycle)\n\n"},"onUniNViewMessage":{"name":"### onUniNViewMessage(options: AnyObject): void; @onuninviewmessage","originName":"onUniNViewMessage","description":"监听 nvue 页面消息\n\nnvue 页面使用 `uni.postMessage` 发送消息时触发\n","compatibility":"#### onUniNViewMessage 兼容性 <Help /> \n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x |\n","param":"#### 参数 \n\n| 名称 | 类型 | 必填 | 兼容性 |\n| :- | :- | :- |  :-: |\n| options | AnyObject | 是 | <CompatibilityTable table='{\"headers\":[{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | \n","fileFormats":"","returnValue":"","tutorial":"#### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.net.cn/collocation/App.html#applifecycle)\n\n"},"onExit":{"name":"### onExit(): void; @onexit","originName":"onExit","description":"监听应用退出。app-uvue-android 3.9+\n","compatibility":"#### onExit 兼容性 <Help /> \n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| x | x | 3.9 | x | 4.72 |\n","param":"","fileFormats":"","returnValue":"","tutorial":""},"onLastPageBackPress":{"name":"### onLastPageBackPress(): void; @onlastpagebackpress","originName":"onLastPageBackPress","description":"最后一个页面按下Android back键，常用于自定义退出。\n","compatibility":"#### onLastPageBackPress 兼容性 <Help /> \n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| x | x | 3.9 | x | 4.71 |\n","param":"","fileFormats":"","returnValue":"","tutorial":"#### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.net.cn/collocation/App.html#applifecycle)\n\n"},"onUnhandledRejection":{"name":"### onUnhandledRejection(): void; @onunhandledrejection","originName":"onUnhandledRejection","description":"未处理的 Promise 拒绝事件监听函数\n","compatibility":"#### onUnhandledRejection 兼容性 <Help /> \n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | 4.41 | x | x | x |\n","param":"","fileFormats":"","returnValue":"","tutorial":"#### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.net.cn/collocation/App.html#applifecycle)\n\n"},"onThemeChange":{"name":"### onThemeChange(): void; @onthemechange","originName":"onThemeChange","description":"监听系统主题变化\n","compatibility":"#### onThemeChange 兼容性 <Help /> \n| Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| x | 4.41 | x | x | x |\n","param":"","fileFormats":"","returnValue":"","tutorial":"#### 参见\n- [参见uni-app相关文档](https://uniapp.dcloud.net.cn/collocation/App.html#applifecycle)\n\n"}},"general":{"compatibility":"|  | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- | :- |\n| version | 4.0 | 4.41 | √ | 4.11 | 4.61 |\n| nextTick() | 4.0 | 4.41 | √ | 4.11 | 4.61 |\n| defineComponent() | 4.0 | 4.41 | x | x | x |","example":""},"reactivity_core":{"compatibility":"|  | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- | :- |\n| ref() | 4.0 | 4.41 | √ | 4.11 | 4.61 |\n| computed() | 4.0 | 4.41 | √ | 4.11 | 4.61 |\n| reactive() | 4.0 | 4.41 | √ | 4.11 | 4.61 |\n| readonly() | 4.0 | 4.41 | 4.0 | 4.11 | 4.61 |\n| watchEffect() | 4.0 | 4.41 | 4.0 | 4.11 | 4.61 |\n| watchPostEffect() | 4.0 | 4.41 | 4.0 | 4.11 | 4.61 |\n| watchSyncEffect() | 4.0 | 4.41 | 4.0 | 4.11 | 4.61 |\n| watch() | 4.0 | 4.41 | 4.0 | 4.11 | 4.61 |","example":""},"reactivity_utilities":{"compatibility":"|  | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- | :- |\n| isRef() | 4.0 | 4.41 | 4.0 | 4.11 | 4.61 |\n| unref() | 4.0 | 4.41 | 4.0 | 4.11 | 4.61 |\n| toRef() | 4.11 | 4.41 | 4.0 | 4.11 | 4.61 |\n| toValue() | 4.11 | 4.41 | 4.0 | 4.11 | 4.61 |\n| toRefs() | 4.11 | 4.41 | 4.0 | 4.11 | 4.61 |\n| isProxy() | 4.0 | 4.41 | 4.0 | 4.11 | 4.61 |\n| isReactive() | 4.0 | 4.41 | 4.0 | 4.11 | 4.61 |\n| isReadonly() | 4.0 | 4.41 | 4.0 | 4.11 | 4.61 |","example":""},"reactivity_advanced":{"compatibility":"|  | 兼容性 |\n| :- | :- |\n| shallowRef() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| triggerRef() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| customRef() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| shallowReactive() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| shallowReadonly() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| toRaw() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| effectScope() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| getCurrentScope() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| onScopeDispose() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |","example":""},"composition_lifecycle":{"compatibility":"|  | 兼容性 | 描述 |\n| :- | :- | :- |\n| onMounted() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。<br/>如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。 |\n| onUpdated() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。 |\n| onUnmounted() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 在一个组件实例被卸载之后调用。 |\n| onBeforeMount() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 在挂载开始之前被调用：相关的 render 函数首次被调用。 |\n| onBeforeUpdate() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 数据更新时调用，发生在虚拟 DOM 打补丁之前。<br/>这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。 |\n| onBeforeUnmount() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 在一个组件实例被卸载之前调用。 |\n| onErrorCaptured() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 注册一个钩子，在捕获了后代组件传递的错误时调用。 |\n| onRenderTracked() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"-\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 注册一个调试钩子，当组件渲染过程中追踪到响应式依赖时调用。 |\n| onRenderTriggered() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 注册一个调试钩子，当响应式依赖的变更触发了组件渲染时调用。 |\n| onActivated() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | keep-alive 组件激活时调用。 |\n| onDeactivated() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | keep-alive 组件停用时调用。 |\n| onServerPrefetch() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 注册一个异步函数，在组件实例在服务器上被渲染之前调用。<br/>如果这个钩子返回了一个 Promise，服务端渲染会在渲染该组件前等待该 Promise 完成。<br/>这个钩子仅会在服务端渲染中执行，可以用于执行一些仅存在于服务端的数据抓取过程。 |\n| onRecycle() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\",\"5.21\",\"x\",\"5.11\",\"x\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 组件回收时的生命周期钩子 |\n| onReuse() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\",\"5.21\",\"x\",\"5.11\",\"x\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 组件复用时的生命周期钩子 |\n| onLoad() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 生命周期回调 监听页面加载<br/><br/>页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。 |\n| onReady() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 生命周期回调 监听页面初次渲染完成<br/><br/>页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。<br/> |\n| onUnload() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 生命周期回调 监听页面卸载<br/><br/>页面卸载时触发。如 `redirectTo` 或 `navigateBack` 到其他页面时。<br/> |\n| onPageShow() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 生命周期回调 监听页面显示<br/><br/>页面显示/切入前台时触发。<br/> |\n| onPageHide() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 生命周期回调 监听页面隐藏<br/><br/>页面隐藏/切入后台时触发。 如 `navigateTo` 或底部 `tab` 切换到其他页面，应用切入后台等。<br/> |\n| onPageScroll() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.13\",\"5.21\",\"4.61\",\"5.08\"]],\"status\":\"SUPPORTED\"}' /> | 页面滚动触发事件的处理函数<br/><br/>监听用户滑动页面事件。 |\n| onBackPress() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 监听页面返回 |\n| onReachBottom() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\",\"5.08\"]],\"status\":\"SUPPORTED\"}' /> | 页面上拉触底事件的处理函数<br/>- 可以在 `pages.json` 的页面配置中设置触发距离 `onReachBottomDistance` 。<br/>- 在触发距离内滑动期间，本事件只会被触发一次。<br/> |\n| onPullDownRefresh() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"5.21\",\"4.61\",\"5.21\"]],\"status\":\"SUPPORTED\"}' /> | 监听用户下拉动作<br/>- 需要在 `pages.json` 的页面配置中开启 `enablePullDownRefresh` 。<br/>- 可以通过 `uni.startPullDownRefresh` 触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。<br/>- 当处理完数据刷新后，`uni.stopPullDownRefresh` 可以停止当前页面的下拉刷新。<br/> |\n| onResize() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 页面尺寸改变时触发 |","example":""},"composition_injection":{"compatibility":"|  | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- | :- |\n| provide() | 4.0 | 4.41 | 4.0 | 4.11 | 4.61 |\n| inject() | 4.0 | 4.41 | 4.0 | 4.11 | 4.61 |\n| hasInjectionContext() | 4.11 | 4.41 | 4.0 | 4.11 | 4.61 |","example":""},"options_state":{"compatibility":"|  | Web | 微信小程序 | Android(VDOM) | Android(Vapor) | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) |\n| :- | :- | :- | :- | :- | :- | :- | :- | :- |\n| data | 4.0 | 4.41 | 3.9 | x | 4.11 | x | 4.61 | x |\n| props | 4.0 | 4.41 | 3.9 | x | 4.11 | x | 4.61 | x |\n| computed | 4.0 | 4.41 | 3.9 | x | 4.11 | x | 4.61 | x |\n| methods | 4.0 | 4.41 | 3.9 | x | 4.11 | x | 4.61 | x |\n| watch | 4.0 | 4.41 | 3.9 | x | 4.11 | x | 4.61 | x |\n| emits | 4.0 | 4.41 | 3.9 | x | 4.11 | x | 4.61 | x |\n| expose | 4.0 | 4.41 | x | x | x | x | x | x |","example":""},"options_rendering":{"compatibility":"|  | Web | 微信小程序 | Android(VDOM) | Android(Vapor) | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) |\n| :- | :- | :- | :- | :- | :- | :- | :- | :- |\n| template | x | x | x | x | x | x | 4.61 | x |\n| render | 4.0 | x | 3.9 | x | 4.11 | x | 4.61 | x |\n| compilerOptions | x | x | x | x | x | x | 4.61 | x |\n| slots | 4.0 | 4.41 | 3.9 | 5.21 | 4.11 | 5.11 | 4.61 | 5.0 |","example":""},"options_lifecycle":{"compatibility":"|  | 兼容性 | 描述 |\n| :- | :- | :- |\n| beforeCreate | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 在组件实例初始化完成之后立即调用。<br/>在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 |\n| created | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 在组件实例处理完所有与状态相关的选项后调用。<br/>在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。<br/>然而，此时挂载阶段还未开始，因此 $el 属性仍不可用。 |\n| beforeMount | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 在组件被挂载之前调用。<br/>相关的 render 函数首次被调用。<br/>当这个钩子被调用时，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点。<br/>它即将首次执行 DOM 渲染过程。 |\n| mounted | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 在组件被挂载之后调用。<br/>el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。<br/>如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。 |\n| beforeUpdate | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 在组件即将因为一个响应式状态变更而更新其 DOM 树之前调用。<br/>数据更新时调用，发生在虚拟 DOM 打补丁之前。<br/>这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。 |\n| updated | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 在组件因为一个响应式状态变更而更新其 DOM 树之后调用。<br/>父组件的更新钩子将在其子组件的更新钩子之后调用。<br/>这个钩子会在组件的任意 DOM 更新后被调用，这些更新可能是由不同的状态变更导致的。<br/>如果你需要在某个特定的状态更改后访问更新后的 DOM，请使用 nextTick() 作为替代。 |\n| beforeUnmount | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 在一个组件实例被卸载之前调用。<br/>当这个钩子被调用时，组件实例依然还保有全部的功能。 |\n| unmounted | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> | 在一个组件实例被卸载之后调用。<br/>可以在这个钩子中手动清理一些副作用，例如计时器、DOM 事件监听器或者与服务器的连接。 |\n| errorCaptured | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 在捕获了后代组件传递的错误时调用。<br/>这个钩子带有三个实参：错误对象、触发该错误的组件实例，以及一个说明错误来源类型的信息字符串。<br/>这个钩子可以通过返回 false 来阻止错误继续向上传递。 |\n| renderTracked | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 在一个响应式依赖被组件的渲染作用追踪后调用。<br/>跟踪虚拟 DOM 重新渲染时调用。钩子接收 debugger event 作为参数。<br/>此事件告诉你哪个操作跟踪了组件以及该操作的目标对象和键。 |\n| renderTriggered | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 在一个响应式依赖被组件触发了重新渲染之后调用。<br/>当虚拟 DOM 重新渲染为 triggered.Similarly 为renderTracked，接收 debugger event 作为参数。<br/>此事件告诉你是什么操作触发了重新渲染，以及该操作的目标对象和键。 |\n| activated | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 若组件实例是 \\<KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。<br/>keep-alive 组件激活时调用。 |\n| deactivated | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 若组件实例是 \\<KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。<br/>keep-alive 组件停用时调用。 |\n| serverPrefetch | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> | 当组件实例在服务器上被渲染之前要完成的异步函数。<br/>如果这个钩子返回了一个 Promise，服务端渲染会在渲染该组件前等待该 Promise 完成。 |","example":""},"options_composition":{"compatibility":"|  | Web | 微信小程序 | Android(VDOM) | Android(Vapor) | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) |\n| :- | :- | :- | :- | :- | :- | :- | :- | :- |\n| provide | 4.0 | 4.41 | 3.99 | 5.21 | 4.11 | 5.11 | 4.61 | 5.0 |\n| inject | 4.0 | 4.41 | 3.99 | 5.21 | 4.11 | 5.11 | 4.61 | 5.0 |\n| mixins | 4.0 | 4.41 | 3.99 | x | 4.11 | x | 4.61 | x |","example":""},"options_misc":{"compatibility":"|  | Web | 微信小程序 | Android(VDOM) | Android(Vapor) | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) |\n| :- | :- | :- | :- | :- | :- | :- | :- | :- |\n| name | 4.0 | 4.41 | 3.9 | x | 4.11 | x | 4.61 | x |\n| inheritAttrs | 4.0 | √ | 3.9 | 5.21 | 4.11 | 5.11 | 4.61 | 5.0 |\n| components | 4.0 | 4.41 | 3.9 | x | 4.11 | x | 4.61 | x |","example":""},"component_instance":{"compatibility":"|  | 兼容性 |\n| :- | :- |\n| $data | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"iOS(VDOM) UTS 插件\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"√\",\"4.11\",\"x\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| $props | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"iOS(VDOM) UTS 插件\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"√\",\"4.11\",\"x\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| $attrs | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"iOS(VDOM) UTS 插件\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"√\",\"4.11\",\"x\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| $slots | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"iOS(VDOM) UTS 插件\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"√\",\"4.11\",\"x\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| $refs | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"iOS(VDOM) UTS 插件\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"√\",\"4.11\",\"x\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| $parent | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"iOS(VDOM) UTS 插件\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"√\",\"4.11\",\"x\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| $root | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"iOS(VDOM) UTS 插件\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"√\",\"4.11\",\"x\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| $options | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"iOS(VDOM) UTS 插件\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"√\",\"4.11\",\"x\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| $nextTick | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"iOS(VDOM) UTS 插件\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"√\",\"4.11\",\"x\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| $forceUpdate | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"iOS(VDOM) UTS 插件\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"4.0\",\"4.41\",\"√\",\"x\",\"4.11\",\"x\",\"x\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| $el | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"iOS(VDOM) UTS 插件\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"√\",\"4.11\",\"x\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| $callMethod | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"iOS(VDOM) UTS 插件\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"√\",\"4.11\",\"x\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| $emit | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"iOS(VDOM) UTS 插件\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"√\",\"4.11\",\"x\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| $watch | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"iOS(VDOM) UTS 插件\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"√\",\"4.11\",\"x\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| $page | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"iOS(VDOM) UTS 插件\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.31\",\"√\",\"4.31\",\"4.31\",\"x\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |","example":""},"directives":{"compatibility":"|  | 兼容性 |\n| :- | :- |\n| v-text | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"√\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| v-html | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.99\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| v-show | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.11\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| v-if | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.11\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| v-else | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.11\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| v-else-if | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.11\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| v-for | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.11\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| v-on | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.11\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| v-bind | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.11\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| v-model | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.11\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| v-slot | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.11\",\"3.9\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| v-pre | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"3.99\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| v-once | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"x\",\"x\",\"3.99\",\"4.11\",\"4.61\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| v-memo | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"3.99\",\"x\",\"4.11\",\"x\",\"4.61\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |\n| v-cloak | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"x\",\"x\",\"x\",\"x\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |","example":""},"special_attributes":{"compatibility":"|  | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- | :- |\n| key | 4.0 | √ | 3.9 | 4.11 | 4.61 |\n| ref | 4.0 | √ | 3.9 | 4.11 | 4.61 |\n| is | 4.0 | √ | 3.99 | 4.11 | 4.61 |","example":""},"render_function":{"compatibility":"|  | Web | 微信小程序 | Android(VDOM) | Android(Vapor) | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) |\n| :- | :- | :- | :- | :- | :- | :- | :- | :- |\n| h() | 4.0 | x | 3.99 | x | 4.11 | x | 4.61 | x |\n| mergeProps() | 4.0 | x | 4.0 | x | 4.11 | x | 4.61 | x |\n| cloneVNode() | 4.0 | x | 4.0 | x | x | x | x | x |\n| isVNode() | 4.0 | x | √ | x | 4.11 | x | 4.61 | x |\n| resolveComponent() | 4.0 | x | √ | x | 4.11 | x | 4.61 | x |\n| withDirectives() | 4.0 | 4.41 | x | x | 4.11 | x | 4.61 | x |\n| withModifiers() | 4.0 | x | √ | x | 4.11 | x | 4.61 | x |","example":""},"single_file_component_script":{"compatibility":"|  | 兼容性 |\n| :- | :- |\n| defineProps() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| defineEmits() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| defineModel() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.11\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| defineExpose() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| defineOptions() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.11\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| defineSlots() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| useSlots() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| useAttrs() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android\"},{\"title\":\"iOS\"},{\"title\":\"HarmonyOS\"}],\"rows\":[[\"4.0\",\"4.41\",\"4.0\",\"4.11\",\"4.61\"]],\"status\":\"SUPPORTED\"}' /> |\n| useRecycleState() | <CompatibilityTable table='{\"headers\":[{\"title\":\"Web\"},{\"title\":\"微信小程序\"},{\"title\":\"Android(VDOM)\"},{\"title\":\"Android(Vapor)\"},{\"title\":\"iOS(VDOM)\"},{\"title\":\"iOS(Vapor)\"},{\"title\":\"HarmonyOS(VDOM)\"},{\"title\":\"HarmonyOS(Vapor)\"}],\"rows\":[[\"x\",\"x\",\"x\",\"5.21\",\"x\",\"5.11\",\"x\",\"5.0\"]],\"status\":\"PARTIALLY_SUPPORTED\"}' /> |","example":""},"eventModifiers":{"stop":{"name":"### stop\n","description":"单击事件将停止传递","compatibility":"**兼容性 <Help />** \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | √ | 3.9 | 4.11 | 4.61 |"},"prevent":{"name":"### prevent\n","description":"阻止事件的默认行为（例如阻止链接跳转或表单提交）","compatibility":"**兼容性 <Help />** \n | Web | 微信小程序 | Android | iOS | HarmonyOS(VDOM) | HarmonyOS(Vapor) |\n| :- | :- | :- | :- | :- | :- |\n| 4.0 | √ | 4.51 | 4.51 | x | 5.0 |"},"capture":{"name":"### capture\n","description":"添加事件监听器时，使用 `capture` 捕获模式（例如：指向内部元素的事件，在被内部元素处理前，先被外部处理）","compatibility":"**兼容性 <Help />** \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x |"},"self":{"name":"### self\n","description":"仅当 event.target 是元素本身时才会触发事件处理器（仅当 event.target 是元素本身时才会触发事件处理器）","compatibility":"**兼容性 <Help />** \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x |"},"once":{"name":"### once\n","description":"点击事件最多被触发一次","compatibility":"**兼容性 <Help />** \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | x | 3.9 | x | x |"},"passive":{"name":"### passive\n","description":"滚动事件的默认行为 (scrolling) 将立即发生而非等待 `onScroll` 完成（滚动事件的默认行为 (scrolling) 将立即发生而非等待 `onScroll` 完成）","compatibility":"**兼容性 <Help />** \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x |"}},"keyModifiers":{"enter":{"name":"### enter\n","description":"仅在 `key` 为 `Enter` 时调用事件处理器（keycode 为 13）","compatibility":"**兼容性 <Help />** \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x |"},"tab":{"name":"### tab\n","description":"仅在 `key` 为 `Tab` 时调用事件处理器（keycode 为 9）","compatibility":"**兼容性 <Help />** \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x |"},"delete":{"name":"### delete\n","description":"仅在 `key` 为 `Delete` 或 `Backspace` 时调用事件处理器","compatibility":"**兼容性 <Help />** \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x |"},"esc":{"name":"### esc\n","description":"仅在 `key` 为 `Escape` 时调用事件处理器（keycode 为 27）","compatibility":"**兼容性 <Help />** \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x |"},"space":{"name":"### space\n","description":"仅在 `key` 为 `Space` 时调用事件处理器（keycode 为 32）","compatibility":"**兼容性 <Help />** \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x |"},"up":{"name":"### up\n","description":"仅在 `key` 为 `ArrowUp` 时调用事件处理器（keycode 为 38）","compatibility":"**兼容性 <Help />** \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x |"},"down":{"name":"### down\n","description":"仅在 `key` 为 `ArrowDown` 时调用事件处理器（keycode 为 40）","compatibility":"**兼容性 <Help />** \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x |"},"left":{"name":"### left\n","description":"仅在 `key` 为 `ArrowLeft` 时调用事件处理器（keycode 为 37）","compatibility":"**兼容性 <Help />** \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x |"},"right":{"name":"### right\n","description":"仅在 `key` 为 `ArrowRight` 时调用事件处理器（keycode 为 39）","compatibility":"**兼容性 <Help />** \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x |"}},"mouseModifiers":{"left":{"name":"### left\n","description":"单击鼠标左键时触发鼠标事件。","compatibility":"**兼容性 <Help />** \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x |"},"right":{"name":"### right\n","description":"单击鼠标右键时触发鼠标事件","compatibility":"**兼容性 <Help />** \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x |"},"middle":{"name":"### middle\n","description":"单击鼠标中键（滚轮）时触发鼠标事件","compatibility":"**兼容性 <Help />** \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x |"}},"systemModifiers":{"ctrl":{"name":"### ctrl\n","description":"当按下 \\<Control> 时触发鼠标或键盘事件。","compatibility":"**兼容性 <Help />** \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x |"},"alt":{"name":"### alt\n","description":"当按下 \\<Alt> 时触发鼠标或键盘事件。","compatibility":"**兼容性 <Help />** \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x |"},"shift":{"name":"### shift\n","description":"当按下 \\<Shift> 时触发鼠标或键盘事件。","compatibility":"**兼容性 <Help />** \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x |"},"meta":{"name":"### meta\n","description":"当按下 \\<Meta> 时触发鼠标或键盘事件。","compatibility":"**兼容性 <Help />** \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x |"},"exact":{"name":"### exact\n","description":"`.exact` 修饰符允许控制触发事件所需的系统修饰符的精确组合。","compatibility":"**兼容性 <Help />** \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | x | x | x | x |"}},"propsModifiers":{"sync":{"name":"### sync\n","description":"","compatibility":""}},"vModelModifiers":{"lazy":{"name":"### lazy\n","description":"默认情况下，`v-model` 会在每次 `input` 事件后更新数据 (IME 拼字阶段的状态例外)。你可以添加 `lazy` 修饰符来改为在每次 `change` 事件后更新数据","compatibility":"**兼容性 <Help />** \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| x | x | 3.9 | x | x |"},"number":{"name":"### number\n","description":"如果你想让用户输入自动转换为数字，你可以在 `v-model` 后添加 `.number` 修饰符来管理输入","compatibility":"**兼容性 <Help />** \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | √ | 3.9 | x | x |"},"trim":{"name":"### trim\n","description":"如果你想要默认自动去除用户输入内容中两端的空格，你可以在 `v-model` 后添加 `.trim` 修饰符","compatibility":"**兼容性 <Help />** \n | Web | 微信小程序 | Android | iOS | HarmonyOS |\n| :- | :- | :- | :- | :- |\n| 4.0 | √ | 3.9 | x | x |"}},"E_App":{"example":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/App.uvue","code":"```vue\n<script setup lang=\"uts\">\r\n  import { state, setLifeCycleNum, setAppLaunchPath, setAppShowPath } from './store/index.uts'\r\n\r\n  // #ifdef APP-ANDROID || APP-HARMONY\r\n  let firstBackTime = 0\r\n  // #endif\r\n\r\n  defineOptions({\r\n\t\tglobalData: {\r\n\t\t\tstr: 'globalData str',\r\n\t\t\tnum: 1,\r\n\t\t\tboolean: true\r\n\t\t}\r\n  \t// #ifndef APP-ANDROID || VUE3-VAPOR\r\n\t\t,mixins: [{\r\n      data() {\r\n        return {\r\n          appMixinDataMsg: 'App.uvue mixin data msg'\r\n        }\r\n      }\r\n    }]\r\n  \t// #endif\r\n  })\r\n\tonLaunch((options) => {\r\n\t\t// 自动化测试\r\n\t\tsetLifeCycleNum(state.lifeCycleNum + 1000)\r\n\t\tsetAppLaunchPath(options.path)\r\n\t\tconsole.log('App Launch')\r\n\t})\r\n\tonAppShow((options) => {\r\n\t\t// 自动化测试\r\n\t\tsetLifeCycleNum(state.lifeCycleNum + 100)\r\n\t\tsetAppShowPath(options.path)\r\n  // #ifndef VUE3-VAPOR\r\n\t\tnextTick(() => {\r\n      if(getApp()?.vm?.globalPropertiesStr === 'default string'){\r\n        setLifeCycleNum(state.lifeCycleNum + 10)\r\n      }\r\n    })\r\n  // #endif\r\n\t\tconsole.log('App Show')\r\n\t})\r\n\tonAppHide(() => {\r\n\t\t// 自动化测试\r\n\t\tsetLifeCycleNum(state.lifeCycleNum - 100)\r\n\t\tconsole.log('App Hide')\r\n\t})\r\n\t// #ifdef APP-ANDROID || APP-HARMONY\r\n\tonLastPageBackPress(() => {\r\n\t\t// 自动化测试\r\n\t\tsetLifeCycleNum(state.lifeCycleNum - 1000)\r\n\t\tconsole.log('App LastPageBackPress')\r\n\t\tif (firstBackTime == 0) {\r\n\t\t\tuni.showToast({\r\n\t\t\t\ttitle: '再按一次退出应用',\r\n\t\t\t\tposition: 'bottom',\r\n\t\t\t})\r\n\t\t\tfirstBackTime = Date.now()\r\n\t\t\tsetTimeout(() => {\r\n\t\t\t\tfirstBackTime = 0\r\n\t\t\t}, 2000)\r\n\t\t} else if (Date.now() - firstBackTime < 2000) {\r\n\t\t\tfirstBackTime = Date.now()\r\n\t\t\tuni.exit()\r\n\t\t}\r\n\t})\r\n\tonExit(() => {\r\n\t\tconsole.log('App Exit')\r\n\t})\r\n\t// #endif\r\n\tonError((err: any) => {\r\n\t\tconsole.log('App Error', err)\r\n\t\tsetLifeCycleNum(state.lifeCycleNum + 100)\r\n\t})\r\n\tconst checkLaunchPath = () : boolean => {\r\n\t\tconst HOME_PATH = 'pages/index/index'\r\n\t\tif (state.appLaunchPath != HOME_PATH) {\r\n\t\t\treturn false\r\n\t\t}\r\n\t\tif (state.appShowPath != HOME_PATH) {\r\n\t\t\treturn false\r\n\t\t}\r\n\t\treturn true\r\n\t}\r\n  // #ifndef APP-ANDROID || VUE3-VAPOR\r\n  const checkAppMixin = () : boolean => {\r\n    if(getApp()?.vm?.globalMixinDataMsg1 != '通过 defineMixin 定义全局 mixin data') {\r\n      return false\r\n    }\r\n    if(getApp()?.vm?.appMixinDataMsg != 'App.uvue mixin data msg') {\r\n      return false\r\n    }\r\n    return true\r\n  }\r\n  // #endif\r\n\tdefineExpose({\r\n\t\tcheckLaunchPath,\r\n    // #ifndef APP-ANDROID || VUE3-VAPOR\r\n    checkAppMixin,\r\n    // #endif\r\n\t})\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_pages":{"i18n_i18n":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/i18n/i18n.uvue","code":"```vue\n<template>\n  <view class=\"page\">\n    <view class=\"section\">\n      <text class=\"title\">{{ t('i18n.title') }}</text>\n      <text class=\"description\">{{ t('i18n.description') }}</text>\n      <text class=\"locale-label\">{{ t('i18n.currentLocale') }}: {{ locale }}</text>\n    </view>\n\n    <view class=\"section\">\n      <text class=\"message greeting\">{{ t('i18n.greeting') }}</text>\n      <text class=\"message named\">{{ t('i18n.named', { framework: 'uni-app x' } as UTSJSONObject) }}</text>\n    </view>\n\n    <view class=\"button-group\">\n      <button class=\"locale-btn locale-btn-zh-hans\" @click=\"changeLocale('zh-Hans')\">\n        {{ t('i18n.switchToZhHans') }}\n      </button>\n      <button class=\"locale-btn locale-btn-zh-hant\" @click=\"changeLocale('zh-Hant')\">\n        {{ t('i18n.switchToZhHant') }}\n      </button>\n      <button class=\"locale-btn locale-btn-en\" @click=\"changeLocale('en')\">\n        {{ t('i18n.switchToEn') }}\n      </button>\n    </view>\n  </view>\n</template>\n\n<script setup lang=\"uts\">\nimport { useI18n } from 'vue-i18n'\n\nconst { t, locale } = useI18n()\n\nconst syncLocale = (newLocale : string) => {\n  locale.value = newLocale\n}\n\n// #ifdef WEB || MP\nuni.onLocaleChange((res : UniNamespace.OnLocaleChangeCallbackResult) => {\n  if (res.locale != null) {\n    syncLocale(res.locale!)\n  }\n})\n// #endif\n\nconst changeLocale = (newLocale : string) => {\n  // #ifdef WEB || MP\n  uni.setLocale(newLocale)\n  // #endif\n  syncLocale(newLocale)\n}\n\nconst getContentSnapshot = () : UTSJSONObject => {\n  return {\n    locale: locale.value,\n    title: t('i18n.title'),\n    description: t('i18n.description'),\n    greeting: t('i18n.greeting'),\n    named: t('i18n.named', { framework: 'uni-app x' } as UTSJSONObject)\n  } as UTSJSONObject\n}\n\ndefineExpose({\n  changeLocale,\n  getContentSnapshot\n})\n</script>\n\n<style>\n.page {\n  flex: 1;\n  padding: 16px;\n}\n\n.section {\n  margin-bottom: 16px;\n}\n\n.title {\n  font-size: 22px;\n  font-weight: 700;\n  color: #1f2937;\n  margin-bottom: 8px;\n}\n\n.description,\n.locale-label,\n.message {\n  font-size: 16px;\n  color: #374151;\n  margin-top: 8px;\n}\n\n.button-group {\n  margin-top: 8px;\n}\n\n.locale-btn {\n  margin-top: 10px;\n}\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/i18n/i18n"},"pinia_pinia":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/pinia/pinia.uvue","code":"```vue\n<template>\n  <view class=\"page\">\n    <view class=\"flex justify-between flex-row mb-10\">\n      <text>name:</text>\n      <text id=\"store-name\">{{ name }}</text>\n    </view>\n    <view class=\"flex justify-between flex-row mb-10\">\n      <text>count:</text>\n      <text id=\"store-count\">{{ count }}</text>\n    </view>\n    <view class=\"flex justify-between flex-row mb-10\">\n      <text>double count:</text>\n      <text id=\"store-double-count\">{{ doubleCount }}</text>\n    </view>\n    <view class=\"flex justify-between flex-row mb-10\">\n      <text>count text:</text>\n      <text id=\"store-count-text\">{{ countText }}</text>\n    </view>\n    <button class=\"mb-10\" id=\"increment-btn\" @click=\"increment\">increment</button>\n    <button class=\"mb-10\" id=\"decrement-btn\" @click=\"decrement\">decrement</button>\n    <button class=\"mb-10\" id=\"rename-btn\" @click=\"rename\">rename</button>\n    <button id=\"reset-btn\" @click=\"reset\">reset</button>\n  </view>\n</template>\n\n<script setup lang=\"uts\">\nimport { defineStore, storeToRefs } from 'pinia'\n\nconst useCounterStore = defineStore('piniaCounter', () => {\n  const name = ref('Pinia')\n  const count = ref(0)\n\n  const doubleCount = computed(() : number => {\n    return count.value * 2\n  })\n\n  const countText = computed(() : string => {\n    return `${name.value}: ${count.value}`\n  })\n\n  const increment = () => {\n    count.value++\n  }\n\n  const decrement = () => {\n    count.value--\n  }\n\n  const rename = () => {\n    name.value = name.value == 'Pinia' ? 'Pinia Store' : 'Pinia'\n  }\n\n  const reset = () => {\n    name.value = 'Pinia'\n    count.value = 0\n  }\n\n  return {\n    name,\n    count,\n    doubleCount,\n    countText,\n    increment,\n    decrement,\n    rename,\n    reset\n  }\n})\n\nconst counterStore = useCounterStore()\nconst { name, count, doubleCount, countText } = storeToRefs(counterStore)\n\nconst increment = () => {\n  counterStore.increment()\n}\n\nconst decrement = () => {\n  counterStore.decrement()\n}\n\nconst rename = () => {\n  counterStore.rename()\n}\n\nconst reset = () => {\n  counterStore.reset()\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/pinia/pinia"},"reactivity_render-effect-guard":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/reactivity/render-effect-guard.uvue","code":"```vue\n<template>\r\n    <view class=\"page\">\r\n        <text class=\"title\">渲染副作用守卫</text>\r\n        <text id=\"case-desc\" class=\"desc\">验证同一个渲染 effect 中，只有 scrollIntoView 变化时，不应重放 scrollTop=0 等未变更的宿主副作用。</text>\r\n        <text id=\"case-steps\" class=\"desc\">点击按钮后先滚到 target；300ms 后只清空 scrollIntoView，页面应继续停留在 target 附近。</text>\r\n        <text id=\"case-fail\" class=\"desc\">如果缺少 guard，会在清空 scrollIntoView 时重放 scrollTop=0，导致滚回顶部。</text>\r\n\r\n        <button id=\"btn\" class=\"button\" @click=\"run\">滚到 target</button>\r\n\r\n        <text id=\"state\" class=\"state\">state: {{ state }}</text>\r\n        <text id=\"current-top\" class=\"state\">currentTop: {{ currentTop }}</text>\r\n\r\n        <scroll-view id=\"scroller\" class=\"scroller\" scroll-y=\"true\" :scroll-top=\"scrollTop\"\r\n            :scroll-into-view=\"scrollIntoView\" @scroll=\"onScroll\">\r\n            <view id=\"top\" class=\"item\">top</view>\r\n            <view id=\"target\" class=\"item target\">target</view>\r\n            <view id=\"bottom\" class=\"item\">bottom</view>\r\n        </scroll-view>\r\n    </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n    const scrollTop = ref(0)\r\n    const scrollIntoView = ref('')\r\n    const currentTop = ref(0)\r\n    const state = ref('ready')\r\n\r\n    function run() {\r\n        scrollIntoView.value = 'target'\r\n        state.value = 'scrollIntoView=target'\r\n\r\n        setTimeout(() => {\r\n            // 只清空 scroll-into-view，不改 scroll-top。\r\n            // 错误实现会重放 scroll-top=0，导致 currentTop 回到 0。\r\n            scrollIntoView.value = ''\r\n            state.value = 'scrollIntoView=empty'\r\n        }, 300)\r\n    }\r\n\r\n    function onScroll(e : UniScrollEvent) {\r\n        currentTop.value = e.detail.scrollTop\r\n    }\r\n\r\n    defineExpose({\r\n        currentTop\r\n    })\r\n</script>\r\n\r\n<style>\r\n    .page {\r\n        padding: 20px;\r\n    }\r\n\r\n    .title {\r\n        font-size: 20px;\r\n        font-weight: bold;\r\n        margin-bottom: 8px;\r\n    }\r\n\r\n    .desc {\r\n        font-size: 14px;\r\n        color: #555555;\r\n        margin-bottom: 6px;\r\n        line-height: 22px;\r\n    }\r\n\r\n    .button {\r\n        margin-top: 10px;\r\n        margin-bottom: 10px;\r\n    }\r\n\r\n    .state {\r\n        font-size: 14px;\r\n        margin-bottom: 4px;\r\n    }\r\n\r\n    .scroller {\r\n        height: 160px;\r\n        border: 1px solid #cccccc;\r\n        margin-top: 12px;\r\n    }\r\n\r\n    .item {\r\n        height: 160px;\r\n        line-height: 160px;\r\n        text-align: center;\r\n        background-color: #f5f5f5;\r\n    }\r\n\r\n    .target {\r\n        background-color: #bde7ff;\r\n    }\r\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/render-effect-guard"},"type_type":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/type/type.uvue","code":"```vue\n<template>\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\r\n  <scroll-view style=\"flex: 1\">\r\n  <!-- #endif -->\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n<script setup lang='uts'>\r\n  // 仅引用类型，模板中不使用，也要保证不报错\r\n  let testType: TestTypeComponentPublicInstance | null = null;\r\n  onLoad(() => {\r\n    console.log('testType', testType)\r\n  })\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/type/type"}},"E_app-instance":{"component_component":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/alpha/pages/app-instance/globalProperties/globalProperties-composition.uvue","code":"```vue\n<template>\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\r\n  <scroll-view style=\"flex: 1;\">\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 && !VUE3-VAPOR -->\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 10px 40px 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.com/dcloud/hello-uvue/blob/alpha/pages/app-instance/globalProperties/globalProperties-options.uvue","code":"```vue\n<template>\r\n  <!-- #ifdef APP -->\r\n  <scroll-view style=\"flex: 1;\">\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 10px 40px 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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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      style='background-color: lightblue;'\n      @childClick=\"() => {}\" />\n\n    <child-multi-tag\n      class=\"child-class\"\n      str=\"str from parent\"\n      style='background-color: lightblue;'\n      @childClick=\"() => {}\" />\n  </view>\n</template>\n\n<script setup lang=\"uts\">\nimport child from './child-composition.uvue'\nimport childMultiTag from './child-composition-multi-tag.uvue'\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/attrs/attrs-composition"},"attrs_attrs-options":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/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      style=\"background-color: lightblue;\"\n      @childClick=\"() => {}\" />\n\n    <child-multi-tag\n      class=\"child-class\"\n      str=\"str from parent\"\n      style='background-color: lightblue;'\n      @childClick=\"() => {}\" />\n  </view>\n</template>\n\n<script lang=\"uts\">\nimport child from './child-options.uvue'\nimport childMultiTag from './child-composition-multi-tag.uvue'\nexport default {\n  components: {\n    child,\n    childMultiTag\n  },\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/attrs/attrs-options"},"attrs_child-composition-multi-tag":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/attrs/child-composition-multi-tag.uvue","code":"```vue\n<template>\n    <text>多跟节点继承 $attrs.style 只有 hasStyleAttr 设置天蓝色背景</text>\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 class=\"mb-10 flex flex-row justify-between\" :style=\"$attrs['style']!\">\n      <text>hasStyleAttr</text>\n      <text id=\"has-style-attr\">{{ hasStyleAttr }}</text>\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\nconst hasStyleAttr = computed(():boolean=>{\n  return attrs['style'] != null\n})\n\n// const backgroundColor = computed((): string => {\n//   const styleObj = attrs['style'] as UTSJSONObject\n//   return (styleObj?.['background-color'] as string) ?? ''\n// })\n\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/attrs/child-composition-multi-tag"},"attrs_child-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/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 class=\"mb-10 flex flex-row justify-between\">\n      <text>hasStyleAttr</text>\n      <text id=\"has-class-attr\">{{ hasStyleAttr }}</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\nconst hasStyleAttr = computed(():boolean=>{\n  return attrs['style'] != null\n})\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/attrs/child-composition"},"attrs_child-options-multi-tag":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/attrs/child-options-multi-tag.uvue","code":"```vue\n<template>\n   <text>多跟节点继承 $attrs.style 只有 hasStyleAttr 设置天蓝色背景</text>\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 class=\"mb-10 flex flex-row justify-between\" :style=\"$attrs['style']!\">\n      <text>hasStyleAttr</text>\n      <text id=\"has-class-attr\">{{ hasStyleAttr }}</text>\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\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    hasStyleAttr(): boolean {\n      return this.$attrs['style'] != null\n    },\n  },\n  methods:{\n    getAttr(_e: PointerEvent) {\n      console.log(this.$attrs['styles']);\n    }\n  }\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/attrs/child-options-multi-tag"},"attrs_child-options":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/attrs/child-options.uvue","code":"```vue\n<template>\n  <view>\n    <text>单一节点继承 $attrs.style 整个组件设置天蓝色背景</text>\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 class=\"mb-10 flex flex-row justify-between\">\n      <text>hasStyleAttr</text>\n      <text id=\"has-class-attr\" class=\"has-class-attr\">{{ hasStyleAttr }}</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    hasStyleAttr(): boolean {\n      return this.$attrs['style'] != null\n    },\n  },\n  methods:{\n    getAttr(_e: PointerEvent) {\n      console.log(this.$attrs['styles']);\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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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 class=\"emit-function-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\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/emit-function/emit-function-composition"},"emit-function_emit-function-options":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/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 class=\"emit-function-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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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=\"mt-10 time\">Date.now(): {{ Date.now() }}</text>\n    <button\n      class=\"mt-10 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"},"inherit-attrs_comp-inherit-attrs-false-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/inherit-attrs/comp-inherit-attrs-false-composition.uvue","code":"```vue\n<template>\n\t<view id=\"container\" class=\"p-10 comp-inherit-attrs-false-composition\">\n\t\t<text>inheritAttrs: false</text>\n\t\t<view class=\"flex flex-row\">\n\t\t\t<text>id: </text>\n\t\t\t<text id=\"comp-inherit-attrs-false-composition-id\">{{ id }}</text>\n\t\t</view>\n\t\t<view class=\"flex flex-row\">\n\t\t\t<text>class: </text>\n\t\t\t<text id=\"comp-inherit-attrs-false-composition-class\">{{\n\t\t\t\tclassName\n\t\t\t}}</text>\n\t\t</view>\n\t\t<view class=\"flex flex-row\">\n\t\t\t<text>data-test: </text>\n\t\t\t<text id=\"comp-inherit-attrs-false-composition-data-test\">{{\n\t\t\t\tdataTest\n\t\t\t}}</text>\n\t\t</view>\n\t</view>\n</template>\n\n<script setup lang=\"uts\">\ndefineOptions({\n\tinheritAttrs: false\n})\n\nconst id = ref('')\nconst className = ref('')\nconst dataTest = ref('')\n\nonMounted(() => {\n\tconst container = getCurrentInstance()!.proxy!.$el as UniElement\n\tid.value = container.getAttribute('id') ?? ''\n\tclassName.value = container.classList.toString()\n\tdataTest.value = container.getAttribute('data-test') ?? ''\n})\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/inherit-attrs/comp-inherit-attrs-false-composition"},"inherit-attrs_comp-inherit-attrs-false-options":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/inherit-attrs/comp-inherit-attrs-false-options.uvue","code":"```vue\n<template>\n\t<view id=\"container\" class=\"p-10 comp-inherit-attrs-false-options\">\n\t\t<text>inheritAttrs: false</text>\n\t\t<view class=\"flex flex-row\">\n\t\t\t<text>id: </text>\n\t\t\t<text id=\"comp-inherit-attrs-false-options-id\">{{ id }}</text>\n\t\t</view>\n\t\t<view class=\"flex flex-row\">\n\t\t\t<text>class: </text>\n\t\t\t<text id=\"comp-inherit-attrs-false-options-class\">{{ className }}</text>\n\t\t</view>\n\t\t<view class=\"flex flex-row\">\n\t\t\t<text>data-test: </text>\n\t\t\t<text id=\"comp-inherit-attrs-false-options-data-test\">{{ dataTest }}</text>\n\t\t</view>\n\t</view>\n</template>\n\n<script>\nexport default {\n\tinheritAttrs: false,\n\tdata(){\n\t\treturn {\n\t\t\tid: '',\n\t\t\tclassName: '',\n\t\t\tdataTest: ''\n\t\t}\n\t},\n\tmounted() {\n\t\tconst container = this.$el!\n\t\tthis.id = container.getAttribute('id') ?? ''\n\t\tthis.className = container.classList.toString()\n\t\tthis.dataTest = container.getAttribute('data-test') ?? ''\n\t}\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/inherit-attrs/comp-inherit-attrs-false-options"},"inherit-attrs_comp-inherit-attrs-true-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/inherit-attrs/comp-inherit-attrs-true-composition.uvue","code":"```vue\n<template>\n\t<view id=\"container\" class=\"p-10\" @click=\"handleClickInComp\">\n\t\t<text>inheritAttrs: true</text>\n\t\t<view class=\"flex flex-row\">\n\t\t\t<text>id: </text>\n\t\t\t<text id=\"comp-inherit-attrs-true-composition-id\">{{ id }}</text>\n\t\t</view>\n\t\t<view class=\"flex flex-row\">\n\t\t\t<text>class: </text>\n\t\t\t<text id=\"comp-inherit-attrs-true-composition-class\">{{ className }}</text>\n\t\t</view>\n\t\t<view class=\"flex flex-row\">\n\t\t\t<text>data-test: </text>\n\t\t\t<text id=\"comp-inherit-attrs-true-composition-data-test\">{{ dataTest }}</text>\n\t\t</view>\n\t\t<view class=\"flex flex-row\">\n\t\t\t<text>count in comp: </text>\n\t\t\t<text id=\"comp-inherit-attrs-true-composition-count\">{{ count }}</text>\n\t\t</view>\n\t</view>\n</template>\n\n<script setup lang=\"uts\">\n\tdefineOptions({\n\t\tinheritAttrs: true\n\t})\n\n\tconst id = ref('')\n\tconst className = ref('')\n\tconst dataTest = ref('')\n\n\tconst count = ref(0)\n\n\tonMounted(() => {\n\t\tconst container = getCurrentInstance()!.proxy!.$el as UniElement\n\t\tid.value = container.getAttribute('id') ?? ''\n\t\tclassName.value = container.classList.toString()\n\t\tdataTest.value = container.getAttribute('data-test') ?? ''\n\t})\n\n\tconst handleClickInComp = () => {\n\t\tcount.value++\n\t}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/inherit-attrs/comp-inherit-attrs-true-composition"},"inherit-attrs_comp-inherit-attrs-true-options":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/inherit-attrs/comp-inherit-attrs-true-options.uvue","code":"```vue\n<template>\n\t<view id=\"container\" class=\"p-10\" @click=\"handleClickInComp\">\n\t\t<text>inheritAttrs: true</text>\n\t\t<view class=\"flex flex-row\">\n\t\t\t<text>id: </text>\n\t\t\t<text id=\"comp-inherit-attrs-true-options-id\">{{ id }}</text>\n\t\t</view>\n\t\t<view class=\"flex flex-row\">\n\t\t\t<text>class: </text>\n\t\t\t<text id=\"comp-inherit-attrs-true-options-class\">{{ className }}</text>\n\t\t</view>\n\t\t<view class=\"flex flex-row\">\n\t\t\t<text>data-test: </text>\n\t\t\t<text id=\"comp-inherit-attrs-true-options-data-test\">{{ dataTest }}</text>\n\t\t</view>\n\t\t<view class=\"flex flex-row\">\n\t\t\t<text>count in comp: </text>\n\t\t\t<text id=\"comp-inherit-attrs-true-options-count\">{{ count }}</text>\n\t\t</view>\n\t</view>\n</template>\n\n<script>\nexport default {\n\tinheritAttrs: true,\n\tdata(){\n\t\treturn {\n\t\t\tid: '',\n\t\t\tclassName: '',\n\t\t\tdataTest: '',\n\t\t\tcount: 0\n\t\t}\n\t},\n\tmounted() {\n\t\tconst container = this.$el!\n\t\tthis.id = container.getAttribute('id') ?? ''\n\t\tthis.className = container.classList.toString()\n\t\tthis.dataTest = container.getAttribute('data-test') ?? ''\n\t},\n\tmethods: {\n\t\thandleClickInComp() {\n\t\t\tthis.count++\n\t\t}\n\t},\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/inherit-attrs/comp-inherit-attrs-true-options"},"inherit-attrs_inherit-attrs-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/inherit-attrs/inherit-attrs-composition.uvue","code":"```vue\n<template>\n\t<view class=\"p-10\">\n\t\t<text>inheritAttrs 组合式 API</text>\n\t\t<view class=\"flex flex-row\">\n\t\t\t<text>count in page: </text>\n\t\t\t<text id=\"inherit-attrs-composition-count\">{{ count }}</text>\n\t\t</view>\n\t\t<CompInheritAttrsTrueComposition id=\"comp-inherit-attrs-true-composition\" class=\"bg-red\" data-test=\"comp-inherit-attrs-true-composition\" @click=\"handleClickInPage\" />\n\t\t<CompInheritAttrsFalseComposition id=\"comp-inherit-attrs-false-composition\" class=\"bg-red\" data-test=\"comp-inherit-attrs-false-composition\" @click=\"handleClickInPage\" />\n\t</view>\n</template>\n\n<script setup lang=\"uts\">\n\timport CompInheritAttrsTrueComposition from './comp-inherit-attrs-true-composition.uvue'\n\timport CompInheritAttrsFalseComposition from './comp-inherit-attrs-false-composition.uvue'\n\n\tconst count = ref(0)\n\n\tconst handleClickInPage = () => {\n\t\tcount.value++\n\t}\n</script>\n\n<style>\n\t.bg-red {\n\t\tbackground-color: red;\n\t}\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/inherit-attrs/inherit-attrs-composition"},"inherit-attrs_inherit-attrs-options":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/inherit-attrs/inherit-attrs-options.uvue","code":"```vue\n<template>\n\t<view class=\"p-10\">\n\t\t<text>inheritAttrs 选项式 API</text>\n\t\t<view class=\"flex flex-row\">\n\t\t\t<text>count in page: </text>\n\t\t\t<text id=\"inherit-attrs-options-count\">{{ count }}</text>\n\t\t</view>\n\t\t<CompInheritAttrsTrueOptions id=\"comp-inherit-attrs-true-options\" class=\"bg-red\" data-test=\"comp-inherit-attrs-true-options\" @click=\"handleClickInPage\" />\n\t\t<CompInheritAttrsFalseOptions id=\"comp-inherit-attrs-false-options\" class=\"bg-red\" data-test=\"comp-inherit-attrs-false-options\" @click=\"handleClickInPage\" />\n\t</view>\n</template>\n\n<script>\nimport CompInheritAttrsTrueOptions from './comp-inherit-attrs-true-options.uvue'\nimport CompInheritAttrsFalseOptions from './comp-inherit-attrs-false-options.uvue'\nexport default {\n\tcomponents: {\n\t\tCompInheritAttrsTrueOptions,\n\t\tCompInheritAttrsFalseOptions\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tcount: 0\n\t\t}\n\t},\n\tmethods: {\n\t\thandleClickInPage() {\n\t\t\tthis.count++\n\t\t}\n\t}\n}\n</script>\n\n<style>\n.bg-red{\n\tbackground-color: red;\n}\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/inherit-attrs/inherit-attrs-options"},"inject_inject-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/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>\n    <text class=\"mt-10 fn\">notFoundWithWarning: {{notFoundWithWarning}}</text>\n    <text class=\"mt-10 fn\">notFoundWithDefaultValue: {{notFoundWithDefaultValue}}</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  }\n  \n  const notFoundWithWarning = inject(\"notFoundWithWarning\")\n  const notFoundWithDefaultValue = inject(\"notFoundWithDefaultValue\", null)\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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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    <test-getter-setter-composition ref=\"getterAndSetterComposition\"></test-getter-setter-composition>\n    <!-- #ifndef VUE3-VAPOR -->\n    <test-getter-setter-options ref=\"getterAndSetterOptions\"></test-getter-setter-options>\n    <!-- #endif -->\n    <view>\n        <text>getter-setter: <text id=\"getterAndSetter\">{{JSON.stringify(getterAndSetterResult)}}</text></text>\n    </view>\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 getterAndSetterComposition = ref<TestGetterSetterCompositionComponentPublicInstance | null>(null)\n// #ifndef VUE3-VAPOR\nconst getterAndSetterOptions = ref<TestGetterSetterOptionsComponentPublicInstance | null>(null)\n// #endif\nconst getterAndSetterResult = ref<number[]>([])\n\nconst callGetterAndSetterCompositionGetCount = (): number => {\n    return getterAndSetterComposition.value!.getCount()\n}\nconst callGetterAndSetterCompositionGetCountWithCallMethod = (): number => {\n    return getterAndSetterComposition.value!.$callMethod('getCount') as number\n}\n// #ifndef VUE3-VAPOR\nconst callGetterAndSetterOptionsGetCount = (): number => {\n    return getterAndSetterOptions.value!.getCount()\n}\nconst callGetterAndSetterOptionsGetCountWithCallMethod = (): number => {\n    return getterAndSetterOptions.value!.$callMethod('getCount') as number\n}\n// #endif\nconst callGetterAndSetterCompositionSetCount = (count: number) => {\n    getterAndSetterComposition.value!.setCount(count)\n}\nconst callGetterAndSetterCompositionSetCountWithCallMethod = (count: number) => {\n    getterAndSetterComposition.value!.$callMethod('setCount', count)\n}\n// #ifndef VUE3-VAPOR\nconst callGetterAndSetterOptionsSetCount = (count: number) => {\n    getterAndSetterOptions.value!.setCount(count)\n}\nconst callGetterAndSetterOptionsSetCountWithCallMethod = (count: number) => {\n    getterAndSetterOptions.value!.$callMethod('setCount', count)\n}\n// #endif\n\nconst callGetterAndSetter = (): number[] => {\n    const result: number[] = []\n    callGetterAndSetterCompositionSetCount(1)\n    result.push(callGetterAndSetterCompositionGetCount())\n    callGetterAndSetterCompositionSetCountWithCallMethod(2)\n    result.push(callGetterAndSetterCompositionGetCountWithCallMethod())\n    // #ifndef VUE3-VAPOR\n    callGetterAndSetterOptionsSetCount(3)\n    result.push(callGetterAndSetterOptionsGetCount())\n    callGetterAndSetterOptionsSetCountWithCallMethod(4)\n    result.push(callGetterAndSetterOptionsGetCountWithCallMethod())\n    // #endif\n    getterAndSetterResult.value = result\n    return result\n}\nconst delay = (): Promise<string> =>\n  new Promise((resolve, _) => {\n    setTimeout(() => {\n      resolve('')\n    }, 1000)\n  })\n\nconst call = async (): Promise<void> => {\n  callGetterAndSetter()\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.com/dcloud/hello-uvue/blob/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    <test-getter-setter-composition ref=\"getterAndSetterComposition\"></test-getter-setter-composition>\n    <test-getter-setter-options ref=\"getterAndSetterOptions\"></test-getter-setter-options>\n    <view>\n        <text>getter-setter: <text id=\"getterAndSetter\">{{JSON.stringify(getterAndSetterResult)}}</text></text>\n    </view>\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      getterAndSetterComposition: null as TestGetterSetterCompositionComponentPublicInstance | null,\n      getterAndSetterOptions: null as TestGetterSetterOptionsComponentPublicInstance | null,\n      getterAndSetterResult: [] as number[]\n    }\n  },\n  onReady() {\n    // 通过组件 ref 属性获取组件实例, 组件标签名首字母大写，驼峰+ComponentPublicInstance\n    this.callEasyMethod1 = this.$refs['callEasyMethod1'] as CallEasyMethodComponentPublicInstance\n    this.customCallEasyMethod1 = this.$refs['customCallEasyMethod1'] as CustomCallEasyMethodComponentPublicInstance\n    \n    this.getterAndSetterComposition = this.$refs['getterAndSetterComposition'] as TestGetterSetterCompositionComponentPublicInstance\n    this.getterAndSetterOptions = this.$refs['getterAndSetterOptions'] as TestGetterSetterOptionsComponentPublicInstance\n    this.call()\n  },\n  methods: {\n    async call(): Promise<void> {\n      this.callGetterAndSetter()\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    callGetterAndSetter(): number[] {\n        const result:number[] = []\n        this.callGetterAndSetterCompositionSetCount(1)\n        result.push(this.callGetterAndSetterCompositionGetCount())\n        this.callGetterAndSetterCompositionSetCountWithCallMethod(2)\n        result.push(this.callGetterAndSetterCompositionGetCountWithCallMethod())\n        this.callGetterAndSetterOptionsSetCount(3)\n        result.push(this.callGetterAndSetterOptionsGetCount())\n        this.callGetterAndSetterOptionsSetCountWithCallMethod(4)\n        result.push(this.callGetterAndSetterOptionsGetCountWithCallMethod())\n        this.getterAndSetterResult = result\n        return result\n    },\n    callGetterAndSetterCompositionGetCount(): number {\n        return this.getterAndSetterComposition!.getCount()\n    },\n    callGetterAndSetterCompositionGetCountWithCallMethod(): number {\n        return this.getterAndSetterComposition!.$callMethod('getCount') as number\n    },\n    callGetterAndSetterOptionsGetCount(): number {\n        return this.getterAndSetterOptions!.getCount()\n    },\n    callGetterAndSetterOptionsGetCountWithCallMethod(): number {\n        return this.getterAndSetterOptions!.$callMethod('getCount') as number\n    },\n    callGetterAndSetterCompositionSetCount(count: number) {\n        this.getterAndSetterComposition!.setCount(count)\n    },\n    callGetterAndSetterCompositionSetCountWithCallMethod(count: number) {\n        this.getterAndSetterComposition!.$callMethod('setCount', count)\n    },\n    callGetterAndSetterOptionsSetCount(count: number) {\n        this.getterAndSetterOptions!.setCount(count)\n    },\n    callGetterAndSetterOptionsSetCountWithCallMethod(count: number) {\n        this.getterAndSetterOptions!.$callMethod('setCount', count)\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.com/dcloud/hello-uvue/blob/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-ANDROID || APP-IOS) && !VUE3-VAPOR -->\n    <!-- 在兼容组件中 ios 返回非普通对象数据，比如 Map 数据时候会被 jscore 统一处理为 object，和安卓产生了差异 -->\n    <!-- 测试用例用来验证返回数据特殊，安卓和其他平台无此限制 -->\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\n  // #ifdef (APP-ANDROID || APP-IOS) && !VUE3-VAPOR\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 && !VUE3-VAPOR\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 && !VUE3-VAPOR\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    isNumListValid.value = isArray && isLengthGt0\n  }\n  // #endif\n\n\n  // #ifdef APP-ANDROID && !VUE3-VAPOR\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 && !VUE3-VAPOR\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    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.com/dcloud/hello-uvue/blob/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-IOS || APP-ANDROID || APP-HARMONY -->\n    <!-- 在兼容组件中 ios 返回非普通对象数据，比如 Map 数据时候会被 jscore 统一处理为 object，和安卓产生了差异 -->\n    <!-- 测试用例用来验证返回数据特殊，安卓和其他平台无此限制 -->\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 || APP-HARMONY\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 || APP-HARMONY\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.com/dcloud/hello-uvue/blob/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\nfunction callMethodFooWithDefaultParameter(): any | null{\n  return componentRef.value?.$callMethod('fooWithDefaultParameter', 10)\n}\n\nfunction callMethodFooWithRestParameter(): any | null{\n  return componentRef.value?.$callMethod('fooWithRestParameter', \"test\", 10, 11)\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  await delay()\n  callMethodFooWithDefaultParameter()\n  await delay()\n  callMethodFooWithRestParameter()  \n}\n\nonReady(() => {\n  call()\n})\n\ndefineExpose({\n  callMethodTest,\n  callMethodFooWithDefaultParameter,\n  callMethodFooWithRestParameter\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.com/dcloud/hello-uvue/blob/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      await delay()\n      // callMethod时，不支持默认参数，必须主动传入\n      this.callMethodFooWithDefaultParameter()\n      await delay()\n      this.callMethodFooWithGenericParameter()\n      await delay()\n      this.callMethodFooWithRestParameter()\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    callMethodFooWithDefaultParameter(): any | null{\n      return this.component1?.$callMethod('fooWithDefaultParameter', 10)\n    },\n    callMethodFooWithGenericParameter(): any | null{\n      return this.component1?.$callMethod('fooWithGenericParameter', 10)\n    },\n    callMethodFooWithRestParameter(): any | null{\n      return this.component1?.$callMethod('fooWithRestParameter', \"test\", 10, 11)\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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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\nfunction fooWithDefaultParameter(n = 1): number {\n  result.value = \"fooWithDefaultParameter=\" + n\n  return n\n}\n\nfunction fooWithGenericParameter<T>(n: T): T{\n  result.value = \"fooWithGeneric=\" + n\n  return n\n}\n\nfunction fooWithRestParameter(name: string, ...n: number[]): string {\n  const res = JSON.stringify([name, ...n])\n  result.value = \"fooWithRestParameter=\" + res\n  return res\n}\n\ndefineExpose({\n  foo1,\n  foo2,\n  foo3,\n  foo4,\n  foo5,\n  fooWithDefaultParameter: fooWithDefaultParameter,\n  // 不支持导出泛型函数\n  // fooWithGenericParameter: fooWithGenericParameter,\n  fooWithRestParameter: fooWithRestParameter\n})\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/methods/component1-composition"},"methods_component1":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/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      fooWithDefaultParameter(n = 1): number {\n        this.result = \"fooWithDefaultParameter=\" + n\n        return n\n      },\n      fooWithGenericParameter<T>(n: T): T{\n        this.result = \"fooWithGeneric=\" + n\n        return n\n      },\n      fooWithRestParameter(name: string, ...n: number[]): string {\n        const res = JSON.stringify([name, ...n])\n        this.result = \"fooWithRestParameter=\" + res\n        return res\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.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/mixins/mixins-app-page-namesake.uvue","code":"```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\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 && !VUE3-VAPOR -->\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.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/mixins/mixins-app.uvue","code":"```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\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 && !VUE3-VAPOR -->\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.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/mixins/mixins-web.uvue","code":"```vue\n<template>\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\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 && !VUE3-VAPOR -->\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.com/dcloud/hello-uvue/blob/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 setup>\nconst mpRenderer = ref('')\nconst ins = getCurrentInstance()?.proxy\n\nonLoad(() => {\n  mpRenderer.value = ins?.$scope?.renderer || ''\n})\n</script>\n\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/mp-instance/mp-instance"},"nextTick_child-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/nextTick/child-composition.uvue","code":"```vue\n<template>\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\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 && !VUE3-VAPOR -->\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 as UniTextElement).value\r\n    // #endif\r\n    // #ifndef APP\r\n    // @ts-ignore\r\n    dataInfo.beforeNextTickTitle = childText.textContent\r\n    // #endif\r\n    \r\n    await nextTick()\r\n    \r\n    // #ifdef APP\r\n    dataInfo.afterNextTickTitle = (childText as UniTextElement).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.com/dcloud/hello-uvue/blob/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 as UniTextElement).value\r\n        // #endif\r\n        // #ifndef APP\r\n        // @ts-ignore\r\n        this.dataInfo.beforeNextTickCallbackTitle = childText.textContent\r\n        // #endif\r\n        \r\n        this.$nextTick(() => {\r\n          // #ifdef APP\r\n          this.dataInfo.afterNextTickCallbackTitle = (childText as UniTextElement).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 as UniTextElement).value\r\n        // #endif\r\n        // #ifndef APP\r\n        // @ts-ignore\r\n        this.dataInfo.beforeNextTickPromiseTitle = childText.textContent\r\n        // #endif\r\n        \r\n        this.$nextTick().then(() => {\r\n          // #ifdef APP\r\n          this.dataInfo.afterNextTickPromiseTitle = (childText as UniTextElement).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.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/nextTick/nextTick-composition.uvue","code":"```vue\n<template>\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\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      <button class=\"mt-10\" id=\"after-next-tick-get-text-btn\" @click=\"afterNextTickGetText\">toggle v-if text</button>\r\n      <text v-if=\"dataInfo.showTestText\" class=\"mt-10\" id=\"v-if-next-tick-should-getable\">测试 v-if & nextTick 后获取元素</text>\r\n    </view>\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\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    showTestText: boolean\r\n    vIfNextTickTestTextGetAble: boolean\r\n  }\r\n\r\n  const dataInfo = reactive({\r\n    title: 'default title',\r\n    beforeNextTickTitle: '',\r\n    afterNextTickTitle: '',\r\n    showTestText: false,\r\n    vIfNextTickTestTextGetAble: false,\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 as UniTextElement).value\r\n    // #endif\r\n    // #ifndef APP\r\n    // @ts-ignore\r\n    dataInfo.beforeNextTickTitle = pageText.textContent\r\n    // #endif\r\n    \r\n    await nextTick()\r\n    \r\n    // #ifdef APP\r\n    dataInfo.afterNextTickTitle = (pageText as UniTextElement).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  const afterNextTickGetText = () => {\r\n    dataInfo.showTestText = !dataInfo.showTestText\r\n    nextTick(() => {\r\n      const text = uni.getElementById('v-if-next-tick-should-getable')\r\n      dataInfo.vIfNextTickTestTextGetAble = text != null\r\n      console.log('after v-if nextTick should getable text:', dataInfo.vIfNextTickTestTextGetAble)\r\n    })\r\n  }\r\n\r\n  defineExpose({\r\n    dataInfo,\r\n    afterNextTickGetText\r\n  })\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/nextTick/nextTick-composition"},"nextTick_nextTick-options":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/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 title123:</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      <button class=\"mt-10\" id=\"after-next-tick-get-text-btn\" @click=\"afterNextTickGetText\">toggle v-if text</button>\r\n      <text v-if=\"showTestText\" class=\"mt-10\" id=\"v-if-next-tick-should-getable\">测试 v-if & nextTick 后获取元素</text>\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        showTestText: false,\r\n        vIfNextTickTestTextGetAble: false\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 as UniTextElement).value\r\n        // #endif\r\n        // #ifdef WEB\r\n        // @ts-ignore\r\n        this.dataInfo.beforeNextTickCallbackTitle = pageText.textContent\r\n        // #endif\r\n        \r\n        this.$nextTick(() => {\r\n          // #ifdef APP\r\n          this.dataInfo.afterNextTickCallbackTitle = (pageText as UniTextElement).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 as UniTextElement).value\r\n        // #endif\r\n        // #ifdef WEB\r\n        // @ts-ignore\r\n        this.dataInfo.beforeNextTickPromiseTitle = pageText.textContent\r\n        // #endif\r\n        \r\n        this.$nextTick().then(() => {\r\n          // #ifdef APP\r\n          this.dataInfo.afterNextTickPromiseTitle = (pageText as UniTextElement).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      afterNextTickGetText(){\r\n        this.showTestText = !this.showTestText\r\n        this.$nextTick(() => {\r\n          const text = uni.getElementById('v-if-next-tick-should-getable')\r\n          this.vIfNextTickTestTextGetAble = text != null\r\n          console.log('after v-if nextTick should getable text:', this.vIfNextTickTestTextGetAble)\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.com/dcloud/hello-uvue/blob/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 && !VUE3-VAPOR -->\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    <!-- #ifndef VUE3-VAPOR -->\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    <!-- #endif -->\r\n  </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n// #ifndef VUE3-VAPOR\r\nimport mixins from \"./mixins.uts\"\r\n// #endif\r\n\r\ndefineOptions({\r\n  // #ifndef VUE3-VAPOR\r\n  mixins: [mixins],\r\n  // #endif\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  // #ifdef VUE3-VAPOR\r\n  mixinDataStr: string\r\n  // #endif\r\n}\r\n\r\nconst dataInfo = reactive({\r\n  name: \"\",\r\n  customKey: \"\",\r\n  // #ifdef VUE3-VAPOR\r\n  mixinDataStr: \"\"\r\n  // #endif\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 && !VUE3-VAPOR\r\n  dataInfo.customKey = instance.$options._customKey\r\n  // #ifndef VUE3-VAPOR\r\n  dataInfo.mixinDataStr = instance.$options.data!({})!['str']\r\n  // #endif\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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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 && !VUE3-VAPOR\r\n    parentStr.value = (instance.$parent!.$exposed['str'] as Ref<string>).value\r\n    // #endif\r\n    // #ifndef APP-ANDROID && !VUE3-VAPOR\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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/parent/parent-composition.uvue","code":"```vue\n<template>\r\n  <view class=\"page\">\r\n    <child ref=\"childRef\" class=\"parent-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 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>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/parent/parent-composition"},"parent_parent-options":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/parent/parent-options.uvue","code":"```vue\n<template>\n  <view class=\"page\">\n    <child ref='child' class=\"parent-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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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>obj.age: </text>\r\n      <text id=\"object-type-obj-age\">{{ obj.age }}</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  nullableStr: {\r\n    // 必须as PropType<string | null>，否则会影响类型的自动推导，导致setup函数内的ctx是any类型\r\n    type: [String, null] as PropType<string | null>,\r\n  },\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.com/dcloud/hello-uvue/blob/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>obj.age: </text>\r\n      <text id=\"object-type-obj-age\">{{ obj.age }}</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\tnullableStr: {\r\n\t\t\t\t// 必须as PropType<string | null>，否则会影响类型的自动推导，导致setup函数内的ctx是any类型\r\n\t\t\t\ttype: [String, null] as PropType<string | null>,\r\n\t\t\t},\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_page-props-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/props/page-props-composition.uvue","code":"```vue\n<template>\n\t<view class=\"p-10\">\n\t\t<text id=\"page-props-composition-title\" class=\"text\">{{title}}</text>\n\t\t<text id=\"page-props-composition-from\" class=\"text\">{{from}}</text>\n\t\t<text id=\"page-props-composition-number\" class=\"text\">{{number}}</text>\n\t\t<text id=\"page-props-composition-boolean\" class=\"text\">{{boolean}}</text>\n\t\t<text id=\"page-props-composition-object\" class=\"text\">{{JSON.stringify(object)}}</text>\n\t\t<text id=\"page-props-composition-array\" class=\"text\">{{JSON.stringify(array)}}</text>\n\t</view>\n</template>\n\n<script setup>\n\timport { setLifeCycleNum, state } from '@/store/index.uts'\n\t\n\tdefineProps({\n\t\tfrom: {\n\t\t\ttype: String,\n\t\t\tdefault: 'bbb'\n\t\t},\n\t\tnumber: {\n\t\t\ttype: Number,\n\t\t\tdefault: 1,\n\t\t\tvalidator(value: number) {\n\t\t\t\treturn value > 0\n\t\t\t}\n\t\t},\n\t\tboolean: {\n\t\t\ttype: Boolean,\n\t\t\trequired: true,\n\t\t},\n\t\tobject: {\n\t\t\ttype: UTSJSONObject,\n\t\t\tdefault: () => {\n\t\t\t\treturn {\n\t\t\t\t\ta: 'a',\n\t\t\t\t\tb: 'b'\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\tarray: {\n\t\t\ttype: Array as PropType<string[]>,\n\t\t\tdefault: () => {\n\t\t\t\treturn ['a','b','c']\n\t\t\t}\n\t\t}\n\t})\n\t\n\tonBeforeMount(() => {\n\t\tconsole.log('page-props-composition onBeforeMount')\n\t\t// 自动化测试\n\t\tsetLifeCycleNum(state.lifeCycleNum + 1)\n\t})\n\t\n\tonMounted(() => {\n\t\tconsole.log('page-props-composition mounted')\n\t\t// 自动化测试\n\t\tsetLifeCycleNum(state.lifeCycleNum + 1)\n\t})\n\t\n\tonBeforeUpdate(() => {\n\t\tconsole.log('page-props-composition beforeUpdate')\n\t\t// 自动化测试\n\t\tsetLifeCycleNum(state.lifeCycleNum + 1)\n\t})\n\t\n\tonUpdated(() => {\n\t\tconsole.log('page-props-composition updated')\n\t\t// 自动化测试\n\t\tsetLifeCycleNum(state.lifeCycleNum + 1)\n\t})\n\t\n\tonBeforeUnmount(() => {\n\t\tconsole.log('page-props-composition beforeUnmount')\n\t\t// 自动化测试\n\t\tsetLifeCycleNum(state.lifeCycleNum + 1)\n\t})\n\t\n\tonUnmounted(() => {\n\t\tconsole.log('page-props-composition unmounted')\n\t\t// 自动化测试\n\t\tsetLifeCycleNum(state.lifeCycleNum + 1)\n\t})\n\t// 组合式 API 且作为组件使用时会触发页面生命周期, 但监听到的是作为组件时所在页面的，而非它自身的\n\tonLoad((options: OnLoadOptions) => {\n\t\tconsole.log('page-props-composition onLoad options', options)\n\t\t// 自动化测试\n\t\tif (options['name'] == 'page-props') {\n\t\t\tsetLifeCycleNum(state.lifeCycleNum + 5)\n\t\t}\n\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\n\t})\n\tonPageShow(() => {\n\t\tconsole.log('page-props-composition onPageShow')\n\t\t// 自动化测试\n\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\n\t})\n\tonReady(() => {\n\t\tconsole.log('page-props-composition onReady')\n\t\t// 自动化测试\n\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\n\t})\n\tonHide(() => {\n\t\tconsole.log('page-props-composition onHide')\n\t\t// 自动化测试\n\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\n\t})\n\tonUnload(() => {\n\t\tconsole.log('page-props-composition onUnload')\n\t\t// 自动化测试\n\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\n\t})\n\n\tconst title = ref('page-props-composition')\n\n\t// 自动化测试\n  const pageSetLifeCycleNum = (num: number) => {\n    state.lifeCycleNum = num\n  }\n  const pageGetLifeCycleNum = () : number => {\n    return state.lifeCycleNum\n  }\n  defineExpose({\n\t\tpageSetLifeCycleNum,\n\t\tpageGetLifeCycleNum\n  })\n</script>\n\n<style>\n\t.text {\n\t\tfont-size: 18px;\n\t\tcolor: #8f8f94;\n    text-align: center;\n\t}\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/props/page-props-composition"},"props_page-props-options":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/props/page-props-options.uvue","code":"```vue\n<template>\n\t<view class=\"p-10\">\n\t\t<text id=\"page-props-options-title\" class=\"text\">{{title}}</text>\n\t\t<text id=\"page-props-options-from\" class=\"text\">{{from}}</text>\n\t\t<text id=\"page-props-options-number\" class=\"text\">{{number}}</text>\n\t\t<text id=\"page-props-options-boolean\" class=\"text\">{{boolean}}</text>\n\t\t<text id=\"page-props-options-object\" class=\"text\">{{JSON.stringify(object)}}</text>\n\t\t<text id=\"page-props-options-array\" class=\"text\">{{JSON.stringify(array)}}</text>\n\t</view>\n</template>\n\n<script>\n\timport { setLifeCycleNum, state } from '@/store/index.uts'\n\t\n\texport default {\n\t\tprops: {\n\t\t\tfrom: {\n\t\t\t\ttype: String,\n\t\t\t\tdefault: 'aaa'\n\t\t\t},\n\t\t\tnumber: {\n\t\t\t\ttype: Number,\n\t\t\t\tdefault: 1,\n\t\t\t\tvalidator(value: number) {\n\t\t\t\t\treturn value > 0\n\t\t\t\t}\n\t\t\t},\n\t\t\tboolean: {\n\t\t\t\ttype: Boolean,\n\t\t\t\trequired: true,\n\t\t\t},\n\t\t\tobject: {\n\t\t\t\ttype: UTSJSONObject,\n\t\t\t\tdefault: () => {\n\t\t\t\t\treturn {\n\t\t\t\t\t\ta: 1,\n\t\t\t\t\t\tb: 2\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\t\t\tarray: {\n\t\t\t\ttype: Array as PropType<number[]>,\n\t\t\t\tdefault: () => {\n\t\t\t\t\treturn [1, 2, 3]\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttitle: 'page-props-options'\n\t\t\t}\n\t\t},\n\t\tbeforeCreate() {\n\t\t\tconsole.log('page-props-options beforeCreate')\n\t\t\t// 自动化测试\n\t\t\tsetLifeCycleNum(state.lifeCycleNum + 1)\n\t\t},\n\t\tcreated() {\n\t\t\tconsole.log('page-props-options created')\n\t\t\t// 自动化测试\n\t\t\tsetLifeCycleNum(state.lifeCycleNum + 1)\n\t\t},\n\t\tbeforeMount(){\n\t\t\tconsole.log('page-props-options beforeMount')\n\t\t\t// 自动化测试\n\t\t\tsetLifeCycleNum(state.lifeCycleNum + 1)\n\t\t},\n\t\tmounted(){\n\t\t\tconsole.log('page-props-options mounted')\n\t\t\t// 自动化测试\n\t\t\tsetLifeCycleNum(state.lifeCycleNum + 1)\n\t\t},\n\t\tbeforeUnmount(){\n\t\t\tconsole.log('page-props-options beforeUnmount')\n\t\t\t// 自动化测试\n\t\t\tsetLifeCycleNum(state.lifeCycleNum + 1)\n\t\t},\n\t\tunmounted(){\n\t\t\tconsole.log('page-props-options unmounted')\n\t\t\t// 自动化测试\n\t\t\tsetLifeCycleNum(state.lifeCycleNum + 1)\n\t\t},\n\t\tonLoad(options: OnLoadOptions) {\n\t\t\tconsole.log('page-props-options onLoad options', options)\n\t\t\t// 自动化测试\n\t\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\n\t\t},\n\t\tonShow() {\n\t\t\tconsole.log('page-props-options onShow')\n\t\t\t// 自动化测试\n\t\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\n\t\t},\n\t\tonReady() {\n\t\t\tconsole.log('page-props-options onReady')\n\t\t\t// 自动化测试\n\t\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\n\t\t},\n\t\tonHide() {\n\t\t\tconsole.log('page-props-options onHide')\n\t\t\t// 自动化测试\n\t\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\n\t\t},\n\t\tonUnload() {\n\t\t\tconsole.log('page-props-options onUnload')\n\t\t\t// 自动化测试\n\t\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\n\t\t},\n\t\tmethods: {\n\t\t\t// 自动化测试\n\t\t\tpageSetLifeCycleNum(num: number) {\n\t\t\t\tsetLifeCycleNum(num)\n\t\t\t},\n\t\t\t// 自动化测试\n\t\t\tpageGetLifeCycleNum(): number {\n\t\t\t\treturn state.lifeCycleNum\n\t\t\t}\n\t\t}\n\t}\n</script>\n\n<style>\n\t.text {\n\t\tfont-size: 18px;\n\t\tcolor: #8f8f94;\n    text-align: center;\n\t}\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/props/page-props-options"},"props_page-props":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/props/page-props.uvue","code":"```vue\n<template>\n\t<view class=\"p-10\">\n\t\t<text>测试页面作为组件引入</text>\n\t\t<!-- #ifndef MP-ALIPAY -->\n\t\t<!-- #ifndef VUE3-VAPOR -->\n\t\t<PagePropsOptions class=\"page-props-options-component\" from=\"page\" :number='10' :boolean='true' :object='{c: 10, d: 20}' :array='[4,5,6]' />\n    <!-- #endif -->\n\t\t<PagePropsComposition class=\"page-props-composition-component\" from=\"page\" :number='10' :boolean='true' :object='{c: 10, d: 20}' :array='[4,5,6]' />\n\t\t<!-- #endif -->\n\t\t<!-- #ifndef VUE3-VAPOR -->\n\t\t<button id='go-options-page' class=\"mt-10\" @click=\"navigateToPage('/pages/component-instance/props/page-props-options?from=page-navigateTo')\">goOptionsPage</button>\n    <!-- #endif -->\n\t\t<button id=\"go-composition-page\" class=\"mt-10\" @click=\"navigateToPage('/pages/component-instance/props/page-props-composition?from=page-navigateTo')\">goCompositionPage</button>\n\t</view>\n</template>\n\n<script setup>\nimport { setLifeCycleNum, state } from '@/store/index.uts'\n// #ifndef MP-ALIPAY\n// #ifndef VUE3-VAPOR\n\timport PagePropsOptions from './page-props-options'\n// #endif\n\timport PagePropsComposition from './page-props-composition'\n// #endif\n\t\n\tconst navigateToPage = (url: string) => {\n\t\tuni.navigateTo({\n\t\t\turl\n\t\t})\n\t}\n\t// 自动化测试\n\tconst pageSetLifeCycleNum = (num : number) => {\n\t\tsetLifeCycleNum(num)\n\t}\n\t// 自动化测试\n\tconst pageGetLifeCycleNum = () : number => {\n\t\treturn state.lifeCycleNum\n\t}\n\n\tdefineExpose({\n\t\tpageSetLifeCycleNum,\n\t\tpageGetLifeCycleNum\n\t})\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/props/page-props"},"props_props-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/props/props-composition.uvue","code":"```vue\n<template>\r\n  <view class=\"page\">\r\n    <array-literal class=\"array-literal-component\" :str=\"str\" :num=\"num\" :bool=\"bool\" :obj=\"obj\" :arr=\"arr\" />\r\n    <object-type class=\"object-type-component\" str=\"str\" :num=\"num\" :bool=\"bool\" :obj=\"obj\" :arr=\"arr\" />\r\n    <same-name-prop-default-value class=\"same-name-prop-default-value-component\" />\r\n    <props-with-defaults class=\"props-with-defaults-component\" />\r\n    <!-- #ifdef APP-ANDROID -->\r\n    <reference-types class=\"reference-types-component\" :list=\"[1,2,3]\" />\r\n    <!-- #endif -->\r\n    <!-- #ifndef APP-ANDROID -->\r\n    <reference-types class=\"reference-types-component\" :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>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/props/props-composition"},"props_props-options":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/props/props-options.uvue","code":"```vue\n<template>\r\n  <view class=\"page\">\r\n    <array-literal class=\"array-literal-component\" :str=\"str\" :num=\"num\" :bool=\"bool\" :obj=\"obj\" :arr=\"arr\" />\r\n    <object-type class=\"object-type-component\" str=\"str\" :num=\"num\" :bool=\"bool\" :obj=\"obj\" :arr=\"arr\" />\r\n    <same-name-prop-default-value class=\"same-name-prop-default-value-component\" />\r\n    <props-with-defaults class=\"props-with-defaults-component\" />\r\n    <!-- #ifdef APP-ANDROID -->\r\n    <reference-types class=\"reference-types-component\" :list=\"[1,2,3]\" />\r\n    <!-- #endif -->\r\n    <!-- #ifndef APP-ANDROID -->\r\n    <reference-types class=\"reference-types-component\" :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>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/props/props-options"},"props_props-with-defaults":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/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\">\ntype CustomPropsTestType = {\n  a?: number\n}  \ninterface CustomProps {\n  msg: string\n  labels : string[]\n  test: CustomPropsTestType\n  testArr1?: CustomPropsTestType[]\n  testArr2?: Array<CustomPropsTestType>\n}\n\nconst props = withDefaults(defineProps<CustomProps>(), {\n  msg: 'hello',\n  labels: ():string[] => ['a', 'b'],\n  test: {} as CustomPropsTestType\n})\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/props/props-with-defaults"},"props_reactive-props-destructure-child":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/props/reactive-props-destructure-child.uvue","code":"```vue\n<script setup lang=\"uts\">\ntype Props = {\n  testId : string\n  count ?: number\n  label ?: string\n}\n\nconst {\n  testId,\n  count = 0,\n  label = 'default label'\n} = defineProps<Props>()\n\nconst watchedCount = ref<number>(-1)\n\nwatch(() => count, (value : number) => {\n  watchedCount.value = value\n}, {\n  immediate: true,\n  flush: 'sync'\n})\n</script>\n\n<template>\n  <view class=\"example-card\">\n    <view class=\"row\">\n      <text>count:</text>\n      <text :id=\"testId + '-count'\">{{ count }}</text>\n    </view>\n    <view class=\"row\">\n      <text>label:</text>\n      <text :id=\"testId + '-label'\">{{ label }}</text>\n    </view>\n    <view class=\"row\">\n      <text>watched count:</text>\n      <text :id=\"testId + '-watched-count'\">{{ watchedCount }}</text>\n    </view>\n  </view>\n</template>\n\n<style>\n.example-card {\n  padding: 12px;\n  margin-bottom: 12px;\n  border-width: 1px;\n  border-style: solid;\n  border-color: #dddddd;\n  border-radius: 6px;\n}\n\n.row {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  margin-bottom: 8px;\n}\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/props/reactive-props-destructure-child"},"props_reactive-props-destructure":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/props/reactive-props-destructure.uvue","code":"```vue\n<script setup lang=\"uts\">\nimport ReactivePropsDestructureChild from './reactive-props-destructure-child.uvue'\n\nconst count = ref<number>(1)\nconst label = ref<string>('initial label')\n\nfunction updateProps() {\n  count.value++\n  label.value = `updated label ${count.value}`\n}\n\ndefineExpose({\n  updateProps\n})\n</script>\n\n<template>\n  <view class=\"page\">\n    <text class=\"section-title\">响应式 Props 解构</text>\n    <ReactivePropsDestructureChild\n      test-id=\"custom\"\n      :count=\"count\"\n      :label=\"label\"\n    />\n    <ReactivePropsDestructureChild test-id=\"default\" />\n    <button id=\"update-props-btn\" @click=\"updateProps\">更新 Props</button>\n  </view>\n</template>\n\n<style>\n.section-title {\n  margin-bottom: 12px;\n  font-size: 18px;\n  font-weight: bold;\n}\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/props/reactive-props-destructure"},"props_reference-types-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/provide/provide-composition.uvue","code":"```vue\n<template>\n  <view class=\"page\">\n    <inject-comp class=\"component-for-inject\" />\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.com/dcloud/hello-uvue/blob/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 class=\"component-for-inject\" />\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.com/dcloud/hello-uvue/blob/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 class=\"component-for-inject\" />\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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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 class=\"mt-10\">\n      <text class=\"section-title\">getCurrentInstance() + $refs</text>\n    </view>\n    <view class=\"row\">\n      <text>$refs 获取 nodeRef:</text>\n      <text>{{ dataInfo.existRefByRefs }}</text>\n    </view>\n    <view class=\"row\">\n      <text>$refs 获取 childRef:</text>\n      <text>{{ dataInfo.existChildRefByRefs }}</text>\n    </view>\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  existRefByRefs: boolean\n  existChildRefByRefs: boolean\n}\n\nconst dataInfo = reactive<DataInfo>({\n  existRef: false,\n  existChildRef: false,\n  textItemsExpectNum: 3,\n  existTextItems: false,\n  existRefByRefs: false,\n  existChildRefByRefs: 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  // 通过 getCurrentInstance() 获取实例，然后通过 $refs 获取 ref\n  const instance = getCurrentInstance()!.proxy!\n  dataInfo.existRefByRefs = instance.$refs['nodeRef'] != null\n  dataInfo.existChildRefByRefs = instance.$refs['childRef'] != null\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.section-title {\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.com/dcloud/hello-uvue/blob/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"},"refs_use-template-ref":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/refs/use-template-ref.uvue","code":"```vue\n<script setup lang=\"uts\">\nimport {useTemplateRef} from 'vue'\n\nconst showTarget = ref<boolean>(true)\nconst targetElement = useTemplateRef<UniTextElement>('target')\nconst hasTarget = computed<boolean>(() : boolean => targetElement.value != null)\n\nfunction toggleTarget() {\n  showTarget.value = !showTarget.value\n}\n\ndefineExpose({\n  toggleTarget\n})\n</script>\n\n<template>\n  <view class=\"page\">\n    <text class=\"section-title\">useTemplateRef</text>\n    <view class=\"row\">\n      <text>target exists:</text>\n      <text id=\"has-template-ref\">{{ hasTarget }}</text>\n    </view>\n    <text v-if=\"showTarget\" id=\"template-ref-target\" ref=\"target\">template ref target</text>\n    <button id=\"toggle-template-ref-btn\" class=\"mt-10\" @click=\"toggleTarget\">切换目标节点</button>\n  </view>\n</template>\n\n<style>\n.section-title {\n  margin-bottom: 12px;\n  font-size: 18px;\n  font-weight: bold;\n}\n\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/use-template-ref"},"root_child-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/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 && !VUE3-VAPOR\n  rootStr.value = (instance.$root!.$exposed['str'] as Ref<string>).value as string\n  // #endif\n\t// #ifdef !APP-ANDROID || (APP-ANDROID && VUE3-VAPOR)\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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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 class=\"root-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!\r\n    // TODO: 确认 android 与 ios 的差异， ios 与标准 vue 相同\r\n    // #ifdef APP-ANDROID && !VUE3-VAPOR\r\n    rootStr.value = (instance.$root!.$exposed['str'] as Ref<string>).value as string\r\n    // #endif\r\n    // #ifdef !APP-ANDROID || (APP-ANDROID && VUE3-VAPOR)\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>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/root/root-composition"},"root_root-options":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/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 class=\"root-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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/setup-function/setup-function.uvue","code":"```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\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 id=\"component-foo\">\n        <text class=\"mt-10\" id=\"default-slot-in-foo\">default slot in Foo</text>\n      </Foo>\n    </view>\n    <!-- #ifdef APP && !VUE3-VAPOR -->\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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/slots/slot-options"},"slots_slots-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/slots/slots-composition.uvue","code":"```vue\n<template>\n  <view class=\"page\">\n    <SlotComp id=\"slot-comp\">\n      <template v-slot:header>\n        <text>header</text>\n      </template>\n      <template v-slot:default>\n        <text>default</text>\n      </template>\n      <template v-slot:footer>\n        <text>footer</text>\n      </template>\n    </SlotComp>\n  </view>\n</template>\n\n<script setup lang=\"uts\">\n  import SlotComp from './slot-composition.uvue'\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/slots/slots-composition"},"slots_slots-options":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/slots/slots-options.uvue","code":"```vue\n<template>\n  <view class=\"page\">\n    <SlotComp id=\"slot-comp\">\n      <template v-slot:header>\n        <text>header</text>\n      </template>\n      <template v-slot:default>\n        <text>default</text>\n      </template>\n      <template v-slot:footer>\n        <text>footer</text>\n      </template>\n    </SlotComp>\n  </view>\n</template>\n\n<script lang=\"uts\">\n  import SlotComp from './slot-options.uvue'\n\n  export default {\n    components: {\n      SlotComp\n    }\n  }\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/component-instance/slots/slots-options"},"mixins_components_ChildMixinComp1":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/alpha/pages/directive/v-bind/v-bind-composition.uvue","code":"```vue\n<template>\r\n<!-- #ifdef APP && !VUE3-VAPOR -->\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>\n    <view class=\"mb-10 p-10\">\n        <text id=\"bind-raw-object-style\" :style=\"rawObjectStyle\">rawObjectStyle</text>\n    </view>\n    <!-- 目前仅android平台在内部重新调用了normalizeStyle，其他端暂时没有，这应该是vue的bug -->\n    <view class=\"mb-10 p-10\">\n        <text id=\"bind-raw-array-style\" :style=\"rawArrayStyle\">rawArrayStyle</text>\n    </view>\r\n\r\n    <!-- v-bind props -->\r\n    <Foo class=\"foo-props\" :title=\"dataInfo.fooProps.title\" :num=\"dataInfo.fooProps.num\" :obj=\"dataInfo.fooProps.obj\" />\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 && !VUE3-VAPOR -->\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  })\n  \n  const rawObjectStyle = {\n      width: '100%',\n      height: '30px',\n      'background-color': 'red'\n  }\n  \n  const rawArrayStyle = [\n      {\n        width: '100%',\n        height: '30px'\n      },\n      {\n        'background-color': 'red'\n      }\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\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-bind/v-bind-composition"},"v-bind_v-bind-options":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/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>\n    <view class=\"mb-10 p-10\">\n        <text id=\"bind-raw-object-style\" :style=\"rawObjectStyle\">rawObjectStyle</text>\n    </view>\n    <view class=\"mb-10 p-10\">\n        <text id=\"bind-raw-array-style\" :style=\"rawArrayStyle\">rawArrayStyle</text>\n    </view>\r\n\r\n    <!-- v-bind props -->\r\n    <Foo class=\"foo-props\" :title=\"dataInfo.fooProps.title\" :num=\"dataInfo.fooProps.num\" :obj=\"dataInfo.fooProps.obj\" />\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        },\n        rawObjectStyle: {\n            width: '100%',\n            height: '30px',\n            'background-color': 'red'\n        },\n        rawArrayStyle: [\n            {\n              width: '100%',\n              height: '30px'\n            },\n            {\n              'background-color': 'red'\n            }\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\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-bind/v-bind-options"},"v-for_v-for-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/directive/v-for/v-for-composition.uvue","code":"```vue\n<template>\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\r\n  <scroll-view style=\"flex: 1\">\r\n    <!-- #endif -->\r\n    <view class=\"page\">\r\n      <text class=\"bold mb-10\">v-for number</text>\r\n      <view class=\"mb-10\" v-for=\"item in 3\" :key=\"item\">\r\n        <text :id=\"`number-${item}`\">{{ item }}</text>\r\n      </view>\r\n      \r\n      <view class=\"mb-10\" v-for=\"item in utsNumber\" :key=\"item\">\r\n        <text :id=\"`uts-number-${item}`\">{{ item }}</text>\r\n      </view>\r\n\r\n      <view class=\"bold mb-10\">v-for object</view>\r\n      <view\r\n        v-for=\"(value, key) in object\"\r\n        :key=\"key\"\r\n        class=\"mb-10 flex justify-between flex-row\">\r\n        <text :id=\"key\">{{ key }}</text>\r\n        <text :id=\"value\">{{ value }}</text>\r\n      </view>\r\n\r\n      <view class=\"bold mb-10\">v-for & v-if list items</view>\r\n      <view\r\n        id=\"v-for-v-if-list-items\"\r\n        v-for=\"item in listItems\"\r\n        :key=\"item.name\">\r\n        <template v-if=\"item.show\">\r\n          <view class=\"mb-10 flex justify-between flex-row\">\r\n            <text :id=\"item.name\">{{ item.name }}</text>\r\n            <text @click=\"item.count++\" :id=\"`v-if-${item.name}-count`\">{{\r\n              item.count\r\n            }}</text>\r\n          </view>\r\n          <template v-for=\"child in item.items\">\r\n            <view\r\n              v-if=\"child.show\"\r\n              :key=\"child.name\"\r\n              class=\"mb-10 flex justify-between flex-row\">\r\n              <text :id=\"child.name\">{{ child.name }}</text>\r\n              <text @click=\"child.count++\" :id=\"`v-if-${child.name}-count`\">{{\r\n                child.count\r\n              }}</text>\r\n            </view>\r\n          </template>\r\n        </template>\r\n      </view>\r\n\r\n      <view class=\"bold mb-10\">v-for & v-show list items</view>\r\n      <view\r\n        id=\"v-for-v-if-list-items\"\r\n        v-for=\"item in listItems\"\r\n        :key=\"item.name\"\r\n        v-show=\"item.show\">\r\n        <view class=\"mb-10 flex justify-between flex-row\">\r\n          <text :id=\"item.name\">{{ item.name }}</text>\r\n          <text @click=\"item.count++\" :id=\"`v-show-${item.name}-count`\">{{\r\n            item.count\r\n          }}</text>\r\n        </view>\r\n        <view\r\n          v-for=\"child in item.items\"\r\n          v-show=\"child.show\"\r\n          :key=\"child.name\"\r\n          class=\"mb-10 flex justify-between flex-row\">\r\n          <text :id=\"child.name\">{{ child.name }}</text>\r\n          <text @click=\"child.count++\" :id=\"`v-show-${child.name}-count`\">{{\r\n            child.count\r\n          }}</text>\r\n        </view>\r\n      </view>\r\n\r\n      <view\r\n        class=\"mb-10 flex justify-between flex-row\"\r\n        v-for=\"item in mapList\"\r\n        :key=\"item[0]\">\r\n        <text>{{ item[0] }}</text>\r\n        <text :id=\"item[0]\">{{ item[1] }}</text>\r\n      </view>\r\n\r\n      <view class=\"mb-10\" v-for=\"(item, index) in setList\" :key=\"index\">\r\n        <text :id=\"`set-value-${index + 1}`\">{{ item }}</text>\r\n      </view>\r\n\r\n      <view class=\"bold mb-10\">v-for UTSJSONObject</view>\r\n      <view\r\n        v-for=\"(value, key) in utsJSONObject\"\r\n        :key=\"key\"\r\n        class=\"mb-10 flex justify-between flex-row\">\r\n        <text :id=\"key\">{{ key }}</text>\r\n        <text :id=\"value\">{{ value }}</text>\r\n      </view>\r\n    </view>\r\n    <!-- #ifdef APP && !VUE3-VAPOR -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\ntype VForObject = {\r\n  key1 : string\r\n  key2 : string\r\n  key3 : string\r\n}\r\n\r\ntype ListItem = {\r\n  name: string\r\n  count : number\r\n  show: boolean\r\n  items?: ListItem[]\r\n}\r\n\r\n// 可通过泛型指定类型\r\nconst object = reactive<VForObject>({ key1: 'value1', key2: 'value2', key3: 'value3' })\r\nconst listItems = ref<ListItem[]>([\r\n  { name: '1',\r\n    count: 0,\r\n    show: true,\r\n    items:[\r\n      { name: '1-1', count: 0, show: false },\r\n      { name: '1-2', count: 0, show: true },\r\n    ]\r\n  },\r\n  { name: '2',\r\n    count: 0,\r\n    show: true,\r\n    items:[\r\n      { name: '2-1', count: 0, show: true },\r\n      { name: '2-2', count: 0, show: false },\r\n    ]\r\n  },\r\n  { name: '3',\r\n    count: 0,\r\n    show: false,\r\n    items:[\r\n      { name: '3-1', count: 0, show: true },\r\n      { name: '3-2', count: 0, show: true },\r\n    ]\r\n  },\r\n])\r\n\r\nconst mapList = new Map<string, string>([\r\n  ['map-key-1', 'map value 1'],\r\n  ['map-key-2', 'map value 2'],\r\n  ['map-key-3', 'map value 3'],\r\n])\r\n\r\nconst setList = new Set<string>(['set value 1', 'set value 2', 'set value 3'])\r\n\r\nconst utsJSONObject = reactive({ utsKey1: 'UTSJSONObject-value1', utsKey2: 'UTSJSONObject-value2', utsKey3: 'UTSJSONObject-value3' })\r\n\r\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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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_child":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/directive/v-if/child.uvue","code":"```vue\n<template>\n  <view class=\"child-component\">\n    <text>Child Component</text>\n  </view>\n</template>\n\n<script setup lang=\"uts\">\n</script>\n\n<style>\n.child-component {\n  padding: 10px;\n  background-color: #f0f0f0;\n  border-radius: 5px;\n}\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-if/child"},"v-if_v-if-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/directive/v-if/v-if-composition.uvue","code":"```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view style=\"flex: 1\">\n  <!-- #endif -->\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\n        <!-- 测试标题 -->\n        <view class=\"mt-10\">\n          <text class=\"section-title\">多层嵌套v-if测试</text>\n        </view>\n\n        <!-- view 普通版本 -->\n        <view class=\"mt-10\">\n          <text class=\"test-label\">1. view 普通版本 </text>\n          <view class=\"test-item\" v-if=\"viewNormalChild1\">\n            <view v-if=\"viewNormalChild1\" id=\"view-normal-child1\">\n              <text>view二层嵌套内容</text>\n              <view v-if=\"viewNormalChild2\" id=\"view-normal-child2\">\n                <text>view三层嵌套内容</text>\n              </view>\n              <button id=\"toggle-view-normal-child2\" @click=\"viewNormalChild2 = !viewNormalChild2\">内层切换显示</button>\n            </view>\n          </view>\n          <button id=\"toggle-view-normal-child1\" @click=\"viewNormalChild1 = !viewNormalChild1\">外层切换显示</button>\n        </view>\n\n        <!-- view 拍平版本 -->\n        <view class=\"mt-10\">\n          <text class=\"test-label\">2. view 拍平版本 </text>\n          <view class=\"test-item\" v-if=\"viewFlattenChild1\">\n            <view flatten v-if=\"viewFlattenChild1\" id=\"view-flatten-child1\">\n              <view flatten v-if=\"viewFlattenChild1\">\n                <text>view拍平三层嵌套内容（应该能消失）</text>\n              </view>\n            </view>\n          </view>\n          <button id=\"toggle-view-flatten-child1\" @click=\"viewFlattenChild1 = !viewFlattenChild1\">\n            切换显示\n          </button>\n        </view>\n\n        <!-- text 普通版本 -->\n        <view class=\"mt-10\">\n          <text class=\"test-label\">3. text 普通版本 </text>\n          <view class=\"test-item\">\n            <text v-if=\"textNormalChild1\">\n              <text v-if=\"textNormalChild1\" id=\"text-normal-child1\">text二层嵌套内容（应该能消失）</text>\n            </text>\n          </view>\n          <button id=\"toggle-text-normal-child1\" @click=\"textNormalChild1 = !textNormalChild1\">\n            切换显示\n          </button>\n        </view>\n\n        <!-- text 拍平版本 -->\n        <view class=\"mt-10\">\n          <text class=\"test-label\">4. text 拍平版本 </text>\n          <view flatten class=\"test-item\">\n            <text flatten v-if=\"textFlattenChild1\">\n              <text flatten v-if=\"textFlattenChild1\" id=\"text-flatten-child1\">text拍平二层嵌套内容（应该能消失）</text>\n            </text>\n          </view>\n          <button id=\"toggle-text-flatten-child1\" @click=\"textFlattenChild1 = !textFlattenChild1\">\n            切换显示\n          </button>\n        </view>\n\n        <!-- image 普通版本 -->\n        <view class=\"mt-10\">\n          <text class=\"test-label\">5. image 普通版本 </text>\n          <view class=\"test-item\">\n              <image v-if=\"imageNormalChild1\" id=\"image-normal-child1\" src=\"/static/logo.png\" class=\"test-image\"></image>\n          </view>\n          <button id=\"toggle-image-normal-child1\" @click=\"imageNormalChild1 = !imageNormalChild1\">\n            切换显示\n          </button>\n        </view>\n\n        <!-- image 拍平版本 -->\n        <view class=\"mt-10\">\n          <text class=\"test-label\">6. image 拍平版本（多层嵌套v-if）</text>\n          <view flatten class=\"test-item\">\n              <image flatten v-if=\"imageFlattenChild1\" id=\"image-flatten-child1\" src=\"/static/logo.png\" class=\"test-image\"></image>\n          </view>\n          <button id=\"toggle-image-flatten-child1\" @click=\"imageFlattenChild1 = !imageFlattenChild1\">\n            切换显示\n          </button>\n        </view>\n        \n        <!-- scroll-view：动态切换 -->\n        <view class=\"mt-10\">\n          <text class=\"test-label\">8. scroll-view（动态v-if）</text>\n          <view class=\"test-item\">\n            <scroll-view v-if=\"scrollViewChild1\" id=\"scroll-view-child1\" class=\"scroll-view-test\">\n              <text>scroll-view内容1（应该能消失）</text>\n              <view><text>scroll-view内容2（应该能消失）</text></view>\n            </scroll-view>\n            <button id=\"toggle-scroll-view-child1\" @click=\"scrollViewChild1 = !scrollViewChild1\">\n              切换scroll-view显示\n            </button>\n          </view>\n        </view>\n\n        <!-- 自定义 child 组件 -->\n        <view class=\"mt-10\">\n          <text class=\"test-label\">9. child 组件（子child动态v-if普通版本➕拍平版本）</text>\n          <view class=\"test-item\">\n            <child v-if=\"childComponent1\" id=\"child-component1\"></child>\n            <view flatten>\n                <child v-if=\"childComponent1\" id=\"child-component2\" flatten></child>\n            </view>\n            <button id=\"toggle-child-component1\" @click=\"childComponent1 = !childComponent1\">\n              切换child组件显示\n            </button>\n          </view>\n        </view>\n\n      </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\nimport child from './child.uvue'\n\n// 原有变量\nconst show = ref(true)\nconst num = ref(1)\n\n// view 测试变量\nconst viewNormalChild1 = ref(true)\nconst viewNormalChild2 = ref(true)\nconst viewFlattenChild1 = ref(true)\n\n// text 测试变量\nconst textNormalChild1 = ref(true)\nconst textFlattenChild1 = ref(true)\n\n// image 测试变量\nconst imageNormalChild1 = ref(true)\nconst imageFlattenChild1 = ref(true)\n\n// scroll-view 测试变量\nconst scrollViewChild1 = ref(true)\n\n// child 组件测试变量\nconst childComponent1 = ref(true)\n\nconst changeNum = () => {\n  if(num.value<3) {\n    num.value++\n  } else {\n    num.value = 1\n  }\n}\n</script>\n\n<style>\n.section-title {\n  font-size: 16px;\n  font-weight: bold;\n  margin-bottom: 10px;\n}\n\n.test-label {\n  font-size: 14px;\n  color: #666;\n  margin-bottom: 5px;\n}\n\n.test-item {\n  padding: 10px;\n  background-color: #f5f5f5;\n  border-radius: 5px;\n}\n\n.test-image {\n  width: 50px;\n  height: 50px;\n}\n\n.scroll-view-test {\n  height: 100px;\n  background-color: #e0e0e0;\n  padding: 10px;\n}\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-if/v-if-composition"},"v-if_v-if-options":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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_ArrayModelChild":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/directive/v-model/ArrayModelChild.uvue","code":"```vue\n<template>\n  <view class=\"array-model-container\">\n    <text id=\"array-model-value\">{{ modelValue.length }}</text>\n    <button class=\"btn\" id=\"array-model-btn\" @click=\"addItem\">add item</button>\n  </view>\n</template>\n\n<script setup lang=\"uts\">\nconst props = defineProps({\n  modelValue: {\n    type: Array,\n    default: () => [] as string[]\n  }\n})\n\nconst emit = defineEmits(['update:modelValue'])\n\nconst addItem = () => {\n  const list = props.modelValue as string[]\n  const newVal = [...list, 'Item ' + (list.length + 1)]\n  emit('update:modelValue', newVal)\n}\n</script>\n\n<style>\n.array-model-container {\n  border: 1px solid #ccc;\n  padding: 10px;\n  margin: 10px 0;\n  border-radius: 4px;\n}\n.btn {\n  margin-top: 10px;\n}\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-model/ArrayModelChild"},"v-model_Foo-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/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    <view class=\"mb-10 flex justify-between flex-row\">\n      <text>defineModel utsObj.value:</text>\n      <text id=\"model-uts-obj-value-text\">{{ utsObjModelValue }}</text>\n    </view>\n    <view class=\"mb-10 flex justify-between flex-row\">\n      <text>defineModel typeObj.value:</text>\n      <text id=\"model-type-obj-value-text\">{{ typeObjModelValue }}</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 utsObjModelValue = defineModel('utsObjModelValue', { type: String })\nconst typeObjModelValue = defineModel('typeObjModelValue', { type: String })\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  utsObjModelValue.value += '1'\n  typeObjModelValue.value += '1'\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-model/Foo-composition"},"v-model_Parent":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/directive/v-model/Parent.uvue","code":"```vue\n<template>\r\n    <Son class=\"son-component\" 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>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-model/Parent"},"v-model_Son":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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      v-model:utsObjModelValue=\"utsObj['modelValue']\"\n      v-model:typeObjModelValue=\"typeObj.modelValue\"\n      @update:modelValue=\"handleModelValueUpdate\"\n      @update:msg=\"handleModelMsgUpdate\"\n       />\n    <input class=\"mb-10 input\" id=\"model-value-input\" v-model=\"str\" @input=\"onInput\" />\n    <input class=\"mb-10 input\" id=\"model-msg-input\" v-model=\"msg\" />\n    <input class=\"mb-10 input\" id=\"model-uts-obj-value-input\" v-model=\"utsObj['modelValue']\" />\n    <input class=\"mb-10 input\" id=\"model-type-obj-value-input\" v-model=\"typeObj.modelValue\" />\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 class=\"mb-10 flex justify-between flex-row\">\n      <text>arrayValue:</text>\n      <text id=\"array-value\">{{ arrayValue.region }}</text>\n    </view>\n    <ArrayModelChild v-model=\"arrayValue.region\"></ArrayModelChild>\n  </view>\n</template>\n\n<script setup lang=\"uts\">\nimport Foo from './Foo-composition.uvue'\nimport Parent from './Parent.uvue'\nimport ArrayModelChild from './ArrayModelChild.uvue'\nimport { VModelObj } from './types.uts'\n\nconst str = ref('str')\nconst msg = ref('msg')\nconst strArr = ref<string[]>(['0'])\nconst numArr = ref<number[]>([0])\nconst value = ref(\"nested\");\nconst arrayValue = reactive({\n\tregion: [] as string[]\n});\nconst handleModelValueUpdateRes = ref('')\nconst handleModelValueUpdate = (val : string) => {\n  handleModelValueUpdateRes.value = val\n}\nconst handleModelMsgUpdateRes = ref('')\nconst handleModelMsgUpdate = (val : string) => {\n  handleModelMsgUpdateRes.value = val\n}\n\nconst utsObj = reactive({ modelValue: 'utsObj.value' })\nconst typeObj = reactive({ modelValue: 'typeObj.value' } as VModelObj)\n\nfunction onInput(){\n  // noop\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.com/dcloud/hello-uvue/blob/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\" @input=\"onInput\" />\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 id=\"parent-component\" v-model=\"value\"></Parent>\n    <Parent v-model=\"utsObj['modelValue']\"></Parent>\n    <Parent v-model=\"typeObj.modelValue\"></Parent>\n    <Parent v-model=\"typeObj.modelValue as string\"></Parent>\n  </view>\n</template>\n\n<script lang=\"uts\">\nimport Parent from './Parent.uvue'\nimport { VModelObj } from './types.uts'\nexport default {\n  data(){\n    return {\n      str: 'str',\n      num: 1,\n      strForTrim: ' abc ',\n      value: 'nested',\n      utsObj: {\n        modelValue: 'utsObj.value'\n      },\n      typeObj: {\n        modelValue: 'typeObj.value'\n      } as VModelObj\n    }\n  },\n  components: {\n      Parent\n  },\n  methods: {\n    onInput(){\n      // noop\n    }\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.com/dcloud/hello-uvue/blob/alpha/pages/directive/v-on/v-on-composition.uvue","code":"```vue\n<template>\r\n  <view class=\"page\">\r\n    <text class=\"bold mb-10\">下方按钮点击累加 count</text>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>count:</text>\r\n      <text id=\"count\">{{ count }}</text>\r\n    </view>\r\n    <button class=\"mb-10 btn\" @click=\"handleClick\">\r\n      @click=\"handleClick\" 缩写\r\n    </button>\r\n    <button class=\"mb-10 btn\" v-on:click=\"handleClick\">\r\n      v-on:click=\"handleClick\" 方法处理函数\r\n    </button>\r\n    <button class=\"mb-10 btn\" v-on:click=\"count++\">\r\n      v-on:click=\"count++\" 内联事件\r\n    </button>\r\n    <button class=\"mb-10 btn\" v-on:click=\"handleClick($event as MouseEvent)\">\r\n      v-on:click=\"handleClick($event as MouseEvent)\"\r\n      内联声明，注意要显式声明$event的类型\r\n    </button>\r\n    <!-- #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>\r\n    <!-- #endif -->\r\n    <!-- TODO: ios 不支持 -->\r\n    <!-- #ifndef APP-IOS || MP || APP-HARMONY -->\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    <button class=\"mb-10\" id=\"btn-prevent\" @touchstart.prevent=\"handleTouchstart\" @click=\"handleClick\">@touch prevent</button>\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\ntype BtnPreventRect = {\r\n  value: DOMRect | null\r\n}\r\n\r\nlet btnPreventRect = reactive({\r\n  value: null\r\n} as BtnPreventRect)\r\n// #ifdef APP\r\nonReady(() => {\r\n  const btnPrevent = uni.getElementById(\"btn-prevent\")\r\n  btnPreventRect.value = btnPrevent!.getBoundingClientRect()\r\n  btnPreventRect.value!.y += uni.getSystemInfoSync().safeArea.top + 44\r\n})\r\n// #endif\r\n\r\nconst handleTouchstart = () => {\r\n  console.log('handleTouchstart')\r\n}\r\n\r\nconst handleClick = (e : MouseEvent) => {\r\n  count.value++\r\n  console.log('handleClick', e)\r\n}\r\n\r\ndefineExpose({\r\n  btnPreventRect\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.com/dcloud/hello-uvue/blob/alpha/pages/directive/v-on/v-on-options.uvue","code":"```vue\n<template>\r\n  <view class=\"page\">\r\n    <text class=\"bold mb-10\">下方按钮点击累加 count</text>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>count:</text>\r\n      <text id=\"count\">{{ count }}</text>\r\n    </view>\r\n    <button class=\"mb-10 btn\" @click=\"handleClick\">@click=\"handleClick\" 缩写</button>\r\n    <button class=\"mb-10 btn\" v-on:click=\"handleClick\">\r\n      v-on:click=\"handleClick\" 方法处理函数\r\n    </button>\r\n    <button class=\"mb-10 btn\" v-on:click=\"count++\">\r\n      v-on:click=\"count++\" 内联事件\r\n    </button>\r\n    <button class=\"mb-10 btn\" v-on:click=\"handleClick($event as MouseEvent)\">\r\n      v-on:click=\"handleClick($event as MouseEvent)\"\r\n      内联声明，注意要显式声明$event的类型\r\n    </button>\r\n    <!-- #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>\r\n    <!-- #endif -->\r\n    <!-- TODO: ios 不支持 -->\r\n    <!-- #ifndef APP-IOS || MP || APP-HARMONY -->\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    <button class=\"mb-10\" id=\"btn-prevent\" @touchstart.prevent=\"handleTouchstart\" @click=\"handleClick\">@touch prevent</button>\r\n  </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\ntype BtnPreventRect = {\r\n  value: DOMRect | null\r\n}\r\n  \r\nexport default {\r\n  data() {\r\n    return {\r\n      count: 0,\r\n      event: 'click',\r\n      btnPreventRect: {\r\n        value: null as DOMRect | null\r\n      } as BtnPreventRect\r\n    }\r\n  },\r\n\t// #ifdef APP\r\n  onReady(){\r\n    const btnPrevent = uni.getElementById(\"btn-prevent\")\r\n    console.log('btnPrevent', btnPrevent);\r\n    this.btnPreventRect.value = btnPrevent?.getBoundingClientRect()\r\n    console.log('btnPreventRect', this.btnPreventRect.value);\r\n    this.btnPreventRect.value!.y += uni.getSystemInfoSync().safeArea.top + 44\r\n  },\r\n\t// #endif\r\n  methods: {\r\n    handleTouchstart(){\r\n      console.log('handleTouchstart')\r\n    },\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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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>\r\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.com/dcloud/hello-uvue/blob/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    <template v-for=\"item in 2\">\n      <slot name=\"withFor\" :item=\"item\"></slot>\n    </template>\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.com/dcloud/hello-uvue/blob/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    <template v-for=\"item in 2\">\n      <slot name=\"withFor\" :item=\"item\"></slot>\n    </template>\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_issue-29737":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/directive/v-slot/issue-29737.uvue","code":"```vue\n<template>\n  <scroll-view class=\"page\" direction=\"vertical\">\n    <view class=\"header\">\n      <text class=\"title\">#29737 最小复现</text>\n      <text class=\"desc\">点击“打开懒渲染内容”。弹层里应该看到绿色“正常”和 JSON；如果内容为空，就是复现旧问题。</text>\n    </view>\n\n    <view class=\"card\">\n      <text class=\"case-title\">components easycom 最小 picker + 跨组件懒挂载</text>\n      <text class=\"case-desc\">判断标准：绿色“正常”表示父级 item 插槽首次懒渲染成功；内容为空表示旧 bug 复现。当前保留跨组件默认插槽懒挂载这一必要条件。</text>\n      <x-picker-selected\n        id=\"x-picker-selected\"\n        ref=\"pickerRef\"\n        label-key=\"name\"\n        :lazyContent=\"true\"\n        :list=\"list\"\n      >\n        <button id=\"open-panel\">打开懒渲染内容</button>\n        <template v-slot:item=\"{ item }\">\n          <Issue29737Text text-id=\"slot-pass-text\" color=\"#18a058\" font-size=\"18\" line-height=\"1.2\" :lines=\"3\">\n            正常：{{ JSON.stringify(item) }}\n          </Issue29737Text>\n        </template>\n      </x-picker-selected>\n    </view>\n  </scroll-view>\n</template>\n\n<script setup lang=\"uts\">\n  import Issue29737Text from '@/components/issue-29737/Issue29737Text.uvue'\n\n  const list = ref<UTSJSONObject[]>([\n    { id: 29737, lid: '1001', name: '深圳市创明展览设计有限公司' }\n  ])\n  const pickerRef = ref<ComponentPublicInstance | null>(null)\n\n  const openPanel = () => {\n    pickerRef.value?.$callMethod('open')\n  }\n\n  defineExpose({\n    openPanel\n  })\n</script>\n\n<style>\n  .page {\n    flex: 1;\n    padding: 12px;\n  }\n\n  .header {\n    margin-bottom: 12px;\n  }\n\n  .title {\n    color: #111111;\n    font-size: 18px;\n    font-weight: bold;\n    margin-bottom: 8px;\n  }\n\n  .desc {\n    color: #666666;\n    font-size: 13px;\n    margin-bottom: 12px;\n  }\n\n  .card {\n    padding: 12px;\n    border-width: 1px;\n    border-style: solid;\n    border-color: #dddddd;\n    border-radius: 8px;\n  }\n\n  .case-title {\n    color: #111111;\n    font-size: 16px;\n    font-weight: bold;\n    margin-bottom: 6px;\n  }\n\n  .case-desc {\n    color: #666666;\n    font-size: 12px;\n    margin-bottom: 10px;\n  }\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-slot/issue-29737"},"v-slot_v-slot-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/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>\n      <template #withFor=\"{ item }\">\n        <view class=\"mb-10 flex justify-between flex-row\">\n          <text>v-for slot item:</text>\n          <text :id=\"`slot-for-${item}`\">{{ item }}</text>\n        </view>\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.com/dcloud/hello-uvue/blob/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      <template #withFor=\"{ item }\">\n        <view class=\"mb-10 flex justify-between flex-row\">\n          <text>v-for slot item:</text>\n          <text :id=\"`slot-for-${item}`\">{{ item }}</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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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"},"v-bind_dataset_DatasetChild":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/directive/v-bind/dataset/DatasetChild.uvue","code":"```vue\n<template>\n  <view\n    id=\"dataset-child-root\"\n    class=\"custom-child\"\n    data-type=\"custom-own\"\n    data-child-only=\"child\"\n    :data-shared=\"childShared\"\n    :data-child-count=\"childCount\"\n  >\n    <text class=\"custom-title\">点击自定义组件根节点</text>\n    <text class=\"custom-desc\">验证 fallthrough dataset 合并与事件 dataset</text>\n  </view>\n</template>\n\n<script setup lang=\"uts\">\nconst childShared = ref('child-shared')\nconst childCount = ref(10)\n</script>\n\n\n<style>\n.custom-child {\n  margin-top: 10px;\n  padding: 10px;\n  border-width: 1px;\n  border-style: solid;\n  border-color: #cfded4;\n  border-radius: 8px;\n  background-color: #f9fffb;\n}\n.custom-title {\n  font-weight: bold;\n}\n.custom-desc {\n  margin-top: 4px;\n  color: #647067;\n}\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-bind/dataset/DatasetChild"},"v-bind_dataset_dataset-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/directive/v-bind/dataset/dataset-composition.uvue","code":"```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  <scroll-view style=\"flex: 1\">\n  <!-- #endif -->\n  <view class=\"page\">\n    <view\n      id=\"dataset-observer-target\"\n      class=\"summary-card\"\n      data-type=\"observer\"\n      data-observer=\"intersection\"\n    >\n      <text class=\"summary-title\">dataset 全链路验证</text>\n      <text class=\"summary-tip\">覆盖元素直读、Map API、动态更新、自定义组件透传、事件对象和 selector API。</text>\n      <text class=\"summary-tip\">绿色结果区展示当前页面读到的实际 dataset，异常时可以直接从界面定位是哪条链路失败。</text>\n    </view>\n\n    <view class=\"section control-section\">\n      <text class=\"section-title\">操作</text>\n      <button id=\"update-dataset-btn\" class=\"primary-button\" @click=\"updateDataset\">更新动态 dataset</button>\n      <text class=\"hint\">点击下方元素可刷新事件对象 dataset；input 输入时会触发 input 事件。</text>\n    </view>\n\n    <view class=\"section\">\n      <text class=\"section-title\">元素 dataset</text>\n\n      <input\n        id=\"dataset-input\"\n        class=\"dataset-item input\"\n        placeholder=\"输入内容查看 input 事件 dataset\"\n        data-type=\"input\"\n        :data-count=\"count\"\n        @input=\"recordInputEvent\"\n      />\n\n      <DatasetChild\n        data-type=\"custom-fallthrough\"\n        data-parent-only=\"parent\"\n        :data-count=\"count\"\n        :data-shared=\"parentShared\"\n        @click=\"recordEvent('custom', $event as MouseEvent)\"\n      />\n\n      <view\n        id=\"dataset-view\"\n        class=\"dataset-item\"\n        data-type=\"view\"\n        :data-count=\"count\"\n        :data-enabled=\"enabled\"\n        :data-complex=\"complexObj\"\n        :data-array=\"complexArray\"\n        @click=\"recordEvent('view', $event as MouseEvent)\"\n      >\n        <text class=\"item-title\">view</text>\n        <text class=\"item-desc\">动态值、复杂对象、数组</text>\n      </view>\n\n      <text\n        id=\"dataset-text\"\n        class=\"dataset-item\"\n        data-type=\"text\"\n        :data-count=\"count\"\n        @click=\"recordEvent('text', $event as MouseEvent)\"\n      >\n        text：点击查看事件 dataset\n      </text>\n\n      <button\n        id=\"dataset-button\"\n        class=\"secondary-button\"\n        data-type=\"button\"\n        :data-null-value=\"nullValue\"\n        :data-undefined-value=\"undefinedValue\"\n        @click=\"recordEvent('button', $event as MouseEvent)\"\n      >\n        button：null / undefined\n      </button>\n    </view>\n\n    <view class=\"section\">\n      <text class=\"section-title\">API dataset</text>\n      <button class=\"secondary-button\" @click=\"refreshApiDatasetTexts\">刷新 API dataset 结果</button>\n      <view\n        id=\"dataset-query-target\"\n        class=\"dataset-item api-item\"\n        data-type=\"query\"\n        data-query=\"selector\"\n        data-get=\"conflict-get\"\n        data-set=\"conflict-set\"\n        data-has=\"conflict-has\"\n        data-delete=\"conflict-delete\"\n        data-clear=\"conflict-clear\"\n      >\n        <text class=\"item-title\">selector query</text>\n        <text class=\"item-desc\">同时验证 get/set/has/delete/clear 冲突 key</text>\n      </view>\n\n      <scroll-view\n        id=\"dataset-scroll-target\"\n        class=\"scroll-box\"\n        scroll-y=\"true\"\n        data-type=\"scroll\"\n        data-scroll=\"offset\"\n      >\n        <view class=\"scroll-content\">scrollOffset dataset 目标</view>\n      </scroll-view>\n\n      <view\n        class=\"dataset-item api-item\"\n        data-type=\"observer\"\n        data-observer=\"intersection\"\n      >\n        <text class=\"item-title\">intersection observer</text>\n        <text class=\"item-desc\">仅 Web / 小程序自动化覆盖</text>\n      </view>\n    </view>\n\n    <view class=\"result-panel\">\n      <text class=\"section-title\">页面读取结果</text>\n      <view class=\"result-row\">\n        <text class=\"result-label\">view</text>\n        <text id=\"view-dataset-text\" class=\"result-value\">{{ datasetTexts.view }}</text>\n      </view>\n      <view class=\"result-row\">\n        <text class=\"result-label\">text</text>\n        <text id=\"text-dataset-text\" class=\"result-value\">{{ datasetTexts.text }}</text>\n      </view>\n      <view class=\"result-row\">\n        <text class=\"result-label\">input</text>\n        <text id=\"input-dataset-text\" class=\"result-value\">{{ datasetTexts.input }}</text>\n      </view>\n      <view class=\"result-row\">\n        <text class=\"result-label\">button</text>\n        <text id=\"button-dataset-text\" class=\"result-value\">{{ datasetTexts.button }}</text>\n      </view>\n      <text id=\"custom-dataset-text\" class=\"result-line\">custom: {{ datasetTexts.custom }}</text>\n      <text id=\"complex-dataset-text\" class=\"result-line\">complex: {{ datasetTexts.complex }}</text>\n      <text id=\"map-api-dataset-text\" class=\"result-line\">map api: {{ datasetTexts.mapApi }}</text>\n      <text id=\"selector-api-dataset-text\" class=\"result-line\">selector api: {{ datasetTexts.selectorApi }}</text>\n      <text id=\"observer-api-dataset-text\" class=\"result-line\">observer api: {{ datasetTexts.observerApi }}</text>\n      <text id=\"event-dataset-text\" class=\"result-line event-line\">event: {{ eventDatasetText }}</text>\n    </view>\n  </view>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script setup lang=\"uts\">\nimport DatasetChild from './DatasetChild.uvue'\n\n// #ifdef WEB || MP\nconst componentInstance = getCurrentInstance()!.proxy!\n// #endif\nconst count = ref(1)\nconst enabled = ref(true)\nconst parentShared = ref('parent-shared')\nconst nullValue = null\n// Android VDOM 编译到 KT，不支持 undefined 字面量。\n// #ifdef APP-ANDROID && !VUE3-VAPOR\nconst undefinedValue = null\n// #endif\n// #ifndef APP-ANDROID && !VUE3-VAPOR\nconst undefinedValue = undefined\n// #endif\nconst complexObj = reactive({\n  name: 'complex',\n  nested: {\n    value: 1,\n  } as UTSJSONObject,\n} as UTSJSONObject)\nconst complexArray = ref<any[]>([1, 'a'])\nconst eventDatasetSnapshots = reactive({} as UTSJSONObject)\nconst eventDatasetText = ref('输入或点击下方元素后展示事件 dataset')\nconst datasetTexts = reactive({\n  view: '',\n  text: '',\n  input: '',\n  button: '',\n  custom: '',\n  complex: '',\n  mapApi: '',\n  selectorApi: '',\n  observerApi: '',\n} as UTSJSONObject)\n\n// 小程序 X 不验证 getElementById().dataset，只覆盖事件对象和 selector/intersection API 返回的 dataset。\n// #ifdef MP\nconst isMP = true\n// #endif\n// #ifndef MP\nconst isMP = false\n// #endif\n\n\nfunction getDatasetValue(dataset: any | null, key: string): any | null {\n  if (dataset == null) {\n    return null\n  }\n  const map = dataset as Map<string, any>\n  return map.has(key) ? map.get(key) : null\n}\n\nfunction normalizeDataset(dataset: any | null): UTSJSONObject {\n  const complex = getDatasetValue(dataset, 'complex') as UTSJSONObject | null\n  const complexNested = complex == null ? null : complex['nested'] as UTSJSONObject | null\n  const array = getDatasetValue(dataset, 'array') as any[] | null\n  const nullDatasetValue = getDatasetValue(dataset, 'nullValue')\n  const undefinedDatasetValue = getDatasetValue(dataset, 'undefinedValue')\n  return {\n    type: getDatasetValue(dataset, 'type'),\n    count: getDatasetValue(dataset, 'count'),\n    enabled: getDatasetValue(dataset, 'enabled'),\n    parentOnly: getDatasetValue(dataset, 'parentOnly'),\n    childOnly: getDatasetValue(dataset, 'childOnly'),\n    shared: getDatasetValue(dataset, 'shared'),\n    childCount: getDatasetValue(dataset, 'childCount'),\n    nullIsNull: nullDatasetValue == null,\n    undefinedIsUndefined: undefinedDatasetValue == undefinedValue,\n    complexName: complex == null ? null : complex['name'],\n    complexNestedValue: complexNested == null ? null : complexNested['value'],\n    arrayFirst: array == null ? null : array[0],\n    arraySecond: array == null ? null : array[1],\n    query: getDatasetValue(dataset, 'query'),\n    scroll: getDatasetValue(dataset, 'scroll'),\n    observer: getDatasetValue(dataset, 'observer'),\n    conflictGet: getDatasetValue(dataset, 'get'),\n    conflictSet: getDatasetValue(dataset, 'set'),\n    conflictHas: getDatasetValue(dataset, 'has'),\n    conflictDelete: getDatasetValue(dataset, 'delete'),\n    conflictClear: getDatasetValue(dataset, 'clear'),\n  } as UTSJSONObject\n}\n\nfunction getElementDataset(id: string): UTSJSONObject {\n  const el = uni.getElementById(id)\n  if (el == null) {\n    return {} as UTSJSONObject\n  }\n  return normalizeDataset((el as UniElement).dataset)\n}\n\nfunction collectDatasetSnapshot(): UTSJSONObject {\n  const snapshot = {} as UTSJSONObject\n  snapshot['view'] = getElementDataset('dataset-view')\n  snapshot['text'] = getElementDataset('dataset-text')\n  snapshot['input'] = getElementDataset('dataset-input')\n  snapshot['button'] = getElementDataset('dataset-button')\n  snapshot['custom'] = getElementDataset('dataset-child-root')\n  return snapshot\n}\n\nfunction collectElementDatasetSnapshot(name: string): UTSJSONObject {\n  if (name == 'view') {\n    return getElementDataset('dataset-view')\n  }\n  if (name == 'text') {\n    return getElementDataset('dataset-text')\n  }\n  if (name == 'input') {\n    return getElementDataset('dataset-input')\n  }\n  if (name == 'button') {\n    return getElementDataset('dataset-button')\n  }\n  if (name == 'custom') {\n    return getElementDataset('dataset-child-root')\n  }\n  return {} as UTSJSONObject\n}\n\nfunction collectDatasetMapApiSnapshot(): UTSJSONObject {\n  const el = uni.getElementById('dataset-view')\n  if (el == null) {\n    return {} as UTSJSONObject\n  }\n  const dataset = (el as UniElement).dataset as any\n  const map = dataset as Map<string, any>\n\n  map.set('mapSet', 'map-value')\n  dataset['bracketSet'] = 'bracket-value'\n  map.set('get', 'reserved-value')\n  const mapSetByBracket = dataset['mapSet']\n  const deleteResult = map.delete('mapSet')\n\n  return {\n    getType: map.get('type'),\n    getCount: map.get('count'),\n    hasType: map.has('type'),\n    mapSetByBracket,\n    bracketSetByGet: map.get('bracketSet'),\n    bracketSetByBracket: dataset['bracketSet'],\n    deleteResult,\n    hasMapSetAfterDelete: map.has('mapSet'),\n    reservedGetByMap: map.get('get'),\n    getIsFunction: map.get('get') == 'reserved-value',\n  } as UTSJSONObject\n}\n\nfunction normalizeApiNodeDataset(result: any | null): UTSJSONObject {\n  if (result == null) {\n    return {} as UTSJSONObject\n  }\n  const dataset = (result as NodeInfo).dataset\n  const normalized = normalizeDataset(dataset)\n  const map = dataset as Map<string, any> | null\n  normalized['isMap'] = map != null && map.has('type')\n  normalized['getIsFunction'] = map != null && map.get('type') == normalized['type']\n  return normalized\n}\n\nfunction collectSelectorQueryDatasetSnapshot(): Promise<UTSJSONObject> {\n  return new Promise((resolve, _) => {\n    const snapshot = {} as UTSJSONObject\n    const query = uni.createSelectorQuery()\n    query.select('#dataset-query-target').boundingClientRect((result: any) => {\n      snapshot['bounding'] = normalizeApiNodeDataset(result)\n    })\n    query\n      .select('#dataset-query-target')\n      .fields({ dataset: true }, (result: any) => {\n        snapshot['fields'] = normalizeApiNodeDataset(result)\n      })\n    query.select('#dataset-scroll-target').scrollOffset((result: any) => {\n      snapshot['scrollOffset'] = normalizeApiNodeDataset(result)\n    })\n    query.exec((result: any) => {\n      snapshot['execLength'] = result == null ? 0 : (result as any[]).length\n      resolve(snapshot)\n    })\n  })\n}\n\nfunction collectIntersectionObserverDatasetSnapshot(): Promise<UTSJSONObject> {\n  // #ifdef WEB || MP\n  return new Promise((resolve, _) => {\n    // 传入当前组件实例，确保选择器在当前组件范围内查询节点。\n    const observer = uni.createIntersectionObserver(\n      componentInstance,\n      {} as UTSJSONObject,\n    )\n    // 固定观察首屏顶部节点，确保初始相交比例会触发回调。\n    observer.relativeToViewport({ bottom: 100 } as UTSJSONObject)\n    observer.observe('#dataset-observer-target', (result: any) => {\n      const snapshot = normalizeApiNodeDataset(result)\n      observer.disconnect()\n      resolve(snapshot)\n    })\n  })\n  // #endif\n  // #ifdef APP\n  return Promise.resolve({} as UTSJSONObject)\n  // #endif\n}\n\nfunction valueToText(value: any | null): string {\n  return value == null ? 'null' : `${value}`\n}\n\nfunction datasetToText(dataset: UTSJSONObject): string {\n  return `type=${valueToText(dataset['type'])}, count=${valueToText(dataset['count'])}, shared=${valueToText(dataset['shared'])}`\n}\n\nfunction refreshApiDatasetTexts(): void {\n  collectSelectorQueryDatasetSnapshot().then((snapshot: UTSJSONObject) => {\n    const fields = snapshot['fields'] as UTSJSONObject\n    const scrollOffset = snapshot['scrollOffset'] as UTSJSONObject\n    const fieldsText = `${valueToText(fields['type'])}/${valueToText(fields['query'])}`\n    const scrollText = `${valueToText(scrollOffset['type'])}/${valueToText(scrollOffset['scroll'])}`\n    datasetTexts['selectorApi'] = `fields=${fieldsText}, scroll=${scrollText}`\n  })\n  collectIntersectionObserverDatasetSnapshot().then((snapshot: UTSJSONObject) => {\n    const type = snapshot['type']\n    if (type == null) {\n      datasetTexts['observerApi'] = '当前平台不覆盖 intersection observer dataset'\n    } else {\n      datasetTexts['observerApi'] = `type=${valueToText(type)}, observer=${valueToText(snapshot['observer'])}`\n    }\n  })\n}\n\nfunction updateDatasetTexts(): void {\n  if (isMP) {\n    const message = '小程序 X 通过事件对象和 selector/intersection API 验证 dataset'\n    datasetTexts['view'] = message\n    datasetTexts['text'] = message\n    datasetTexts['input'] = message\n    datasetTexts['button'] = message\n    datasetTexts['custom'] = message\n    datasetTexts['complex'] = message\n    datasetTexts['mapApi'] = message\n    datasetTexts['selectorApi'] = '读取中'\n    datasetTexts['observerApi'] = '读取中'\n    refreshApiDatasetTexts()\n    return\n  }\n\n  const snapshot = collectDatasetSnapshot()\n  const view = snapshot['view'] as UTSJSONObject\n  const text = snapshot['text'] as UTSJSONObject\n  const input = snapshot['input'] as UTSJSONObject\n  const button = snapshot['button'] as UTSJSONObject\n  const custom = snapshot['custom'] as UTSJSONObject\n  datasetTexts['view'] = datasetToText(view)\n  datasetTexts['text'] = datasetToText(text)\n  datasetTexts['input'] = datasetToText(input)\n  datasetTexts['button'] = `type=${valueToText(button['type'])}, null=${valueToText(button['nullIsNull'])}, undefined=${valueToText(button['undefinedIsUndefined'])}`\n  datasetTexts['custom'] = `type=${valueToText(custom['type'])}, parentOnly=${valueToText(custom['parentOnly'])}, childOnly=${valueToText(custom['childOnly'])}, shared=${valueToText(custom['shared'])}, count=${valueToText(custom['count'])}`\n  datasetTexts['complex'] = `name=${valueToText(view['complexName'])}, nested=${valueToText(view['complexNestedValue'])}, array=${valueToText(view['arrayFirst'])}/${valueToText(view['arraySecond'])}`\n  const mapApi = collectDatasetMapApiSnapshot()\n  datasetTexts['mapApi'] = `get=${valueToText(mapApi['getType'])}, set=${valueToText(mapApi['bracketSetByGet'])}, delete=${valueToText(mapApi['hasMapSetAfterDelete'])}, reserved=${valueToText(mapApi['getIsFunction'])}`\n  datasetTexts['selectorApi'] = '读取中'\n  datasetTexts['observerApi'] = '读取中'\n  refreshApiDatasetTexts()\n}\n\nfunction updateDataset(): void {\n  count.value++\n  enabled.value = false\n  parentShared.value = 'parent-shared-updated'\n  complexObj['name'] = 'complex-updated'\n  const nested = complexObj['nested'] as UTSJSONObject\n  nested['value'] = 2\n  complexArray.value = [2, 'b']\n  nextTick(() => {\n    updateDatasetTexts()\n  })\n}\n\nfunction recordEvent(name: string, event: MouseEvent): void {\n  const target = event.target as UniElement | null\n  const currentTarget = event.currentTarget as UniElement | null\n  if (currentTarget == null) {\n    return\n  }\n  const snapshot = {\n    // Harmony App click 事件可能没有 target，本用例重点验证 currentTarget.dataset。\n    target: target == null ? ({} as UTSJSONObject) : normalizeDataset(target.dataset),\n    currentTarget: normalizeDataset(currentTarget.dataset),\n  } as UTSJSONObject\n  eventDatasetSnapshots[name] = snapshot\n  const currentTargetDataset = snapshot['currentTarget'] as UTSJSONObject\n  eventDatasetText.value = `${name}: type=${valueToText(currentTargetDataset['type'])}, count=${valueToText(currentTargetDataset['count'])}, parentOnly=${valueToText(currentTargetDataset['parentOnly'])}`\n}\n\nfunction recordInputEvent(event: any): void {\n  recordEvent('input', event as MouseEvent)\n}\n\nfunction getEventDatasetSnapshots(): UTSJSONObject {\n  return eventDatasetSnapshots\n}\n\nonReady(() => {\n  updateDatasetTexts()\n})\n\ndefineExpose({\n  collectDatasetSnapshot,\n  collectElementDatasetSnapshot,\n  collectDatasetMapApiSnapshot,\n  collectSelectorQueryDatasetSnapshot,\n  collectIntersectionObserverDatasetSnapshot,\n  updateDataset,\n  getEventDatasetSnapshots,\n})\n</script>\n\n<style>\n.page {\n  padding: 12px;\n  background-color: #f7faf7;\n}\n.summary-card {\n  margin-bottom: 12px;\n  padding: 14px;\n  border-radius: 10px;\n  border-width: 1px;\n  border-style: solid;\n  border-color: #2f855a;\n  background-color: #ecfdf3;\n}\n.summary-title {\n  font-size: 18px;\n  font-weight: bold;\n  color: #1f5132;\n}\n.summary-tip {\n  margin-top: 6px;\n  color: #4a5f50;\n}\n.section {\n  margin-bottom: 12px;\n  padding: 12px;\n  border-radius: 10px;\n  border-width: 1px;\n  border-style: solid;\n  border-color: #d7e6da;\n  background-color: #ffffff;\n}\n.control-section {\n  background-color: #fffaf0;\n  border-color: #f0d49a;\n}\n.section-title {\n  font-weight: bold;\n  margin-bottom: 8px;\n  color: #243b2b;\n}\n.hint {\n  margin-top: 8px;\n  color: #6a6a6a;\n}\n.dataset-item {\n  margin-top: 10px;\n  padding: 10px;\n  border-radius: 8px;\n  border-width: 1px;\n  border-style: solid;\n  border-color: #cfded4;\n  background-color: #f9fffb;\n}\n.api-item {\n  background-color: #f7fbff;\n  border-color: #c8d8ea;\n}\n.item-title {\n  font-weight: bold;\n  color: #263d2b;\n}\n.item-desc {\n  margin-top: 4px;\n  color: #647067;\n}\n.input {\n  height: 40px;\n}\n.scroll-box {\n  margin-top: 10px;\n  height: 48px;\n  border-radius: 8px;\n  border-width: 1px;\n  border-style: solid;\n  border-color: #c8d8ea;\n  background-color: #f7fbff;\n}\n.scroll-content {\n  height: 96px;\n  padding: 10px;\n}\n.primary-button {\n  margin-top: 8px;\n  background-color: #2f855a;\n  color: #ffffff;\n}\n.secondary-button {\n  margin-top: 10px;\n}\n.result-panel {\n  margin-bottom: 12px;\n  padding: 12px;\n  border-radius: 10px;\n  border-width: 1px;\n  border-style: solid;\n  border-color: #9fd3af;\n  background-color: #f0fff4;\n}\n.result-row {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  margin-top: 6px;\n}\n.result-label {\n  width: 64px;\n  font-weight: bold;\n  color: #2f5137;\n}\n.result-value {\n  flex: 1;\n  color: #1f2933;\n}\n.result-line {\n  margin-top: 6px;\n  color: #1f2933;\n}\n.event-line {\n  color: #7c4a03;\n}\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/directive/v-bind/dataset/dataset-composition"}},"E_error":{"runtime-error_runtime-error-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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) => {\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    setLifeCycleNum\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.com/dcloud/hello-uvue/blob/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":{"issue-27027_CompA":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/examples/issue-27027/CompA.uvue","code":"```vue\n<script setup>\nimport { ref } from 'vue'\nimport CompB from './CompB.uvue'\nconst msg = ref('CompA msg')\n</script>\n<template>\n  <!-- CompA -->\n  <view>\n    <CompB>\n      <template #default=\"{ item }\">\n        <text>{{ msg }}</text>\n        <slot :item=\"item\"></slot>\n      </template>\n    </CompB>\n  </view>\n</template>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/examples/issue-27027/CompA"},"issue-27027_CompB":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/examples/issue-27027/CompB.uvue","code":"```vue\n<script setup></script>\n<template>\n  <!-- CompB -->\n  <view>\n    <view v-for=\"item in 4\" :key=\"item\">\n      <slot :item=\"item\"></slot>\n    </view>\n  </view>\n</template>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/examples/issue-27027/CompB"},"issue-27027_issue-27027":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/examples/issue-27027/issue-27027.uvue","code":"```vue\n<script setup vapor>\r\n  import CompA from './CompA.uvue'\r\n  import CompB from './CompB.uvue'\r\n</script>\r\n\r\n<template>\r\n  <!-- page -->\r\n  <view style=\"flex: 1\">\r\n    <view class=\"section\">\r\n      <view>\r\n        <text>单层v-for+scopedSlot</text>\r\n      </view>\r\n      <CompB>\r\n        <template #default=\"{ item }\">\r\n          <text :id=\"'s-' + item\">{{ item }}</text>\r\n        </template>\r\n      </CompB>\r\n    </view>\r\n    <!-- #ifndef MP -->\n    <!-- 小程序平台对此场景支持不完善 -->\r\n    <view class=\"section\">\r\n      <view>\r\n        <text>深层v-for+scopedSlot</text>\r\n      </view>\r\n      <CompA>\r\n        <template #default=\"{ item }\">\r\n          <text :id=\"'d-' + item\">{{ item }}</text>\r\n        </template>\r\n      </CompA>\r\n    </view>\n    <!-- #endif -->\r\n  </view>\r\n</template>\n\n<style>\n  .section {\n    padding: 10px;\n  }\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/examples/issue-27027/issue-27027"},"issue-27239_issue-27239":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/examples/issue-27239/issue-27239.uvue","code":"```vue\n<template>\n  <view>\n    <button @click=\"toggle\">toggle</button>\n    <view v-for=\"(item, index) in innerList\" :key=\"idList[index]\">\n      <view>\n        <text :id=\"'t-' + index\">{{item}}</text>\n      </view>\n    </view>\n  </view>\n</template>\n\n<script setup>\n  const innerList = ref([1, 2])\n  const idList = ref([0, 1])\n  const toggle = () => {\n    const id1 = idList.value[0]\n    idList.value[0] = idList.value[1]\n    idList.value[1] = id1\n    const list1 = innerList.value[0]\n    innerList.value[0] = innerList.value[1]\n    innerList.value[1] = list1\n  }\n  defineExpose({\n    toggle\n  })\n</script>\n\n<style>\n\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/examples/issue-27239/issue-27239"},"issue-30373_issue-30373":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/examples/issue-30373/issue-30373.uvue","code":"```vue\n<script setup vapor>\n  function forceGarbage(): string {\n    const list: string[] = []\n    for (let i = 0; i < 40000; i++) {\n      list.push('issue-30373-garbage-' + i)\n    }\n    return 'gc-' + list.length\n  }\n</script>\n\n<template>\n  <view class=\"page\">\n    <text class=\"title\">#30373 插槽中 v-for 渲染</text>\n    <text class=\"desc\">静态 v-for 放在组件插槽中，内容应该稳定显示。</text>\n\n    <issue-30373-shell>\n      <issue-30373-item\n        v-for=\"i in 5\"\n        :key=\"'default-' + i\"\n        :text-id=\"'issue-30373-default-' + i\"\n        :label=\"'default-' + i\"\n      />\n\n      <template #footer>\n        <issue-30373-item\n          v-for=\"i in 5\"\n          :key=\"'footer-' + i\"\n          :text-id=\"'issue-30373-footer-' + i\"\n          :label=\"'footer-' + i\"\n        />\n      </template>\n\n      <template #scoped=\"{ suffix }\">\n        <issue-30373-item\n          v-for=\"i in 5\"\n          :key=\"'scoped-' + i\"\n          :text-id=\"'issue-30373-scoped-' + i\"\n          :label=\"'' + suffix + '-' + i\"\n        />\n      </template>\n    </issue-30373-shell>\n    <text id=\"issue-30373-gc\" class=\"gc-text\">{{ forceGarbage() }}</text>\n  </view>\n</template>\n\n<style>\n  .page {\n    flex: 1;\n    padding: 12px;\n  }\n\n  .title {\n    color: #111111;\n    font-size: 18px;\n    font-weight: bold;\n    margin-bottom: 8px;\n  }\n\n  .desc {\n    color: #666666;\n    font-size: 13px;\n    margin-bottom: 12px;\n  }\n\n  .gc-text {\n    color: #eeeeee;\n    font-size: 1px;\n  }\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/examples/issue-30373/issue-30373"},"multiple-style-script_multiple-style-script":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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 class=\"nested-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\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.com/dcloud/hello-uvue/blob/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 class=\"nested-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"},"root-node-custom-component_root-node-custom-component":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/examples/root-node-custom-component/root-node-custom-component.uvue","code":"```vue\n<template>\n  <Bar />\n</template>\n\n<script setup lang=\"uts\">\n  import Bar from '@/components/Bar.uvue'\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/examples/root-node-custom-component/root-node-custom-component"},"set-custom-child-component-root-node-class_child":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/alpha/pages/examples/nested-component-communication/components/child.uvue","code":"```vue\n<template>\n  <view class=\"child\">\n    <view class=\"flex-row\">\n      <text>子组件:</text>\n      <text class=\"child-msg\">{{ msg }}</text>\n    </view>\n    <grand-child class=\"nested-grand-child\"></grand-child>\n  </view>\n</template>\n\n<script setup>\nimport grandChild from './grandChild.uvue'\nimport { state } from '@/store/index.uts'\n  \nconst msg = computed((): number => state.componentMsg)\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.com/dcloud/hello-uvue/blob/alpha/pages/examples/nested-component-communication/components/grandChild.uvue","code":"```vue\n<template>\n  <view class=\"child\">\n    <view class=\"flex-row\">\n      <text>孙组件:</text>\n      <text class=\"grandchild-msg\">{{ msg }}</text>\n    </view>\n    <button class=\"grandchild-btn\" @click=\"change\">孙组件清空数据</button>\n  </view>\n</template>\n\n<script setup>\nimport { state, setComponentMsg } from '@/store/index.uts'\n\nconst msg = computed((): number => state.componentMsg)\nconst change = () => {\n\tsetComponentMsg(0)\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_helpers":{"useComputedStyle_CompUseComputedStyle":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/helpers/useComputedStyle/CompUseComputedStyle.uvue","code":"```vue\n<template>\r\n\t<view>\r\n\t\t<text :style=\"{ 'font-size': style.get('font-size'), color: style.get('color') }\" style=\"line-height: 100px;\">hello world</text>\r\n\t</view>\r\n</template>\r\n\r\n<script setup>\r\n\tconst style = useComputedStyle({\r\n\t\tproperties: ['font-size', 'color'],\r\n\t\tfilterProperties: true\r\n\t} as UseComputedStyleOptions)\r\n\twatchEffect(() => {\r\n\t\tconsole.log(`style.fontSize = ${style.get('font-size')}`)\r\n\t})\r\n</script>\r\n\r\n<style></style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/helpers/useComputedStyle/CompUseComputedStyle"},"useComputedStyle_useComputedStyle":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/helpers/useComputedStyle/useComputedStyle.uvue","code":"```vue\n<template>\n  <view>\n    <CompUseComputedStyle :class=\"classChanged ? 'test-comp-changed' : 'test-comp'\"\n      :style=\"{'font-size': styleChanged ? '40px' : '14px' }\"></CompUseComputedStyle>\n    <button class=\"toggle-class-btn\" @click=\"toggleClass\">toggleClass</button>\n    <button class=\"toggle-style-btn\" @click=\"toggleStyle\">toggleStyle</button>\n  </view>\n</template>\n\n<script setup>\n  import CompUseComputedStyle from './CompUseComputedStyle.uvue'\n  const styleChanged = ref(false)\n  const classChanged = ref(false)\n  function toggleClass(){\n    classChanged.value = !classChanged.value\n  }\n  function toggleStyle(){\n    styleChanged.value = !styleChanged.value\n  }\n</script>\n\n<style>\n  .test-comp {\n    color: green;\n    background-color: yellow;\n  }\n\n  .test-comp-changed {\n    color: yellow;\n    background-color: green;\n  }\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/helpers/useComputedStyle/useComputedStyle"},"useId_useId":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/helpers/useId/useId.uvue","code":"```vue\n<script setup vapor lang=\"uts\">\nimport {useId} from 'vue'\n\nconst usernameId = useId()\nconst descriptionId = useId()\nconst updateCount = ref<number>(0)\n\nfunction updatePage() {\n  updateCount.value++\n}\n\ndefineExpose({\n  updatePage\n})\n</script>\n\n<template>\n  <view class=\"page\">\n    <text class=\"section-title\">useId</text>\n    <view class=\"row\">\n      <text>username id:</text>\n      <text id=\"username-id-value\">{{ usernameId }}</text>\n    </view>\n    <view class=\"row\">\n      <text>description id:</text>\n      <text id=\"description-id-value\">{{ descriptionId }}</text>\n    </view>\n    <view class=\"row\">\n      <text>ids are unique:</text>\n      <text id=\"use-id-unique\">{{ usernameId != descriptionId }}</text>\n    </view>\n    <label :for=\"usernameId\">username:</label>\n    <input :id=\"usernameId\" class=\"input\" />\n    <text :id=\"descriptionId\">enter a username</text>\n    <view class=\"row mt-10\">\n      <text>update count:</text>\n      <text id=\"use-id-update-count\">{{ updateCount }}</text>\n    </view>\n    <button id=\"update-use-id-page-btn\" @click=\"updatePage\">更新页面</button>\n  </view>\n</template>\n\n<style>\n.section-title {\n  margin-bottom: 12px;\n  font-size: 18px;\n  font-weight: bold;\n}\n\n.row {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  margin-bottom: 10px;\n}\n\n.input {\n  height: 40px;\n  margin: 8px 0;\n  padding: 0 8px;\n  border-width: 1px;\n  border-style: solid;\n  border-color: #dddddd;\n  border-radius: 4px;\n}\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/helpers/useId/useId"}},"E_lifecycle":{"component_ChildComponentComposition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/lifecycle/component/ChildComponentComposition.uvue","code":"```vue\n<template>\r\n\t<!-- #ifndef VUE3-VAPOR -->\r\n  title: {{ title }}\r\n\t<!-- #endif -->\r\n\t<!-- #ifdef VUE3-VAPOR -->\r\n\t<text>title: {{ title }}</text>\r\n\t<!-- #endif -->\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  console.log('child component composition onLoad')\r\n  // 自动化测试\r\n  setLifeCycleNum(state.lifeCycleNum + 100)\r\n})\r\nonPageShow(() => {\r\n  console.log('child component composition onPageShow')\r\n  // 自动化测试\r\n  setLifeCycleNum(state.lifeCycleNum + 10)\r\n})\r\nonReady(() => {\r\n  console.log('child component composition onReady')\r\n  // 自动化测试\r\n  // TODO: onReady 未触发\r\n  setLifeCycleNum(state.lifeCycleNum + 10)\r\n})\r\n\r\nonPullDownRefresh(() => {\r\n  console.log('child component composition onPullDownRefresh')\r\n  // 自动化测试\r\n  setLifeCycleNum(state.lifeCycleNum + 10)\r\n})\r\nonPageScroll((_) => {\r\n  console.log('child component composition onPageScroll')\r\n  // 自动化测试\r\n  emit('updateIsScroll', true)\r\n})\r\nonReachBottom(() => {\r\n  console.log('child component composition onReachBottom')\r\n  // 自动化测试\r\n  setLifeCycleNum(state.lifeCycleNum + 10)\r\n})\r\nonBackPress((_ : OnBackPressOptions) : boolean | null => {\r\n  console.log('child component composition onBackPress')\r\n  // 自动化测试\r\n  setLifeCycleNum(state.lifeCycleNum - 10)\r\n  return null\r\n})\r\nonPageHide(() => {\r\n  console.log('child component composition onPageHide')\r\n  // 自动化测试\r\n  setLifeCycleNum(state.lifeCycleNum - 10)\r\n})\r\nonUnload(() => {\r\n  console.log('child component composition onUnload')\r\n  // 自动化测试\r\n  setLifeCycleNum(state.lifeCycleNum - 100)\r\n})\r\n\r\nonBeforeMount(() => {\r\n  console.log('child component composition onBeforeMount')\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  console.log('child component composition onMounted')\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  console.log('child component composition onBeforeUpdate')\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  console.log('child component composition onUpdated')\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  console.log('child component composition onBeforeUnmount')\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  console.log('child component composition onUnmounted')\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  console.log('child component composition onActivated')\r\n  // 自动化测试\r\n  setLifeCycleNum(state.lifeCycleNum + 1)\r\n  console.log('component for lifecycle test onActivated')\r\n})\r\nonDeactivated(() => {\r\n  console.log('child component composition onDeactivated')\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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/alpha/pages/lifecycle/component/component-composition.uvue","code":"```vue\n<template>\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\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      <!-- #ifndef VUE3-VAPOR -->\r\n      <keep-alive>\r\n        <component :is=\"aliveComponent\"  @updateIsScroll=\"updateIsScroll\" />\r\n      </keep-alive>\r\n       <!-- #endif -->\r\n      <!-- #ifdef VUE3-VAPOR -->\r\n        <child-component @updateIsScroll=\"updateIsScroll\" />\r\n       <!-- #endif -->\r\n      <button class=\"mt-10\" @click=\"scrollToBottom\">scrollToBottom</button>\r\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 && !VUE3-VAPOR -->\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) => {\r\n    setLifeCycleNum(num)\r\n  }\r\n\r\n  // 自动化测试\r\n  const pullDownRefresh = () => {\r\n    uni.startPullDownRefresh({\r\n      success() {\r\n        setTimeout(() => {\r\n          uni.stopPullDownRefresh()\r\n        }, 1500)\r\n      },\r\n    })\r\n  }\r\n\r\n  const scrollToBottom = () => {\r\n    uni.pageScrollTo({\r\n      scrollTop: 3000,\r\n    })\r\n  }\r\n  \r\n  const 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  }\r\n  \r\n  const navigateToHome = () => {\r\n    uni.navigateTo({\r\n      url: '/pages/index/index'\r\n    })\r\n  }\r\n\r\n  defineExpose({\r\n    pageGetLifeCycleNum,\r\n    pageSetLifeCycleNum,\r\n    pullDownRefresh,\r\n    scrollToBottom,\r\n    getIsScrolled\r\n  })\r\n</script>\r\n\r\n<style>\r\n  .container {\r\n    height: 2200px;\r\n  }\r\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/lifecycle/component/component-composition"},"component_component-options":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/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_dialog-page":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/lifecycle/page/dialog-page.uvue","code":"```vue\n<template>\n  <view class=\"dialog-page\">\n    <view class=\"dialog-content\">\n      <text>page lifecycle dialogPage</text>\n      <button class=\"mt-10\" @click=\"closeDialogPage\">closeDialogPage</button>\n    </view>\n  </view>\n</template>\n\n<script setup lang=\"uts\">\nconst closeDialogPage = () => {\n  uni.closeDialogPage()\n}\n</script>\n\n<style>\n.dialog-page {\n  flex: 1;\n  align-items: center;\n  justify-content: center;\n  background-color: rgba(0,0,0,0.5);\n}\n\n.dialog-content {\n  width: 260px;\n  padding: 20px;\n  border-radius: 8px;\n  background-color: #ffffff;\n}\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/lifecycle/page/dialog-page"},"page_monitor-app-lifecycle-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/lifecycle/page/monitor-app-lifecycle-composition.uvue","code":"```vue\n<script lang=\"uts\" setup>\n// 增加显式导入生命周期，测试 https://issues.dcloud.net.cn/pages/issues/detail?id=31456\nimport { onAppShow } from '@dcloudio/uni-app'\nimport { state, setLifeCycleNum } from '@/store/index.uts'\n\nonAppShow((onShowOptions: OnShowOptions) => {\n\tconsole.log('组合式组件监听应用生命周期 => onAppShow => onShowOptions', onShowOptions)\n\t// 自动化测试\n\tsetLifeCycleNum(state.lifeCycleNum + 10)\n})\nonAppHide(() => {\n\tconsole.log('组合式组件监听应用生命周期 => onAppHide')\n\t// 自动化测试\n\tsetLifeCycleNum(state.lifeCycleNum - 100)\n})\nonError((err: any) => {\n\tconsole.log('组合式组件监听应用生命周期 => onError', err)\n\tsetLifeCycleNum(state.lifeCycleNum + 10)\n})\nconst triggerError = () => {\n\tthrow new Error('trigger error in monitor app lifecycle composition')\n}\n</script>\n\n<template>\n\t<text id=\"trigger-monitor-app-error\" style=\"margin: 10px 0;\" @click=\"triggerError\">组件监听应用生命周期（组合式 API）</text>\n</template>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/lifecycle/page/monitor-app-lifecycle-composition"},"page_monitor-app-lifecycle-options":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/lifecycle/page/monitor-app-lifecycle-options.uvue","code":"```vue\n<script lang=\"uts\">\nimport { state, setLifeCycleNum } from '@/store/index.uts'\nexport default {\n\tsetup() {\n\t\tonAppShow((onShowOptions: OnShowOptions) => {\n\t\t\tconsole.log('选项式组件监听应用生命周期 => onAppShow => onShowOptions', onShowOptions)\n\t\t\t// 自动化测试\n\t\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\n\t\t})\n\t\tonAppHide(() => {\n\t\t\tconsole.log('选项式组件监听应用生命周期 => onAppHide')\n\t\t\t// 自动化测试\n\t\t\tsetLifeCycleNum(state.lifeCycleNum - 100)\n\t\t})\n\t\tonError((err: any) => {\n\t\t\tconsole.log('选项式组件监听应用生命周期 => onError', err)\n\t\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\n\t\t})\n\t\tconst triggerError = () => {\n\t\t\tthrow new Error('trigger error in monitor app lifecycle options')\n\t\t}\n\t\treturn {\n\t\t\ttriggerError\n\t\t}\n\t}\n}\n</script>\n\n<template>\n\t<text id=\"trigger-monitor-app-error\" style=\"margin: 10px 0;\" @click=\"triggerError\">组件监听应用生命周期（选项式 API）</text>\n</template>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/lifecycle/page/monitor-app-lifecycle-options"},"page_monitor-page-lifecycle-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/lifecycle/page/monitor-page-lifecycle-composition.uvue","code":"```vue\n<script lang=\"uts\" setup>\r\n\timport { state, setLifeCycleNum } from '@/store/index.uts'\n\r\n\tconst isScrolled = ref(false)\r\n\r\n\tonLoad((options : OnLoadOptions) => {\r\n\t\tconsole.log('组合式组件监听页面生命周期 => onLoad', options)\r\n\t\t// 自动化测试\r\n\t\tsetLifeCycleNum(state.lifeCycleNum + 100)\r\n\t})\r\n\tonPageShow(() => {\r\n\t\tconsole.log('组合式组件监听页面生命周期 => onPageShow')\r\n\t\t// 自动化测试\r\n\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\r\n\t})\r\n\tonReady(() => {\r\n\t\tconsole.log('组合式组件监听页面生命周期 => onReady')\r\n\t\t// 自动化测试\r\n\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\r\n\t})\r\n\tonPullDownRefresh(() => {\r\n\t\tconsole.log('组合式组件监听页面生命周期 => onPullDownRefresh')\r\n\t\t// 自动化测试\r\n\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\r\n\t})\r\n\tonPageScroll((options : OnPageScrollOptions) => {\r\n\t\tconsole.log('组合式组件监听页面生命周期 => onPageScroll', options)\r\n\t\tisScrolled.value = true\r\n\t})\r\n\tonReachBottom(() => {\r\n\t\tconsole.log('组合式组件监听页面生命周期 => onReachBottom')\r\n\t\t// 自动化测试\r\n\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\r\n\t})\r\n\tonBackPress((options : OnBackPressOptions) : boolean | null => {\r\n\t\tconsole.log('组合式组件监听页面生命周期 => onBackPress', options)\r\n\t\t// 自动化测试\r\n\t\tsetLifeCycleNum(state.lifeCycleNum - 10)\r\n\t\treturn null\r\n\t})\r\n\tonPageHide(() => {\r\n\t\tconsole.log('组合式组件监听页面生命周期 => onPageHide')\r\n\t\t// 自动化测试\r\n\t\tsetLifeCycleNum(state.lifeCycleNum - 10)\r\n\t})\r\n\tonResize((options : OnResizeOptions) => {\r\n\t\tconsole.log('组合式组件监听页面生命周期 => onResize', options)\r\n\t\t// 自动化测试\r\n\t\tsetLifeCycleNum(state.lifeCycleNum + 1)\r\n\t})\r\n\tonUnload(() => {\r\n\t\tconsole.log('组合式组件监听页面生命周期 => onUnload')\r\n\t\t// 自动化测试\r\n\t\tsetLifeCycleNum(state.lifeCycleNum - 10)\r\n\t})\r\n</script>\r\n\r\n<template>\r\n\t<view>\r\n\t\t<text class=\"mb-10\">选项式组件监听页面生命周期（组合式 API）</text>\r\n\t\t<view class=\"justify-between flex-row mb-10\">\r\n\t\t\t<text>组件中监听到页面滚动:</text>\r\n\t\t\t<text>{{isScrolled}}</text>\r\n\t\t</view>\r\n\t</view>\r\n</template>\n\n<style>\n\t.mb-10{\n\t\tmargin-bottom: 10px;\n\t}\n\t.justify-between{\n\t\tjustify-content: space-between;\n\t}\n\t.flex-row{\n\t\tflex-direction: row;\n\t}\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/lifecycle/page/monitor-page-lifecycle-composition"},"page_monitor-page-lifecycle-options":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/lifecycle/page/monitor-page-lifecycle-options.uvue","code":"```vue\n<script lang=\"uts\">\r\n\timport { state, setLifeCycleNum } from '@/store/index.uts'\r\n\r\n\texport default {\r\n\t\tsetup() {\n\t\t\tconst isScrolled = ref(false)\n\t\t\t\r\n\t\t\tonLoad((options : OnLoadOptions) => {\r\n\t\t\t\tconsole.log('选项式组件监听页面生命周期 => onLoad', options)\r\n\t\t\t\t// 自动化测试\r\n\t\t\t\tsetLifeCycleNum(state.lifeCycleNum + 100)\r\n\t\t\t})\r\n\t\t\tonPageShow(() => {\r\n\t\t\t\tconsole.log('选项式组件监听页面生命周期 => onPageShow')\r\n\t\t\t\t// 自动化测试\r\n\t\t\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\r\n\t\t\t})\r\n\t\t\tonReady(() => {\r\n\t\t\t\tconsole.log('选项式组件监听页面生命周期 => onReady')\r\n\t\t\t\t// 自动化测试\r\n\t\t\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\r\n\t\t\t})\r\n\t\t\tonPullDownRefresh(() => {\r\n\t\t\t\tconsole.log('选项式组件监听页面生命周期 => onPullDownRefresh')\r\n\t\t\t\t// 自动化测试\r\n\t\t\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\r\n\t\t\t})\r\n\t\t\tonPageScroll((options: OnPageScrollOptions) => {\r\n\t\t\t\tconsole.log('选项式组件监听页面生命周期 => onPageScroll', options)\r\n\t\t\t\tisScrolled.value = true\r\n\t\t\t})\r\n\t\t\tonReachBottom(() => {\r\n\t\t\t\tconsole.log('选项式组件监听页面生命周期 => onReachBottom')\r\n\t\t\t\t// 自动化测试\r\n\t\t\t\tsetLifeCycleNum(state.lifeCycleNum + 10)\r\n\t\t\t})\r\n\t\t\tonBackPress((options : OnBackPressOptions) : boolean | null => {\r\n\t\t\t\tconsole.log('选项式组件监听页面生命周期 => onBackPress', options)\r\n\t\t\t\t// 自动化测试\r\n\t\t\t\tsetLifeCycleNum(state.lifeCycleNum - 10)\r\n\t\t\t\treturn null\r\n\t\t\t})\r\n\t\t\tonPageHide(() => {\r\n\t\t\t\tconsole.log('选项式组件监听页面生命周期 => onPageHide')\r\n\t\t\t\t// 自动化测试\r\n\t\t\t\tsetLifeCycleNum(state.lifeCycleNum - 10)\r\n\t\t\t})\r\n\t\t\tonResize((options : OnResizeOptions) => {\r\n\t\t\t\tconsole.log('选项式组件监听页面生命周期 => onResize', options)\r\n\t\t\t\t// 自动化测试\r\n\t\t\t\tsetLifeCycleNum(state.lifeCycleNum + 1)\r\n\t\t\t})\r\n\t\t\tonUnload(() => {\r\n\t\t\t\tconsole.log('选项式组件监听页面生命周期 => onUnload')\r\n\t\t\t\t// 自动化测试\r\n\t\t\t\tsetLifeCycleNum(state.lifeCycleNum - 10)\r\n\t\t\t})\n\t\t\t\n\t\t\treturn {\n\t\t\t\tisScrolled\n\t\t\t}\r\n\t\t}\r\n\t}\r\n</script>\r\n\r\n<template>\r\n\t<view>\r\n\t\t<text class=\"mb-10\">选项式组件监听页面生命周期（选项式 API）</text>\r\n\t\t<view class=\"justify-between flex-row mb-10\">\r\n\t\t\t<text>组件中监听到页面滚动:</text>\r\n\t\t\t<text>{{isScrolled}}</text>\r\n\t\t</view>\r\n\t</view>\r\n</template>\n\n<style>\n\t.mb-10{\n\t\tmargin-bottom: 10px;\n\t}\n\t.justify-between{\n\t\tjustify-content: space-between;\n\t}\n\t.flex-row{\n\t\tflex-direction: row;\n\t}\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/lifecycle/page/monitor-page-lifecycle-options"},"page_page-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/lifecycle/page/page-composition.uvue","code":"```vue\n<template>\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\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>onPageScroll 触发：</text>\r\n        <text>{{ isOnPageScrollTriggered }}</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=\"mt-10\">\r\n        <MonitorAppLifecycleComposition class=\"monitor-app-lifecycle\" />\n      </view>\r\n      <view class=\"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      <!-- #ifndef MP -->\r\n      <button class=\"mt-10\" @click=\"openLifecycleDialogPage\">\r\n        openDialogPage\r\n      </button>\r\n      <button class=\"mt-10\" @click=\"closeLifecycleDialogPage\">\r\n        closeDialogPage\r\n      </button>\r\n      <!-- #endif -->\r\n      <button class=\"mt-10\" @click=\"goOnBackPress\">\r\n        跳转 onBackPress 示例\r\n      </button>\r\n    </view>\r\n    <!-- #ifdef APP && !VUE3-VAPOR -->\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 MonitorAppLifecycleComposition from './monitor-app-lifecycle-composition.uvue'\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('onResize', 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 resetPageScrollStatus = () => {\r\n  isOnPageScrollTriggered.value = false\r\n  dataInfo.isScrolled = false\r\n}\r\n\r\n// #ifndef MP\r\nconst openLifecycleDialogPage = () => {\r\n  uni.openDialogPage({\r\n    url: '/pages/lifecycle/page/dialog-page',\r\n  })\r\n}\r\n\r\nconst closeLifecycleDialogPage = () => {\r\n  uni.closeDialogPage()\r\n}\r\n// #endif\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  resetPageScrollStatus,\r\n  // #ifndef MP\r\n  openLifecycleDialogPage,\r\n  closeLifecycleDialogPage,\r\n  // #endif\r\n})\r\n</script>\r\n\r\n<style>\r\n.container {\r\n  height: 2200px;\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.com/dcloud/hello-uvue/blob/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>onPageScroll 触发：</text>\n        <text>{{ isOnPageScrollTriggered }}</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<MonitorAppLifecycleOptions class=\"monitor-app-lifecycle\" />\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      <!-- #ifndef MP -->\n      <button class=\"mt-10\" @click=\"openLifecycleDialogPage\">\n        openDialogPage\n      </button>\n      <button class=\"mt-10\" @click=\"closeLifecycleDialogPage\">\n        closeDialogPage\n      </button>\n      <!-- #endif -->\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 MonitorAppLifecycleOptions from './monitor-app-lifecycle-options.uvue'\nimport MonitorPageLifecycleOptions from './monitor-page-lifecycle-options.uvue'\n type DataInfo = {\n \tisScrolled: boolean\n }\nexport default {\n\tcomponents: { MonitorAppLifecycleOptions, 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('onResize', 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\tresetPageScrollStatus() {\n\t\t\tthis.isOnPageScrollTriggered = false\n\t\t\tthis.dataInfo.isScrolled = false\n\t\t},\n\t\t// #ifndef MP\n\t\topenLifecycleDialogPage() {\n\t\t\tuni.openDialogPage({\n\t\t\t\turl: '/pages/lifecycle/page/dialog-page',\n\t\t\t})\n\t\t},\n\t\tcloseLifecycleDialogPage() {\n\t\t\tuni.closeDialogPage()\n\t\t},\n\t\t// #endif\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: 2200px;\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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/alpha/pages/render-function/render/render-composition.uvue","code":"```vue\n<script setup lang=\"uts\">\nimport CompForHFunction from '@/components/CompForHFunction.uvue'\nimport CompForHFunctionWithSlot from '@/components/CompForHFunctionWithSlot.uvue'\nimport Foo from './Foo.uvue'\nconst msg = ref('default msg')\nconst list = ref(['a','b'])\n// 故意外部声明为UTSJSONObject\nconst msgProps = { class: 'mt-10 msg', style: { color: 'blue' } }\n// #ifdef APP-ANDROID\nconst render = computed(():VNode => {\n// #endif\n// #ifndef APP-ANDROID\nconst render = ():VNode => {\n// #endif\n  const textList: VNode[] = []\n  list.value.forEach((item) => {\n    textList.push(h('text', { class: 'text-item' }, item))\n  })\n  return 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('view', null, textList),\n    h(\n      'button',\n      {\n        class: 'mt-10 btn',\n        type: 'primary',\n        onClick: () => {\n          msg.value = 'new msg'\n          list.value.push('c')\n        }\n      },\n      'click'\n    )\n  ])\n}\n// #ifdef APP-ANDROID\n)\n// #endif\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.com/dcloud/hello-uvue/blob/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: 'mt-10 msg', style: { color: 'blue' } }\r\nexport default {\r\n  data() {\r\n    return {\r\n      msg: 'default msg',\r\n      list: ['a','b']\r\n    }\r\n  },\r\n  render() : VNode {\r\n    const textList: VNode[] = []\r\n    this.list.forEach((item) => {\r\n      textList.push(h('text', { class: 'text-item' }, item))\r\n    })\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('view', null, textList),\r\n      h(\r\n        'button',\r\n        {\r\n          class: 'mt-10 btn',\r\n          type: 'primary',\r\n          onClick: () => {\r\n            this.msg = 'new msg'\r\n            this.list.push('c')\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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/alpha/pages/render-function/withDirectives/withDirectives-composition.uvue","code":"```vue\n<script setup>\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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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_template-syntax":{"text-interpolation_text-interpolation-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/template-syntax/text-interpolation/text-interpolation-composition.uvue","code":"```vue\n<template>\r\n    <view>\r\n        <text id=\"text1\">hello {{ 'world' }}</text>\r\n        <text id=\"text2\">hello {{ world }}</text>\r\n        <text id=\"text3\">hello{{' '}}{{ world }}</text>\r\n        <text id=\"text4\">hello{{' '}}{{ w }}{{'o'}}{{'rld'}}</text>\r\n        <!-- 之所以增加 button 测试例，是因为 button 在底层是 uvue 实现的，跟 text 是两套机制，需要分别测试 -->\r\n        <button id=\"btn1\">hello {{ 'world' }}</button>\r\n        <button id=\"btn2\">hello {{ world }}</button>\r\n        <button id=\"btn3\">hello{{' '}}{{ world }}</button>\r\n        <button id=\"btn4\">hello{{' '}}{{ w }}{{'o'}}{{'rld'}}</button>\r\n    </view>\r\n</template>\r\n\r\n<script setup>\r\n    const w = 'w'\r\n    const world = 'world'\r\n</script>\r\n\r\n<style>\r\n\r\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/template-syntax/text-interpolation/text-interpolation-composition"}},"E_built-in":{"component_keep-alive_keep-alive-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/built-in/component/keep-alive/keep-alive-composition.uvue","code":"```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\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 && !VUE3-VAPOR -->\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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/alpha/pages/built-in/component/teleport/teleport-composition.uvue","code":"```vue\n<template>\n  <!-- #ifdef APP && !VUE3-VAPOR -->\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 && !VUE3-VAPOR -->\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-defer":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/built-in/component/teleport/teleport-defer.uvue","code":"```vue\n<template>\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\r\n  <scroll-view style=\"flex: 1\">\r\n  <!-- #endif -->\r\n    <view class=\"defer-page\">\r\n\r\n      <view class=\"intro-box\">\r\n        <text class=\"intro-title\">defer 专项测试</text>\r\n        <text class=\"intro-desc\">切换目标位置和 defer 后点击按钮同时创建 Teleport 与目标节点，观察内容是否进入目标。</text>\r\n      </view>\r\n\r\n      <view class=\"control-panel\">\r\n        <view class=\"control-row\">\r\n          <view class=\"control-copy\">\r\n            <text class=\"control-title\">defer</text>\r\n            <text class=\"control-desc\">{{ useDefer ? '延迟查找后置目标' : '立即查找目标' }}</text>\n          </view>\r\n          <switch :checked=\"useDefer\" @change=\"onDeferChange\" />\n        </view>\r\n        <view class=\"control-row\">\r\n          <view class=\"control-copy\">\r\n            <text class=\"control-title\">目标位置</text>\r\n            <text class=\"control-desc\">{{ targetAfter ? '后置目标' : '前置目标' }}</text>\n          </view>\r\n          <switch :checked=\"targetAfter\" @change=\"onTargetAfterChange\" />\n        </view>\r\n        <view class=\"button-row\">\r\n          <button class=\"action-button\" size=\"mini\" type=\"primary\"\r\n            @click=\"toggleTeleport\">{{ showTeleport ? '销毁 Teleport' : '创建 Teleport' }}</button>\n        </view>\r\n      </view>\r\n\r\n      <view class=\"status-box\">\r\n        <text class=\"status-text\">当前：defer = {{ useDefer }}</text>\n        <text class=\"status-tip\">目标 #teleport-defer-target 与 Teleport\r\n          同时创建，当前为{{ targetAfter ? '后置目标' : '前置目标' }}。</text>\n      </view>\r\n\r\n      <view class=\"case-box\">\r\n        <view v-if=\"targetVisible && !targetAfter\" id=\"teleport-defer-target\" class=\"target-box\">\n          <text class=\"target-title\">前置目标</text>\r\n          <text class=\"target-desc\">id=\"teleport-defer-target\"，该节点在 Teleport 前方。</text>\r\n        </view>\r\n\r\n        <view class=\"origin-box\">\r\n          <text class=\"box-title\">Teleport 声明位置</text>\r\n          <text class=\"box-desc\">Teleport 固定声明在这里，目标节点可切换到前方或后方。</text>\r\n\r\n          <Teleport v-if=\"showTeleport\" to=\"#teleport-defer-target\" :defer=\"useDefer\">\n            <view id=\"teleport-defer-content\" class=\"teleport-card\">\r\n              <text class=\"card-title\">Teleport 内容</text>\r\n              <text class=\"card-desc\">to: #teleport-defer-target</text>\r\n            </view>\r\n          </Teleport>\r\n\r\n          <view v-if=\"!showTeleport\" class=\"empty-box\">\n            <text class=\"empty-text\">Teleport 已销毁</text>\r\n          </view>\r\n        </view>\r\n\r\n        <view v-if=\"targetVisible && targetAfter\" id=\"teleport-defer-target\" class=\"target-box\">\n          <text class=\"target-title\">后置目标</text>\r\n          <text class=\"target-desc\">id=\"teleport-defer-target\"，该节点在 Teleport 后方。</text>\r\n        </view>\r\n      </view>\r\n\r\n    </view>\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n  const useDefer = ref<boolean>(true)\n  const targetAfter = ref<boolean>(true)\n  const targetVisible = ref<boolean>(false)\n  const showTeleport = ref<boolean>(false)\n\n  function onDeferChange(e : UniSwitchChangeEvent) {\n    useDefer.value = e.detail.value\n  }\n\n  function onTargetAfterChange(e : UniSwitchChangeEvent) {\n    targetAfter.value = e.detail.value\n  }\n\n  function setUseDefer(value : boolean) {\n    useDefer.value = value\n  }\n\n  function setTargetAfter(value : boolean) {\n    targetAfter.value = value\n  }\n\n  function setTargetVisible(value : boolean) {\n    targetVisible.value = value\n  }\n\n  function setShowTeleport(value : boolean) {\n    showTeleport.value = value\n    if (!value) {\n      targetVisible.value = false\n    }\n  }\n\n  function toggleTeleport() {\n    const visible = !showTeleport.value\n    targetVisible.value = visible\n    showTeleport.value = visible\n  }\n\r\n  function getBoundingClientRectForTest(id : string) : DOMRect | null {\r\n    return uni.getElementById(id)?.getBoundingClientRect() ?? null\r\n  }\r\n\r\n  defineExpose({\n    setUseDefer,\n    setTargetAfter,\n    setTargetVisible,\n    setShowTeleport,\n    getBoundingClientRectForTest\n  })\n</script>\r\n\r\n<style>\r\n  .defer-page {\r\n    padding: 16px;\r\n    background-color: #f5f7fb;\r\n  }\r\n\r\n  .intro-box {\r\n    display: flex;\r\n    flex-direction: column;\r\n    padding: 12px;\r\n    margin-top: 12px;\r\n    border-radius: 12px;\r\n    background-color: #ffffff;\r\n  }\r\n\r\n  .intro-title {\r\n    font-size: 18px;\r\n    color: #111827;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .intro-desc {\r\n    margin-top: 6px;\r\n    font-size: 13px;\r\n    color: #4b5563;\r\n  }\r\n\r\n  .control-panel {\r\n    display: flex;\r\n    flex-direction: column;\r\n    padding: 12px;\r\n    margin-top: 12px;\r\n    border-radius: 12px;\r\n    background-color: #ffffff;\r\n  }\r\n\r\n  .control-row {\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n  }\r\n\r\n  .control-copy {\r\n    display: flex;\r\n    flex-direction: column;\r\n    flex: 1;\r\n    margin-right: 12px;\r\n  }\r\n\r\n  .control-title {\r\n    font-size: 16px;\r\n    color: #1f2937;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .control-desc {\r\n    margin-top: 4px;\r\n    font-size: 12px;\r\n    color: #6b7280;\r\n  }\r\n\r\n  .button-row {\r\n    display: flex;\r\n    flex-direction: row;\r\n    margin-top: 12px;\r\n  }\r\n\r\n  .action-button {\r\n    margin-right: 8px;\r\n  }\r\n\r\n  .status-box {\r\n    display: flex;\r\n    flex-direction: column;\r\n    padding: 12px;\r\n    margin-top: 12px;\r\n    border-radius: 12px;\r\n    background-color: #eef6ff;\r\n  }\r\n\r\n  .status-text {\r\n    font-size: 14px;\r\n    color: #0052cc;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .status-tip {\r\n    margin-top: 4px;\r\n    font-size: 12px;\r\n    color: #4b5563;\r\n  }\r\n\r\n  .case-box {\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n\r\n  .origin-box {\r\n    display: flex;\r\n    flex-direction: column;\r\n    min-height: 136px;\r\n    padding: 12px;\r\n    margin-top: 12px;\r\n    border-radius: 12px;\r\n    background-color: #fff7ed;\r\n  }\r\n\r\n  .box-title {\r\n    font-size: 16px;\r\n    color: #9a3412;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .box-desc {\r\n    margin-top: 4px;\r\n    margin-bottom: 10px;\r\n    font-size: 12px;\r\n    color: #9a3412;\r\n  }\r\n\r\n  .teleport-card {\r\n    display: flex;\r\n    flex-direction: column;\r\n    padding: 12px;\r\n    margin-top: 10px;\r\n    border-radius: 10px;\r\n    background-color: #007aff;\r\n  }\r\n\r\n  .card-title {\r\n    font-size: 16px;\r\n    color: #ffffff;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .card-desc {\r\n    margin-top: 4px;\r\n    font-size: 12px;\r\n    color: #dbeafe;\r\n  }\r\n\r\n  .target-box {\r\n    display: flex;\r\n    flex-direction: column;\r\n    min-height: 116px;\r\n    padding: 12px;\r\n    margin-top: 12px;\r\n    border-width: 1px;\r\n    border-style: dashed;\r\n    border-color: #007aff;\r\n    border-radius: 12px;\r\n    background-color: #f0f7ff;\r\n  }\r\n\r\n  .target-title {\r\n    font-size: 16px;\r\n    color: #111827;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .target-desc {\r\n    margin-top: 4px;\r\n    font-size: 12px;\r\n    color: #6b7280;\r\n  }\r\n\r\n  .empty-box {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: center;\r\n    min-height: 80px;\r\n    margin-top: 12px;\r\n    border-radius: 12px;\r\n    background-color: #ffffff;\r\n  }\r\n\r\n  .empty-text {\r\n    font-size: 13px;\r\n    color: #9ca3af;\r\n  }\r\n</style>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/built-in/component/teleport/teleport-defer"},"component_teleport_teleport-options":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/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"},"component_teleport_teleport-props":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/built-in/component/teleport/teleport-props.uvue","code":"```vue\n<template>\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\r\n  <scroll-view style=\"flex: 1\">\r\n  <!-- #endif -->\r\n    <view class=\"teleport-page\">\r\n      <view class=\"control-panel\">\r\n        <view class=\"control-row\">\r\n          <view class=\"control-copy\">\r\n            <text class=\"control-title\">target</text>\r\n            <text class=\"control-desc\">{{ currentTarget.description }}</text>\r\n          </view>\r\n          <view class=\"target-actions\">\r\n            <button v-for=\"item in targetList\" :key=\"item.title\" class=\"target-button\" size=\"mini\"\r\n              :type=\"currentTarget.title == item.title ? 'primary' : 'default'\"\r\n              @click=\"setTarget(item)\">{{ item.title }}</button>\r\n          </view>\r\n        </view>\r\n        <view class=\"control-row\">\r\n          <view class=\"control-copy\">\r\n            <text class=\"control-title\">disabled</text>\r\n            <text class=\"control-desc\">{{ teleportDisabled ? '原位置渲染' : '传送到目标' }}</text>\n          </view>\r\n          <switch :checked=\"teleportDisabled\" @change=\"onDisabledChange\" />\n        </view>\r\n        <view class=\"control-row\">\r\n          <view class=\"control-copy\">\r\n            <text class=\"control-title\">v-if</text>\r\n            <text class=\"control-desc\">{{ showTeleport ? '创建 Teleport' : '销毁 Teleport' }}</text>\n          </view>\r\n          <switch :checked=\"showTeleport\" @change=\"onShowChange\" />\n        </view>\r\n        <button class=\"defer-link-button\" size=\"mini\" type=\"primary\" @click=\"goDeferPage\">defer 专项测试</button>\r\n      </view>\r\n\r\n      <view class=\"status-box\">\r\n        <text class=\"status-text\">当前：{{ teleportStatus }}</text>\r\n        <text class=\"status-tip\">切换 target 时通过 key 重建 Teleport。</text>\r\n      </view>\r\n\r\n      <view id=\"teleport-origin-box\" class=\"origin-box\">\r\n        <text class=\"origin-title\">Teleport 声明位置</text>\r\n        <text class=\"origin-desc\">disabled 开启时，内容会留在这里。</text>\r\n\r\n        <Teleport v-if=\"showTeleport\" :key=\"currentTarget.title\" :to=\"currentTarget.value\" :disabled=\"teleportDisabled\" :defer=\"true\">\n          <view id=\"teleport-content\" class=\"teleport-card\">\r\n            <text class=\"card-title\">Teleport 内容</text>\r\n            <text class=\"card-desc\">to: {{ currentTarget.description }}</text>\r\n          </view>\r\n        </Teleport>\r\n\r\n        <view v-if=\"!showTeleport\" class=\"empty-box\">\n          <text class=\"empty-text\">Teleport 已销毁</text>\r\n        </view>\r\n      </view>\r\n\r\n      <view class=\"target-box\" :class=\"currentTarget.title == 'page' ? 'target-box-active' : ''\">\r\n        <text class=\"target-title\">page</text>\r\n        <text class=\"target-desc\">to=\"page\" 指向页面根节点，此区域仅用于说明当前状态。</text>\r\n      </view>\r\n\r\n      <view id=\"teleport-id-target\" class=\"target-box\" :class=\"currentTarget.title == '#id' ? 'target-box-active' : ''\">\r\n        <text class=\"target-title\">#id</text>\r\n        <text class=\"target-desc\">to=\"#teleport-id-target\" 指向当前容器。</text>\r\n      </view>\r\n\r\n      <view id=\"teleport-ref-target\" ref=\"teleportRefTarget\" class=\"target-box\" :class=\"currentTarget.title == 'ref' ? 'target-box-active' : ''\">\n        <text class=\"target-title\">ref</text>\n        <text class=\"target-desc\">:to=\"teleportRefTarget\" 指向这个 ref 容器。</text>\n      </view>\n\n      <view id=\"teleport-page-bottom-anchor\" class=\"page-bottom-anchor\"></view>\n    </view>\n    <!-- #ifdef APP && !VUE3-VAPOR -->\r\n    </scroll-view>\n    <!-- #endif -->\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n  type TargetValue = string | Ref<UniElement | null>\r\n\n  type TargetItem = {\n    title : string\n    value : TargetValue\n    description : string\r\n  }\r\n\r\n  const teleportRefTarget = ref<UniElement | null>(null)\n  const instance = getCurrentInstance()!.proxy!\n  const teleportDisabled = ref<boolean>(false)\n  const showTeleport = ref<boolean>(false)\n\n  const targetList = [\n    { title: '#id', value: '#teleport-id-target', description: '指定 id 容器' },\n    { title: 'ref', value: teleportRefTarget, description: '模板 ref 容器' },\n    <!-- #ifdef APP && VUE3-VAPOR -->\n    { title: 'page', value: 'page', description: '页面根节点' }\n    <!-- #endif -->\n  ] as TargetItem[]\n\n  const currentTarget = ref<TargetItem>(targetList[0])\n\n  const teleportStatus = computed(() : string => {\n    if (!showTeleport.value) {\n      return 'v-if = false，Teleport 已销毁'\n    }\n    if (teleportDisabled.value) {\n      return 'disabled = true，内容留在声明位置'\n    }\n    return '传送到 ' + currentTarget.value.title\n  })\n\n  function setTarget(target : TargetItem) {\n    currentTarget.value = target\n  }\n\n  function setTargetByIndex(index : number) {\n    if (index < 0 || index >= targetList.length) {\n      return\n    }\n    currentTarget.value = targetList[index]\n  }\n\n  function setTeleportDisabled(disabled : boolean) {\n    teleportDisabled.value = disabled\n  }\n\n  function setShowTeleport(show : boolean) {\n    showTeleport.value = show\n  }\n\n  function onDisabledChange(e : UniSwitchChangeEvent) {\n    teleportDisabled.value = e.detail.value\n  }\n\n  function onShowChange(e : UniSwitchChangeEvent) {\n    showTeleport.value = e.detail.value\n  }\n\r\n  function goDeferPage() {\r\n    uni.navigateTo({ url: './teleport-defer' })\r\n  }\r\n\r\n  function getBoundingClientRectForTest(id : string) : DOMRect | null {\n    return uni.getElementById(id)?.getBoundingClientRect() ?? null\n  }\n\r\n  defineExpose({\n    setTargetByIndex,\n    setTeleportDisabled,\n    setShowTeleport,\n    getBoundingClientRectForTest\n  })\n</script>\r\n\r\n<style>\r\n  .teleport-page {\r\n    padding: 16px;\r\n    background-color: #f5f7fb;\r\n  }\r\n\r\n  .control-panel {\r\n    display: flex;\r\n    flex-direction: column;\r\n    padding: 12px;\r\n    margin-top: 12px;\r\n    border-radius: 12px;\r\n    background-color: #ffffff;\r\n  }\r\n\r\n  .control-row {\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    padding-top: 8px;\r\n    padding-bottom: 8px;\r\n  }\r\n\r\n  .control-copy {\r\n    display: flex;\r\n    flex-direction: column;\r\n    flex: 1;\r\n    margin-right: 12px;\r\n  }\r\n\r\n  .control-title {\r\n    font-size: 16px;\r\n    color: #1f2937;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .control-desc {\r\n    margin-top: 4px;\r\n    font-size: 12px;\r\n    color: #6b7280;\r\n  }\r\n\r\n  .target-actions {\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n  }\r\n\r\n  .target-button {\r\n    width: 62px;\r\n    margin-left: 6px;\r\n  }\r\n\r\n  .status-box {\r\n    display: flex;\r\n    flex-direction: column;\r\n    padding: 12px;\r\n    margin-top: 12px;\r\n    border-radius: 12px;\r\n    background-color: #eef6ff;\r\n  }\r\n\r\n  .status-text {\r\n    font-size: 14px;\r\n    color: #0052cc;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .status-tip {\r\n    margin-top: 4px;\r\n    font-size: 12px;\r\n    color: #4b5563;\r\n  }\r\n\r\n  .defer-link-button {\r\n    margin-top: 10px;\r\n  }\r\n\r\n  .target-box {\r\n    display: flex;\r\n    flex-direction: column;\r\n    min-height: 116px;\r\n    padding: 12px;\r\n    margin-top: 12px;\r\n    border-width: 1px;\r\n    border-style: dashed;\r\n    border-color: #c7d2fe;\r\n    border-radius: 12px;\r\n    background-color: #ffffff;\r\n  }\r\n\r\n  .target-box-active {\r\n    border-color: #007aff;\r\n    background-color: #f0f7ff;\r\n  }\r\n\r\n  .target-title {\r\n    font-size: 16px;\r\n    color: #111827;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .target-desc {\n    margin-top: 4px;\n    font-size: 12px;\n    color: #6b7280;\n  }\n\n  .page-bottom-anchor {\n    height: 1px;\n  }\n\n  .origin-box {\n    display: flex;\r\n    flex-direction: column;\r\n    min-height: 136px;\r\n    padding: 12px;\r\n    margin-top: 12px;\r\n    border-radius: 12px;\r\n    background-color: #fff7ed;\r\n  }\r\n\r\n  .origin-title {\r\n    font-size: 16px;\r\n    color: #9a3412;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .origin-desc {\r\n    margin-top: 4px;\r\n    margin-bottom: 10px;\r\n    font-size: 12px;\r\n    color: #9a3412;\r\n  }\r\n\r\n  .teleport-card {\r\n    display: flex;\r\n    flex-direction: column;\r\n    padding: 12px;\r\n    margin-top: 10px;\r\n    border-radius: 10px;\r\n    background-color: #007aff;\r\n  }\r\n\r\n  .card-title {\r\n    font-size: 16px;\r\n    color: #ffffff;\r\n    font-weight: bold;\r\n  }\r\n\r\n  .card-desc {\r\n    margin-top: 4px;\r\n    font-size: 12px;\r\n    color: #dbeafe;\r\n  }\r\n\r\n  .empty-box {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: center;\r\n    min-height: 52px;\r\n    margin-top: 10px;\r\n    border-radius: 8px;\r\n    background-color: #ffffff;\r\n  }\r\n\r\n  .empty-text {\r\n    font-size: 13px;\r\n    color: #9ca3af;\r\n  }\r\n</style>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/built-in/component/teleport/teleport-props"},"special-attributes_key_child-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/built-in/special-attributes/key/child-composition.uvue","code":"```vue\n  <template>\r\n      <view style=\"padding: 12px; background-color: #eeeeee;\">\r\n          <text>props id: </text>\r\n          <text id=\"child-id\">{{ id }}</text>\r\n          <text>created id: </text>\r\n          <text id=\"child-created-id\" style=\"margin-top: 8px;\">{{ createdId }}</text>\r\n      </view>\r\n  </template>\r\n\r\n  <script setup lang=\"uts\">\r\n    const props = defineProps({\r\n        id: { type: String, default: '' }\r\n    })\r\n\r\n    const createdId = ref(props.id)\r\n  </script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/built-in/special-attributes/key/child-composition"},"special-attributes_key_key-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/built-in/special-attributes/key/key-composition.uvue","code":"```vue\n<template>\r\n    <view style=\"flex: 1; padding: 20px;\">\r\n        <button id=\"btn\" @click=\"switchItem\">切换详情</button>\r\n\r\n        <text>页面当前 currentId: </text>\r\n        <text id=\"current-id\">{{ currentId }}</text>\r\n\r\n        <!-- 小程序平台不支持 :key，该页面已在页面注册和入口处通过条件编译屏蔽 -->\r\n        <view v-if=\"currentId != ''\" style=\"margin-top: 20px;\">\r\n            <Child :key=\"currentId\" :id=\"currentId\" />\r\n        </view>\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 currentId = ref('a')\r\n\r\n    function switchItem() {\r\n        currentId.value = currentId.value == 'a' ? 'b' : 'a'\r\n    }\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/built-in/special-attributes/key/key-composition"},"special-elements_component_component-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/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 = shallowRef(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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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    <!-- vapor button 调整实现，自动化测试无法通过 innerText 获取文本内容，重构为 text  -->\n    <text class=\"mt-10 btn\" id=\"show-botton\" @click=\"handleShow\">{{ dataInfo.isShow ? '点击隐藏' : '点击显示' }}</text>\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.btn{\n  border: 1px solid #eee;\n  border-radius: 4px;\n  text-align: center;\n  padding-top: 8px;\n  padding-bottom: 8px;\n}\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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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    <text class=\"mt-10 btn\" id=\"show-botton\" @click=\"handleShow\">{{ dataInfo.isShow ? '点击隐藏' : '点击显示' }}</text>\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.btn{\n  border: 1px solid #eee;\n  border-radius: 4px;\n  text-align: center;\n  padding-top: 8px;\n  padding-bottom: 8px;\n}\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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/alpha/pages/reactivity/advanced/mark-raw/mark-raw.uvue","code":"```vue\n<template>\n\t<view class=\"page\">\n\t\tmarkRaw 暂不支持\n\t</view>\n</template>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/advanced/mark-raw/mark-raw"},"advanced_on-scope-dispose_on-scope-dispose":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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\">{{ 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.com/dcloud/hello-uvue/blob/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    <!-- #ifndef VUE3-VAPOR -->\r\n    <button id=\"update-page-render-btn\" @click=\"updatePageRender\">\r\n      update page render\r\n    </button>\r\n    <!-- #endif -->\r\n  </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nlet pageKey = ref<number>(0)\r\n\r\ntype StateNested = {\r\n  count : number\r\n}\r\ntype State = {\r\n  count : number,\r\n  nested : StateNested\r\n}\r\n// 可通过泛型指定类型\r\nconst state = shallowReadonly<State>({\r\n  count: 0,\r\n  nested: {\r\n    count: 0\r\n  }\r\n})\r\n\r\nconst reactiveState = reactive<State>(state)\r\n\r\n// #ifdef APP\r\nconst incrementStateCount = () => {\r\n  state.count++\r\n}\r\n\r\nconst incrementStateNestedCount = () => {\r\n  state.nested.count++\r\n}\r\n// #endif\r\n\r\nconst updatePageRender = () => {\r\n  pageKey.value = Date.now()\r\n}\r\n\r\ndefineExpose({\r\n  reactiveState,\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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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>\n    <view class=\"flex justify-between flex-row mb-10\">\n      <text>computed triple count:</text>\n      <text id=\"triple-count\">{{ tripleCount }}</text>\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\nfunction useTripleCount() {\n    return computed(() => count.value * 3)\n}\nconst tripleCount = useTripleCount()\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.com/dcloud/hello-uvue/blob/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>\n    <view class=\"flex justify-between flex-row mb-10\">\n      <text>computed triple count:</text>\n      <text id=\"triple-count\">{{ tripleCount }}</text>\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    },\n    tripleCount(): number {\n      return this.count * 3\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.com/dcloud/hello-uvue/blob/alpha/pages/reactivity/core/reactive/reactive.uvue","code":"```vue\n<template>\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\r\n  <scroll-view style=\"flex: 1;\">\r\n    <!-- #endif -->\r\n\t\t<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      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>arr2ForEachEffectCount:</text>\r\n        <text id=\"arr2\">{{ arr2ForEachEffectCount }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>arr3(reverse):</text>\r\n        <text id=\"arr3\">{{ JSON.stringify(arr3) }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>arr4(sort):</text>\r\n        <text id=\"arr4\">{{ JSON.stringify(computedArr4) }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>arr5:</text>\r\n        <text id=\"arr5\">{{ JSON.stringify(arr5Result) }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>map2ForEachEffectCount:</text>\r\n        <text id=\"map2\">{{ map2ForEachEffectCount }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>map3ForOfEffectCount:</text>\r\n        <text id=\"map3\">{{ map3ForOfEffectCount }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>set2ForEachEffectCount:</text>\r\n        <text id=\"set2\">{{ set2ForEachEffectCount }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>set3ForOfEffectCount:</text>\r\n        <text id=\"set3\">{{ set3ForOfEffectCount }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>response.data.success:</text>\r\n        <text id=\"generic\">{{ response.data.success }}</text>\r\n      </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>reactive-str-id:</text>\r\n      <text id=\"reactive-str-id\">{{ r1.getString(('id')) }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>reactive-str-boolean :</text>\r\n      <text id=\"reactive-str-boolean\">{{ r1.getBoolean(('bl')) }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>reactive-str-number :</text>\r\n      <text id=\"reactive-str-number\">{{ r1.getNumber(('n')) }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>reactive-str-any :</text>\r\n      <text id=\"reactive-str-any\">{{ r1.getAny(('id')) }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>reactive-str-arr :</text>\r\n      <text id=\"reactive-str-arr\">{{ r1.getArray(('arr'))![0] }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>reactive-str-json :</text>\r\n      <text id=\"reactive-str-json\">{{ r1.getJSON(('cars[0]'))!['name'] }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>reactive-str:</text>\r\n      <text id=\"reactive-str\">{{ r2.getString(\"msg\") }}</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      <button class='mb-10' id=\"update-arr2-forEach-effect-btn\" @click=\"updateArr2()\">update arr2</button>\r\n      <button class='mb-10' id=\"update-arr4-btn\" @click=\"updateArr4()\">update arr4</button>\r\n      <button class='mb-10' id=\"update-map2-forEach-effect-btn\" @click=\"updateMap2()\">update map2 for each</button>\r\n      <button class='mb-10' id=\"update-map3-forOf-effect-btn\" @click=\"updateMap3()\">update map3 for of</button>\r\n      <button class='mb-10' id=\"update-set2-forEach-effect-btn\" @click=\"updateSet2()\">update set2 for each</button>\r\n      <button class='mb-10' id=\"update-set3-forOf-effect-btn\" @click=\"updateSet3()\">update set3 for of</button>\r\n      <button class='mb-10' id=\"update-generic\" @click=\"updateResponse()\">response.data.success</button>\r\n      \r\n      <!-- 复杂场景测试 -->\r\n      <view class=\"flex justify-between flex-row mb-10 mt-20\">\r\n        <text class=\"section-title\">复杂场景</text>\r\n      </view>\r\n      \r\n      <!-- 1. 数组嵌套对象测试 -->\r\n      <view class=\"mb-10\">\r\n        <text>arrWithObj[0].name:</text>\r\n        <text id=\"arr-with-obj-name\">{{ arrWithObj[0].name }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>arrWithObj[0].count:</text>\r\n        <text id=\"arr-with-obj-count\">{{ arrWithObj[0].count }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>arrWithObj length:</text>\r\n        <text id=\"arr-with-obj-length\">{{ arrWithObj.length }}</text>\r\n      </view>\r\n      <button class='mb-10' id=\"update-arr-with-obj-name-btn\" @click=\"updateArrWithObjName()\">update arrWithObj[0].name</button>\r\n      <button class='mb-10' id=\"update-arr-with-obj-count-btn\" @click=\"updateArrWithObjCount()\">update arrWithObj[0].count</button>\r\n      <button class='mb-10' id=\"push-arr-with-obj-btn\" @click=\"pushArrWithObj()\">push new obj to arrWithObj</button>\r\n      \r\n      <!-- 2. 对象嵌套数组测试 -->\r\n      <view class=\"mb-10\">\r\n        <text>objWithArr.items:</text>\r\n        <text id=\"obj-with-arr-items\">{{ JSON.stringify(objWithArr.items) }}</text>\r\n      </view>\r\n      <view class=\"mb-10\">\r\n        <text>objWithArr.items[0]:</text>\r\n        <text id=\"obj-with-arr-items-0\">{{ (objWithArr['items'] as string[])[0] }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>objWithArr.items.length:</text>\r\n        <text id=\"obj-with-arr-items-length\">{{ (objWithArr['items'] as string[]).length }}</text>\r\n      </view>\r\n      <button class='mb-10' id=\"update-obj-with-arr-items-0-btn\" @click=\"updateObjWithArrItems0()\">update objWithArr.items[0]</button>\r\n      <button class='mb-10' id=\"push-obj-with-arr-items-btn\" @click=\"pushObjWithArrItems()\">push to objWithArr.items</button>\r\n      \r\n      <!-- 3. JSON.parse + reactive 联合测试 -->\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>jsonParsedData.user.name:</text>\r\n        <text id=\"json-parsed-user-name\">{{ jsonParsedData.getString('user.name') }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>jsonParsedData.user.age:</text>\r\n        <text id=\"json-parsed-user-age\">{{ jsonParsedData.getNumber('user.age') }}</text>\r\n      </view>\r\n      <view class=\"mb-10\">\r\n        <text>jsonParsedData.tags:</text>\r\n        <text id=\"json-parsed-tags\">{{ JSON.stringify(jsonParsedData.tags) }}</text>\r\n      </view>\r\n      <view class=\"mb-10\">\r\n        <text>jsonParsedData.items[0].title:</text>\r\n        <text id=\"json-parsed-items-0-title\">{{ jsonParsedData.getJSON('items[0]')!.title }}</text>\r\n      </view>\r\n      <button class='mb-10' id=\"update-json-parsed-user-name-btn\" @click=\"updateJsonParsedUserName()\">update jsonParsedData.user.name</button>\r\n      <button class='mb-10' id=\"update-json-parsed-user-age-btn\" @click=\"updateJsonParsedUserAge()\">update jsonParsedData.user.age</button>\r\n      <button class='mb-10' id=\"push-json-parsed-tags-btn\" @click=\"pushJsonParsedTags()\">push to jsonParsedData.tags</button>\r\n      <button class='mb-10' id=\"update-json-parsed-items-0-title-btn\" @click=\"updateJsonParsedItems0Title()\">update jsonParsedData.items[0].title</button>\r\n      \r\n      <!-- 4. 多层嵌套复杂结构测试 -->\r\n      <view class=\"mb-10\">\r\n        <text>complexData.users[0].profile.name:</text>\r\n        <text id=\"complex-users-0-profile-name\">{{ ((complexData['users'] as UTSJSONObject[])[0] as UTSJSONObject).getString('profile.name') }}</text>\r\n      </view>\r\n      <view class=\"mb-10\">\r\n        <text>complexData.users[0].hobbies[0]:</text>\r\n        <text id=\"complex-users-0-hobbies-0\">{{ (((complexData['users'] as UTSJSONObject[])[0] as UTSJSONObject)['hobbies'] as string[])[0] }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>complexData.users[0].hobbies.length:</text>\r\n        <text id=\"complex-users-0-hobbies-length\">{{ (((complexData['users'] as UTSJSONObject[])[0] as UTSJSONObject)['hobbies'] as string[]).length }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>complexData.meta.count:</text>\r\n        <text id=\"complex-meta-count\">{{ (complexData['meta'] as UTSJSONObject)['count'] }}</text>\r\n      </view>\r\n      <button class='mb-10' id=\"update-complex-users-0-profile-name-btn\" @click=\"updateComplexUsers0ProfileName()\">update complexData.users[0].profile.name</button>\r\n      <button class='mb-10' id=\"update-complex-users-0-hobbies-0-btn\" @click=\"updateComplexUsers0Hobbies0()\">update complexData.users[0].hobbies[0]</button>\r\n      <button class='mb-10' id=\"push-complex-users-0-hobbies-btn\" @click=\"pushComplexUsers0Hobbies()\">push to complexData.users[0].hobbies</button>\r\n      <button class='mb-10' id=\"update-complex-meta-count-btn\" @click=\"updateComplexMetaCount()\">update complexData.meta.count</button>\r\n      \r\n      <!-- 5. watchEffect 追踪复杂结构 -->\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>complexEffectCount:</text>\r\n        <text id=\"complex-effect-count\">{{ complexEffectCount }}</text>\r\n      </view>\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>jsonParsedEffectCount:</text>\r\n        <text id=\"json-parsed-effect-count\">{{ jsonParsedEffectCount }}</text>\r\n      </view>\r\n      <button class='mb-10' id=\"trigger-complex-effect-btn\" @click=\"triggerComplexEffect()\">trigger complex effect</button>\r\n      <button class='mb-10' id=\"trigger-json-parsed-effect-btn\" @click=\"triggerJsonParsedEffect()\">trigger jsonParsed effect</button>\r\n      \r\n      <!-- 6. 数组嵌套对象 + forEach 响应式 -->\r\n      <view class=\"flex justify-between flex-row mb-10\">\r\n        <text>arrWithObjForEachCount:</text>\r\n        <text id=\"arr-with-obj-forEach-count\">{{ arrWithObjForEachCount }}</text>\r\n      </view>\r\n      <button class='mb-10' id=\"update-arr-with-obj-forEach-btn\" @click=\"updateArrWithObjForEach()\">update arrWithObj (forEach effect)</button>\r\n      \r\n      <!-- 7. 对象嵌套数组 + JSON.parse 联合测试 -->\r\n      <view class=\"mb-10\">\r\n        <text>jsonObjWithArr.data.list:</text>\r\n        <text id=\"json-obj-with-arr-list\">{{ JSON.stringify((jsonObjWithArr['data'] as UTSJSONObject)['list']) }}</text>\r\n      </view>\r\n      <view class=\"mb-10\">\r\n        <text>jsonObjWithArr.data.list[0].value:</text>\r\n        <text id=\"json-obj-with-arr-list-0-value\">{{ (((jsonObjWithArr['data'] as UTSJSONObject)['list'] as UTSJSONObject[])[0] as UTSJSONObject)['value'] }}</text>\r\n      </view>\r\n      <button class='mb-10' id=\"update-json-obj-with-arr-list-0-value-btn\" @click=\"updateJsonObjWithArrList0Value()\">update jsonObjWithArr.data.list[0].value</button>\r\n      <button class='mb-10' id=\"push-json-obj-with-arr-list-btn\" @click=\"pushJsonObjWithArrList()\">push to jsonObjWithArr.data.list</button>\r\n    </view>\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\r\n\t</scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n\tconst count = ref(0)\r\n\r\n\t// TODO: 待支持后补充泛型示例\r\n\tconst obj = reactive({\r\n\t\tstr: 'default str',\r\n\t\tnum: count,\r\n\t\tarr: ['a', 'b', 'c']\r\n\t})\r\n\r\n\tconst updateObjStr = () => {\r\n\t\tobj['str'] = 'new str';\r\n\t}\r\n\r\n\tconst updateObjNum = () => {\r\n\t\tobj['num'] = (obj['num'] as number) + 1\r\n\t}\r\n\r\n\tconst updateCount = () => {\r\n\t\tcount.value++\r\n\t}\r\n\r\n\tconst updateObjArr = () => {\r\n\t\t(obj['arr'] as string[]).push('d')\r\n\t}\r\n\r\n\tconst obj1 = reactive({\r\n\t\ta: { b: { c: 'c' } }\r\n\t})\r\n\r\n\tconst count1 = ref(0)\r\n\twatchEffect(() => {\r\n\t\tcount1.value++\r\n\t\t// 测试getString等keyPath触发依赖收集\r\n\t\tobj1.getString(\"a.b.c\")\r\n\t})\r\n\tfunction updateObj1_A_B_C() {\r\n\t\t((obj1[\"a\"] as UTSJSONObject)[\"b\"] as UTSJSONObject)[\"c\"] = \"c1-\" + Date.now()\r\n\t}\r\n\tconst arr1 = ref<number[]>([])\r\n\tfunction test(...args : number[]) {\r\n\t\tarr1.value = args\r\n\t}\r\n\tfunction updateArr1(isReactive : boolean) {\r\n\t\tif (isReactive) {\r\n\t\t\ttest(...reactive([4, 5, 6]))\r\n\t\t} else {\r\n\t\t\ttest(...[1, 2, 3])\r\n\t\t}\r\n\t}\r\n\r\n\tconst arr2 = reactive<number[]>([1])\r\n\tconst arr2ForEachEffectCount = ref(0)\r\n\twatchEffect(() => {\r\n\t\tarr2ForEachEffectCount.value++\r\n\t\tarr2.forEach((item) => {\r\n\t\t\tconsole.log('arr2', item)\r\n\t\t})\r\n\t})\r\n\tfunction updateArr2() {\r\n\t\tarr2.push(Date.now())\r\n\t}\r\n\r\n\tconst arr3 = reactive([1, 2, 3, 4, 5]).reverse()\r\n\r\n\tconst arr4 = reactive<number[]>([5, 3, 4, 1, 2])\r\n\tconst computedArr4 = computed(() => arr4.sort())\r\n\tfunction updateArr4() {\r\n\t\tarr4.push(arr4.length + 1)\r\n\t\tconsole.log(arr4)\r\n\t}\r\n\r\n\tconst arr5 = reactive<UTSJSONObject[]>([{ id: 1 }, { id: 2 }])\r\n\tconst arr5FirstObj = arr5[0]\r\n\tconst arr5FirstRawObj = toRaw<UTSJSONObject>(arr5[0])\r\n\tconst arr5Result = {\r\n\t\tincludes: [arr5.includes(arr5FirstObj), arr5.includes(arr5FirstRawObj)],\r\n\t\tindexOf: [arr5.indexOf(arr5FirstObj), arr5.indexOf(arr5FirstRawObj)],\r\n\t\tlastIndexOf: [arr5.lastIndexOf(arr5FirstObj), arr5.lastIndexOf(arr5FirstRawObj)],\r\n\t}\r\n\r\n\tconst map2 = reactive(new Map<string, number>([[\"a\", 1]]))\r\n\tconst map2ForEachEffectCount = ref(0)\r\n\twatchEffect(() => {\r\n\t\tmap2ForEachEffectCount.value++\r\n\t\tmap2.forEach((item : number) => {\r\n\t\t\tconsole.log('map2', item)\r\n\t\t})\r\n\t})\r\n\tfunction updateMap2() {\r\n\t\tmap2.set(\"c-\" + Date.now(), Date.now())\r\n\t}\r\n\r\n\tconst map3 = reactive(new Map<string, number>([[\"a\", 1]]))\r\n\tconst map3ForOfEffectCount = ref(0)\r\n\twatchEffect(() => {\r\n\t\tmap3ForOfEffectCount.value++\r\n\t\tfor (const item of map3) {\r\n\t\t\tconsole.log(\"map3\", item)\r\n\t\t}\r\n\t})\r\n\tfunction updateMap3() {\r\n\t\tmap3.set(\"c-\" + Date.now(), Date.now())\r\n\t}\r\n\r\n\tconst set2 = reactive(new Set<number>([1]))\r\n\tconst set2ForEachEffectCount = ref(0)\r\n\twatchEffect(() => {\r\n\t\tset2ForEachEffectCount.value++\r\n\t\tset2.forEach((item : number) => {\r\n\t\t\tconsole.log('set2', item)\r\n\t\t})\r\n\t})\r\n\tfunction updateSet2() {\r\n\t\tset2.add(Date.now())\r\n\t}\r\n\r\n\tconst set3 = reactive(new Set<number>([1]))\r\n\tconst set3ForOfEffectCount = ref(0)\r\n\twatchEffect(() => {\r\n\t\tset3ForOfEffectCount.value++\r\n\t\tfor (const item of set3) {\r\n\t\t\tconsole.log(\"set3\", item)\r\n\t\t}\r\n\t})\r\n\tfunction updateSet3() {\r\n\t\tset3.add(Date.now())\r\n\t}\r\n  \r\n  type BaseResponse<T> = {\r\n  \tcode : number\r\n  \tdata : T\r\n  }\r\n  const response = reactive<BaseResponse<UTSJSONObject>>({\r\n  \tcode: 1,\r\n  \tdata: {\r\n      success: true\r\n    } as UTSJSONObject\r\n  })\r\n  function updateResponse() {\r\n  \tresponse.data.success = response.data.success != true\r\n  }\r\n  \r\n  let r1 = reactive({})\r\n  let result = JSON.parse(`{ \"result\": { \"data\": { \"id\": \"1\", \"bl\": false, \"n\": 2, \"arr\": [\"1\"], \"cars\": [ { \"name\": \"car1\", \"value\": 100} ] } } }`) as UTSJSONObject\r\n  r1 = result.getJSON('result.data', {} as UTSJSONObject)\r\n  let r2 = reactive({})\r\n  r2 = { msg: '1' }\r\n  \r\n  // ========== 复杂场景测试 ==========\r\n  \r\n  // 1. 数组嵌套对象测试\r\n  const arrWithObj = reactive<UTSJSONObject[]>([\r\n    { name: 'item1', count: 0 } as UTSJSONObject,\r\n    { name: 'item2', count: 1 } as UTSJSONObject\r\n  ])\r\n  \r\n  function updateArrWithObjName() {\r\n    (arrWithObj[0] as UTSJSONObject)['name'] = 'updated-item1-' + Date.now()\r\n  }\r\n  \r\n  function updateArrWithObjCount() {\r\n    const currentCount = (arrWithObj[0] as UTSJSONObject)['count'] as number;\r\n    (arrWithObj[0] as UTSJSONObject)['count'] = currentCount + 1\r\n  }\r\n  \r\n  function pushArrWithObj() {\r\n    arrWithObj.push({ name: 'item' + arrWithObj.length, count: arrWithObj.length } as UTSJSONObject)\r\n  }\r\n  \r\n  // 2. 对象嵌套数组测试\r\n  const objWithArr = reactive({\r\n    items: ['a', 'b', 'c'] as string[]\r\n  })\r\n  \r\n  function updateObjWithArrItems0() {\r\n    const items = objWithArr['items'] as string[]\r\n    items[0] = 'updated-' + Date.now()\r\n  }\r\n  \r\n  function pushObjWithArrItems() {\r\n    const items = objWithArr['items'] as string[]\r\n    items.push('item' + items.length)\r\n  }\r\n  \r\n  // 3. JSON.parse + reactive 联合测试\r\n  const jsonString = `{\r\n    \"user\": {\r\n      \"name\": \"John\",\r\n      \"age\": 30\r\n    },\r\n    \"tags\": [\"tag1\", \"tag2\"],\r\n    \"items\": [\r\n      { \"title\": \"item1\", \"value\": 100 },\r\n      { \"title\": \"item2\", \"value\": 200 }\r\n    ]\r\n  }`\r\n  const jsonParsed = JSON.parse(jsonString) as UTSJSONObject\r\n  const jsonParsedData = reactive(jsonParsed)\r\n  \r\n  function updateJsonParsedUserName() {\r\n    ((jsonParsedData['user'] as UTSJSONObject) as UTSJSONObject)['name'] = 'Updated-' + Date.now()\r\n  }\r\n  \r\n  function updateJsonParsedUserAge() {\r\n    const currentAge = ((jsonParsedData['user'] as UTSJSONObject) as UTSJSONObject)['age'] as number;\r\n    ((jsonParsedData['user'] as UTSJSONObject) as UTSJSONObject)['age'] = currentAge + 1\r\n  }\r\n  \r\n  function pushJsonParsedTags() {\r\n    const tags = jsonParsedData['tags'] as string[]\r\n    tags.push('tag' + tags.length)\r\n  }\r\n  \r\n  function updateJsonParsedItems0Title() {\r\n    const items = jsonParsedData['items'] as UTSJSONObject[];\r\n    (items[0] as UTSJSONObject)['title'] = 'updated-item1-' + Date.now()\r\n  }\r\n  \r\n  // 4. 多层嵌套复杂结构测试\r\n  const complexData = reactive({\r\n    users: [\r\n      {\r\n        profile: {\r\n          name: 'Alice',\r\n          age: 25\r\n        },\r\n        hobbies: ['reading', 'coding'] as string[]\r\n      } as UTSJSONObject\r\n    ] as UTSJSONObject[],\r\n    meta: {\r\n      count: 1\r\n    } as UTSJSONObject\r\n  })\r\n  \r\n  function updateComplexUsers0ProfileName() {\r\n    (((complexData['users'] as UTSJSONObject[])[0] as UTSJSONObject)['profile'] as UTSJSONObject)['name'] = 'Updated-Alice-' + Date.now()\r\n  }\r\n  \r\n  function updateComplexUsers0Hobbies0() {\r\n    (((complexData['users'] as UTSJSONObject[])[0] as UTSJSONObject)['hobbies'] as string[])[0] = 'updated-hobby-' + Date.now()\r\n  }\r\n  \r\n  function pushComplexUsers0Hobbies() {\r\n    const hobbies = (((complexData['users'] as UTSJSONObject[])[0] as UTSJSONObject)['hobbies'] as string[])\r\n    hobbies.push('hobby' + hobbies.length)\r\n  }\r\n  \r\n  function updateComplexMetaCount() {\r\n    const meta = complexData['meta'] as UTSJSONObject\r\n    const currentCount = meta['count'] as number;\r\n    meta['count'] = currentCount + 1\r\n  }\r\n  \r\n  // 5. watchEffect 追踪复杂结构\r\n  const complexEffectCount = ref(0)\r\n  watchEffect(() => {\r\n    complexEffectCount.value++\r\n    // 追踪复杂嵌套结构\r\n    const users = complexData['users'] as UTSJSONObject[]\r\n    const user = users[0] as UTSJSONObject\r\n    const profile = user['profile'] as UTSJSONObject\r\n    const userName = profile['name']\r\n    const hobbies = user['hobbies'] as string[]\r\n    const hobby = hobbies[0]\r\n    const meta = complexData['meta'] as UTSJSONObject\r\n    const metaCount = meta['count']\r\n    console.log('complex effect:', userName, hobby, metaCount)\r\n  })\r\n  \r\n  const jsonParsedEffectCount = ref(0)\r\n  watchEffect(() => {\r\n    jsonParsedEffectCount.value++\r\n    // 追踪 JSON.parse 后的响应式数据\r\n    const userName = jsonParsedData.getString('user.name')\r\n    const tags = jsonParsedData['tags']\r\n    const items = jsonParsedData['items'] as UTSJSONObject[]\r\n    const itemTitle = (items[0] as UTSJSONObject)['title']\r\n    console.log('jsonParsed effect:', userName, tags, itemTitle)\r\n  })\r\n  \r\n  function triggerComplexEffect() {\r\n    updateComplexUsers0ProfileName()\r\n    updateComplexMetaCount()\r\n  }\r\n  \r\n  function triggerJsonParsedEffect() {\r\n    updateJsonParsedUserName()\r\n    pushJsonParsedTags()\r\n  }\r\n  \r\n  // 6. 数组嵌套对象 + forEach 响应式\r\n  const arrWithObjForEachCount = ref(0)\r\n  watchEffect(() => {\r\n    arrWithObjForEachCount.value++\r\n    arrWithObj.forEach((item) => {\r\n      const name = (item as UTSJSONObject)['name']\r\n      const count = (item as UTSJSONObject)['count']\r\n      // console.log('arrWithObj forEach:', name, count)\r\n    })\r\n  })\r\n  \r\n  function updateArrWithObjForEach() {\r\n    updateArrWithObjName()\r\n    pushArrWithObj()\r\n  }\r\n  \r\n  // 7. 对象嵌套数组 + JSON.parse 联合测试\r\n  const jsonObjWithArrString = `{\r\n    \"data\": {\r\n      \"list\": [\r\n        { \"id\": 1, \"value\": \"value1\" },\r\n        { \"id\": 2, \"value\": \"value2\" }\r\n      ]\r\n    }\r\n  }`\r\n  const jsonObjWithArrParsed = JSON.parse(jsonObjWithArrString) as UTSJSONObject\r\n  const jsonObjWithArr = reactive(jsonObjWithArrParsed)\r\n  \r\n  function updateJsonObjWithArrList0Value() {\r\n    const data = jsonObjWithArr['data'] as UTSJSONObject\r\n    const list = data['list'] as UTSJSONObject[];\r\n    (list[0] as UTSJSONObject)['value'] = 'updated-value1-' + Date.now()\r\n  }\r\n  \r\n  function pushJsonObjWithArrList() {\r\n    const data = jsonObjWithArr['data'] as UTSJSONObject\r\n    const list = data['list'] as UTSJSONObject[]\r\n    list.push({ id: list.length + 1, value: 'value' + (list.length + 1) } as UTSJSONObject)\r\n  }\r\n</script>\r\n<style>\r\n    .section-title {\r\n      font-size: 16px;\r\n      font-weight: bold;\r\n      margin-bottom: 10px;\r\n    }\r\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/core/reactive/reactive"},"core_readonly_readonly":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/alpha/pages/reactivity/core/ref/ref.uvue","code":"```vue\n<template>\r\n\t<view class=\"page\">\r\n\t\t<view class=\"flex justify-between flex-row mb-10\">\r\n\t\t\t<text>count:</text>\r\n\t\t\t<text id=\"count\">{{ count }}</text>\r\n\t\t</view>\r\n\t\t<view class=\"flex justify-between flex-row mb-10\">\r\n\t\t\t<text>str:</text>\r\n\t\t\t<text id=\"str\">{{ str }}</text>\r\n\t\t</view>\r\n\t\t<view class=\"flex justify-between flex-row mb-10\">\r\n\t\t\t<text>bool:</text>\r\n\t\t\t<text id=\"bool\">{{ bool }}</text>\r\n\t\t</view>\r\n\t\t<view class=\"flex justify-between flex-row mb-10\">\r\n\t\t\t<text>arr:</text>\r\n\t\t\t<text id=\"arr\">{{ JSON.stringify(arr) }}</text>\r\n\t\t</view>\r\n\t\t<view class=\"flex justify-between flex-row mb-10\">\r\n\t\t\t<text>counter.count:</text>\r\n\t\t\t<text id=\"counter-count\">{{ counter.count }}</text>\r\n\t\t</view>\r\n\t\t<view class=\"flex justify-between flex-row mb-10\">\r\n\t\t\t<text>counters.length:</text>\r\n\t\t\t<text id=\"counters-count\">{{ counters.length }}</text>\r\n\t\t</view>\r\n\t\t<view class=\"flex justify-between flex-row mb-10\">\r\n\t\t\t<text>issue15557:</text>\r\n\t\t\t<text id=\"issue-15557\">{{ issue15557?.['a'] }}</text>\r\n\t\t</view>\r\n\t\t<view class=\"flex justify-between flex-row mb-10\">\r\n\t\t\t<text>issue20323:</text>\r\n\t\t\t<text id=\"issue-20323-1\">{{ issue20323_1_a }}</text>\r\n\t\t\t<text id=\"issue-20323-2\">{{ issue20323_2_a }}</text>\r\n\t\t</view>\r\n\t\t<view class=\"flex justify-between flex-row mb-10\">\r\n\t\t\t<text>ref-str-id:</text>\r\n\t\t\t<text id=\"ref-str-id\">{{ r1.getString(('id')) }}</text>\r\n\t\t</view>\r\n\t\t<view class=\"flex justify-between flex-row mb-10\">\r\n\t\t\t<text>ref-str-boolean :</text>\r\n\t\t\t<text id=\"ref-str-boolean\">{{ r1.getBoolean(('bl')) }}</text>\r\n\t\t</view>\r\n\t\t<view class=\"flex justify-between flex-row mb-10\">\r\n\t\t\t<text>ref-str-number :</text>\r\n\t\t\t<text id=\"ref-str-number\">{{ r1.getNumber(('n')) }}</text>\r\n\t\t</view>\r\n\t\t<view class=\"flex justify-between flex-row mb-10\">\r\n\t\t\t<text>ref-str-any :</text>\r\n\t\t\t<text id=\"ref-str-any\">{{ r1.getAny(('id')) }}</text>\r\n\t\t</view>\r\n\t\t<view class=\"flex justify-between flex-row mb-10\">\r\n\t\t\t<text>ref-str-arr :</text>\r\n\t\t\t<text id=\"ref-str-arr\">{{ r1.getArray(('arr'))![0] }}</text>\r\n\t\t</view>\r\n\t\t<view class=\"flex justify-between flex-row mb-10\">\r\n\t\t\t<text>ref-str-json :</text>\r\n\t\t\t<text id=\"ref-str-json\">{{ r1.getJSON(('cars[0]'))!['name'] }}</text>\r\n\t\t</view>\r\n\t\t<view class=\"flex justify-between flex-row mb-10\">\r\n\t\t\t<text>ref-str:</text>\r\n\t\t\t<text id=\"ref-str\">{{ r2.msg }}</text>\r\n\t\t</view>\r\n\t\t<button class='mb-10' id=\"change-count-btn\" @click=\"changeCount\">change count</button>\r\n\t\t<button class='mb-10' id='change-str-btn' @click='changeStr'>change str</button>\r\n\t\t<button class='mb-10' id='change-bool-btn' @click='changeBool'>change bool</button>\r\n\t\t<button class='mb-10' id='change-arr-btn' @click='changeArr'>change arr</button>\r\n\t\t<button class='mb-10' id='change-counter-btn' @click='changeCounter'>change counter</button>\r\n\t\t<button class='mb-10' id='change-counters-btn' @click='changeCounters'>change counters</button>\r\n\t</view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n\t// 基础数据类型可自动推导类型\r\n\tconst count = ref(0)\r\n\tconst str = ref('default str')\r\n\tconst bool = ref(false)\r\n\r\n\t// 可通过泛型指定类型\r\n\tconst arr = ref<number[]>([1, 2, 3])\r\n\ttype Counter = {\r\n\t\tcount : number\r\n\t}\r\n\t// 可通过泛型指定类型\r\n\tconst counter = ref<Counter>({\r\n\t\tcount: 0\r\n\t})\r\n\r\n\tconst counters = ref<Counter[]>([])\r\n\r\n\tconst changeCount = () => {\r\n\t\tcount.value++\r\n\t}\r\n\tconst changeStr = () => {\r\n\t\tstr.value = 'new str'\r\n\t}\r\n\tconst changeBool = () => {\r\n\t\tbool.value = !bool.value\r\n\t}\r\n\tconst changeArr = () => {\r\n\t\tarr.value.push(arr.value.length + 1)\r\n\t}\r\n\tconst changeCounter = () => {\r\n\t\tcounter.value.count++\r\n\t}\r\n\tconst changeCounters = () => {\r\n\t\tcounters.value.push({ count: 0 })\r\n\t}\r\n\r\n\t// issue/15557\r\n\tconst issue15557 = ref<UTSJSONObject | null>(null)\r\n\tissue15557.value = {\r\n\t\ta: 1\r\n\t}\r\n\tissue15557.value!.set('a', 2)\r\n\r\n\t// issue/20323\r\n\tconst issue20323_1 = ref<UTSJSONObject>({\r\n\t\ta: \"abc\"\r\n\t})\r\n\tconst issue20323_1_a = ref<string | null>(issue20323_1.value.getString('a'))\r\n\r\n\tlet _issue20323_2_a : string | null = null\r\n\tconst issue20323_2 = ref<UTSJSONObject>({\r\n\t\ta: _issue20323_2_a ?? \"abc\"\r\n\t})\r\n\tconst issue20323_2_a = ref<string | null>(issue20323_2.value.getString('a'))\r\n\t\r\n\tconst r1 = ref({})\r\n\tlet result = JSON.parse(`{ \"result\": { \"data\": { \"id\": \"1\", \"bl\": false, \"n\": 2, \"arr\": [\"1\"], \"cars\": [ { \"name\": \"car1\", \"value\": 100} ] } } }`) as UTSJSONObject\r\n\tr1.value = result.getJSON('result.data', {} as UTSJSONObject)\r\n\tconst r2 = ref({ msg: '1' })\r\n</script>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/pages/reactivity/core/ref/ref"},"core_watch_on-watcher-cleanup":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/reactivity/core/watch/on-watcher-cleanup.uvue","code":"```vue\n<script setup lang=\"uts\">\nimport {onWatcherCleanup} from 'vue'\n\nconst source = ref<number>(0)\nconst runCount = ref<number>(0)\nconst cleanupCount = ref<number>(0)\nconst activeValue = ref<number>(-1)\nconst cleanedValue = ref<number>(-1)\nconst watcherStatus = ref<string>('active')\nconst eventOrder = ref<string>('')\n\nfunction recordEvent(event : string) {\n  eventOrder.value = eventOrder.value.length == 0\n    ? event\n    : `${eventOrder.value} -> ${event}`\n}\n\nconst watchHandle = watch(source, (value : number) => {\n  runCount.value++\n  activeValue.value = value\n  recordEvent(`run:${value}`)\n\n  onWatcherCleanup(() => {\n    cleanupCount.value++\n    cleanedValue.value = value\n    recordEvent(`cleanup:${value}`)\n  })\n}, {\n  immediate: true,\n  flush: 'sync'\n})\n\nfunction increment() {\n  source.value++\n}\n\nfunction stopWatcher() {\n  watchHandle.stop()\n  watcherStatus.value = 'stopped'\n}\n\ndefineExpose({\n  increment,\n  stopWatcher\n})\n</script>\n\n<template>\n  <view class=\"page\">\n    <text class=\"section-title\">onWatcherCleanup</text>\n    <view class=\"row\">\n      <text>run count:</text>\n      <text id=\"cleanup-run-count\">{{ runCount }}</text>\n    </view>\n    <view class=\"row\">\n      <text>cleanup count:</text>\n      <text id=\"cleanup-count\">{{ cleanupCount }}</text>\n    </view>\n    <view class=\"row\">\n      <text>active value:</text>\n      <text id=\"cleanup-active-value\">{{ activeValue }}</text>\n    </view>\n    <view class=\"row\">\n      <text>cleaned value:</text>\n      <text id=\"cleaned-value\">{{ cleanedValue }}</text>\n    </view>\n    <view class=\"row\">\n      <text>status:</text>\n      <text id=\"cleanup-watcher-status\">{{ watcherStatus }}</text>\n    </view>\n    <view class=\"row\">\n      <text>event order:</text>\n      <text id=\"cleanup-event-order\">{{ eventOrder }}</text>\n    </view>\n    <button id=\"cleanup-increment-btn\" class=\"mb-10\" @click=\"increment\">更新数据源</button>\n    <button id=\"stop-cleanup-watcher-btn\" @click=\"stopWatcher\">停止 Watcher</button>\n  </view>\n</template>\n\n<style>\n.section-title {\n  margin-bottom: 12px;\n  font-size: 18px;\n  font-weight: bold;\n}\n\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/reactivity/core/watch/on-watcher-cleanup"},"core_watch_watch-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/reactivity/core/watch/watch-composition.uvue","code":"```vue\n<template>\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\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 && !VUE3-VAPOR -->\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    // #ifndef VUE3-VAPOR\r\n    // 蒸汽模式放开下面这行会报错 Stack overflow! 已知Bug:[support for trigger responsive getters in onTrack](https://github.com/vuejs/core/pull/12266)\r\n    watchCountTrackNum.value++\r\n    // #endif\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\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// TODO: 设置 immediate: true 第一次触发时，app 端原始值不对\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.com/dcloud/hello-uvue/blob/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: 3.5.22 以上代码也会报错 Maximum call stack size exceeded，因为页面渲染读取 count，count 被 $watch 侦听，这个读取操作会触发 onTrack 钩子函数\r\n          // onTrack 中修改了响应式数据 watchCountTrackNum，响应式数据的修改都会通知 Vue 进行重新渲染，再次读取 count，形成死循环\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,\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_watch-pause-resume":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/reactivity/core/watch/watch-pause-resume.uvue","code":"```vue\n<script setup lang=\"uts\">\nconst source = ref<number>(0)\nconst watchedValue = ref<number>(0)\nconst triggerCount = ref<number>(0)\nconst watcherStatus = ref<string>('active')\n\nconst watchHandle = watch(source, (value : number) => {\n  watchedValue.value = value\n  triggerCount.value++\n}, {\n  flush: 'sync'\n})\n\nfunction increment() {\n  source.value++\n}\n\nfunction pauseWatcher() {\n  watchHandle.pause()\n  watcherStatus.value = 'paused'\n}\n\nfunction resumeWatcher() {\n  watchHandle.resume()\n  watcherStatus.value = 'active'\n}\n\ndefineExpose({\n  increment,\n  pauseWatcher,\n  resumeWatcher\n})\n</script>\n\n<template>\n  <view class=\"page\">\n    <text class=\"section-title\">Watcher 暂停与恢复</text>\n    <view class=\"row\">\n      <text>source:</text>\n      <text id=\"watch-source\">{{ source }}</text>\n    </view>\n    <view class=\"row\">\n      <text>watched value:</text>\n      <text id=\"watched-value\">{{ watchedValue }}</text>\n    </view>\n    <view class=\"row\">\n      <text>trigger count:</text>\n      <text id=\"watch-trigger-count\">{{ triggerCount }}</text>\n    </view>\n    <view class=\"row\">\n      <text>status:</text>\n      <text id=\"watcher-status\">{{ watcherStatus }}</text>\n    </view>\n    <button id=\"increment-source-btn\" class=\"mb-10\" @click=\"increment\">更新数据源</button>\n    <button id=\"pause-watcher-btn\" class=\"mb-10\" @click=\"pauseWatcher\">暂停 Watcher</button>\n    <button id=\"resume-watcher-btn\" @click=\"resumeWatcher\">恢复 Watcher</button>\n  </view>\n</template>\n\n<style>\n.section-title {\n  margin-bottom: 12px;\n  font-size: 18px;\n  font-weight: bold;\n}\n\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/reactivity/core/watch/watch-pause-resume"},"core_watch-effect_watch-effect":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/reactivity/core/watch-effect/watch-effect.uvue","code":"```vue\n<template>\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\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 && !VUE3-VAPOR -->\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        // #ifndef VUE3-VAPOR\r\n        watchCountTrackNum.value++\r\n        // #endif\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.com/dcloud/hello-uvue/blob/alpha/pages/reactivity/core/watch-post-effect/watch-post-effect.uvue","code":"```vue\n<template>\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\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 && !VUE3-VAPOR -->\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          // #ifndef VUE3-VAPOR\r\n          watchCountTrackNum.value++\r\n          // #endif\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.com/dcloud/hello-uvue/blob/alpha/pages/reactivity/core/watch-sync-effect/watch-sync-effect.uvue","code":"```vue\n<template>\r\n  <!-- #ifdef APP && !VUE3-VAPOR -->\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 && !VUE3-VAPOR -->\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          // #ifndef VUE3-VAPOR\r\n          watchCountTrackNum.value++\r\n          // #endif\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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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.com/dcloud/hello-uvue/blob/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":{"components_Bar":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/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/#/components/Bar"},"components_CompForAppComponent":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/components/CompForAppComponent.uvue","code":"```vue\n<template>\n  <text class=\"mt-10 bold\">component for app.component</text>\n</template>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/components/CompForAppComponent"},"components_CompForAppUse":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/components/CompForAppUse.uvue","code":"```vue\n<template>\n  <view>\n    <text class=\"mt-10 bold\">component for app.use</text>\n    <!-- #ifndef VUE3-VAPOR -->\n    <text class=\"mt-10 plugin1\" id=\"plugin1\">plugin1: {{ plugin1 }}</text>\n    <text class=\"mt-10 plugin2\">plugin2: {{ plugin2 }}</text>\n    <!-- #endif -->\n    <text class=\"mt-10 plugin3\">plugin3: {{ plugin3 }}</text>\n    <text class=\"mt-10 plugin4\">plugin4: {{ plugin4 }}</text>\n    <CompForPlugin1 class=\"component-for-plugin\" />\n    <CompForPlugin2 class=\"component-for-plugin\" />\n  </view>\n</template>\n\n<script setup lang=\"uts\">\n  const plugin3 = inject('plugin3')\n\tconst plugin4 = inject('plugin4')\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/components/CompForAppUse"},"components_CompForHFunction":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/components/CompForHFunction.uvue","code":"```vue\n<template>\r\n  <view>\r\n    <text class=\"mt-10 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 setup>\r\ndefineProps({\r\n\tmsg: {\r\n\t\ttype: String\r\n\t}\r\n})\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/components/CompForHFunction"},"components_CompForHFunctionWithSlot":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/components/CompForHFunctionWithSlot.uvue","code":"```vue\n<template>\r\n  <view>\r\n    <text class=\"mt-10 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/#/components/CompForHFunctionWithSlot"},"components_CompForPlugin":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/components/CompForPlugin.uvue","code":"```vue\n<template>\n  <text class=\"mt-10\">component for plugin</text>\n</template>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/components/CompForPlugin"},"components_CompForPluginCopy":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/components/CompForPluginCopy.uvue","code":"```vue\n<template>\n  <text class=\"mt-10 component-for-plugin\">component for plugin</text>\n</template>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/components/CompForPluginCopy"},"components_Foo":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/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/#/components/Foo"},"components_custom-call-easy-method":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/components/custom-call-easy-method.uvue","code":"```vue\n<template>\r\n\t<view>{{ result }}</view>\r\n</template>\r\n\r\n<script setup>\r\nconst result = ref('')\r\n\r\nconst foo = (): string => {\r\n\tresult.value = 'custom foo'\r\n\treturn result.value\r\n}\r\ndefineExpose({\r\n\tfoo\r\n})\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/components/custom-call-easy-method"},"call-easy-method_call-easy-method":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/components/call-easy-method/call-easy-method.vue","code":"```vue\n<template>\n  <view>{{result}}</view>\n</template>\n\n<script setup>\nconst result = ref('')\n\nconst foo1 = () => {\n  result.value = \"foo1\"\n}\nconst foo2 = (date1 : number) => {\n  result.value = \"foo2=\" + date1\n}\nconst foo3 = (date1 : number, date2 : number) => {\n  result.value = \"foo3=\" + date1 + \" \" + date2\n}\nconst foo4 = (callback : (() => void)) => {\n  callback()\n}\nconst foo5 = (text1 : string) : any | null => {\n  return text1\n}\n\ndefineExpose({\n  foo1,\n  foo2,\n  foo3,\n  foo4,\n  foo5\n})\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/components/call-easy-method/call-easy-method"},"define-expose-foo_define-expose-foo":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/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  <view></view>\n</template>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/components/define-expose-foo/define-expose-foo"},"issue-29737_Issue29737Text":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/components/issue-29737/Issue29737Text.uvue","code":"```vue\n<script setup>\n  defineOptions({ name: 'Issue29737Text' })\n\n  defineProps({\n    textId: {\n      type: String,\n      default: ''\n    },\n    color: {\n      type: String,\n      default: '#111111'\n    },\n    fontSize: {\n      type: String,\n      default: '15'\n    },\n    lineHeight: {\n      type: String,\n      default: '1.2'\n    },\n    lines: {\n      type: Number,\n      default: 2\n    }\n  })\n</script>\n\n<template>\n  <text\n    :id=\"textId\"\n    :style=\"{\n      color: color,\n      fontSize: fontSize + 'px',\n      lineHeight: lineHeight\n    }\"\n    :max-lines=\"lines\"\n  >\n    <slot></slot>\n  </text>\n</template>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/components/issue-29737/Issue29737Text"},"issue-30373-item_issue-30373-item":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/components/issue-30373-item/issue-30373-item.uvue","code":"```vue\n<script setup>\n  defineProps({\n    textId: {\n      type: String,\n      default: ''\n    },\n    label: {\n      type: String,\n      default: ''\n    }\n  })\n</script>\n\n<template>\n  <text :id=\"textId\" class=\"issue-30373-item\">{{ label }}</text>\n</template>\n\n<style>\n  .issue-30373-item {\n    color: #111111;\n    font-size: 14px;\n    line-height: 22px;\n  }\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/components/issue-30373-item/issue-30373-item"},"issue-30373-shell_issue-30373-shell":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/components/issue-30373-shell/issue-30373-shell.uvue","code":"```vue\n<template>\n  <view class=\"issue-30373-shell\">\n    <view class=\"slot-block\">\n      <slot></slot>\n    </view>\n    <view class=\"slot-block\">\n      <slot name=\"footer\"></slot>\n    </view>\n    <view class=\"slot-block\">\n      <slot name=\"scoped\" suffix=\"scoped\"></slot>\n    </view>\n  </view>\n</template>\n\n<style>\n  .issue-30373-shell {\n    padding: 8px;\n    border-width: 1px;\n    border-style: solid;\n    border-color: #cccccc;\n    border-radius: 6px;\n  }\n\n  .slot-block {\n    margin-bottom: 8px;\n  }\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/components/issue-30373-shell/issue-30373-shell"},"keep-alive_Counter":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/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=\"mt-10 counter-btn\" @click=\"increment\">+</button>\r\n\t\t<text class=\"mt-10\" id=\"activated-num\">activated num: {{ activatedNum }}</text>\r\n\t\t<text class=\"mt-10\" id=\"deactivated-num\">deactivated num: {{ deactivatedNum }}</text>\r\n\t</view>\r\n</template>\r\n\r\n// android 改为组合式式 API 之后，组件的生命周期函数 activated 和 deactivated 不触发\r\n// #ifdef APP-ANDROID\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() {\r\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// #endif\r\n// #ifndef APP-ANDROID\r\n<script setup lang=\"uts\">\r\nconst count = ref(0)\r\nconst activatedNum = ref(0)\r\nconst deactivatedNum = ref(0)\r\n\r\nonActivated(() => { activatedNum.value++ })\r\nonDeactivated(() => { deactivatedNum.value++ })\r\n\r\nconst increment = () => {\r\n\tcount.value++\r\n}\r\n</script>\r\n// #endif\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/#/components/keep-alive/Counter"},"keep-alive_Message":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/components/keep-alive/Message.uvue","code":"```vue\n<template>\r\n\t<view>\r\n\t\t<text class=\"mt-10 message-text\">msg: {{msg}}</text>\r\n\t\t<text class=\"mt-10 change-message\" @click=\"changeMessage\">change message</text>\r\n\t</view>\r\n</template>\r\n// android 改为组合式式 API 之后，组件的生命周期函数 activated 和 deactivated 不触发\r\n// #ifdef APP-ANDROID\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// #endif\r\n// #ifndef APP-ANDROID\r\n<script setup lang=\"uts\">\r\n\tconst msg = ref('default message')\r\n\r\n\tconst changeMessage = () => {\r\n\t\tmsg.value = 'message changed'\r\n\t}\r\n</script>\r\n// #endif\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/#/components/keep-alive/Message"},"keep-alive_ShouldExclude":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/components/keep-alive/ShouldExclude.uvue","code":"```vue\n<template>\r\n\t<view>\r\n\t\t<text>should not be keep-alive</text>\r\n\t\t<text class=\"mt-10 should-exclude-text\">count: {{ count }}</text>\r\n\t\t<button class=\"mt-10 should-exclude-btn\" @click=\"increment\">+</button>\r\n\t</view>\r\n</template>\r\n// android 改为组合式式 API 之后，组件的生命周期函数 activated 和 deactivated 不触发\r\n// #ifdef APP-ANDROID\r\n<script lang=\"uts\">\r\n\texport default {\r\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>\r\n// #endif\r\n// #ifndef APP-ANDROID\r\n<script setup lang=\"uts\">\r\nconst\tcount = ref(0)\r\n\r\nconst increment = () => {\r\n\tcount.value++\r\n}\r\n</script>\r\n// #endif\r\n\r\n<style>\r\n\t.should-exclude-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>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/components/keep-alive/ShouldExclude"},"test-getter-setter-composition_test-getter-setter-composition":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/components/test-getter-setter-composition/test-getter-setter-composition.uvue","code":"```vue\n<template>\r\n    <text>\r\n        count: {{count}}\r\n    </text>\r\n</template>\r\n\r\n<script setup>\r\n    const count = ref(0)\r\n    function getCount() : number {\r\n        return count.value\r\n    }\r\n    function setCount(newCount : number) {\r\n        count.value = newCount * 2\r\n    }\r\n    defineExpose({\r\n        count,\r\n        getCount,\r\n        setCount\r\n    })\r\n</script>\r\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/components/test-getter-setter-composition/test-getter-setter-composition"},"test-getter-setter-options_test-getter-setter-options":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/components/test-getter-setter-options/test-getter-setter-options.uvue","code":"```vue\n<template>\r\n    <text>\r\n        count: {{count}}\r\n    </text>\r\n</template>\r\n\r\n<script>\r\n    export default {\r\n        name: \"test-getter-setter-options\",\r\n        data() {\r\n            return {\r\n                count: 0\r\n            };\r\n        },\r\n        methods: {\r\n            getCount() : number {\r\n                return this.count\r\n            },\r\n            setCount(newCount : number) {\r\n                this.count = newCount * 2\r\n            }\r\n        }\r\n    }\r\n</script>\r\n\r\n<style>\r\n\r\n</style>\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/components/test-getter-setter-options/test-getter-setter-options"},"test-type_test-type":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/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/#/components/test-type/test-type"},"test-type1_test-type1":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/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/#/components/test-type1/test-type1"},"uni-collapse_uni-collapse":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/components/uni-collapse/uni-collapse.uvue","code":"```vue\n<template>\n\t<!-- 父组件暂时无用，后续子组件联动需要使用到父组件 -->\n\t<view>\n\t\t<slot></slot>\n\t</view>\n</template>\n\n<script setup lang=\"uts\">\nconst props = defineProps({\n\t// 是否开启手风琴效果\n\taccordion: {\n\t\ttype: Boolean,\n\t\tdefault: true\n\t}\n});\nconst child_nodes = ref([] as Array<ComponentPublicInstance>)\n\nconst init = (child: ComponentPublicInstance) => {\n\tchild_nodes.value.push(child)\n}\n// 关闭所有\nconst closeAll = () => {\n\t// 开启手风琴效果才回关闭其他\n\tif (props.accordion && child_nodes.value.length > 0) {\n\t\tchild_nodes.value.forEach((item) => {\n\t\t\titem.$callMethod('openOrClose', false)\n\t\t})\n\t}\n}\n</script>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/components/uni-collapse/uni-collapse"},"uni-collapse-item_uni-collapse-item":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/components/uni-collapse-item/uni-collapse-item.uvue","code":"```vue\n<template>\r\n\t<view class=\"uni-collapse-item\" :class=\"{ 'open': is_open }\">\r\n\t\t<view class=\"uni-collapse-item__title\" @click=\"openCollapse(!is_open)\">\r\n\t\t\t<text class=\"uni-collapse-item__title-text\" :class=\"{'is-disabled':disabled,'open--active':is_open}\">{{title}}</text>\r\n\t\t\t<view class=\"down_arrow\" :class=\"{'down_arrow--active': is_open}\"></view>\r\n\t\t</view>\r\n\t\t<view class=\"uni-collapse-item__content\" :class=\"{ 'uni-collapse-item__content--open': is_open }\">\n\t\t\t<view class=\"uni-collapse-item__content-box\" :class=\"{ 'uni-collapse-item__content-box--open': is_open }\">\n\t\t\t\t<slot></slot>\r\n\t\t\t</view>\r\n\t\t</view>\r\n\t</view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nimport { $dispatch } from './util.uts'\r\n\r\nconst instance = getCurrentInstance()!.proxy!;\r\n\r\nconst props = defineProps({\r\n\t\t// 列表标题\r\n\t\ttitle: {\r\n\t\t\ttype: String,\r\n\t\t\tdefault: ''\r\n\t\t},\r\n\t\topen: {\r\n\t\t\ttype: Boolean,\r\n\t\t\tdefault: false\r\n\t\t},\r\n\t\tdisabled: {\r\n\t\t\ttype: Boolean,\r\n\t\t\tdefault: false\r\n\t\t}\r\n\t})\n\tconst is_open = ref<boolean>(props.open)\n\n\tonMounted(() => {\n\t\tnextTick(() => {\n\t\t\t$dispatch(instance, 'UniCollapse', 'init', instance)\n\t\t});\n\t})\n\n\tconst openOrClose = (open: boolean) => {\n\t\tis_open.value = open\n\t}\n\t// 开启或关闭折叠面板\n\tconst openCollapse = (open: boolean) => {\n\t\tif (props.disabled) return\n\t\t// 关闭其他已打开\n\t\t$dispatch(instance, 'UniCollapse', 'closeAll')\n\t\topenOrClose(open)\n\t}\n\n\twatch(():boolean => props.open, (value: boolean) => {\n\t\topenCollapse(value)\n\t})\n</script>\n\r\n<style scoped>\r\n\t.uni-collapse-item {\r\n\t\tbackground-color: #fff;\r\n\t}\r\n\t.uni-collapse-item__title {\r\n\t\tflex-direction: row;\r\n\t\talign-items: center;\r\n\t\tpadding: 12px;\r\n\t\tbackground-color: #fff;\r\n\t}\r\n\r\n\t.down_arrow {\r\n\t\twidth: 8px;\r\n\t\theight: 8px;\r\n\t\ttransform: rotate(45deg);\r\n\t\tborder-right: 1px #999 solid;\r\n\t\tborder-bottom: 1px #999 solid;\r\n\t\tmargin-top: -3px;\r\n\t\ttransition-property: transform;\r\n\t\ttransition-duration: 0.2s;\r\n\t}\r\n\r\n\t.down_arrow--active {\r\n\t\ttransform: rotate(-135deg);\r\n\t\tmargin-top: 0px;\r\n\t}\r\n\r\n\t.uni-collapse-item__title-text {\r\n\t\tflex: 1;\r\n\t\tcolor: #333;\r\n\t\tfont-size: 14px;\r\n\t\tfont-weight: 400;\r\n\t}\r\n\r\n\t.open--active {\r\n\t\t/* background-color: #f0f0f0; */\r\n\t\tcolor: #bbb;\r\n\t}\r\n\r\n\t.is-disabled {\r\n\t\tcolor: #999;\r\n\t}\r\n\r\n\t.uni-collapse-item__content {\n\t\tdisplay: none;\n\t\tposition: relative;\n\t}\n\n\t.uni-collapse-item__content--open {\n\t\tdisplay: flex;\n\t}\n\n\t.uni-collapse-item__content-box {\n\t\twidth: 100%;\n/* \t\ttransition-property: transform , opacity;\n\t\ttransition-duration: 0.2s; */\n\t\ttransform: translateY(-100%);\n\t\topacity: 0;\n\t}\n\n\t.uni-collapse-item__content-box--open {\n\t\ttransform: translateY(0);\n\t\topacity: 1;\n\t}\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/components/uni-collapse-item/uni-collapse-item"},"x-drawer_x-drawer":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/components/x-drawer/x-drawer.uvue","code":"```vue\n<script setup>\n  import { ref, watch, onBeforeUnmount } from 'vue'\n\n  defineOptions({ name: 'xDrawer' })\n\n  const props = withDefaults(defineProps<{\n    show: boolean\n  }>(), {\n    show: false\n  })\n\n  const emit = defineEmits(['open', 'close'])\n  const mounted = ref(false)\n  const contentVisible = ref(false)\n  let tid = 0\n\n  function close(): void {\n    mounted.value = false\n    contentVisible.value = false\n    clearTimeout(tid)\n    emit('close')\n  }\n\n  function open(): void {\n    mounted.value = true\n    contentVisible.value = false\n    clearTimeout(tid)\n    tid = setTimeout((): void => {\n      emit('open')\n      contentVisible.value = true\n    }, 60)\n  }\n\n  watch((): boolean => props.show, (value: boolean) => {\n    if (value) {\n      open()\n    }\n  })\n\n  onBeforeUnmount(() => {\n    clearTimeout(tid)\n  })\n</script>\n\n<template>\n  <view v-if=\"mounted\" class=\"drawer\">\n    <button class=\"close-btn\" @click=\"close\">关闭</button>\n    <view v-if=\"contentVisible\" class=\"content\">\n      <slot></slot>\n    </view>\n  </view>\n</template>\n\n<style scoped>\n  .drawer {\n    position: fixed;\n    left: 0;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    background-color: #ffffff;\n    padding: 12px;\n  }\n\n  .close-btn {\n    margin-bottom: 12px;\n  }\n\n  .content {\n    flex: 1;\n  }\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/components/x-drawer/x-drawer"},"x-picker-selected_x-picker-selected":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/components/x-picker-selected/x-picker-selected.uvue","code":"```vue\n<script setup>\n  import { ref, computed, onMounted, onBeforeUnmount } from 'vue'\n\n  type PickerItem = {\n    title: string,\n    item: UTSJSONObject\n  }\n\n  defineOptions({ name: 'xPickerSelected' })\n  defineSlots<{\n    item(props: { item: UTSJSONObject }): any\n    default(): any\n  }>()\n\n  const props = withDefaults(defineProps<{\n    list: UTSJSONObject[],\n    labelKey: string,\n    lazyContent: boolean,\n    lazyDuration: number\n  }>(), {\n    list: () => [] as UTSJSONObject[],\n    labelKey: 'text',\n    lazyContent: false,\n    lazyDuration: 100\n  })\n\n  const show = ref(false)\n  const lazyReady = ref(false)\n  let tid = 0\n\n  const renderList = computed((): PickerItem[] => {\n    return props.list.map((el: UTSJSONObject): PickerItem => {\n      return {\n        title: el.getString(props.labelKey)!,\n        item: el\n      } as PickerItem\n    })\n  })\n\n  function openShow(): void {\n    if (show.value) {\n      show.value = false\n    }\n    show.value = true\n  }\n\n  function onClose(): void {\n    show.value = false\n    lazyReady.value = props.lazyContent ? false : true\n    clearTimeout(tid)\n  }\n\n  function onOpen(): void {\n    clearTimeout(tid)\n    tid = setTimeout((): void => {\n      lazyReady.value = true\n    }, props.lazyDuration)\n  }\n\n  onMounted(() => {\n    lazyReady.value = props.lazyContent ? false : true\n  })\n\n  onBeforeUnmount(() => {\n    clearTimeout(tid)\n  })\n\n  defineExpose({\n    open: () => openShow()\n  })\n</script>\n\n<template>\n  <view>\n    <view @click=\"openShow\">\n      <slot></slot>\n    </view>\n    <x-drawer @open=\"onOpen\" @close=\"onClose\" :show=\"show\">\n      <text v-if=\"!lazyReady\" class=\"loading\">加载中...</text>\n      <view v-if=\"renderList.length > 0 && lazyReady\">\n        <view v-for=\"(item, index) in renderList\" :key=\"index\" class=\"item\">\n          <slot name=\"item\" :item=\"item.item\">\n            <x-text>{{ item.title }}</x-text>\n          </slot>\n        </view>\n      </view>\n    </x-drawer>\n  </view>\n</template>\n\n<style scoped>\n  .item {\n    min-height: 50px;\n    justify-content: center;\n  }\n\n  .loading {\n    color: #666666;\n    font-size: 14px;\n  }\n</style>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/components/x-picker-selected/x-picker-selected"},"x-text_x-text":{"gitUrl":"https://gitcode.com/dcloud/hello-uvue/blob/alpha/components/x-text/x-text.uvue","code":"```vue\n<script setup>\n  defineOptions({ name: 'xText' })\n</script>\n\n<template>\n  <text>\n    <slot></slot>\n  </text>\n</template>\n\n```","webUrl":"https://hellouvue.dcloud.net.cn/#/components/x-text/x-text"}}}