{"template":{"name":"#### template","attrubute":"##### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| lang | Any | - | [lang](#template-lang-values) |\n\n##### lang @template-lang-values \n\n| 值名称 | 描述 |\n| :- | :- |\n| html | html |\n| pug | pug |\n\n","event":"","example":"","compatibility":"\n##### template 兼容性\n| Android | iOS | web |\n| :- | :- | :- |\n| √ | x | 4.0 |\n","children":"","reference":""},"slot":{"name":"#### slot","description":"> 组件类型：string \n\n \\<slot> 元素作为组件模板之中的内容分发插槽。\\<slot> 元素自身将被替换。","attrubute":"##### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| name | string | - | 用于命名插槽。 |","event":"","example":"","compatibility":"\n##### slot 兼容性\n| Android | iOS | web |\n| :- | :- | :- |\n| √ | x | 4.0 |\n","children":"","reference":"\n##### 参见\n- [Reference](https://v3.cn.vuejs.org/api/built-in-components.html#slot)\n"},"script":{"name":"#### script","attrubute":"##### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| setup | Any | - | - |\n| lang | Any | - | [lang](#script-lang-values) |\n\n##### lang @script-lang-values \n\n| 值名称 | 描述 |\n| :- | :- |\n| ts | typescript |\n| uts | uts |\n\n\n###### lang 兼容性\n| | Android | iOS | web |\n| :- | :- | :- | :- |\n| ts | x | x | x |\n| uts | 4.0 | x | 4.0 |\n","event":"","example":"","compatibility":"##### script 属性兼容性\n| | Android | iOS | web |\n| :- | :- | :- | :- |\n| setup | 4.0 | x | 4.0 |\n\n##### script 兼容性\n| Android | iOS | web |\n| :- | :- | :- |\n| √ | x | 4.0 |\n","children":"","reference":""},"style":{"name":"#### style","attrubute":"##### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| lang | Any | - | [lang](#style-lang-values) |\n| scoped | Any | - | - |\n| module | Any | - | - |\n\n##### lang @style-lang-values \n\n| 值名称 | 描述 |\n| :- | :- |\n| scss | - |\n| less | - |\n| stylus | - |\n\n","event":"","example":"","compatibility":"##### style 属性兼容性\n| | Android | iOS | web |\n| :- | :- | :- | :- |\n| lang | √ | x | 4.0 |\n| scoped | x | x | 4.0 |\n| module | x | x | 4.0 |\n\n##### style 兼容性\n| Android | iOS | web |\n| :- | :- | :- |\n| √ | x | 4.0 |\n","children":"","reference":""},"keep-alive":{"name":"#### keep-alive","description":"> 组件类型：string \n\n \\<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 \\<transition> 相似，\\<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。","attrubute":"##### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| include | string | - | 字符串或正则表达式。只有名称匹配的组件会被缓存。 |\n| exclude | string | - | 字符串或正则表达式。任何名称匹配的组件都不会被缓存。 |\n| max | string | - | 最多可以缓存多少组件实例。 |","event":"","example":"","compatibility":"\n##### keep-alive 兼容性\n| Android | iOS | web |\n| :- | :- | :- |\n| 4.0 | x | 4.0 |\n","children":"","reference":"\n##### 参见\n- [Reference](https://v3.cn.vuejs.org/api/built-in-components.html#keep-alive)\n"},"component":{"name":"#### component","description":"> 组件类型：string \n\n 渲染一个“元组件”为动态组件。依 is 的值，来决定哪个组件被渲染。","attrubute":"##### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| is | Any | - | - |\n| inline-template | Any | - | - |","event":"","example":"","compatibility":"\n##### component 兼容性\n| Android | iOS | web |\n| :- | :- | :- |\n| 3.99 | x | 4.0 |\n","children":"","reference":"\n##### 参见\n- [Reference](https://v3.cn.vuejs.org/api/built-in-components.html#component)\n"},"transition":{"name":"#### transition","description":"> 组件类型：string \n\n \\<transition> 元素作为单个元素/组件的过渡效果。\\<transition> 只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在检测过的组件层级中。","attrubute":"##### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| name | string | - | 用于自动生成 CSS 过渡类名。例如：name: 'fade' 将自动拓展为.fade-enter，.fade-enter-active等。默认类名为 \"v\" |\n| appear | string(b) | - | 是否在初始渲染时使用过渡。默认为 false。 |\n| css | string(b) | - | 是否使用 CSS 过渡类。默认为 true。如果设置为 false，将只通过组件事件触发注册的 JavaScript 钩子。 |\n| type | string | - | 指定过渡事件类型，侦听过渡何时结束。有效值为 \"transition\" 和 \"animation\"。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。 [type](#transition-type-values) |\n| mode | string | - | 控制离开/进入的过渡时间序列。有效的模式有 \"out-in\" 和 \"in-out\"；默认同时生效。 [mode](#transition-mode-values) |\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##### type @transition-type-values \n\n| 值名称 | 描述 |\n| :- | :- |\n| transition | - |\n| animation | - |\n\n\n\n##### mode @transition-mode-values \n\n| 值名称 | 描述 |\n| :- | :- |\n| out-in | - |\n| in-out | - |\n\n","event":"","example":"","compatibility":"\n##### transition 兼容性\n| Android | iOS | web |\n| :- | :- | :- |\n| x | x | 4.0 |\n","children":"","reference":"\n##### 参见\n- [Reference](https://v3.cn.vuejs.org/api/built-in-components.html#transition)\n"},"transition-group":{"name":"#### transition-group","description":"> 组件类型：string \n\n \\<transition-group> 元素作为多个元素/组件的过渡效果。\\<transition-group> 渲染一个真实的 DOM 元素。默认渲染 \\<span>，可以通过 tag 属性配置哪个元素应该被渲染。","attrubute":"##### 属性 \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(b) | - | 是否在初始渲染时使用过渡。默认为 false。 |\n| css | string(b) | - | 是否使用 CSS 过渡类。默认为 true。如果设置为 false，将只通过组件事件触发注册的 JavaScript 钩子。 |\n| type | string | - | 指定过渡事件类型，侦听过渡何时结束。有效值为 \"transition\" 和 \"animation\"。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。 [type](#transition-group-type-values) |\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\n##### type @transition-group-type-values \n\n| 值名称 | 描述 |\n| :- | :- |\n| transition | - |\n| animation | - |\n\n","event":"","example":"","compatibility":"\n##### transition-group 兼容性\n| Android | iOS | web |\n| :- | :- | :- |\n| x | x | 4.0 |\n","children":"","reference":"\n##### 参见\n- [Reference](https://v3.cn.vuejs.org/api/built-in-components.html#transition-group)\n"},"teleport":{"name":"#### teleport","description":"> 组件类型：string \n\n Teleport 提供了一种干净的方法，允许我们控制在 DOM 中哪个父节点下呈现 HTML，而不必求助于全局状态或将其拆分为两个组件。","attrubute":"##### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| to | string | - | 必须是有效的查询选择器或 HTMLElement (如果在浏览器环境中使用)。指定将在其中移动 \\<teleport> 内容的目标元素 |\n| disabled | boolean | - | 此可选属性可用于禁用 \\<teleport> 的功能，这意味着其插槽内容将不会移动到任何位置，而是在您在周围父组件中指定了 \\<teleport> 的位置渲染。 |","event":"","example":"","compatibility":"\n##### teleport 兼容性\n| Android | iOS | web |\n| :- | :- | :- |\n| 4.0 | x | 4.0 |\n","children":"","reference":"\n##### 参见\n- [Reference](https://v3.vuejs.org/api/built-in-components.html#teleport)\n"},"application":{"compatibility":"| | Android 系统版本 | Android | iOS | web |\n| :- | :- | :- | :- | :- |\n| createApp() | 5.0 | √ | x | 4.0 |\n| createSSRApp() | 5.0 | √ | x | 4.0 |\n| app.mount() | 5.0 | √ | x | 4.0 |\n| app.unmount() | 5.0 | √ | x | 4.0 |\n| app.component() | 5.0 | √ | x | 4.0 |\n| app.directive() | - | - | - | - |\n| app.use() | 5.0 | 3.99 | x | 4.0 |\n| app.mixin() | 5.0 | 3.99 | x | 4.0 |\n| app.provide() | 5.0 | 3.99 | x | 4.0 |\n| app.runWithContext() | - | - | - | - |\n| app.version | 5.0 | √ | x | 4.0 |\n| app.config | - | - | - | - |\n| app.config.errorHandler | 5.0 | x | x | 4.0 |\n| app.config.warnHandler | - | - | - | - |\n| app.config.performance | - | - | - | - |\n| app.config.compilerOptions | - | - | - | - |\n| app.config.globalProperties | 5.0 | 3.99 | x | 4.0 |\n| app.config.optionMergeStrategies | - | - | - | - |","example":""},"general":{"compatibility":"| | Android 系统版本 | Android | iOS | web |\n| :- | :- | :- | :- | :- |\n| version | 5.0 | √ | x | 4.0 |\n| nextTick() | 5.0 | √ | x | 4.0 |\n| defineComponent() | 5.0 | x | x | 4.0 |\n| defineAsyncComponent() | - | - | - | - |\n| defineCustomElement() | - | - | - | - |","example":""},"reactivity_core":{"compatibility":"| | Android | iOS | web |\n| :- | :- | :- | :- |\n| ref() | √ | x | 4.0 |\n| computed() | √ | x | 4.0 |\n| reactive() | √ | x | 4.0 |\n| readonly() | 4.0 | x | 4.0 |\n| watchEffect() | 4.0 | x | 4.0 |\n| watchPostEffect() | 4.0 | x | 4.0 |\n| watchSyncEffect() | 4.0 | x | 4.0 |\n| watch() | 4.0 | x | 4.0 |","example":""},"reactivity_utilities":{"compatibility":"| | Android | iOS | web |\n| :- | :- | :- | :- |\n| isRef() | 4.0 | x | 4.0 |\n| unref() | 4.0 | x | 4.0 |\n| isReactive() | 4.0 | x | 4.0 |\n| isReadonly() | 4.0 | x | 4.0 |\n| toRef() | 4.0 | x | 4.0 |\n| toValue() | 4.0 | x | x |\n| toRefs() | 4.0 | x | 4.0 |\n| isProxy() | 4.0 | x | 4.0 |","example":""},"reactivity_advanced":{"compatibility":"| | Android 系统版本 | Android | iOS | web |\n| :- | :- | :- | :- | :- |\n| shallowReactive() | 5.0 | 4.0 | x | 4.0 |\n| shallowRef() | 5.0 | 4.0 | x | 4.0 |\n| toRaw() | 5.0 | 4.0 | x | 4.0 |\n| triggerRef() | 5.0 | 4.0 | x | x |\n| customRef() | 5.0 | 4.0 | x | 4.0 |\n| shallowReadonly() | 5.0 | 4.0 | x | 4.0 |\n| markRaw() | - | - | - | - |\n| effectScope() | 5.0 | 4.0 | x | 4.0 |\n| getCurrentScope() | 5.0 | 4.0 | x | 4.0 |\n| onScopeDispose() | 5.0 | 4.0 | x | 4.0 |","example":""},"composition_lifecycle":{"compatibility":"| | Android 系统版本 | Android | iOS | web |\n| :- | :- | :- | :- | :- |\n| onMounted() | 5.0 | 4.0 | x | 4.0 |\n| onUpdated() | 5.0 | 4.0 | x | 4.0 |\n| onUnmounted() | 5.0 | 4.0 | x | 4.0 |\n| onBeforeMount() | 5.0 | 4.0 | x | 4.0 |\n| onBeforeUpdate() | 5.0 | 4.0 | x | 4.0 |\n| onBeforeUnmount() | 5.0 | 4.0 | x | 4.0 |\n| onErrorCaptured() | - | - | - | - |\n| onRenderTracked() | - | - | - | - |\n| onRenderTriggered() | - | - | - | - |\n| onActivated() | 5.0 | x | x | 4.0 |\n| onDeactivated() | 5.0 | 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\">\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>\n import { state, setLifeCycleNum } from '@/store/index.uts'\n \n const isScrolled = ref(false)\n \r\n onLoad((_: OnLoadOptions) => {\r\n // 自动化测试\n setLifeCycleNum(state.lifeCycleNum + 100)\r\n })\r\n onPageShow(() => {\r\n // 自动化测试\n setLifeCycleNum(state.lifeCycleNum + 10)\r\n })\r\n onReady(() => {\n // 自动化测试\n setLifeCycleNum(state.lifeCycleNum + 10)\r\n })\r\n onPullDownRefresh(() => {\r\n // 自动化测试\n setLifeCycleNum(state.lifeCycleNum + 10)\r\n })\r\n onPageScroll((_) => {\n // 自动化测试\r\n isScrolled.value = true\r\n })\r\n onReachBottom(() => {\n // 自动化测试\r\n setLifeCycleNum(state.lifeCycleNum + 10)\r\n })\r\n onBackPress((_: OnBackPressOptions): boolean | null => {\n // 自动化测试\n setLifeCycleNum(state.lifeCycleNum - 10)\n return null\r\n })\r\n onPageHide(() => {\n // 自动化测试\r\n setLifeCycleNum(state.lifeCycleNum - 10)\r\n })\r\n onUnload(() => {\n // 自动化测试\r\n setLifeCycleNum(state.lifeCycleNum - 100)\r\n })\r\n onResize((_) => {\r\n // 自动化测试\n setLifeCycleNum(state.lifeCycleNum + 10)\r\n })\n \n // 自动化测试\n const getLifeCycleNum = () : number => {\n return state.lifeCycleNum\n }\n // 自动化测试\n const pageSetLifeCycleNum = (num: number) => {\n setLifeCycleNum(num)\n }\n \n // 自动化测试\n const pullDownRefresh = () => {\n uni.startPullDownRefresh({\n success() {\n setTimeout(() => {\n uni.stopPullDownRefresh()\n }, 1000)\n },\n })\n }\n \r\n const scrollToBottom = () => {\r\n uni.pageScrollTo({\r\n scrollTop: 2000,\r\n })\r\n }\n \n // 自动化测试\n const getIsScrolled = (): boolean => {\n return isScrolled.value\n }\n \n defineExpose({\n getLifeCycleNum,\n pageSetLifeCycleNum,\n pullDownRefresh,\n scrollToBottom,\n getIsScrolled\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 }, 1000)\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 | x | 4.0 |\n| inject() | 4.0 | x | 4.0 |\n| hasInjectionContext() | 4.0 | x | x |","example":""},"options_state":{"compatibility":"| | Android | iOS | web |\n| :- | :- | :- | :- |\n| data | √ | x | 4.0 |\n| props | √ | x | 4.0 |\n| computed | √ | x | 4.0 |\n| methods | √ | x | 4.0 |\n| watch | √ | x | 4.0 |\n| emits | √ | x | 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 | x | x | x |\n| render | √ | x | 4.0 |\n| compilerOptions | x | x | x |\n| slots | √ | x | 4.0 |","example":"#### 渲染选项 示例\n- [指令示例](https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/rendering)"},"options_lifecycle":{"compatibility":"| | Android 系统版本 | Android | iOS | web |\n| :- | :- | :- | :- | :- |\n| beforeCreate | 5.0 | √ | x | 4.0 |\n| created | 5.0 | √ | x | 4.0 |\n| beforeMount | 5.0 | √ | x | 4.0 |\n| mounted | 5.0 | √ | x | 4.0 |\n| beforeUpdate | 5.0 | √ | x | 4.0 |\n| updated | 5.0 | √ | x | 4.0 |\n| beforeUnmount | 5.0 | √ | x | 4.0 |\n| unmounted | 5.0 | √ | x | 4.0 |\n| errorCaptured | 5.0 | x | x | 4.0 |\n| renderTracked | 5.0 | x | x | 4.0 |\n| renderTriggered | 5.0 | x | x | 4.0 |\n| activated | 5.0 | 4.0 | x | 4.0 |\n| deactivated | 5.0 | 4.0 | x | 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\">\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 }, 1000)\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 系统版本 | Android | iOS | web |\n| :- | :- | :- | :- | :- |\n| provide | 5.0 | 3.99 | x | 4.0 |\n| inject | 5.0 | 3.99 | x | 4.0 |\n| mixins | 5.0 | 3.99 | x | 4.0 |\n| extends | - | - | - | - |","example":""},"options_misc":{"compatibility":"| | Android 系统版本 | Android | iOS | web |\n| :- | :- | :- | :- | :- |\n| name | 5.0 | √ | x | 4.0 |\n| inheritAttrs | 5.0 | √ | x | 4.0 |\n| components | 5.0 | √ | x | 4.0 |\n| directives | - | - | - | - |","example":""},"component_instance":{"compatibility":"| | Android | iOS | web |\n| :- | :- | :- | :- |\n| $data | √ | x | 4.0 |\n| $props | √ | x | 4.0 |\n| $el | √ | x | 4.0 |\n| $options | √ | x | 4.0 |\n| $parent | √ | x | 4.0 |\n| $root | √ | x | 4.0 |\n| $slots | √ | x | 4.0 |\n| $refs | √ | x | 4.0 |\n| $attrs | √ | x | 4.0 |\n| $watch() | √ | x | 4.0 |\n| $emit | √ | x | 4.0 |\n| $forceUpdate | √ | x | 4.0 |\n| $nextTick | √ | x | 4.0 |\n| $callMethod | √ | x | 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 | 4.0 |\n| v-html | 3.99 | x | 4.0 |\n| v-show | √ | x | 4.0 |\n| v-if | √ | x | 4.0 |\n| v-else | √ | x | 4.0 |\n| v-else-if | √ | x | 4.0 |\n| v-for | √ | x | 4.0 |\n| v-on | √ | x | 4.0 |\n| v-bind | √ | x | 4.0 |\n| v-model | √ | x | 4.0 |\n| v-slot | √ | x | 4.0 |\n| v-pre | 3.99 | x | 4.0 |\n| v-once | 3.99 | x | 4.0 |\n| v-memo | 3.99 | x | 4.0 |\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 | √ | x | 4.0 |\n| ref | √ | x | 4.0 |\n| is | 3.99 | x | 4.0 |","example":""},"render_function":{"compatibility":"| | Android 系统版本 | Android | iOS | web |\n| :- | :- | :- | :- | :- |\n| h() | 5.0 | 3.99 | x | 4.0 |\n| mergeProps() | 5.0 | 4.0 | x | 4.0 |\n| cloneVNode() | 5.0 | 4.0 | x | 4.0 |\n| isVNode() | 5.0 | √ | x | 4.0 |\n| resolveComponent() | 5.0 | √ | x | 4.0 |\n| resolveDirective() | - | - | - | - |\n| withDirectives() | 5.0 | √ | x | 4.0 |\n| withModifiers() | 5.0 | √ | x | 4.0 |","example":""},"single_file_component_script":{"compatibility":"| | Android | iOS | web |\n| :- | :- | :- | :- |\n| defineProps() | 4.0 | x | 4.0 |\n| defineEmits() | 4.0 | x | 4.0 |\n| defineModel() | 4.0 | x | x |\n| defineExpose() | 4.0 | x | 4.0 |\n| defineOptions() | 4.0 | x | x |\n| defineSlots() | 4.0 | x | 4.0 |\n| useSlots() | 4.0 | x | 4.0 |\n| useAttrs() | 4.0 | x | 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```"}}
