{"template":{"name":"#### template","description":"\n\n##### template 兼容性\n| Android | iOS | web |\n| :- | :- | :- |\n| √ | 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 | √ | 4.11 | 4.0 |\n","children":"","reference":""},"slot":{"name":"#### slot","description":"> 组件类型：string \n\n \\<slot> 元素作为组件模板之中的内容分发插槽。\\<slot> 元素自身将被替换。\n\n##### slot 兼容性\n| Android | iOS | web |\n| :- | :- | :- |\n| √ | 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| √ | 4.11 | 4.0 |\n","attribute":"##### 属性 \n| 名称 | 类型 | 默认值 | 描述 |\n| :- | :- | :- | :- |\n| setup | Any | - | - |\n| lang | Any | - | |\n@| 值名称 | 描述 |\n@| :- | :- |\n@| ts | typescript |\n@| uts | uts |\n\n##### lang 兼容性\n| | Android | iOS | web |\n| :- | :- | :- | :- |\n| ts | x | x | x |\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","children":"","reference":""},"style":{"name":"#### style","description":"\n\n##### style 兼容性\n| Android | iOS | web |\n| :- | :- | :- |\n| √ | 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 | √ | 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| isReactive() | 4.0 | 4.11 | 4.0 |\n| isReadonly() | 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 |","example":""},"reactivity_advanced":{"compatibility":"| | Android | iOS | web |\n| :- | :- | :- | :- |\n| shallowReactive() | 4.0 | 4.11 | 4.0 |\n| shallowRef() | 4.0 | 4.11 | 4.0 |\n| toRaw() | 4.0 | 4.11 | 4.0 |\n| triggerRef() | 4.0 | 4.11 | x |\n| customRef() | 4.0 | 4.11 | 4.0 |\n| shallowReadonly() | 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>\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 | 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 | √ | 4.11 | 4.0 |\n| props | √ | 4.11 | 4.0 |\n| computed | √ | 4.11 | 4.0 |\n| methods | √ | 4.11 | 4.0 |\n| watch | √ | 4.11 | 4.0 |\n| emits | √ | 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 | x | x | x |\n| render | √ | 4.11 | 4.0 |\n| compilerOptions | x | x | x |\n| slots | √ | 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 | √ | 4.11 | 4.0 |\n| created | √ | 4.11 | 4.0 |\n| beforeMount | √ | 4.11 | 4.0 |\n| mounted | √ | 4.11 | 4.0 |\n| beforeUpdate | √ | 4.11 | 4.0 |\n| updated | √ | 4.11 | 4.0 |\n| beforeUnmount | √ | 4.11 | 4.0 |\n| unmounted | √ | 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 }, 1000)\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 | √ | 4.11 | 4.0 |\n| inheritAttrs | √ | 4.11 | 4.0 |\n| components | √ | 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 | √ | 4.11 | 4.0 |\n| v-html | 3.99 | 4.11 | 4.0 |\n| v-show | √ | 4.11 | 4.0 |\n| v-if | √ | 4.11 | 4.0 |\n| v-else | √ | 4.11 | 4.0 |\n| v-else-if | √ | 4.11 | 4.0 |\n| v-for | √ | 4.11 | 4.0 |\n| v-on | √ | 4.11 | 4.0 |\n| v-bind | √ | 4.11 | 4.0 |\n| v-model | √ | 4.11 | 4.0 |\n| v-slot | √ | 4.11 | 4.0 |\n| v-pre | 3.99 | 4.11 | 4.0 |\n| v-once | 3.99 | 4.11 | 4.11 |\n| v-memo | 3.99 | 4.11 | 4.11 |\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 | √ | 4.11 | 4.0 |\n| ref | √ | 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```"}}
