diff --git a/docs/.vuepress/utils/vueJson.json b/docs/.vuepress/utils/vueJson.json
index 40a73016c15b5e4fb8929f3028de76035c0f502a..e79fec60257c9831a7c25cdc887e267d72a08789 100644
--- a/docs/.vuepress/utils/vueJson.json
+++ b/docs/.vuepress/utils/vueJson.json
@@ -1 +1 @@
-{"template":{"name":"#### template","description":"\n\n##### template 兼容性\n| Android | iOS | web |\n| :- | :- | :- |\n| 3.9 | 4.11 | 4.0 |\n","attribute":"##### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| lang | string | - |  |\n@| 值名称 | 描述 |\n@| :- | :- |\n@| html | html |\n@| pug | 仅 Web 端支持 |\n","event":"","example":"","compatibility":"##### template 属性兼容性\n|  | Android | iOS | web |\n| :- | :- | :- | :- |\n| lang | 3.9 | x | 4.0 |\n","children":"","reference":""},"slot":{"name":"#### slot","description":"> 组件类型：string \n\n \\<slot> 元素作为组件模板之中的内容分发插槽。\\<slot> 元素自身将被替换。\n\n##### slot 兼容性\n| Android | iOS | web |\n| :- | :- | :- |\n| 3.9 | 4.11 | 4.0 |\n","attribute":"##### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| name | string | - | 用于命名插槽。 |","event":"","example":"","compatibility":"","children":"","reference":"\n##### 参见\n- [Reference](https://v3.cn.vuejs.org/api/built-in-components.html#slot)\n"},"script":{"name":"#### script","description":"\n\n##### script 兼容性\n| Android | iOS | web |\n| :- | :- | :- |\n| 3.9 | 4.11 | 4.0 |\n","attribute":"##### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| setup | Any | - | - |\n| lang | Any | - |  |\n@| 值名称 | 描述 |\n@| :- | :- |\n@| uts | uts |\n\n##### lang 兼容性\n|  | Android | iOS | web |\n| :- | :- | :- | :- |\n| uts | 4.0 | 4.11 | 4.0 |\n","event":"","example":"","compatibility":"##### script 属性兼容性\n|  | Android | iOS | web |\n| :- | :- | :- | :- |\n| setup | 4.0 | 4.11 | 4.0 |\n| lang | 4.0 | 4.11 | 4.0 |\n","children":"","reference":""},"style":{"name":"#### style","description":"\n\n##### style 兼容性\n| Android | iOS | web |\n| :- | :- | :- |\n| 3.9 | 4.11 | 4.0 |\n","attribute":"##### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| lang | Any | - |  |\n@| 值名称 | 描述 |\n@| :- | :- |\n@| scss | - |\n@| less | - |\n@| stylus | - |\n| scoped | Any | - | - |\n| module | Any | - | - |\n","event":"","example":"","compatibility":"##### style 属性兼容性\n|  | Android | iOS | web |\n| :- | :- | :- | :- |\n| lang | 3.9 | 4.11 | 4.0 |\n| scoped | x | x | 4.0 |\n| module | x | x | 4.0 |\n","children":"","reference":""},"keep-alive":{"name":"#### keep-alive","description":"> 组件类型：string \n\n \\<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 \\<transition> 相似，\\<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。\n\n##### keep-alive 兼容性\n| Android | iOS | web |\n| :- | :- | :- |\n| 4.0 | 4.11 | 4.0 |\n","attribute":"##### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| include | string | - | 字符串或正则表达式。只有名称匹配的组件会被缓存。 |\n| exclude | string | - | 字符串或正则表达式。任何名称匹配的组件都不会被缓存。 |\n| max | string | - | 最多可以缓存多少组件实例。 |","event":"","example":"","compatibility":"","children":"","reference":"\n##### 参见\n- [Reference](https://v3.cn.vuejs.org/api/built-in-components.html#keep-alive)\n"},"component":{"name":"#### component","description":"> 组件类型：string \n\n 渲染一个“元组件”为动态组件。依 is 的值，来决定哪个组件被渲染。\n\n##### component 兼容性\n| Android | iOS | web |\n| :- | :- | :- |\n| 3.99 | 4.11 | 4.0 |\n","attribute":"##### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| is | Any | - | - |\n| inline-template | Any | - | - |","event":"","example":"","compatibility":"","children":"","reference":"\n##### 参见\n- [Reference](https://v3.cn.vuejs.org/api/built-in-components.html#component)\n"},"transition":{"name":"#### transition","description":"> 组件类型：string \n\n \\<transition> 元素作为单个元素/组件的过渡效果。\\<transition> 只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在检测过的组件层级中。\n\n##### transition 兼容性\n| Android | iOS | web |\n| :- | :- | :- |\n| x | x | 4.0 |\n","attribute":"##### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| name | string | - | 用于自动生成 CSS 过渡类名。例如：name: 'fade' 将自动拓展为.fade-enter，.fade-enter-active等。默认类名为 \"v\" |\n| appear | string(true \\| false) | - | 是否在初始渲染时使用过渡。默认为 false。 |\n| css | string(true \\| false) | - | 是否使用 CSS 过渡类。默认为 true。如果设置为 false，将只通过组件事件触发注册的 JavaScript 钩子。 |\n| type | string | - | 指定过渡事件类型，侦听过渡何时结束。有效值为 \"transition\" 和 \"animation\"。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。 |\n@| 值名称 | 描述 |\n@| :- | :- |\n@| transition | - |\n@| animation | - |\n| mode | string | - | 控制离开/进入的过渡时间序列。有效的模式有 \"out-in\" 和 \"in-out\"；默认同时生效。 |\n@| 值名称 | 描述 |\n@| :- | :- |\n@| out-in | - |\n@| in-out | - |\n| duration | string | - | 指定过渡的持续时间。默认情况下，Vue 会等待过渡所在根元素的第一个 transitionend 或 animationend 事件。 |\n| enter-class | Any | - | - |\n| leave-class | Any | - | - |\n| appear-class | Any | - | - |\n| enter-to-class | Any | - | - |\n| leave-to-class | Any | - | - |\n| appear-to-class | Any | - | - |\n| enter-active-class | Any | - | - |\n| leave-active-class | Any | - | - |\n| appear-active-class | Any | - | - |\n| @before-enter | Any | - | - |\n| @before-leave | Any | - | - |\n| @before-appear | Any | - | - |\n| @enter | Any | - | - |\n| @leave | Any | - | - |\n| @appear | Any | - | - |\n| @after-enter | Any | - | - |\n| @after-leave | Any | - | - |\n| @after-appear | Any | - | - |\n| @enter-cancelled | Any | - | - |\n| @leave-cancelled | string | - | v-show only |\n| @appear-cancelled | Any | - | - |\n\n","event":"","example":"","compatibility":"","children":"","reference":"\n##### 参见\n- [Reference](https://v3.cn.vuejs.org/api/built-in-components.html#transition)\n"},"transition-group":{"name":"#### transition-group","description":"> 组件类型：string \n\n \\<transition-group> 元素作为多个元素/组件的过渡效果。\\<transition-group> 渲染一个真实的 DOM 元素。默认渲染 \\<span>，可以通过 tag 属性配置哪个元素应该被渲染。\n\n##### transition-group 兼容性\n| Android | iOS | web |\n| :- | :- | :- |\n| x | x | 4.0 |\n","attribute":"##### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| tag | string | - | 默认为 span。 |\n| move-class | string | - | 覆盖移动过渡期间应用的 CSS 类。 |\n| name | string | - | 用于自动生成 CSS 过渡类名。例如：name: 'fade' 将自动拓展为.fade-enter，.fade-enter-active等。默认类名为 \"v\" |\n| appear | string(true \\| false) | - | 是否在初始渲染时使用过渡。默认为 false。 |\n| css | string(true \\| false) | - | 是否使用 CSS 过渡类。默认为 true。如果设置为 false，将只通过组件事件触发注册的 JavaScript 钩子。 |\n| type | string | - | 指定过渡事件类型，侦听过渡何时结束。有效值为 \"transition\" 和 \"animation\"。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。 |\n@| 值名称 | 描述 |\n@| :- | :- |\n@| transition | - |\n@| animation | - |\n| mode | Any | - | - |\n| duration | string | - | 指定过渡的持续时间。默认情况下，Vue 会等待过渡所在根元素的第一个 transitionend 或 animationend 事件。 |\n| enter-class | Any | - | - |\n| leave-class | Any | - | - |\n| appear-class | Any | - | - |\n| enter-to-class | Any | - | - |\n| leave-to-class | Any | - | - |\n| appear-to-class | Any | - | - |\n| enter-active-class | Any | - | - |\n| leave-active-class | Any | - | - |\n| appear-active-class | Any | - | - |\n| @before-enter | Any | - | - |\n| @before-leave | Any | - | - |\n| @before-appear | Any | - | - |\n| @enter | Any | - | - |\n| @leave | Any | - | - |\n| @appear | Any | - | - |\n| @after-enter | Any | - | - |\n| @after-leave | Any | - | - |\n| @after-appear | Any | - | - |\n| @enter-cancelled | Any | - | - |\n| @leave-cancelled | string | - | v-show only |\n| @appear-cancelled | Any | - | - |\n","event":"","example":"","compatibility":"","children":"","reference":"\n##### 参见\n- [Reference](https://v3.cn.vuejs.org/api/built-in-components.html#transition-group)\n"},"teleport":{"name":"#### teleport","description":"> 组件类型：string \n\n Teleport 提供了一种干净的方法，允许我们控制在 DOM 中哪个父节点下呈现 HTML，而不必求助于全局状态或将其拆分为两个组件。\n\n##### teleport 兼容性\n| Android | iOS | web |\n| :- | :- | :- |\n| 4.0 | 4.11 | 4.0 |\n","attribute":"##### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| to | string | - | 必须是有效的查询选择器或 HTMLElement (如果在浏览器环境中使用)。指定将在其中移动 \\<teleport> 内容的目标元素 |\n| disabled | boolean | - | 此可选属性可用于禁用 \\<teleport> 的功能，这意味着其插槽内容将不会移动到任何位置，而是在您在周围父组件中指定了 \\<teleport> 的位置渲染。 |","event":"","example":"","compatibility":"","children":"","reference":"\n##### 参见\n- [Reference](https://v3.vuejs.org/api/built-in-components.html#teleport)\n"},"application":{"compatibility":"|  | Android | iOS | web |\n| :- | :- | :- | :- |\n| createApp() | √ | 4.11 | 4.0 |\n| createSSRApp() | √ | 4.11 | 4.0 |\n| app.mount() | √ | 4.11 | 4.0 |\n| app.unmount() | √ | 4.11 | 4.0 |\n| app.component() | √ | 4.11 | 4.0 |\n| app.directive() | - | - | - |\n| app.use() | 3.99 | 4.11 | 4.0 |\n| app.mixin() | 3.99 | 4.11 | 4.0 |\n| app.provide() | 3.99 | 4.11 | 4.0 |\n| app.runWithContext() | - | - | - |\n| app.version | √ | 4.11 | 4.0 |\n| app.config | - | - | - |\n| app.config.errorHandler | x | 4.11 | 4.0 |\n| app.config.warnHandler | - | - | - |\n| app.config.performance | - | - | - |\n| app.config.compilerOptions | - | - | - |\n| app.config.globalProperties | 3.99 | 4.11 | 4.0 |\n| app.config.optionMergeStrategies | - | - | - |","example":""},"general":{"compatibility":"|  | Android | iOS | web |\n| :- | :- | :- | :- |\n| version | √ | 4.11 | 4.0 |\n| nextTick() | √ | 4.11 | 4.0 |\n| defineComponent() | x | x | 4.0 |\n| defineAsyncComponent() | - | - | - |\n| defineCustomElement() | - | - | - |","example":""},"reactivity_core":{"compatibility":"|  | Android | iOS | web |\n| :- | :- | :- | :- |\n| ref() | √ | 4.11 | 4.0 |\n| computed() | - | - | - |\n| reactive() | √ | 4.11 | 4.0 |\n| readonly() | 4.0 | 4.11 | 4.0 |\n| watchEffect() | 4.0 | 4.11 | 4.0 |\n| watchPostEffect() | 4.0 | 4.11 | 4.0 |\n| watchSyncEffect() | 4.0 | 4.11 | 4.0 |\n| watch() | 4.0 | 4.11 | 4.0 |","example":""},"reactivity_utilities":{"compatibility":"|  | Android | iOS | web |\n| :- | :- | :- | :- |\n| isRef() | 4.0 | 4.11 | 4.0 |\n| unref() | 4.0 | 4.11 | 4.0 |\n| toRef() | 4.0 | 4.11 | 4.11 |\n| toValue() | 4.0 | 4.11 | 4.11 |\n| toRefs() | 4.0 | 4.11 | 4.11 |\n| isProxy() | 4.0 | 4.11 | 4.0 |\n| isReactive() | 4.0 | 4.11 | 4.0 |\n| isReadonly() | 4.0 | 4.11 | 4.0 |","example":""},"reactivity_advanced":{"compatibility":"|  | Android | iOS | web |\n| :- | :- | :- | :- |\n| shallowRef() | 4.0 | 4.11 | 4.0 |\n| triggerRef() | 4.0 | 4.11 | x |\n| customRef() | 4.0 | 4.11 | 4.0 |\n| shallowReactive() | 4.0 | 4.11 | 4.0 |\n| shallowReadonly() | 4.0 | 4.11 | 4.0 |\n| toRaw() | 4.0 | 4.11 | 4.0 |\n| markRaw() | - | - | - |\n| effectScope() | 4.0 | 4.11 | 4.0 |\n| getCurrentScope() | 4.0 | 4.11 | 4.0 |\n| onScopeDispose() | 4.0 | 4.11 | 4.0 |","example":""},"composition_lifecycle":{"compatibility":"|  | Android | iOS | web |\n| :- | :- | :- | :- |\n| onMounted() | 4.0 | 4.11 | 4.0 |\n| onUpdated() | 4.0 | 4.11 | 4.0 |\n| onUnmounted() | 4.0 | 4.11 | 4.0 |\n| onBeforeMount() | 4.0 | 4.11 | 4.0 |\n| onBeforeUpdate() | 4.0 | 4.11 | 4.0 |\n| onBeforeUnmount() | 4.0 | 4.11 | 4.0 |\n| onErrorCaptured() | - | - | - |\n| onRenderTracked() | - | - | - |\n| onRenderTriggered() | - | - | - |\n| onActivated() | x | x | 4.0 |\n| onDeactivated() | x | x | 4.0 |\n| onServerPrefetch() | - | - | - |","example":"#### 页面生命周期 示例 \n> [hello uvue](https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/composition-api/lifecycle/page-lifecycle/page-lifecycle.uvue) \n ```html\n<template>\r\n  <!-- #ifdef APP -->\r\n  <scroll-view style=\"flex:1\" :bounces=\"false\">\r\n  <!-- #endif -->\r\n    <view class=\"page container\">\r\n      <text>page lifecycle</text>\r\n      <button class=\"uni-common-mt\" @click=\"scrollToBottom\">scrollToBottom</button>\r\n    </view>\r\n  <!-- #ifdef APP -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n<script setup>\r\n  import { state, setLifeCycleNum } from '@/store/index.uts'\r\n  \r\n  const isScrolled = ref(false)\r\n  \r\n  onLoad((_: OnLoadOptions) => {\r\n    // 自动化测试\r\n    setLifeCycleNum(state.lifeCycleNum + 100)\r\n  })\r\n  onPageShow(() => {\r\n    // 自动化测试\r\n    setLifeCycleNum(state.lifeCycleNum + 10)\r\n  })\r\n  onReady(() => {\r\n    // 自动化测试\r\n    setLifeCycleNum(state.lifeCycleNum + 10)\r\n  })\r\n  onPullDownRefresh(() => {\r\n    // 自动化测试\r\n    setLifeCycleNum(state.lifeCycleNum + 10)\r\n  })\r\n  onPageScroll((_) => {\r\n    // 自动化测试\r\n    isScrolled.value = true\r\n  })\r\n  onReachBottom(() => {\r\n    // 自动化测试\r\n    setLifeCycleNum(state.lifeCycleNum + 10)\r\n  })\r\n  onBackPress((_: OnBackPressOptions): boolean | null => {\r\n    // 自动化测试\r\n    setLifeCycleNum(state.lifeCycleNum - 10)\r\n    return null\r\n  })\r\n  onPageHide(() => {\r\n    // 自动化测试\r\n    setLifeCycleNum(state.lifeCycleNum - 10)\r\n  })\r\n  onUnload(() => {\r\n    // 自动化测试\r\n    setLifeCycleNum(state.lifeCycleNum - 100)\r\n  })\r\n  onResize((_) => {\r\n    // 自动化测试\r\n    setLifeCycleNum(state.lifeCycleNum + 10)\r\n  })\r\n  \r\n  // 自动化测试\r\n  const getLifeCycleNum = () : number => {\r\n    return state.lifeCycleNum\r\n  }\r\n  // 自动化测试\r\n  const pageSetLifeCycleNum = (num: number) => {\r\n    setLifeCycleNum(num)\r\n  }\r\n \r\n  // 自动化测试\r\n  const pullDownRefresh = () => {\r\n    uni.startPullDownRefresh({\r\n      success() {\r\n        setTimeout(() => {\r\n          uni.stopPullDownRefresh()\r\n        }, 1500)\r\n      },\r\n    })\r\n  }\r\n  \r\n  const scrollToBottom = () => {\r\n    uni.pageScrollTo({\r\n      scrollTop: 2000,\r\n    })\r\n  }\r\n  \r\n  // 自动化测试\r\n  const getIsScrolled = (): boolean => {\r\n    return isScrolled.value\r\n  }\r\n  \r\n  defineExpose({\r\n    getLifeCycleNum,\r\n    pageSetLifeCycleNum,\r\n    pullDownRefresh,\r\n    scrollToBottom,\r\n    getIsScrolled\r\n  })\r\n</script>\r\n\r\n<style>\r\n  .container {\r\n    height: 1200px;\r\n  }\r\n</style>\n```\n#### 组件生命周期 示例 \n> [hello uvue](https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/composition-api/lifecycle/component-lifecycle/component-lifecycle.uvue) \n ```html\n<template>\r\n  <!-- #ifdef APP -->\r\n  <scroll-view style=\"flex:1\">\r\n  <!-- #endif -->\r\n    <view class=\"pag container\">\r\n      <text class=\"uni-common-mb\">component lifecycle</text>\r\n      <component-lifecycle class=\"component-lifecycle\" @updateIsScroll=\"updateIsScroll\" />\r\n      <button class=\"uni-common-mt\" @click=\"scrollToBottom\">scrollToBottom</button>\r\n    </view>\r\n  <!-- #ifdef APP -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n<script setup>\r\n  import ComponentLifecycle from '@/components/CompositionAPILifecycle.uvue'\r\n  import { state, setLifeCycleNum } from '@/store/index.uts'\r\n\r\n  const isScrolled = ref(false)\r\n\r\n  // 自动化测试\r\n  const getLifeCycleNum = () : number => {\r\n    return state.lifeCycleNum\r\n  }\r\n\r\n  // 自动化测试\r\n  const pageSetlifeCycleNum = (num : number) => {\r\n    setLifeCycleNum(num)\r\n  }\r\n\r\n  // 自动化测试\r\n  const pullDownRefresh = () => {\r\n    uni.startPullDownRefresh({\r\n      success() {\r\n        setTimeout(() => {\r\n          uni.stopPullDownRefresh()\r\n        }, 1500)\r\n      },\r\n    })\r\n  }\r\n\r\n  const scrollToBottom = () => {\r\n    uni.pageScrollTo({\r\n      scrollTop: 3000,\r\n    })\r\n  }\r\n\r\n  const updateIsScroll = (val : boolean) => {\r\n    isScrolled.value = val\r\n  }\r\n\r\n  // 自动化测试\r\n  const getIsScrolled = () : boolean => {\r\n    return isScrolled.value\r\n  }\r\n\r\n  defineExpose({\r\n    getLifeCycleNum,\r\n    pageSetlifeCycleNum,\r\n    pullDownRefresh,\r\n    scrollToBottom,\r\n    getIsScrolled\r\n  })\r\n</script>\r\n\r\n<style>\r\n  .container {\r\n    height: 1200px;\r\n  }\r\n</style>\n```"},"composition_injection":{"compatibility":"|  | Android | iOS | web |\n| :- | :- | :- | :- |\n| provide() | 4.0 | 4.11 | 4.0 |\n| inject() | 4.0 | 4.11 | 4.0 |\n| hasInjectionContext() | 4.0 | 4.11 | 4.11 |","example":""},"options_state":{"compatibility":"|  | Android | iOS | web |\n| :- | :- | :- | :- |\n| data | 3.9 | 4.11 | 4.0 |\n| props | 3.9 | 4.11 | 4.0 |\n| computed | 3.9 | 4.11 | 4.0 |\n| methods | 3.9 | 4.11 | 4.0 |\n| watch | 3.9 | 4.11 | 4.0 |\n| emits | 3.9 | 4.11 | 4.0 |\n| expose | x | x | 4.0 |","example":"#### 状态选项 示例 \n - [选项式 API 示例](https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/state)"},"options_rendering":{"compatibility":"|  | Android | iOS | web |\n| :- | :- | :- | :- |\n| template | - | - | - |\n| render | 3.9 | 4.11 | 4.0 |\n| compilerOptions | - | - | - |\n| slots | 3.9 | 4.11 | 4.0 |","example":"#### 渲染选项 示例 \n - [指令示例](https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/rendering)"},"options_lifecycle":{"compatibility":"|  | Android | iOS | web |\n| :- | :- | :- | :- |\n| beforeCreate | 3.9 | 4.11 | 4.0 |\n| created | 3.9 | 4.11 | 4.0 |\n| beforeMount | 3.9 | 4.11 | 4.0 |\n| mounted | 3.9 | 4.11 | 4.0 |\n| beforeUpdate | 3.9 | 4.11 | 4.0 |\n| updated | 3.9 | 4.11 | 4.0 |\n| beforeUnmount | 3.9 | 4.11 | 4.0 |\n| unmounted | 3.9 | 4.11 | 4.0 |\n| errorCaptured | x | x | 4.0 |\n| renderTracked | x | x | 4.0 |\n| renderTriggered | x | x | 4.0 |\n| activated | 4.0 | 4.11 | 4.0 |\n| deactivated | 4.0 | 4.11 | 4.0 |\n| serverPrefetch | - | - | - |","example":"#### 页面生命周期示例 \n> [hello uvue](https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/lifecycle/page/page.uvue) \n ```html\n<template>\r\n  <!-- #ifdef APP -->\r\n  <scroll-view style=\"flex: 1\" :bounces=\"false\">\r\n    <!-- #endif -->\r\n    <view class=\"page container\">\r\n      <text>page lifecycle</text>\r\n      <button class=\"uni-common-mt\" @click=\"scrollToBottom\">scrollToBottom</button>\r\n    </view>\r\n    <!-- #ifdef APP -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nimport { state, setLifeCycleNum } from '@/store/index.uts'\r\n\r\nexport default {\r\n  data() {\r\n    return {\r\n      isScrolled: false,\r\n    }\r\n  },\r\n  onLoad(_ : OnLoadOptions) {\r\n    // 自动化测试\r\n    setLifeCycleNum(state.lifeCycleNum + 100)\r\n  },\r\n  onShow() {\r\n    // 自动化测试\r\n    setLifeCycleNum(state.lifeCycleNum + 10)\r\n  },\r\n  onReady() {\r\n    // 自动化测试\r\n    setLifeCycleNum(state.lifeCycleNum + 10)\r\n  },\r\n  onPullDownRefresh() {\r\n    // 自动化测试\r\n    setLifeCycleNum(state.lifeCycleNum + 10)\r\n  },\r\n  onPageScroll(_) {\r\n    // 自动化测试\r\n    this.isScrolled = true\r\n  },\r\n  onReachBottom() {\r\n    // 自动化测试\r\n    setLifeCycleNum(state.lifeCycleNum + 10)\r\n  },\r\n  onBackPress(_ : OnBackPressOptions) : boolean | null {\r\n    // 自动化测试\r\n    setLifeCycleNum(state.lifeCycleNum - 10)\r\n    return null\r\n  },\r\n  onHide() {\r\n    // 自动化测试\r\n    setLifeCycleNum(state.lifeCycleNum - 10)\r\n  },\r\n  onUnload() {\r\n    // 自动化测试\r\n    setLifeCycleNum(state.lifeCycleNum - 100)\r\n  },\r\n  onResize(_){\r\n    // 自动化测试\r\n    setLifeCycleNum(state.lifeCycleNum + 10)\r\n  },\r\n  methods: {\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    pullDownRefresh() {\r\n      uni.startPullDownRefresh({\r\n        success() {\r\n          setTimeout(() => {\r\n            uni.stopPullDownRefresh()\r\n            // 一秒后立即停止下拉刷新不会触发 onPullDownRefresh，因为下拉动画时间大概需要1.1～1.2秒\r\n          }, 1500)\r\n        },\r\n      })\r\n    },\r\n    scrollToBottom() {\r\n      uni.pageScrollTo({\r\n        scrollTop: 2000,\r\n      })\r\n    },\r\n  },\r\n}\r\n</script>\r\n\r\n<style>\r\n.container {\r\n  height: 1200px;\r\n}\r\n</style>\r\n\n```\n#### 组件生命周期示例 \n> [hello uvue](https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/lifecycle/component/component.uvue) \n ```html\n<template>\r\n  <view class=\"page\">\r\n    <text class=\"uni-common-mb\">component lifecycle</text>\r\n    <component-lifecycle class=\"component-lifecycle\" />\r\n  </view>\r\n</template>\r\n\r\n<script>\r\nimport ComponentLifecycle from '@/components/OptionsAPILifecycle.uvue'\r\nimport { state } from '@/store/index.uts'\r\nexport default {\r\n  components: { ComponentLifecycle },\r\n  methods: {\r\n    // 自动化测试\r\n    getLifeCycleNum(): number {\r\n      return state.lifeCycleNum\r\n    },\r\n  },\r\n}\r\n</script>\r\n\n```"},"options_composition":{"compatibility":"|  | Android | iOS | web |\n| :- | :- | :- | :- |\n| provide | 3.99 | 4.11 | 4.0 |\n| inject | 3.99 | 4.11 | 4.0 |\n| mixins | 3.99 | 4.11 | 4.0 |\n| extends | - | - | - |","example":""},"options_misc":{"compatibility":"|  | Android | iOS | web |\n| :- | :- | :- | :- |\n| name | 3.9 | 4.11 | 4.0 |\n| inheritAttrs | 3.9 | 4.11 | 4.0 |\n| components | 3.9 | 4.11 | 4.0 |\n| directives | - | - | - |","example":""},"component_instance":{"compatibility":"|  | Android | iOS | web |\n| :- | :- | :- | :- |\n| $data | √ | 4.11 | 4.0 |\n| $props | √ | 4.11 | 4.0 |\n| $el | √ | 4.11 | 4.0 |\n| $options | √ | 4.11 | 4.0 |\n| $parent | √ | 4.11 | 4.0 |\n| $root | √ | 4.11 | 4.0 |\n| $slots | √ | 4.11 | 4.0 |\n| $refs | √ | 4.11 | 4.0 |\n| $attrs | √ | 4.11 | 4.0 |\n| $watch() | √ | 4.11 | 4.0 |\n| $emit | √ | 4.11 | 4.0 |\n| $forceUpdate | √ | 4.11 | 4.0 |\n| $nextTick | √ | 4.11 | 4.0 |\n| $callMethod | √ | 4.11 | 4.0 |","example":"#### 组件实例 示例 \n - [组件实例示例](https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance)"},"directives":{"compatibility":"|  | Android | iOS | web |\n| :- | :- | :- | :- |\n| v-text | x | x | 4.0 |\n| v-html | 3.99 | x | 4.0 |\n| v-show | 3.9 | 4.11 | 4.0 |\n| v-if | 3.9 | 4.11 | 4.0 |\n| v-else | 3.9 | 4.11 | 4.0 |\n| v-else-if | 3.9 | 4.11 | 4.0 |\n| v-for | 3.9 | 4.11 | 4.0 |\n| v-on | 3.9 | 4.11 | 4.0 |\n| v-bind | 3.9 | 4.11 | 4.0 |\n| v-model | 3.9 | 4.11 | 4.0 |\n| v-slot | 3.9 | 4.11 | 4.0 |\n| v-pre | 3.99 | 4.11 | 4.0 |\n| v-once | 3.99 | 4.11 | x |\n| v-memo | 3.99 | 4.11 | x |\n| v-cloak | x | x | 4.0 |","example":"#### 指令 示例 \n - [指令示例](https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive)"},"special_attributes":{"compatibility":"|  | Android | iOS | web |\n| :- | :- | :- | :- |\n| key | 3.9 | 4.11 | 4.0 |\n| ref | 3.9 | 4.11 | 4.0 |\n| is | 3.99 | 4.11 | 4.0 |","example":""},"render_function":{"compatibility":"|  | Android | iOS | web |\n| :- | :- | :- | :- |\n| h() | 3.99 | 4.11 | 4.0 |\n| mergeProps() | 4.0 | 4.11 | 4.0 |\n| cloneVNode() | 4.0 | 4.11 | 4.0 |\n| isVNode() | √ | 4.11 | 4.0 |\n| resolveComponent() | √ | 4.11 | 4.0 |\n| resolveDirective() | - | - | - |\n| withDirectives() | √ | 4.11 | 4.0 |\n| withModifiers() | √ | 4.11 | 4.0 |","example":""},"single_file_component_script":{"compatibility":"|  | Android | iOS | web |\n| :- | :- | :- | :- |\n| defineProps() | 4.0 | 4.11 | 4.0 |\n| defineEmits() | 4.0 | 4.11 | 4.0 |\n| defineModel() | 4.0 | 4.11 | 4.11 |\n| defineExpose() | 4.0 | 4.11 | 4.0 |\n| defineOptions() | 4.0 | 4.11 | 4.11 |\n| defineSlots() | 4.0 | 4.11 | 4.0 |\n| useSlots() | 4.0 | 4.11 | 4.0 |\n| useAttrs() | 4.0 | 4.11 | 4.0 |","example":"#### \\<script setup> 示例 \n> [hello uvue](https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/composition/setup/setup.uvue) \n ```html\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='uni-common-mt' id=\"str\">str: {{ str }}</text>\r\n      <text class='uni-common-mt' id=\"num\">num: {{ num }}</text>\r\n      <text class='uni-common-mt' id=\"bool\">bool: {{ bool }}</text>\r\n      <text class='uni-common-mt' id=\"count\">count: {{count}}</text>\r\n      <button class='uni-common-mt' id=\"increment-btn\" @click=\"increment\">increment</button>\r\n      <text class='uni-common-mt' id=\"obj-str\">obj.str: {{ obj['str'] }}</text>\r\n      <text class='uni-common-mt' id=\"obj-num\">obj.num: {{ obj['num'] }}</text>\r\n      <text class='uni-common-mt' id=\"obj-bool\">obj.bool: {{ obj['bool'] }}</text>\r\n      <button class='uni-common-mt' id=\"update-obj-btn\" @click=\"updateObj\">update obj</button>\r\n      <!-- #ifdef APP -->\r\n      <RenderFunction :str='str' :count='count' :obj='obj' @compUpdateObj='compUpdateObj' :isShow='true' />\r\n      <!-- #endif -->\r\n      <Foo>\r\n        <text class=\"uni-common-mt\" id=\"default-slot-in-foo\">default slot in Foo</text>\r\n      </Foo>\r\n    </view>\r\n  <!-- #ifdef APP -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n<script>\r\n  // #ifdef APP\r\n  import RenderFunction from './RenderFunction.uvue'\r\n  // #endif\r\n  import Foo from './Foo.uvue'\r\n  export default {\r\n    components: {\r\n      // #ifdef APP\r\n      RenderFunction,\r\n      // #endif\r\n      Foo\r\n    },\r\n    setup() {\r\n      const count = ref(0)\r\n      // 函数只能通过声明变量,赋值函数的方式,不支持 function xxx(){}\r\n      const increment = () => { count.value++ }\r\n      const obj = reactive({\r\n        str: 'obj default str',\r\n        num: 0,\r\n        bool: false,\r\n      })\r\n      const updateObj = () => {\r\n        obj['str'] = 'obj new str'\r\n        obj['num'] = 100\r\n        obj['bool'] = true\r\n      }\r\n      const compUpdateObj = () => {\r\n        obj['str'] = 'obj new str by comp update'\r\n        obj['num'] = 200\r\n        obj['bool'] = true\r\n      }\r\n      return {\r\n        str: 'default str',\r\n        num: 0,\r\n        bool: false,\r\n        count,\r\n        increment,\r\n        obj,\r\n        updateObj,\r\n        compUpdateObj\r\n      }\r\n    }\r\n  }\r\n</script>\n```"}}
+{"template":{"name":"#### template","description":"\n\n##### template 兼容性\n| Android | iOS | web |\n| :- | :- | :- |\n| 3.9 | 4.11 | 4.0 |\n","attribute":"##### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| lang | string | - |  |\n@| 值名称 | 描述 |\n@| :- | :- |\n@| html | html |\n@| pug | 仅 Web 端支持 |\n","event":"","example":"","compatibility":"##### template 属性兼容性\n|  | Android | iOS | web |\n| :- | :- | :- | :- |\n| lang | 3.9 | x | 4.0 |\n","children":"","reference":""},"slot":{"name":"#### slot","description":"> 组件类型：string \n\n \\<slot> 元素作为组件模板之中的内容分发插槽。\\<slot> 元素自身将被替换。\n\n##### slot 兼容性\n| Android | iOS | web |\n| :- | :- | :- |\n| 3.9 | 4.11 | 4.0 |\n","attribute":"##### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| name | string | - | 用于命名插槽。 |","event":"","example":"","compatibility":"","children":"","reference":"\n##### 参见\n- [Reference](https://v3.cn.vuejs.org/api/built-in-components.html#slot)\n"},"script":{"name":"#### script","description":"\n\n##### script 兼容性\n| Android | iOS | web |\n| :- | :- | :- |\n| 3.9 | 4.11 | 4.0 |\n","attribute":"##### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| setup | Any | - | - |\n| lang | Any | - |  |\n@| 值名称 | 描述 |\n@| :- | :- |\n@| uts | uts |\n\n##### lang 兼容性\n|  | Android | iOS | web |\n| :- | :- | :- | :- |\n| uts | 4.0 | 4.11 | 4.0 |\n","event":"","example":"","compatibility":"##### script 属性兼容性\n|  | Android | iOS | web |\n| :- | :- | :- | :- |\n| setup | 4.0 | 4.11 | 4.0 |\n| lang | 4.0 | 4.11 | 4.0 |\n","children":"","reference":""},"style":{"name":"#### style","description":"\n\n##### style 兼容性\n| Android | iOS | web |\n| :- | :- | :- |\n| 3.9 | 4.11 | 4.0 |\n","attribute":"##### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| lang | Any | - |  |\n@| 值名称 | 描述 |\n@| :- | :- |\n@| scss | - |\n@| less | - |\n@| stylus | - |\n| scoped | Any | - | - |\n| module | Any | - | - |\n","event":"","example":"","compatibility":"##### style 属性兼容性\n|  | Android | iOS | web |\n| :- | :- | :- | :- |\n| lang | 3.9 | 4.11 | 4.0 |\n| scoped | x | x | 4.0 |\n| module | x | x | 4.0 |\n","children":"","reference":""},"keep-alive":{"name":"#### keep-alive","description":"> 组件类型：string \n\n \\<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 \\<transition> 相似，\\<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。\n\n##### keep-alive 兼容性\n| Android | iOS | web |\n| :- | :- | :- |\n| 4.0 | 4.11 | 4.0 |\n","attribute":"##### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| include | string | - | 字符串或正则表达式。只有名称匹配的组件会被缓存。 |\n| exclude | string | - | 字符串或正则表达式。任何名称匹配的组件都不会被缓存。 |\n| max | string | - | 最多可以缓存多少组件实例。 |","event":"","example":"","compatibility":"","children":"","reference":"\n##### 参见\n- [Reference](https://v3.cn.vuejs.org/api/built-in-components.html#keep-alive)\n"},"component":{"name":"#### component","description":"> 组件类型：string \n\n 渲染一个“元组件”为动态组件。依 is 的值，来决定哪个组件被渲染。\n\n##### component 兼容性\n| Android | iOS | web |\n| :- | :- | :- |\n| 3.99 | 4.11 | 4.0 |\n","attribute":"##### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| is | Any | - | - |\n| inline-template | Any | - | - |","event":"","example":"","compatibility":"","children":"","reference":"\n##### 参见\n- [Reference](https://v3.cn.vuejs.org/api/built-in-components.html#component)\n"},"transition":{"name":"#### transition","description":"> 组件类型：string \n\n \\<transition> 元素作为单个元素/组件的过渡效果。\\<transition> 只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在检测过的组件层级中。\n\n##### transition 兼容性\n| Android | iOS | web |\n| :- | :- | :- |\n| x | x | 4.0 |\n","attribute":"##### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| name | string | - | 用于自动生成 CSS 过渡类名。例如：name: 'fade' 将自动拓展为.fade-enter，.fade-enter-active等。默认类名为 \"v\" |\n| appear | string(true \\| false) | - | 是否在初始渲染时使用过渡。默认为 false。 |\n| css | string(true \\| false) | - | 是否使用 CSS 过渡类。默认为 true。如果设置为 false，将只通过组件事件触发注册的 JavaScript 钩子。 |\n| type | string | - | 指定过渡事件类型，侦听过渡何时结束。有效值为 \"transition\" 和 \"animation\"。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。 |\n@| 值名称 | 描述 |\n@| :- | :- |\n@| transition | - |\n@| animation | - |\n| mode | string | - | 控制离开/进入的过渡时间序列。有效的模式有 \"out-in\" 和 \"in-out\"；默认同时生效。 |\n@| 值名称 | 描述 |\n@| :- | :- |\n@| out-in | - |\n@| in-out | - |\n| duration | string | - | 指定过渡的持续时间。默认情况下，Vue 会等待过渡所在根元素的第一个 transitionend 或 animationend 事件。 |\n| enter-class | Any | - | - |\n| leave-class | Any | - | - |\n| appear-class | Any | - | - |\n| enter-to-class | Any | - | - |\n| leave-to-class | Any | - | - |\n| appear-to-class | Any | - | - |\n| enter-active-class | Any | - | - |\n| leave-active-class | Any | - | - |\n| appear-active-class | Any | - | - |\n| @before-enter | Any | - | - |\n| @before-leave | Any | - | - |\n| @before-appear | Any | - | - |\n| @enter | Any | - | - |\n| @leave | Any | - | - |\n| @appear | Any | - | - |\n| @after-enter | Any | - | - |\n| @after-leave | Any | - | - |\n| @after-appear | Any | - | - |\n| @enter-cancelled | Any | - | - |\n| @leave-cancelled | string | - | v-show only |\n| @appear-cancelled | Any | - | - |\n\n","event":"","example":"","compatibility":"","children":"","reference":"\n##### 参见\n- [Reference](https://v3.cn.vuejs.org/api/built-in-components.html#transition)\n"},"transition-group":{"name":"#### transition-group","description":"> 组件类型：string \n\n \\<transition-group> 元素作为多个元素/组件的过渡效果。\\<transition-group> 渲染一个真实的 DOM 元素。默认渲染 \\<span>，可以通过 tag 属性配置哪个元素应该被渲染。\n\n##### transition-group 兼容性\n| Android | iOS | web |\n| :- | :- | :- |\n| x | x | 4.0 |\n","attribute":"##### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| tag | string | - | 默认为 span。 |\n| move-class | string | - | 覆盖移动过渡期间应用的 CSS 类。 |\n| name | string | - | 用于自动生成 CSS 过渡类名。例如：name: 'fade' 将自动拓展为.fade-enter，.fade-enter-active等。默认类名为 \"v\" |\n| appear | string(true \\| false) | - | 是否在初始渲染时使用过渡。默认为 false。 |\n| css | string(true \\| false) | - | 是否使用 CSS 过渡类。默认为 true。如果设置为 false，将只通过组件事件触发注册的 JavaScript 钩子。 |\n| type | string | - | 指定过渡事件类型，侦听过渡何时结束。有效值为 \"transition\" 和 \"animation\"。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。 |\n@| 值名称 | 描述 |\n@| :- | :- |\n@| transition | - |\n@| animation | - |\n| mode | Any | - | - |\n| duration | string | - | 指定过渡的持续时间。默认情况下，Vue 会等待过渡所在根元素的第一个 transitionend 或 animationend 事件。 |\n| enter-class | Any | - | - |\n| leave-class | Any | - | - |\n| appear-class | Any | - | - |\n| enter-to-class | Any | - | - |\n| leave-to-class | Any | - | - |\n| appear-to-class | Any | - | - |\n| enter-active-class | Any | - | - |\n| leave-active-class | Any | - | - |\n| appear-active-class | Any | - | - |\n| @before-enter | Any | - | - |\n| @before-leave | Any | - | - |\n| @before-appear | Any | - | - |\n| @enter | Any | - | - |\n| @leave | Any | - | - |\n| @appear | Any | - | - |\n| @after-enter | Any | - | - |\n| @after-leave | Any | - | - |\n| @after-appear | Any | - | - |\n| @enter-cancelled | Any | - | - |\n| @leave-cancelled | string | - | v-show only |\n| @appear-cancelled | Any | - | - |\n","event":"","example":"","compatibility":"","children":"","reference":"\n##### 参见\n- [Reference](https://v3.cn.vuejs.org/api/built-in-components.html#transition-group)\n"},"teleport":{"name":"#### teleport","description":"> 组件类型：string \n\n Teleport 提供了一种干净的方法，允许我们控制在 DOM 中哪个父节点下呈现 HTML，而不必求助于全局状态或将其拆分为两个组件。\n\n##### teleport 兼容性\n| Android | iOS | web |\n| :- | :- | :- |\n| 4.0 | 4.11 | 4.0 |\n","attribute":"##### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| to | string | - | 必须是有效的查询选择器或 HTMLElement (如果在浏览器环境中使用)。指定将在其中移动 \\<teleport> 内容的目标元素 |\n| disabled | boolean | - | 此可选属性可用于禁用 \\<teleport> 的功能，这意味着其插槽内容将不会移动到任何位置，而是在您在周围父组件中指定了 \\<teleport> 的位置渲染。 |","event":"","example":"","compatibility":"","children":"","reference":"\n##### 参见\n- [Reference](https://v3.vuejs.org/api/built-in-components.html#teleport)\n"},"application":{"compatibility":"|  | Android | iOS | web |\n| :- | :- | :- | :- |\n| createApp() | √ | 4.11 | 4.0 |\n| createSSRApp() | √ | 4.11 | 4.0 |\n| app.mount() | √ | 4.11 | 4.0 |\n| app.unmount() | √ | 4.11 | 4.0 |\n| app.component() | √ | 4.11 | 4.0 |\n| app.directive() | - | - | - |\n| app.use() | 3.99 | 4.11 | 4.0 |\n| app.mixin() | 3.99 | 4.11 | 4.0 |\n| app.provide() | 3.99 | 4.11 | 4.0 |\n| app.runWithContext() | - | - | - |\n| app.version | √ | 4.11 | 4.0 |\n| app.config | - | - | - |\n| app.config.errorHandler | x | 4.11 | 4.0 |\n| app.config.warnHandler | - | - | - |\n| app.config.performance | - | - | - |\n| app.config.compilerOptions | - | - | - |\n| app.config.globalProperties | 3.99 | 4.11 | 4.0 |\n| app.config.optionMergeStrategies | - | - | - |","example":""},"general":{"compatibility":"|  | Android | iOS | web |\n| :- | :- | :- | :- |\n| version | √ | 4.11 | 4.0 |\n| nextTick() | √ | 4.11 | 4.0 |\n| defineComponent() | x | x | 4.0 |\n| defineAsyncComponent() | - | - | - |\n| defineCustomElement() | - | - | - |","example":""},"reactivity_core":{"compatibility":"|  | Android | iOS | web |\n| :- | :- | :- | :- |\n| ref() | √ | 4.11 | 4.0 |\n| computed() | - | - | - |\n| reactive() | √ | 4.11 | 4.0 |\n| readonly() | 4.0 | 4.11 | 4.0 |\n| watchEffect() | 4.0 | 4.11 | 4.0 |\n| watchPostEffect() | 4.0 | 4.11 | 4.0 |\n| watchSyncEffect() | 4.0 | 4.11 | 4.0 |\n| watch() | 4.0 | 4.11 | 4.0 |","example":""},"reactivity_utilities":{"compatibility":"|  | Android | iOS | web |\n| :- | :- | :- | :- |\n| isRef() | 4.0 | 4.11 | 4.0 |\n| unref() | 4.0 | 4.11 | 4.0 |\n| toRef() | 4.0 | 4.11 | 4.11 |\n| toValue() | 4.0 | 4.11 | 4.11 |\n| toRefs() | 4.0 | 4.11 | 4.11 |\n| isProxy() | 4.0 | 4.11 | 4.0 |\n| isReactive() | 4.0 | 4.11 | 4.0 |\n| isReadonly() | 4.0 | 4.11 | 4.0 |","example":""},"reactivity_advanced":{"compatibility":"|  | Android | iOS | web |\n| :- | :- | :- | :- |\n| shallowRef() | 4.0 | 4.11 | 4.0 |\n| triggerRef() | 4.0 | 4.11 | x |\n| customRef() | 4.0 | 4.11 | 4.0 |\n| shallowReactive() | 4.0 | 4.11 | 4.0 |\n| shallowReadonly() | 4.0 | 4.11 | 4.0 |\n| toRaw() | 4.0 | 4.11 | 4.0 |\n| markRaw() | - | - | - |\n| effectScope() | 4.0 | 4.11 | 4.0 |\n| getCurrentScope() | 4.0 | 4.11 | 4.0 |\n| onScopeDispose() | 4.0 | 4.11 | 4.0 |","example":""},"composition_lifecycle":{"compatibility":"|  | Android | iOS | web |\n| :- | :- | :- | :- |\n| onMounted() | 4.0 | 4.11 | 4.0 |\n| onUpdated() | 4.0 | 4.11 | 4.0 |\n| onUnmounted() | 4.0 | 4.11 | 4.0 |\n| onBeforeMount() | 4.0 | 4.11 | 4.0 |\n| onBeforeUpdate() | 4.0 | 4.11 | 4.0 |\n| onBeforeUnmount() | 4.0 | 4.11 | 4.0 |\n| onErrorCaptured() | - | - | - |\n| onRenderTracked() | - | - | - |\n| onRenderTriggered() | - | - | - |\n| onActivated() | x | x | 4.0 |\n| onDeactivated() | x | x | 4.0 |\n| onServerPrefetch() | - | - | - |","example":"#### 页面生命周期 示例 \n> [hello uvue](https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/composition-api/lifecycle/page-lifecycle/page-lifecycle.uvue) \n ```html\n<template>\r\n  <!-- #ifdef APP -->\r\n  <scroll-view style=\"flex:1\" :bounces=\"false\">\r\n  <!-- #endif -->\r\n    <view class=\"page container\">\r\n      <text>page lifecycle</text>\r\n      <button class=\"uni-common-mt\" @click=\"scrollToBottom\">scrollToBottom</button>\r\n    </view>\r\n  <!-- #ifdef APP -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n<script setup>\r\n  import { state, setLifeCycleNum } from '@/store/index.uts'\r\n  \r\n  const isScrolled = ref(false)\r\n  \r\n  onLoad((_: OnLoadOptions) => {\r\n    // 自动化测试\r\n    setLifeCycleNum(state.lifeCycleNum + 100)\r\n  })\r\n  onPageShow(() => {\r\n    // 自动化测试\r\n    setLifeCycleNum(state.lifeCycleNum + 10)\r\n  })\r\n  onReady(() => {\r\n    // 自动化测试\r\n    setLifeCycleNum(state.lifeCycleNum + 10)\r\n  })\r\n  onPullDownRefresh(() => {\r\n    // 自动化测试\r\n    setLifeCycleNum(state.lifeCycleNum + 10)\r\n  })\r\n  onPageScroll((_) => {\r\n    // 自动化测试\r\n    isScrolled.value = true\r\n  })\r\n  onReachBottom(() => {\r\n    // 自动化测试\r\n    setLifeCycleNum(state.lifeCycleNum + 10)\r\n  })\r\n  onBackPress((_: OnBackPressOptions): boolean | null => {\r\n    // 自动化测试\r\n    setLifeCycleNum(state.lifeCycleNum - 10)\r\n    return null\r\n  })\r\n  onPageHide(() => {\r\n    // 自动化测试\r\n    setLifeCycleNum(state.lifeCycleNum - 10)\r\n  })\r\n  onUnload(() => {\r\n    // 自动化测试\r\n    setLifeCycleNum(state.lifeCycleNum - 100)\r\n  })\r\n  onResize((_) => {\r\n    // 自动化测试\r\n    setLifeCycleNum(state.lifeCycleNum + 10)\r\n  })\r\n  \r\n  // 自动化测试\r\n  const getLifeCycleNum = () : number => {\r\n    return state.lifeCycleNum\r\n  }\r\n  // 自动化测试\r\n  const pageSetLifeCycleNum = (num: number) => {\r\n    setLifeCycleNum(num)\r\n  }\r\n \r\n  // 自动化测试\r\n  const pullDownRefresh = () => {\r\n    uni.startPullDownRefresh({\r\n      success() {\r\n        setTimeout(() => {\r\n          uni.stopPullDownRefresh()\r\n        }, 1500)\r\n      },\r\n    })\r\n  }\r\n  \r\n  const scrollToBottom = () => {\r\n    uni.pageScrollTo({\r\n      scrollTop: 2000,\r\n    })\r\n  }\r\n  \r\n  // 自动化测试\r\n  const getIsScrolled = (): boolean => {\r\n    return isScrolled.value\r\n  }\r\n  \r\n  defineExpose({\r\n    getLifeCycleNum,\r\n    pageSetLifeCycleNum,\r\n    pullDownRefresh,\r\n    scrollToBottom,\r\n    getIsScrolled\r\n  })\r\n</script>\r\n\r\n<style>\r\n  .container {\r\n    height: 1200px;\r\n  }\r\n</style>\n```\n#### 组件生命周期 示例 \n> [hello uvue](https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/composition-api/lifecycle/component-lifecycle/component-lifecycle.uvue) \n ```html\n<template>\r\n  <!-- #ifdef APP -->\r\n  <scroll-view style=\"flex:1\">\r\n  <!-- #endif -->\r\n    <view class=\"pag container\">\r\n      <text class=\"uni-common-mb\">component lifecycle</text>\r\n      <component-lifecycle class=\"component-lifecycle\" @updateIsScroll=\"updateIsScroll\" />\r\n      <button class=\"uni-common-mt\" @click=\"scrollToBottom\">scrollToBottom</button>\r\n    </view>\r\n  <!-- #ifdef APP -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n<script setup>\r\n  import ComponentLifecycle from '@/components/CompositionAPILifecycle.uvue'\r\n  import { state, setLifeCycleNum } from '@/store/index.uts'\r\n\r\n  const isScrolled = ref(false)\r\n\r\n  // 自动化测试\r\n  const getLifeCycleNum = () : number => {\r\n    return state.lifeCycleNum\r\n  }\r\n\r\n  // 自动化测试\r\n  const pageSetlifeCycleNum = (num : number) => {\r\n    setLifeCycleNum(num)\r\n  }\r\n\r\n  // 自动化测试\r\n  const pullDownRefresh = () => {\r\n    uni.startPullDownRefresh({\r\n      success() {\r\n        setTimeout(() => {\r\n          uni.stopPullDownRefresh()\r\n        }, 1500)\r\n      },\r\n    })\r\n  }\r\n\r\n  const scrollToBottom = () => {\r\n    uni.pageScrollTo({\r\n      scrollTop: 3000,\r\n    })\r\n  }\r\n\r\n  const updateIsScroll = (val : boolean) => {\r\n    isScrolled.value = val\r\n  }\r\n\r\n  // 自动化测试\r\n  const getIsScrolled = () : boolean => {\r\n    return isScrolled.value\r\n  }\r\n\r\n  defineExpose({\r\n    getLifeCycleNum,\r\n    pageSetlifeCycleNum,\r\n    pullDownRefresh,\r\n    scrollToBottom,\r\n    getIsScrolled\r\n  })\r\n</script>\r\n\r\n<style>\r\n  .container {\r\n    height: 1200px;\r\n  }\r\n</style>\n```"},"composition_injection":{"compatibility":"|  | Android | iOS | web |\n| :- | :- | :- | :- |\n| provide() | 4.0 | 4.11 | 4.0 |\n| inject() | 4.0 | 4.11 | 4.0 |\n| hasInjectionContext() | 4.0 | 4.11 | 4.11 |","example":""},"options_state":{"compatibility":"|  | Android | iOS | web |\n| :- | :- | :- | :- |\n| data | 3.9 | 4.11 | 4.0 |\n| props | 3.9 | 4.11 | 4.0 |\n| computed | 3.9 | 4.11 | 4.0 |\n| methods | 3.9 | 4.11 | 4.0 |\n| watch | 3.9 | 4.11 | 4.0 |\n| emits | 3.9 | 4.11 | 4.0 |\n| expose | x | x | 4.0 |","example":"#### 状态选项 示例 \n - [选项式 API 示例](https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/state)"},"options_rendering":{"compatibility":"|  | Android | iOS | web |\n| :- | :- | :- | :- |\n| template | - | - | - |\n| render | 3.9 | 4.11 | 4.0 |\n| compilerOptions | - | - | - |\n| slots | 3.9 | 4.11 | 4.0 |","example":"#### 渲染选项 示例 \n - [指令示例](https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/rendering)"},"options_lifecycle":{"compatibility":"|  | Android | iOS | web |\n| :- | :- | :- | :- |\n| beforeCreate | 3.9 | 4.11 | 4.0 |\n| created | 3.9 | 4.11 | 4.0 |\n| beforeMount | 3.9 | 4.11 | 4.0 |\n| mounted | 3.9 | 4.11 | 4.0 |\n| beforeUpdate | 3.9 | 4.11 | 4.0 |\n| updated | 3.9 | 4.11 | 4.0 |\n| beforeUnmount | 3.9 | 4.11 | 4.0 |\n| unmounted | 3.9 | 4.11 | 4.0 |\n| errorCaptured | x | x | 4.0 |\n| renderTracked | x | x | 4.0 |\n| renderTriggered | x | x | 4.0 |\n| activated | 4.0 | 4.11 | 4.0 |\n| deactivated | 4.0 | 4.11 | 4.0 |\n| serverPrefetch | - | - | - |","example":"#### 页面生命周期示例 \n> [hello uvue](https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/lifecycle/page/page.uvue) \n ```html\n<template>\n  <!-- #ifdef APP -->\n  <scroll-view style=\"flex: 1\" :bounces=\"false\">\n    <!-- #endif -->\n    <view class=\"page container\">\n      <text>page lifecycle</text>\n      <button class=\"uni-common-mt\" @click=\"scrollToBottom\">scrollToBottom</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'\n\nexport default {\n  data() {\n    return {\n      isScrolled: false,\n    }\n  },\n  onLoad(_ : OnLoadOptions) {\n    // 自动化测试\n    setLifeCycleNum(state.lifeCycleNum + 100)\n  },\n  onShow() {\n    // 自动化测试\n    setLifeCycleNum(state.lifeCycleNum + 10)\n  },\n  onReady() {\n    // 自动化测试\n    setLifeCycleNum(state.lifeCycleNum + 10)\n  },\n  onPullDownRefresh() {\n    // 自动化测试\n    setLifeCycleNum(state.lifeCycleNum + 10)\n  },\n  onPageScroll(_) {\n    // 自动化测试\n    this.isScrolled = true\n  },\n  onReachBottom() {\n    // 自动化测试\n    setLifeCycleNum(state.lifeCycleNum + 10)\n  },\n  onBackPress(_ : OnBackPressOptions) : boolean | null {\n    // 自动化测试\n    setLifeCycleNum(state.lifeCycleNum - 10)\n    return null\n  },\n  onHide() {\n    // 自动化测试\n    setLifeCycleNum(state.lifeCycleNum - 10)\n  },\n  onUnload() {\n    // 自动化测试\n    setLifeCycleNum(state.lifeCycleNum - 100)\n  },\n  onResize(_){\n    // 自动化测试\n    setLifeCycleNum(state.lifeCycleNum + 10)\n  },\n  methods: {\n    // 自动化测试\n    getLifeCycleNum() : number {\n      return state.lifeCycleNum\n    },\n    // 自动化测试\n    setLifeCycleNum(num : number) {\n      setLifeCycleNum(num)\n    },\n    // 自动化测试\n    pullDownRefresh() {\n      uni.startPullDownRefresh({\n        success() {\n          setTimeout(() => {\n            uni.stopPullDownRefresh()\n            // 一秒后立即停止下拉刷新不会触发 onPullDownRefresh，因为下拉动画时间大概需要1.1～1.2秒\n          }, 1500)\n        },\n      })\n    },\n    scrollToBottom() {\n      uni.pageScrollTo({\n        scrollTop: 2000,\n      })\n    },\n  },\n}\n</script>\n\n<style>\n.container {\n  height: 1200px;\n}\n</style>\n\n```\n#### 组件生命周期示例 \n> [hello uvue](https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/lifecycle/component/component.uvue) \n ```html\n<template>\n  <view class=\"page\">\n    <text class=\"uni-common-mb\">component lifecycle</text>\n    <component-lifecycle class=\"component-lifecycle\" />\n  </view>\n</template>\n\n<script>\nimport ComponentLifecycle from '@/components/OptionsAPILifecycle.uvue'\nimport { state } from '@/store/index.uts'\nexport default {\n  components: { ComponentLifecycle },\n  methods: {\n    // 自动化测试\n    getLifeCycleNum(): number {\n      return state.lifeCycleNum\n    },\n  },\n}\n</script>\n\n```"},"options_composition":{"compatibility":"|  | Android | iOS | web |\n| :- | :- | :- | :- |\n| provide | 3.99 | 4.11 | 4.0 |\n| inject | 3.99 | 4.11 | 4.0 |\n| mixins | 3.99 | 4.11 | 4.0 |\n| extends | - | - | - |","example":""},"options_misc":{"compatibility":"|  | Android | iOS | web |\n| :- | :- | :- | :- |\n| name | 3.9 | 4.11 | 4.0 |\n| inheritAttrs | 3.9 | 4.11 | 4.0 |\n| components | 3.9 | 4.11 | 4.0 |\n| directives | - | - | - |","example":""},"component_instance":{"compatibility":"|  | Android | iOS | web |\n| :- | :- | :- | :- |\n| $data | √ | 4.11 | 4.0 |\n| $props | √ | 4.11 | 4.0 |\n| $el | √ | 4.11 | 4.0 |\n| $options | √ | 4.11 | 4.0 |\n| $parent | √ | 4.11 | 4.0 |\n| $root | √ | 4.11 | 4.0 |\n| $slots | √ | 4.11 | 4.0 |\n| $refs | √ | 4.11 | 4.0 |\n| $attrs | √ | 4.11 | 4.0 |\n| $watch() | √ | 4.11 | 4.0 |\n| $emit | √ | 4.11 | 4.0 |\n| $forceUpdate | √ | 4.11 | 4.0 |\n| $nextTick | √ | 4.11 | 4.0 |\n| $callMethod | √ | 4.11 | 4.0 |","example":"#### 组件实例 示例 \n - [组件实例示例](https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance)"},"directives":{"compatibility":"|  | Android | iOS | web |\n| :- | :- | :- | :- |\n| v-text | x | x | 4.0 |\n| v-html | 3.99 | x | 4.0 |\n| v-show | 3.9 | 4.11 | 4.0 |\n| v-if | 3.9 | 4.11 | 4.0 |\n| v-else | 3.9 | 4.11 | 4.0 |\n| v-else-if | 3.9 | 4.11 | 4.0 |\n| v-for | 3.9 | 4.11 | 4.0 |\n| v-on | 3.9 | 4.11 | 4.0 |\n| v-bind | 3.9 | 4.11 | 4.0 |\n| v-model | 3.9 | 4.11 | 4.0 |\n| v-slot | 3.9 | 4.11 | 4.0 |\n| v-pre | 3.99 | 4.11 | 4.0 |\n| v-once | 3.99 | 4.11 | x |\n| v-memo | 3.99 | 4.11 | x |\n| v-cloak | x | x | 4.0 |","example":"#### 指令 示例 \n - [指令示例](https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive)"},"special_attributes":{"compatibility":"|  | Android | iOS | web |\n| :- | :- | :- | :- |\n| key | 3.9 | 4.11 | 4.0 |\n| ref | 3.9 | 4.11 | 4.0 |\n| is | 3.99 | 4.11 | 4.0 |","example":""},"render_function":{"compatibility":"|  | Android | iOS | web |\n| :- | :- | :- | :- |\n| h() | 3.99 | 4.11 | 4.0 |\n| mergeProps() | 4.0 | 4.11 | 4.0 |\n| cloneVNode() | 4.0 | 4.11 | 4.0 |\n| isVNode() | √ | 4.11 | 4.0 |\n| resolveComponent() | √ | 4.11 | 4.0 |\n| resolveDirective() | - | - | - |\n| withDirectives() | √ | 4.11 | 4.0 |\n| withModifiers() | √ | 4.11 | 4.0 |","example":""},"single_file_component_script":{"compatibility":"|  | Android | iOS | web |\n| :- | :- | :- | :- |\n| defineProps() | 4.0 | 4.11 | 4.0 |\n| defineEmits() | 4.0 | 4.11 | 4.0 |\n| defineModel() | 4.0 | 4.11 | 4.11 |\n| defineExpose() | 4.0 | 4.11 | 4.0 |\n| defineOptions() | 4.0 | 4.11 | 4.11 |\n| defineSlots() | 4.0 | 4.11 | 4.0 |\n| useSlots() | 4.0 | 4.11 | 4.0 |\n| useAttrs() | 4.0 | 4.11 | 4.0 |","example":"#### \\<script setup> 示例 \n> [hello uvue](https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/composition/setup/setup.uvue) \n ```html\n<template>\n  <!-- #ifdef APP -->\n  <scroll-view style=\"flex: 1\">\n  <!-- #endif -->\n    <view class=\"page\">\n      <text class='uni-common-mt' id=\"str\">str: {{ str }}</text>\n      <text class='uni-common-mt' id=\"num\">num: {{ num }}</text>\n      <text class='uni-common-mt' id=\"bool\">bool: {{ bool }}</text>\n      <text class='uni-common-mt' id=\"count\">count: {{count}}</text>\n      <button class='uni-common-mt' id=\"increment-btn\" @click=\"increment\">increment</button>\n      <text class='uni-common-mt' id=\"obj-str\">obj.str: {{ obj['str'] }}</text>\n      <text class='uni-common-mt' id=\"obj-num\">obj.num: {{ obj['num'] }}</text>\n      <text class='uni-common-mt' id=\"obj-bool\">obj.bool: {{ obj['bool'] }}</text>\n      <button class='uni-common-mt' id=\"update-obj-btn\" @click=\"updateObj\">update obj</button>\n      <!-- #ifdef APP -->\n      <RenderFunction :str='str' :count='count' :obj='obj' @compUpdateObj='compUpdateObj' :isShow='true' />\n      <!-- #endif -->\n      <Foo>\n        <text class=\"uni-common-mt\" id=\"default-slot-in-foo\">default slot in Foo</text>\n      </Foo>\n    </view>\n  <!-- #ifdef APP -->\n  </scroll-view>\n  <!-- #endif -->\n</template>\n\n<script>\n  // #ifdef APP\n  import RenderFunction from './RenderFunction.uvue'\n  // #endif\n  import Foo from './Foo.uvue'\n  export 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```"}}
\ No newline at end of file