tmui-cli 2.0.3 → 2.0.4

package/data/uniappx/vue/composition-api.md

@@ -0,0 +1,2169 @@
+# 组合式 API
+
+> `App.uvue` 从HBuilderX 5.0+起支持组合式 API。
+
+::: warning Android注意
+- 暂不支持 `
+```
+
+- 使用 `<template ref>`
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/refs/refs-composition.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/component-instance/refs/refs-composition
+
+```vue
+<template>
+  <view class="page">
+    <view class="row">
+      <text>NodeRef: </text>
+      <text ref="nodeRef">{{ dataInfo.existRef }}</text>
+    </view>
+    <view class="row">
+      <text>childRef:</text>
+      <text>{{ dataInfo.existChildRef }}</text>
+    </view>
+    <view class="row">
+      <text>existTextItems:</text>
+      <text>{{ dataInfo.existTextItems }}</text>
+    </view>
+    <view>
+      <text v-for="item in dataInfo.textItemsExpectNum" ref="textItems" :key="item">{{
+        item
+      }}</text>
+    </view>
+    <child class="mt-10" ref="childRef">ComponentRef</child>
+    <view class="mt-10">
+      <text class="section-title">getCurrentInstance() + $refs</text>
+    </view>
+    <view class="row">
+      <text>$refs 获取 nodeRef:</text>
+      <text>{{ dataInfo.existRefByRefs }}</text>
+    </view>
+    <view class="row">
+      <text>$refs 获取 childRef:</text>
+      <text>{{ dataInfo.existChildRefByRefs }}</text>
+    </view>
+  </view>
+</template>
+
+<style>
+.row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+.section-title {
+  margin-bottom: 10px;
+}
+</style>
+```
+
+#### watch
+
+侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数。
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/reactivity/core/watch/watch-composition.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/reactivity/core/watch/watch-composition
+
+```vue
+<template>
+  
+  <scroll-view style="flex: 1; padding-bottom: 20px">
+    
+    <view class="page">
+      <view class="flex justify-between flex-row mb-10">
+        <text>count:</text>
+        <text id="count" ref="countRef">{{ count }}</text>
+      </view>
+      <view class="flex justify-between mb-10">
+        <text>watch count result:</text>
+        <text id="watch-count-res">{{ watchCountRes }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text>watch count track number:</text>
+        <text id="watch-count-track-num">{{ watchCountTrackNum }}</text>
+      </view>
+      <view class="flex justify-between mb-10">
+        <text>watch count cleanup number:</text>
+        <text id="watch-count-cleanup-res">{{ watchCountCleanupRes }}</text>
+      </view>
+
+      <button class="increment-btn mb-10" @click="increment">increment</button>
+      <button class="stop-watch-count-btn mb-10" @click="triggerStopWatchCount">
+        stop watch count
+      </button>
+
+      <view class="flex justify-between flex-row mb-10">
+        <text>obj.str:</text>
+        <text id="obj-str" ref="objStrRef">{{ obj.str }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text>watch obj.str trigger number:</text>
+        <text id="watch-obj-str-trigger-num">{{ watchObjStrTriggerNum }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text>obj.num:</text>
+        <text id="obj-num">{{ obj.num }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text>obj.bool:</text>
+        <text id="obj-bool" ref="objBoolRef">{{ obj.bool }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text>obj.arr:</text>
+        <text id="obj-arr" ref="objArrRef">{{ JSON.stringify(obj.arr) }}</text>
+      </view>
+      <view class="flex justify-between mb-10">
+        <text>watch obj result:</text>
+        <text id="watch-obj-res">{{ watchObjRes }}</text>
+      </view>
+      <view class="flex justify-between mb-10">
+        <text>watch obj.str result:</text>
+        <text id="watch-obj-str-res">{{ watchObjStrRes }}</text>
+      </view>
+      <view class="flex justify-between mb-10">
+        <text>watch obj.bool result:</text>
+        <text id="watch-obj-bool-res">{{ watchObjBoolRes }}</text>
+      </view>
+      <view class="flex justify-between mb-10">
+        <text>watch obj.arr result:</text>
+        <text id="watch-obj-arr-res">{{ watchObjArrRes }}</text>
+      </view>
+
+      <button class="update-obj-btn mb-10" @click="updateObj">
+        update obj
+      </button>
+
+      <view class="flex justify-between mb-10">
+        <text>watch count and obj.num result:</text>
+        <text id="watch-count-obj-num-res">{{ watchCountAndObjNumRes }}</text>
+      </view>
+    </view>
+    
+  </scroll-view>
+  
+</template>
+
+
+
+```
+
+##### 即时回调的侦听器​
+`watch` 默认是懒执行的：仅当数据源变化时，才会执行回调。但在某些场景中，我们希望在创建侦听器时，立即执行一遍回调。举例来说，我们想请求一些初始数据，然后在相关状态更改时重新请求数据。
+
+我们可以通过传入 `immediate: true` 选项来强制侦听器的回调立即执行：
+
+```js
+watch(
+  source,
+  (newValue, oldValue) => {
+    // 立即执行，且当 `source` 改变时再次执行
+  },
+  { immediate: true }
+)
+```
+
+#### computed
+
+接受一个 getter 函数，返回一个只读的响应式 [ref](#ref) 对象。该 ref 通过 `.value` 暴露 getter 函数的返回值。它也可以接受一个带有 `get` 和 `set` 函数的对象来创建一个可写的 ref 对象。
+
+::: warning 注意
+- `computed()` 需通过泛型指定返回值类型。
+  ```ts
+  const count = ref(0)
+  const doubleCount = computed<number>(() : number => {
+    return count.value * 2
+  })
+  ```
+- 目前需要可传参的计算属性时，需要手动指定返回值类型
+  ```ts
+  const stateText = computed(() : (state : number) => string => {
+    return (state : number) : string => {
+      const stateArr = ['未审核', '审核中', '审核通过']
+      return stateArr[state]
+    }
+  })
+  stateText.value(1)
+  ```
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/reactivity/core/computed/computed-composition.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/reactivity/core/computed/computed-composition
+
+```vue
+<template>
+  <view class="page">
+    <view class="flex justify-between flex-row mb-10">
+      <text>count:</text>
+      <text id="count">{{ count }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>computed double count:</text>
+      <text id="double-count">{{ doubleCount }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>computed triple count:</text>
+      <text id="triple-count">{{ tripleCount }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>obj.arr:</text>
+      <text id="obj-arr">{{ JSON.stringify(obj.arr) }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>computed obj.arr.length:</text>
+      <text id="obj-arr-len">{{ objArrLen }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+        <text>computed stateText(1):</text>
+        <text id="computed-with-argument">{{ stateText(1) }}</text>
+    </view>
+    <button id="update-btn" @click="update">update</button>
+  </view>
+</template>
+
+
+
+```
+
+#### reactive
+
+返回一个对象的响应式代理。
+
+- 详细信息
+
+  响应式转换是“深层”的：它会影响到所有嵌套的属性。一个响应式对象也将深层地解包任何 [ref](#ref) 属性，同时保持响应性。
+
+  若要避免深层响应式转换，只想保留对这个对象顶层次访问的响应性，请使用 [shallowReactive()](#shallowreactive) 作替代。
+
+::: warning 注意
+- `reactive` 在 app-android 平台目前不支持对 class 做响应式，推荐使用 type 定义存储数据的对象类型。
+
+- 示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/reactivity/core/reactive/reactive.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/reactivity/core/reactive/reactive
+
+```vue
+<template>
+  
+  <scroll-view style="flex: 1;">
+    
+		<view class="page">
+      <view class="flex justify-between flex-row mb-10">
+        <text>count:</text>
+        <text id="count">{{ count }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text>obj.str:</text>
+        <text id="obj-str">{{ obj['str'] }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text>obj.num:</text>
+        <text id="obj-num">{{ obj['num'] }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text>obj.arr:</text>
+        <text id="obj-arr">{{ JSON.stringify(obj['arr']) }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text>count1:</text>
+        <text id="count1">{{ count1 }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text>obj1.a.b.c:</text>
+        <text id="obj1-a-b-c">{{ obj1.getString('a.b.c') }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text>arr1(spread):</text>
+        <text id="arr1">{{ JSON.stringify(arr1) }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text>arr2ForEachEffectCount:</text>
+        <text id="arr2">{{ arr2ForEachEffectCount }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text>arr3(reverse):</text>
+        <text id="arr3">{{ JSON.stringify(arr3) }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text>arr4(sort):</text>
+        <text id="arr4">{{ JSON.stringify(computedArr4) }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text>arr5:</text>
+        <text id="arr5">{{ JSON.stringify(arr5Result) }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text>map2ForEachEffectCount:</text>
+        <text id="map2">{{ map2ForEachEffectCount }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text>map3ForOfEffectCount:</text>
+        <text id="map3">{{ map3ForOfEffectCount }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text>set2ForEachEffectCount:</text>
+        <text id="set2">{{ set2ForEachEffectCount }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text>set3ForOfEffectCount:</text>
+        <text id="set3">{{ set3ForOfEffectCount }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text>response.data.success:</text>
+        <text id="generic">{{ response.data.success }}</text>
+      </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>reactive-str-id:</text>
+      <text id="reactive-str-id">{{ r1.getString(('id')) }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>reactive-str-boolean :</text>
+      <text id="reactive-str-boolean">{{ r1.getBoolean(('bl')) }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>reactive-str-number :</text>
+      <text id="reactive-str-number">{{ r1.getNumber(('n')) }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>reactive-str-any :</text>
+      <text id="reactive-str-any">{{ r1.getAny(('id')) }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>reactive-str-arr :</text>
+      <text id="reactive-str-arr">{{ r1.getArray(('arr'))![0] }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>reactive-str-json :</text>
+      <text id="reactive-str-json">{{ r1.getJSON(('cars[0]'))!['name'] }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>reactive-str:</text>
+      <text id="reactive-str">{{ r2.getString("msg") }}</text>
+    </view>
+      <button class='mb-10' id="update-count-btn" @click="updateCount">update count</button>
+      <button class='mb-10' id="update-obj-str-btn" @click="updateObjStr">update obj.str</button>
+      <button class='mb-10' id="update-obj-num-btn" @click="updateObjNum">update obj.num</button>
+      <button class='mb-10' id="update-obj-arr-btn" @click="updateObjArr">update obj.arr</button>
+      <button class='mb-10' id="update-obj1-a-b-c-btn" @click="updateObj1_A_B_C">update obj1.a.b.c</button>
+      <button class='mb-10' id="update-arr1-btn" @click="updateArr1(false)">update arr1 without reactive</button>
+      <button class='mb-10' id="update-arr1-reactive-btn" @click="updateArr1(true)">update arr1 with reactive</button>
+      <button class='mb-10' id="update-arr2-forEach-effect-btn" @click="updateArr2()">update arr2</button>
+      <button class='mb-10' id="update-arr4-btn" @click="updateArr4()">update arr4</button>
+      <button class='mb-10' id="update-map2-forEach-effect-btn" @click="updateMap2()">update map2 for each</button>
+      <button class='mb-10' id="update-map3-forOf-effect-btn" @click="updateMap3()">update map3 for of</button>
+      <button class='mb-10' id="update-set2-forEach-effect-btn" @click="updateSet2()">update set2 for each</button>
+      <button class='mb-10' id="update-set3-forOf-effect-btn" @click="updateSet3()">update set3 for of</button>
+      <button class='mb-10' id="update-generic" @click="updateResponse()">response.data.success</button>
+      
+      
+      <view class="flex justify-between flex-row mb-10 mt-20">
+        <text class="section-title">复杂场景</text>
+      </view>
+      
+      
+      <view class="mb-10">
+        <text>arrWithObj[0].name:</text>
+        <text id="arr-with-obj-name">{{ arrWithObj[0].name }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text>arrWithObj[0].count:</text>
+        <text id="arr-with-obj-count">{{ arrWithObj[0].count }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text>arrWithObj length:</text>
+        <text id="arr-with-obj-length">{{ arrWithObj.length }}</text>
+      </view>
+      <button class='mb-10' id="update-arr-with-obj-name-btn" @click="updateArrWithObjName()">update arrWithObj[0].name</button>
+      <button class='mb-10' id="update-arr-with-obj-count-btn" @click="updateArrWithObjCount()">update arrWithObj[0].count</button>
+      <button class='mb-10' id="push-arr-with-obj-btn" @click="pushArrWithObj()">push new obj to arrWithObj</button>
+      
+      
+      <view class="mb-10">
+        <text>objWithArr.items:</text>
+        <text id="obj-with-arr-items">{{ JSON.stringify(objWithArr.items) }}</text>
+      </view>
+      <view class="mb-10">
+        <text>objWithArr.items[0]:</text>
+        <text id="obj-with-arr-items-0">{{ (objWithArr['items'] as string[])[0] }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text>objWithArr.items.length:</text>
+        <text id="obj-with-arr-items-length">{{ (objWithArr['items'] as string[]).length }}</text>
+      </view>
+      <button class='mb-10' id="update-obj-with-arr-items-0-btn" @click="updateObjWithArrItems0()">update objWithArr.items[0]</button>
+      <button class='mb-10' id="push-obj-with-arr-items-btn" @click="pushObjWithArrItems()">push to objWithArr.items</button>
+      
+      
+      <view class="flex justify-between flex-row mb-10">
+        <text>jsonParsedData.user.name:</text>
+        <text id="json-parsed-user-name">{{ jsonParsedData.getString('user.name') }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text>jsonParsedData.user.age:</text>
+        <text id="json-parsed-user-age">{{ jsonParsedData.getNumber('user.age') }}</text>
+      </view>
+      <view class="mb-10">
+        <text>jsonParsedData.tags:</text>
+        <text id="json-parsed-tags">{{ JSON.stringify(jsonParsedData.tags) }}</text>
+      </view>
+      <view class="mb-10">
+        <text>jsonParsedData.items[0].title:</text>
+        <text id="json-parsed-items-0-title">{{ jsonParsedData.getJSON('items[0]')!.title }}</text>
+      </view>
+      <button class='mb-10' id="update-json-parsed-user-name-btn" @click="updateJsonParsedUserName()">update jsonParsedData.user.name</button>
+      <button class='mb-10' id="update-json-parsed-user-age-btn" @click="updateJsonParsedUserAge()">update jsonParsedData.user.age</button>
+      <button class='mb-10' id="push-json-parsed-tags-btn" @click="pushJsonParsedTags()">push to jsonParsedData.tags</button>
+      <button class='mb-10' id="update-json-parsed-items-0-title-btn" @click="updateJsonParsedItems0Title()">update jsonParsedData.items[0].title</button>
+      
+      
+      <view class="mb-10">
+        <text>complexData.users[0].profile.name:</text>
+        <text id="complex-users-0-profile-name">{{ ((complexData['users'] as UTSJSONObject[])[0] as UTSJSONObject).getString('profile.name') }}</text>
+      </view>
+      <view class="mb-10">
+        <text>complexData.users[0].hobbies[0]:</text>
+        <text id="complex-users-0-hobbies-0">{{ (((complexData['users'] as UTSJSONObject[])[0] as UTSJSONObject)['hobbies'] as string[])[0] }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text>complexData.users[0].hobbies.length:</text>
+        <text id="complex-users-0-hobbies-length">{{ (((complexData['users'] as UTSJSONObject[])[0] as UTSJSONObject)['hobbies'] as string[]).length }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text>complexData.meta.count:</text>
+        <text id="complex-meta-count">{{ (complexData['meta'] as UTSJSONObject)['count'] }}</text>
+      </view>
+      <button class='mb-10' id="update-complex-users-0-profile-name-btn" @click="updateComplexUsers0ProfileName()">update complexData.users[0].profile.name</button>
+      <button class='mb-10' id="update-complex-users-0-hobbies-0-btn" @click="updateComplexUsers0Hobbies0()">update complexData.users[0].hobbies[0]</button>
+      <button class='mb-10' id="push-complex-users-0-hobbies-btn" @click="pushComplexUsers0Hobbies()">push to complexData.users[0].hobbies</button>
+      <button class='mb-10' id="update-complex-meta-count-btn" @click="updateComplexMetaCount()">update complexData.meta.count</button>
+      
+      
+      <view class="flex justify-between flex-row mb-10">
+        <text>complexEffectCount:</text>
+        <text id="complex-effect-count">{{ complexEffectCount }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text>jsonParsedEffectCount:</text>
+        <text id="json-parsed-effect-count">{{ jsonParsedEffectCount }}</text>
+      </view>
+      <button class='mb-10' id="trigger-complex-effect-btn" @click="triggerComplexEffect()">trigger complex effect</button>
+      <button class='mb-10' id="trigger-json-parsed-effect-btn" @click="triggerJsonParsedEffect()">trigger jsonParsed effect</button>
+      
+      
+      <view class="flex justify-between flex-row mb-10">
+        <text>arrWithObjForEachCount:</text>
+        <text id="arr-with-obj-forEach-count">{{ arrWithObjForEachCount }}</text>
+      </view>
+      <button class='mb-10' id="update-arr-with-obj-forEach-btn" @click="updateArrWithObjForEach()">update arrWithObj (forEach effect)</button>
+      
+      
+      <view class="mb-10">
+        <text>jsonObjWithArr.data.list:</text>
+        <text id="json-obj-with-arr-list">{{ JSON.stringify((jsonObjWithArr['data'] as UTSJSONObject)['list']) }}</text>
+      </view>
+      <view class="mb-10">
+        <text>jsonObjWithArr.data.list[0].value:</text>
+        <text id="json-obj-with-arr-list-0-value">{{ (((jsonObjWithArr['data'] as UTSJSONObject)['list'] as UTSJSONObject[])[0] as UTSJSONObject)['value'] }}</text>
+      </view>
+      <button class='mb-10' id="update-json-obj-with-arr-list-0-value-btn" @click="updateJsonObjWithArrList0Value()">update jsonObjWithArr.data.list[0].value</button>
+      <button class='mb-10' id="push-json-obj-with-arr-list-btn" @click="pushJsonObjWithArrList()">push to jsonObjWithArr.data.list</button>
+    </view>
+  
+	</scroll-view>
+  
+</template>
+
+
+<style>
+    .section-title {
+      font-size: 16px;
+      font-weight: bold;
+      margin-bottom: 10px;
+    }
+</style>
+```
+
+#### readonly
+
+接受一个对象 (不论是响应式还是普通的) 或是一个 [ref](#ref)，返回一个原值的只读代理。
+
+- 详细信息
+
+  只读代理是深层的：对任何嵌套属性的访问都将是只读的。它的 [ref](#ref) 解包行为与 `reactive()` 相同，但解包得到的值是只读的。
+
+  要避免深层级的转换行为，请使用 [shallowReadonly()](#shallowreadonly) 作替代。
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/reactivity/core/readonly/readonly.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/reactivity/core/readonly/readonly
+
+```vue
+<template>
+  <view class="page">
+    <view class="flex justify-between flex-row mb-10">
+      <text>data.str:</text>
+      <text id="data-str">{{ data.str }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>data.num:</text>
+      <text id="data-num">{{ data.num }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>data.arr:</text>
+      <text id="data-arr">{{ JSON.stringify(data.arr) }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>readonly data.str:</text>
+      <text id="readonly-data-str">{{ readonlyData.str }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>readonly data.num:</text>
+      <text id="readonly-data-num">{{ readonlyData.num }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>readonly data.arr:</text>
+      <text id="readonly-data-arr">{{ JSON.stringify(readonlyData.arr) }}</text>
+    </view>
+
+    <button id="update-data-btn" class="mb-10" @click="updateData">
+      update data
+    </button>
+    <button id="update-readonly-data-btn" @click="updateReadonlyData">
+      update readonly data
+    </button>
+  </view>
+</template>
+
+
+
+```
+
+#### watchEffect
+
+立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。
+
+- 详细信息
+
+  第一个参数就是要运行的副作用函数。这个副作用函数的参数也是一个函数，用来注册清理回调。清理回调会在该副作用下一次执行前被调用，可以用来清理无效的副作用，例如等待中的异步请求 (参见下面的示例)。
+
+  第二个参数是一个可选的选项，可以用来调整副作用的刷新时机或调试副作用的依赖。
+
+  默认情况下，侦听器将在组件渲染之前执行。设置 `flush: 'post'` 将会使侦听器延迟到组件渲染之后再执行。在某些特殊情况下 (例如要使缓存失效)，可能有必要在响应式依赖发生改变时立即触发侦听器。这可以通过设置 `flush: 'sync'` 来实现。然而，该设置应谨慎使用，因为如果有多个属性同时更新，这将导致一些性能和数据一致性的问题。
+
+  返回值是一个用来停止该副作用的函数。
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/reactivity/core/watch-effect/watch-effect.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/reactivity/core/watch-effect/watch-effect
+
+```vue
+<template>
+  
+  <scroll-view style="flex: 1; padding-bottom: 20px">
+    
+    <view class="page">
+      <view class="flex justify-between flex-row mb-10">
+        <text>count:</text>
+        <text id="count" ref="countRef">{{ count }}</text>
+      </view>
+      <view class="flex justify-between mb-10">
+        <text>watch count result:</text>
+        <text id="watch-count-res">{{ watchCountRes }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text>watch count track number:</text>
+        <text id="watch-count-track-num">{{ watchCountTrackNum }}</text>
+      </view>
+      <view class="flex justify-between mb-10">
+        <text>watch count cleanup number:</text>
+        <text id="watch-count-cleanup-res">{{ watchCountCleanupRes }}</text>
+      </view>
+
+      <button class="increment-btn mb-10" @click="increment">increment</button>
+      <button class="stop-watch-count-btn mb-10" @click="triggerStopWatchCount">
+        stop watch count
+      </button>
+
+      <view class="flex justify-between flex-row mb-10">
+        <text>obj.str:</text>
+        <text id="obj-str" ref="objStrRef">{{ obj.str }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text>watch obj.str trigger number:</text>
+        <text id="watch-obj-str-trigger-num">{{ watchObjStrTriggerNum }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text>obj.num:</text>
+        <text id="obj-num">{{ obj.num }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text>obj.bool:</text>
+        <text id="obj-bool" ref="objBoolRef">{{ obj.bool }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text>obj.arr:</text>
+        <text id="obj-arr" ref="objArrRef">{{ JSON.stringify(obj.arr) }}</text>
+      </view>
+      <view class="flex justify-between mb-10">
+        <text>watch obj result:</text>
+        <text id="watch-obj-res">{{ watchObjRes }}</text>
+      </view>
+      <view class="flex justify-between mb-10">
+        <text>watch obj.str result:</text>
+        <text id="watch-obj-str-res">{{ watchObjStrRes }}</text>
+      </view>
+      <view class="flex justify-between mb-10">
+        <text>watch obj.bool result:</text>
+        <text id="watch-obj-bool-res">{{ watchObjBoolRes }}</text>
+      </view>
+      <view class="flex justify-between mb-10">
+        <text>watch obj.arr result:</text>
+        <text id="watch-obj-arr-res">{{ watchObjArrRes }}</text>
+      </view>
+
+      <button class="update-obj-btn mb-10" @click="updateObj">
+        update obj
+      </button>
+
+      <view class="flex justify-between mb-10">
+        <text>watch count and obj.num result:</text>
+        <text id="watch-count-obj-num-res">{{ watchCountAndObjNumRes }}</text>
+      </view>
+    </view>
+    
+  </scroll-view>
+  
+</template>
+
+
+```
+
+#### watchPostEffect
+
+[watchEffect()](#watcheffect) 使用 `flush: 'post'` 选项时的别名。
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/reactivity/core/watch-post-effect/watch-post-effect.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/reactivity/core/watch-post-effect/watch-post-effect
+
+```vue
+<template>
+  
+  <scroll-view style="flex: 1; padding-bottom: 20px">
+    
+    <view class="page">
+      <view class="flex justify-between flex-row mb-10">
+        <text>count:</text>
+        <text id="count" ref="countRef">{{ count }}</text>
+      </view>
+      <view class="flex justify-between mb-10">
+        <text>watch count result:</text>
+        <text id="watch-count-res">{{ watchCountRes }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text>watch count track number:</text>
+        <text id="watch-count-track-num">{{ watchCountTrackNum }}</text>
+      </view>
+      <view class="flex justify-between mb-10">
+        <text>watch count cleanup number:</text>
+        <text id="watch-count-cleanup-res">{{ watchCountCleanupRes }}</text>
+      </view>
+
+      <button class="increment-btn mb-10" @click="increment">increment</button>
+      <button class="stop-watch-count-btn mb-10" @click="triggerStopWatchCount">
+        stop watch count
+      </button>
+
+      <view class="flex justify-between flex-row mb-10">
+        <text>obj.str:</text>
+        <text id="obj-str" ref="objStrRef">{{ obj.str }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text>watch obj.str trigger number:</text>
+        <text id="watch-obj-str-trigger-num">{{ watchObjStrTriggerNum }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text>obj.num:</text>
+        <text id="obj-num">{{ obj.num }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text>obj.bool:</text>
+        <text id="obj-bool" ref="objBoolRef">{{ obj.bool }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text>obj.arr:</text>
+        <text id="obj-arr" ref="objArrRef">{{ JSON.stringify(obj.arr) }}</text>
+      </view>
+      <view class="flex justify-between mb-10">
+        <text>watch obj result:</text>
+        <text id="watch-obj-res">{{ watchObjRes }}</text>
+      </view>
+      <view class="flex justify-between mb-10">
+        <text>watch obj.str result:</text>
+        <text id="watch-obj-str-res">{{ watchObjStrRes }}</text>
+      </view>
+      <view class="flex justify-between mb-10">
+        <text>watch obj.arr result:</text>
+        <text id="watch-obj-arr-res">{{ watchObjArrRes }}</text>
+      </view>
+
+      <button class="update-obj-btn mb-10" @click="updateObj">
+        update obj
+      </button>
+
+      <view class="flex justify-between mb-10">
+        <text>watch count and obj.num result:</text>
+        <text id="watch-count-obj-num-res">{{ watchCountAndObjNumRes }}</text>
+      </view>
+    </view>
+    
+  </scroll-view>
+  
+</template>
+
+
+```
+
+#### watchSyncEffect
+
+[watchEffect()](#watcheffect) 使用 `flush: 'sync'` 选项时的别名。
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/reactivity/core/watch-sync-effect/watch-sync-effect.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/reactivity/core/watch-sync-effect/watch-sync-effect
+
+```vue
+<template>
+  
+  <scroll-view style="flex: 1; padding-bottom: 20px">
+    
+    <view class="page">
+      <view class="flex justify-between flex-row mb-10">
+        <text>count:</text>
+        <text id="count" ref="countRef">{{ count }}</text>
+      </view>
+      <view class="flex justify-between mb-10">
+        <text>watch count result:</text>
+        <text id="watch-count-res">{{ watchCountRes }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text>watch count track number:</text>
+        <text id="watch-count-track-num">{{ watchCountTrackNum }}</text>
+      </view>
+      <view class="flex justify-between mb-10">
+        <text>watch count cleanup number:</text>
+        <text id="watch-count-cleanup-res">{{ watchCountCleanupRes }}</text>
+      </view>
+
+      <button class="increment-btn mb-10" @click="increment">increment</button>
+      <button class="stop-watch-count-btn mb-10" @click="triggerStopWatchCount">
+        stop watch count
+      </button>
+
+      <view class="flex justify-between flex-row mb-10">
+        <text>obj.str:</text>
+        <text id="obj-str" ref="objStrRef">{{ obj.str }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text>watch obj.str trigger number:</text>
+        <text id="watch-obj-str-trigger-num">{{ watchObjStrTriggerNum }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text>obj.num:</text>
+        <text id="obj-num">{{ obj.num }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text>obj.bool:</text>
+        <text id="obj-bool" ref="objBoolRef">{{ obj.bool }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text>obj.arr:</text>
+        <text id="obj-arr" ref="objArrRef">{{ JSON.stringify(obj.arr) }}</text>
+      </view>
+      <view class="flex justify-between mb-10">
+        <text>watch obj result:</text>
+        <text id="watch-obj-res">{{ watchObjRes }}</text>
+      </view>
+      <view class="flex justify-between mb-10">
+        <text>watch obj.str result:</text>
+        <text id="watch-obj-str-res">{{ watchObjStrRes }}</text>
+      </view>
+      <view class="flex justify-between mb-10">
+        <text>watch obj.arr result:</text>
+        <text id="watch-obj-arr-res">{{ watchObjArrRes }}</text>
+      </view>
+
+      <button class="update-obj-btn mb-10" @click="updateObj">
+        update obj
+      </button>
+
+      <view class="flex justify-between mb-10">
+        <text>watch count and obj.num result:</text>
+        <text id="watch-count-obj-num-res">{{ watchCountAndObjNumRes }}</text>
+      </view>
+    </view>
+    
+  </scroll-view>
+  
+</template>
+
+
+```
+
+## 响应式: 工具
+
+|  | Web | 微信小程序 | Android | iOS | HarmonyOS |
+| :- | :- | :- | :- | :- | :- |
+| isRef() | 4.0 | 4.41 | 4.0 | 4.11 | 4.61 |
+| unref() | 4.0 | 4.41 | 4.0 | 4.11 | 4.61 |
+| toRef() | 4.11 | 4.41 | 4.0 | 4.11 | 4.61 |
+| toValue() | 4.11 | 4.41 | 4.0 | 4.11 | 4.61 |
+| toRefs() | 4.11 | 4.41 | 4.0 | 4.11 | 4.61 |
+| isProxy() | 4.0 | 4.41 | 4.0 | 4.11 | 4.61 |
+| isReactive() | 4.0 | 4.41 | 4.0 | 4.11 | 4.61 |
+| isReadonly() | 4.0 | 4.41 | 4.0 | 4.11 | 4.61 |
+
+::: warning 注意
+- `toRefs()` 仅支持 `Array` 和 `UTSJSONObject`, 不支持自定义类型。
+
+### 示例代码 @example
+
+#### isRef
+
+检查某个值是否为 ref。
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/reactivity/utilities/is-ref/is-ref.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/reactivity/utilities/is-ref/is-ref
+
+```vue
+<template>
+  <view class="page">
+    <view class="flex justify-between flex-row mb-10">
+      <text>ref count:</text>
+      <text id="ref-count">{{ refCount }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>isRef ref count:</text>
+      <text id="is-ref-ref-count">{{ isRefRefCount }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>count:</text>
+      <text id="count">{{ count }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>isRef count:</text>
+      <text id="is-ref-count">{{ isRefCount }}</text>
+    </view>
+  </view>
+</template>
+
+
+
+```
+
+#### unref
+
+如果参数是 ref，则返回内部值，否则返回参数本身。这是 `val = isRef(val) ? val.value : val` 计算的一个语法糖。
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/reactivity/utilities/un-ref/un-ref.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/reactivity/utilities/un-ref/un-ref
+
+```vue
+<template>
+  <view class="page">
+    <view class="flex justify-between flex-row mb-10">
+      <text>ref count:</text>
+      <text id="ref-count">{{ refCount }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>ref count type:</text>
+      <text id="ref-count-type">{{ refCountType }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>count:</text>
+      <text id="count">{{ count }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>count type:</text>
+      <text id="count-type">{{ countType }}</text>
+    </view>
+  </view>
+</template>
+
+
+
+```
+
+#### toRef
+
+可以将值、refs 或 getters 规范化为 refs。
+
+也可以基于响应式对象上的一个属性，创建一个对应的 ref。这样创建的 ref 与其源属性保持同步：改变源属性的值将更新 ref 的值，反之亦然。
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/reactivity/utilities/to-ref/to-ref.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/reactivity/utilities/to-ref/to-ref
+
+```vue
+<template>
+  <view class="page">
+    <view class="flex justify-between flex-row mb-10">
+      <text>count:</text>
+      <text id="count">{{ count }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>isRef count:</text>
+      <text id="is-ref-count">{{ isRefCount }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>ref count:</text>
+      <text id="ref-count">{{ refCount }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>isRef ref count:</text>
+      <text id="is-ref-ref-count">{{ isRefRefCount }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>obj.num:</text>
+      <text id="obj-num">{{ obj.num }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>toRef(obj, "num"):</text>
+      <text id="to-ref-obj-num">{{ objNum }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>toRef(() => obj.num):</text>
+      <text id="to-ref-fn-obj-num">{{ readonlyObjNum }}</text>
+    </view>
+
+    <button class="mt-10" id="increment-btn" @click="increment">
+      increment obj.num
+    </button>
+  </view>
+</template>
+
+
+
+```
+
+#### toValue
+
+将值、refs 或 getters 规范化为值。这与 [unref()](#unref) 类似，不同的是此函数也会规范化 getter 函数。如果参数是一个 getter，它将会被调用并且返回它的返回值。
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/reactivity/utilities/to-value/to-value.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/reactivity/utilities/to-value/to-value
+
+```vue
+<template>
+  <view class="page">
+    <view class="flex justify-between flex-row mb-10">
+      <text>ref count:</text>
+      <text id="ref-count">{{ refCount }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>isRef ref count:</text>
+      <text id="is-ref-ref-count">{{ isRefRefCount }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>count:</text>
+      <text id="count">{{ count }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>isRef count:</text>
+      <text id="is-ref-count">{{ isRefCount }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>obj.num:</text>
+      <text id="obj-num">{{ obj.num }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>toValue(() => obj.num):</text>
+      <text id="to-value-obj-num">{{ toValueObjNum }}</text>
+    </view>
+    <button class="mt-10" id="increment-btn" @click="increment">
+      increment obj.num
+    </button>
+  </view>
+</template>
+
+
+
+```
+
+#### toRefs
+
+将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的 ref。每个单独的 ref 都是使用 [toRef()](#toref) 创建的。
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/reactivity/utilities/to-refs/to-refs.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/reactivity/utilities/to-refs/to-refs
+
+```vue
+<template>
+  <view class="page">
+    <view class="flex justify-between flex-row mb-10">
+      <text>state.num:</text>
+      <text id="state-num">{{ state['num'] }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>state.str:</text>
+      <text id="state-str">{{ state['str'] }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>stateAsRefs.num:</text>
+      <text id="state-as-refs-num">{{ (stateAsRefs['num'] as Ref<number>).value }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>stateAsRefs.str:</text>
+      <text id="state-as-refs-str">{{ (stateAsRefs['str'] as Ref<string>).value }}</text>
+    </view>
+    <button class="mt-10" id="update-state-btn" @click="updateState">update state</button>
+  </view>
+</template>
+
+
+```
+
+#### isProxy
+
+检查一个对象是否是由 [reactive()](#reactive)、[readonly()](#readonly)、[shallowReactive()](#shallowreactive) 或 [shallowReadonly()](#shallowreadonly) 创建的代理。
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/reactivity/utilities/is-proxy/is-proxy.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/reactivity/utilities/is-proxy/is-proxy
+
+```vue
+<template>
+  <view class="page">
+    <view class="flex justify-between flex-row mb-10">
+      <text>isProxy(count):</text>
+      <text id="is-proxy-count">{{ isProxyCount }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>isProxy(refCount):</text>
+      <text id="is-proxy-ref-count">{{ isProxyRefCount }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>isProxy(reactiveCount):</text>
+      <text id="is-proxy-reactive-count">{{ isProxyReactiveCount }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>isProxy(readonlyCount):</text>
+      <text id="is-proxy-readonly-count">{{ isProxyReadonlyCount }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>isProxy(shallowReactiveCount):</text>
+      <text id="is-proxy-shallow-reactive-count">{{
+        isProxyShallowReactiveCount
+      }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>isProxy(shallowReadonlyCount):</text>
+      <text id="is-proxy-shallow-readonly-count">{{
+        isProxyShallowReadonlyCount
+      }}</text>
+    </view>
+  </view>
+</template>
+
+
+
+```
+
+#### isReactive
+
+检查一个对象是否是由 [reactive()](#reactive) 或 [shallowReactive()](#shallowreactive) 创建的代理。
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/reactivity/utilities/is-reactive/is-reactive.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/reactivity/utilities/is-reactive/is-reactive
+
+```vue
+<template>
+  <view class="page">
+    <view class="flex justify-between flex-row mb-10">
+      <text>isReactive(count):</text>
+      <text id="is-reactive-count">{{ isReactiveCount }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>isReactive(count):</text>
+      <text id="is-reactive-count">{{ isReactiveCount }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>isReactive(refCount):</text>
+      <text id="is-reactive-ref-count">{{ isReactiveRefCount }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>isReactive(reactiveCount):</text>
+      <text id="is-reactive-reactive-count">{{ isReactiveReactiveCount }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>isReactive(readonlyCount):</text>
+      <text id="is-reactive-readonly-count">{{ isReactiveReadonlyCount }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>isReactive(shallowReactiveCount):</text>
+      <text id="is-reactive-shallow-reactive-count">{{
+        isReactiveShallowReactiveCount
+      }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>isReactive(shallowReadonlyCount):</text>
+      <text id="is-reactive-shallow-readonly-count">{{
+        isReactiveShallowReadonlyCount
+      }}</text>
+    </view>
+  </view>
+</template>
+
+
+
+```
+
+#### isReadonly
+
+检查传入的值是否为只读对象。只读对象的属性可以更改，但他们不能通过传入的对象直接赋值。
+
+通过 [readonly()](#readonly) 和 [shallowReadonly()](#shallowreadonly) 创建的代理都是只读的，因为他们是没有 set 函数的 [computed()](#computed) ref。
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/reactivity/utilities/is-readonly/is-readonly.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/reactivity/utilities/is-readonly/is-readonly
+
+```vue
+<template>
+  <view class="page">
+    <view class="flex justify-between flex-row mb-10">
+      <text>isReadonly(count):</text>
+      <text id="is-readonly-count">{{ isReadonlyCount }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>isReadonly(refCount):</text>
+      <text id="is-readonly-ref-count">{{ isReadonlyRefCount }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>isReadonly(reactiveCount):</text>
+      <text id="is-readonly-reactive-count">{{ isReadonlyReactiveCount }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>isReadonly(readonlyCount):</text>
+      <text id="is-readonly-readonly-count">{{ isReadonlyReadonlyCount }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>isReadonly(shallowReactiveCount):</text>
+      <text id="is-readonly-shallow-reactive-count">{{
+        isReadonlyShallowReactiveCount
+      }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>isReadonly(shallowReadonlyCount):</text>
+      <text id="is-readonly-shallow-readonly-count">{{
+        isReadonlyShallowReadonlyCount
+      }}</text>
+    </view>
+  </view>
+</template>
+
+
+```
+
+## 响应式: 进阶
+
+|  | 兼容性 |
+| :- | :- |
+| shallowRef() | Web 4.0 / 微信小程序 4.41 / Android 4.0 / iOS 4.11 / HarmonyOS 4.61 |
+| triggerRef() | Web 4.0 / 微信小程序 4.41 / Android 4.0 / iOS 4.11 / HarmonyOS 4.61 |
+| customRef() | Web 4.0 / 微信小程序 4.41 / Android 4.0 / iOS 4.11 / HarmonyOS 4.61 |
+| shallowReactive() | Web 4.0 / 微信小程序 4.41 / Android 4.0 / iOS 4.11 / HarmonyOS 4.61 |
+| shallowReadonly() | Web 4.0 / 微信小程序 4.41 / Android 4.0 / iOS 4.11 / HarmonyOS 4.61 |
+| toRaw() | Web 4.0 / 微信小程序 4.41 / Android 4.0 / iOS 4.11 / HarmonyOS 4.61 |
+| markRaw() |   |
+| effectScope() | Web 4.0 / 微信小程序 4.41 / Android 4.0 / iOS 4.11 / HarmonyOS 4.61 |
+| getCurrentScope() | Web 4.0 / 微信小程序 4.41 / Android 4.0 / iOS 4.11 / HarmonyOS 4.61 |
+| onScopeDispose() | Web 4.0 / 微信小程序 4.41 / Android 4.0 / iOS 4.11 / HarmonyOS 4.61 |
+
+### 示例代码 @example
+
+#### customRef
+
+创建一个自定义的 ref，显式声明对其依赖追踪和更新触发的控制方式。
+
+- 详细信息
+
+  `customRef()` 预期接收一个工厂函数作为参数，这个工厂函数接受 `track` 和 `trigger` 两个函数作为参数，并返回一个带有 get 和 set 方法的对象。
+
+  一般来说，`track()` 应该在 `get()` 方法中调用，而 `trigger()` 应该在 `set()` 中调用。然而事实上，你对何时调用、是否应该调用他们有完全的控制权。
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/reactivity/advanced/custom-ref/custom-ref.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/reactivity/advanced/custom-ref/custom-ref
+
+```vue
+<template>
+  <view class="page">
+    <view class="flex justify-between flex-row mb-10">
+      <text>state.count:</text>
+      <text id="state-count">{{ state['count'] }}</text>
+    </view>
+    <button class="mb-10 increment-btn" @click="increment">
+      increment state.count
+    </button>
+    <button class="mb-10 trigger-ref-btn" @click="triggerRefState">
+      triggerRef state
+    </button>
+  </view>
+</template>
+
+
+
+```
+
+#### effectScope
+
+创建一个 effect 作用域，可以捕获其中所创建的响应式副作用 (即计算属性和侦听器)，这样捕获到的副作用可以一起处理。对于该 API 的使用细节
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/reactivity/advanced/effect-scope/effect-scope.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/reactivity/advanced/effect-scope/effect-scope
+
+```vue
+<template>
+  <view class="page">
+    <view class="flex justify-between flex-row mb-10">
+      <text>counter:</text>
+      <text id="counter">{{ counter }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>watch counter result:</text>
+      <text id="watch-counter-res">{{ watchCounterRes }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>watchEffect counter result:</text>
+      <text id="watch-effect-counter-res">{{ watchEffectCounterRes }}</text>
+    </view>
+    <button
+      id="increment-counter-btn"
+      class="mt-10"
+      @click="
+        () => {
+          counter++;
+        }
+      ">
+      increment counter
+    </button>
+    <button id="stop-effect-scope-btn" class="mt-10" @click="stopEffectScope">
+      stop effect scope
+    </button>
+  </view>
+</template>
+
+
+
+```
+
+#### getCurrentScope
+
+如果有的话，返回当前活跃的 effect 作用域。
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/reactivity/advanced/get-current-scope/get-current-scope.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/reactivity/advanced/get-current-scope/get-current-scope
+
+```vue
+<template>
+  <view class="page">
+    <view class="flex justify-between flex-row mb-10">
+      <text>hasCurrentScope:</text>
+      <text id="has-current-scope">{{ hasCurrentScope }}</text>
+    </view>
+    <button id="create-scope-btn" class="mt-10" @click="createScope">
+      create scope
+    </button>
+  </view>
+</template>
+
+```
+
+#### onScopeDispose
+
+在当前活跃的 effect 作用域上注册一个处理回调函数。当相关的 effect 作用域停止时会调用这个回调函数。
+
+这个方法可以作为可复用的组合式函数中 `onUnmounted` 的替代品，它并不与组件耦合，因为每一个 Vue 组件的 `setup()` 函数也是在一个 effect 作用域中调用的。
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/reactivity/advanced/on-scope-dispose/on-scope-dispose.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/reactivity/advanced/on-scope-dispose/on-scope-dispose
+
+```vue
+<template>
+  <view class="page">
+    <view class="flex justify-between flex-row mb-10">
+      <text>hasCurrentScope:</text>
+      <text id="has-current-scope">{{ hasCurrentScope }}</text>
+    </view>
+    <button id="create-scope-btn" class="mt-10" @click="createScope">
+      create scope
+    </button>
+    <button id="stop-scope-btn" class="mt-10" @click="stopScope">
+      stop scope
+    </button>
+  </view>
+</template>
+
+
+
+```
+
+#### shallowReactive
+
+[reactive()](#reactive) 的浅层作用形式。
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/reactivity/advanced/shallow-reactive/shallow-reactive.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/reactivity/advanced/shallow-reactive/shallow-reactive
+
+```vue
+<template>
+  <view class="page">
+    <view class="flex justify-between flex-row mb-10">
+      <text>state.count:</text>
+      <text id="state-count">{{ state.count }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>state.nested.count:</text>
+      <text id="state-nested-count">{{ state.nested.count }}</text>
+    </view>
+    <button
+      id="increment-state-count-btn"
+      class="mb-10"
+      @click="incrementStateCount">
+      increment state.count
+    </button>
+    <button
+      id="increment-state-nested-count-btn"
+      @click="incrementStateNestedCount">
+      increment state.nested.count
+    </button>
+  </view>
+</template>
+
+
+
+```
+
+#### shallowReadonly
+
+[readonly()](#readonly) 的浅层作用形式
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/reactivity/advanced/shallow-readonly/shallow-readonly.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/reactivity/advanced/shallow-readonly/shallow-readonly
+
+```vue
+<template>
+  <view :key="pageKey" class="page">
+    <view class="flex justify-between flex-row mb-10">
+      <text>state.count:</text>
+      <text id="state-count">{{ state.count }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>state.nested.count:</text>
+      <text id="state-nested-count">{{ state.nested.count }}</text>
+    </view>
+    <button
+      id="increment-state-count-btn"
+      class="mb-10"
+      @click="incrementStateCount">
+      increment state.count
+    </button>
+    <button
+      id="increment-state-nested-count-btn"
+      class="mb-10"
+      @click="incrementStateNestedCount">
+      increment state.nested.count
+    </button>
+    
+    <button id="update-page-render-btn" @click="updatePageRender">
+      update page render
+    </button>
+    
+  </view>
+</template>
+
+
+
+```
+
+#### shallowRef
+
+[ref()](#ref) 的浅层作用形式。
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/reactivity/advanced/shallow-ref/shallow-ref.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/reactivity/advanced/shallow-ref/shallow-ref
+
+```vue
+<template>
+  <view class="page">
+    <view class="flex justify-between flex-row mb-10">
+      <text>state.count:</text>
+      <text id="state-count">{{ state.count }}</text>
+    </view>
+    <button
+      id="increment-state-count-btn"
+      class="mb-10"
+      @click="incrementStateCount">
+      increment state.count
+    </button>
+    <button id="update-state-btn" @click="updateState">update state</button>
+  </view>
+</template>
+
+
+
+```
+
+#### toRaw
+
+根据一个 Vue 创建的代理返回其原始对象。
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/reactivity/advanced/to-raw/to-raw.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/reactivity/advanced/to-raw/to-raw
+
+```vue
+<template>
+  <view class="page">
+    <view class="flex justify-between flex-row mb-10">
+      <text>check toRaw ref:</text>
+      <text id="check-to-raw-ref">{{ checkToRawRef }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>check toRaw reactive:</text>
+      <text id="check-to-raw-reactive">{{ checkToRawReactive }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>check toRaw readonly:</text>
+      <text id="check-to-raw-readonly">{{ checkToRawReadonly }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>check toRaw shallowReactive:</text>
+      <text id="check-to-raw-shallow-reactive">{{
+        checkToRawShallowReactive
+      }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>check toRaw shallowReadonly:</text>
+      <text id="check-to-raw-shallow-readonly">{{
+        checkToRawShallowReadonly
+      }}</text>
+    </view>
+  </view>
+</template>
+
+
+
+```
+
+#### triggerRef
+
+强制触发依赖于一个[浅层 ref](#shallowref) 的副作用，这通常在对浅引用的内部值进行深度变更后使用。
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/reactivity/advanced/trigger-ref/trigger-ref.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/reactivity/advanced/trigger-ref/trigger-ref
+
+```vue
+<template>
+  <view class="page">
+    <view class="flex justify-between flex-row mb-10">
+      <text>state.count:</text>
+      <text id="state-count">{{ state.count }}</text>
+    </view>
+    <button
+      id="increment-state-count-btn"
+      class="mb-10"
+      @click="incrementStateCount">
+      increment state.count
+    </button>
+    <button id="trigger-ref-state-btn" @click="triggerRefState">
+      trigger state
+    </button>
+  </view>
+</template>
+
+
+
+```
+
+## 组合选项 @options-composition
+
+|  | Web | 微信小程序 | Android(VDOM) | Android(Vapor) | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) |
+| :- | :- | :- | :- | :- | :- | :- | :- | :- |
+| provide | 4.0 | 4.41 | 3.99 | 5.21 | 4.11 | 5.11 | 4.61 | 5.0 |
+| inject | 4.0 | 4.41 | 3.99 | 5.21 | 4.11 | 5.11 | 4.61 | 5.0 |
+| mixins | 4.0 | 4.41 | 3.99 | x | 4.11 | x | 4.61 | x |
+
+### inject
+
+当使用 `inject` 声明从上层提供方注入的属性时，支持两种写法：字符串数组和对象。推荐使用对象写法，因为当使用数组方法时，类型会被推导为 `any | null` 类型。\
+使用对象写法时，额外增加 `type` 属性用于标记类型。如果注入的属性类型不是基础数据类型，需要通过 `PropType` 来标记类型：
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/inject/inject-composition.uvue)
+
+::: preview
+
+```vue
+<template>
+  <view>
+    <text>inject page</text>
+    <text class="mt-10 msg">msg: {{msg}}</text>
+    <text class="mt-10 num">num: {{num}}</text>
+    <text class="mt-10 obj">obj: {{JSON.stringify(obj)}}</text>
+    <text class="mt-10 arr">arr: {{JSON.stringify(arr)}}</text>
+    <text class="mt-10 arr-0">arr[0]: {{ arr[0]}}</text>
+    <text class="mt-10 fn">fn: {{fnRes}}</text>
+    <text class="mt-10 fn">notFoundWithWarning: {{notFoundWithWarning}}</text>
+    <text class="mt-10 fn">notFoundWithDefaultValue: {{notFoundWithDefaultValue}}</text>
+    <text class="mt-10 has-injection-context">hasInjectionContext:
+      {{checkHasInjectionContextRes}}</text>
+    <button class="mt-10 check-has-injection-context-btn" @click="checkHasInjectionContext">check
+      hasInjectionContext</button>
+  </view>
+</template>
+
+
+```
+
+## 通用
+
+### getCurrentInstance
+
+访问内部组件实例。
+
+::: warning 注意
+- `getCurrentInstance` 只能在 setup 或生命周期钩子中调用。
+- 在 `app` 端 `proxy` 属性可能为空，需使用 `!` 非空断言操作符。
+
+```uts
+
+```
+
+## 生命周期钩子 @lifecycle-composition
+
+> [页面及组件生命周期流程图](../page.md#lifecycleflow)
+
+### 页面生命周期 @page-lifecycle-composition
+
+#### 兼容性 @page-lifecycle-compatibility
+
+[页面生命周期](../page.md#lifecycle)
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/lifecycle/page/page-composition.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/lifecycle/page/page-composition
+
+```vue
+<template>
+  
+  <scroll-view style="flex: 1" :bounces="false">
+    
+    <view class="page container">
+      <text>page lifecycle 组合式 API</text>
+      <view class="flex flex-row justify-between mt-10">
+        <text>onLoad 触发：</text>
+        <text>{{ isOnloadTriggered }}</text>
+      </view>
+      <view class="flex flex-row justify-between mt-10">
+        <text>onPageShow 触发：</text>
+        <text>{{ isOnPageShowTriggered }}</text>
+      </view>
+      <view class="flex flex-row justify-between mt-10">
+        <text>onReady 触发：</text>
+        <text>{{ isOnReadyTriggered }}</text>
+      </view>
+      <view class="flex flex-row justify-between mt-10">
+        <text>onPullDownRefresh 触发：</text>
+        <text>{{ isOnPullDownRefreshTriggered }}</text>
+      </view>
+      <view class="flex flex-row justify-between mt-10">
+        <text>onPageScroll 触发：</text>
+        <text>{{ isOnPageScrollTriggered }}</text>
+      </view>
+      <view class="flex flex-row justify-between mt-10">
+        <text>onReachBottom 触发：</text>
+        <text>{{ isOnReachBottomTriggered }}</text>
+      </view>
+      <view class="flex flex-row justify-between mt-10">
+        <text>onBackPress 触发：</text>
+        <text>{{ isOnBackPressTriggered }}</text>
+      </view>
+      <view class="flex flex-row justify-between mt-10">
+        <text>onPageHide 触发：</text>
+        <text>{{ isOnPageHideTriggered }}</text>
+      </view>
+      <view class="flex flex-row justify-between mt-10">
+        <text>onResize 触发：</text>
+        <text>{{ isOnResizeTriggered }}</text>
+      </view>
+      <view class="mt-10">
+        <MonitorAppLifecycleComposition class="monitor-app-lifecycle" />
+      </view>
+      <view class="mt-10">
+        <MonitorPageLifecycleComposition />
+      </view>
+      <button class="mt-10" @click="scrollToBottom">scrollToBottom</button>
+      <button class="mt-10" @click="pullDownRefresh">
+        trigger pullDownRefresh
+      </button>
+      
+      <button class="mt-10" @click="openLifecycleDialogPage">
+        openDialogPage
+      </button>
+      <button class="mt-10" @click="closeLifecycleDialogPage">
+        closeDialogPage
+      </button>
+      
+      <button class="mt-10" @click="goOnBackPress">
+        跳转 onBackPress 示例
+      </button>
+    </view>
+    
+  </scroll-view>
+  
+</template>
+
+
+
+<style>
+.container {
+  height: 2200px;
+}
+</style>
+
+```
+
+### 组件生命周期 @page-component-composition
+
+#### 兼容性 @component-lifecycle-compatibility
+
+|  | 兼容性 | 描述 |
+| :- | :- | :- |
+| onMounted() | Web 4.0 / 微信小程序 4.41 / Android 4.0 / iOS 4.11 / HarmonyOS 4.61 | el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。<br/>如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。 |
+| onUpdated() | Web 4.0 / 微信小程序 4.41 / Android 4.0 / iOS 4.11 / HarmonyOS 4.61 | 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。 |
+| onUnmounted() | Web 4.0 / 微信小程序 4.41 / Android 4.0 / iOS 4.11 / HarmonyOS 4.61 | 在一个组件实例被卸载之后调用。 |
+| onBeforeMount() | Web 4.0 / 微信小程序 4.41 / Android 4.0 / iOS 4.11 / HarmonyOS 4.61 | 在挂载开始之前被调用：相关的 render 函数首次被调用。 |
+| onBeforeUpdate() | Web 4.0 / 微信小程序 4.41 / Android 4.0 / iOS 4.11 / HarmonyOS 4.61 | 数据更新时调用，发生在虚拟 DOM 打补丁之前。<br/>这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。 |
+| onBeforeUnmount() | Web 4.0 / 微信小程序 4.41 / Android 4.0 / iOS 4.11 / HarmonyOS 4.61 | 在一个组件实例被卸载之前调用。 |
+| onErrorCaptured() | Web x / 微信小程序 x / Android x / iOS x / HarmonyOS x（部分支持，见上） | 注册一个钩子，在捕获了后代组件传递的错误时调用。 |
+| onRenderTracked() | Web x / 微信小程序 - / Android x / iOS x / HarmonyOS x（部分支持，见上） | 注册一个调试钩子，当组件渲染过程中追踪到响应式依赖时调用。 |
+| onRenderTriggered() | Web x / 微信小程序 x / Android x / iOS x / HarmonyOS x（部分支持，见上） | 注册一个调试钩子，当响应式依赖的变更触发了组件渲染时调用。 |
+| onActivated() | Web 4.0 / 微信小程序 x / Android x / iOS x / HarmonyOS x（部分支持，见上） | keep-alive 组件激活时调用。 |
+| onDeactivated() | Web 4.0 / 微信小程序 x / Android x / iOS x / HarmonyOS x（部分支持，见上） | keep-alive 组件停用时调用。 |
+| onServerPrefetch() | Web x / 微信小程序 x / Android x / iOS x / HarmonyOS x（部分支持，见上） | 注册一个异步函数，在组件实例在服务器上被渲染之前调用。<br/>如果这个钩子返回了一个 Promise，服务端渲染会在渲染该组件前等待该 Promise 完成。<br/>这个钩子仅会在服务端渲染中执行，可以用于执行一些仅存在于服务端的数据抓取过程。 |
+| onRecycle() | Web x / 微信小程序 x / Android(VDOM) x / Android(Vapor) 5.21 / iOS(VDOM) x / iOS(Vapor) 5.11 / HarmonyOS(VDOM) x / HarmonyOS(Vapor) 5.0（部分支持，见上） | 组件回收时的生命周期钩子 |
+| onReuse() | Web x / 微信小程序 x / Android(VDOM) x / Android(Vapor) 5.21 / iOS(VDOM) x / iOS(Vapor) 5.11 / HarmonyOS(VDOM) x / HarmonyOS(Vapor) 5.0（部分支持，见上） | 组件复用时的生命周期钩子 |
+| onLoad() | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 生命周期回调 监听页面加载<br/><br/>页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。 |
+| onReady() | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 生命周期回调 监听页面初次渲染完成<br/><br/>页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。<br/> |
+| onUnload() | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 生命周期回调 监听页面卸载<br/><br/>页面卸载时触发。如 `redirectTo` 或 `navigateBack` 到其他页面时。<br/> |
+| onPageShow() | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 生命周期回调 监听页面显示<br/><br/>页面显示/切入前台时触发。<br/> |
+| onPageHide() | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 生命周期回调 监听页面隐藏<br/><br/>页面隐藏/切入后台时触发。 如 `navigateTo` 或底部 `tab` 切换到其他页面，应用切入后台等。<br/> |
+| onPageScroll() | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS(VDOM) 4.13 / iOS(Vapor) 5.21 / HarmonyOS(VDOM) 4.61 / HarmonyOS(Vapor) 5.08 | 页面滚动触发事件的处理函数<br/><br/>监听用户滑动页面事件。 |
+| onBackPress() | Web 4.0 / 微信小程序 x / Android 3.9 / iOS 4.11 / HarmonyOS 4.61（部分支持，见上） | 监听页面返回 |
+| onReachBottom() | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS(VDOM) 4.61 / HarmonyOS(Vapor) 5.08 | 页面上拉触底事件的处理函数<br/>- 可以在 `pages.json` 的页面配置中设置触发距离 `onReachBottomDistance` 。<br/>- 在触发距离内滑动期间，本事件只会被触发一次。<br/> |
+| onPullDownRefresh() | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS(VDOM) 4.11 / iOS(Vapor) 5.21 / HarmonyOS(VDOM) 4.61 / HarmonyOS(Vapor) 5.21 | 监听用户下拉动作<br/>- 需要在 `pages.json` 的页面配置中开启 `enablePullDownRefresh` 。<br/>- 可以通过 `uni.startPullDownRefresh` 触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。<br/>- 当处理完数据刷新后，`uni.stopPullDownRefresh` 可以停止当前页面的下拉刷新。<br/> |
+| onResize() | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 页面尺寸改变时触发 |
+
+#### onMounted、onUnmounted 使用注意事项 @mounted-unmounted-tips
+
+目前 App平台 onMounted、onUnmounted 可以保证当前数据已经同步到 DOM，但是由于排版和渲染是异步的，所以 onMounted、onUnmounted 不能保证 DOM 排版以及渲染完毕。\
+如果需要获取排版后的节点信息推荐使用 [uni.createSelectorQuery](../api/nodes-info.md) 不推荐直接使用 [Element](../dom/unielement.md) 对象。\
+在修改 DOM 后，立刻使用 [Element](../dom/unielement.md) 对象的同步接口获取 DOM 状态可能获取到的是排版之前的，而 [uni.createSelectorQuery](../api/nodes-info.md) 可以保障获取到的节点信息是排版之后的。
+
+注：页面的 onReady 生命周期可以获取到排版后的节点信息
+
+#### onActivated、onDeactivated 使用注意事项 @activated-deactivated-tips
+
+当 A 页面存在 `keepAlive` 组件，A 页面 `navigateTo` B 页面时
+- Web 端 A 页面中 `keepAlive` 的组件会触发 `onDeactivated` 生命周期
+- App 端 A 页面中 `keepAlive` 的组件不会触发 `onDeactivated` 生命周期
+
+当 B 页面 back 返回 A 页面时
+- Web 端 A 页面中 `keepAlive` 的组件会触发 `onActivated` 生命周期
+- App 端 A 页面中 `keepAlive` 的组件不会触发 `onActivated` 生命周期
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/lifecycle/component/ChildComponentComposition.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/lifecycle/component/ChildComponentComposition
+
+```vue
+<template>
+	
+  title: {{ title }}
+	
+	
+	<text>title: {{ title }}</text>
+	
+  <button class="component-lifecycle-btn mt-10" @click="updateTitle">
+    updateTitle
+  </button>
+</template>
+
+
+
+```
+
+## \
+  ```
+
+##### 兼容性 
+| Web | 微信小程序 | Android | iOS | HarmonyOS |
+| :- | :- | :- | :- | :- |
+| 4.0 | √ | 3.9 | 4.11 | 4.61 |
+
+##### 属性 
+| 名称 | 类型 | 兼容性 |
+| :- | :- |  :-: |
+| setup | Any | Web 4.0 / 微信小程序 √ / Android 4.0 / iOS 4.11 / HarmonyOS 4.61 |
+| lang | Any | Web 4.0 / 微信小程序 √ / Android 4.0 / iOS 4.11 / HarmonyOS 4.61 |
+| 合法值 | 兼容性 | 描述 |
+| :- |  :-: | :- |
+| ts | Web x / 微信小程序 √ / Android x / iOS x / HarmonyOS x（部分支持，见上） | typescript |
+| uts | Web 4.0 / 微信小程序 √ / Android 4.0 / iOS 4.11 / HarmonyOS 4.61 | uts |
+
+##### 参见
+
+### 示例 @example
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/setup-function/setup-function.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/component-instance/setup-function/setup-function
+
+```vue
+<template>
+  
+  <scroll-view style="flex: 1">
+    
+    <view class="page">
+      <view class="flex justify-between flex-row mt-10">
+        <text>str:</text>
+        <text id="str">{{ str }}</text>
+      </view>
+      <view class="flex justify-between flex-row mt-10">
+        <text>num:</text>
+        <text id="num">{{ num }}</text>
+      </view>
+      <view class="flex justify-between flex-row mt-10">
+        <text>bool:</text>
+        <text id="bool">{{ bool }}</text>
+      </view>
+      <view class="flex justify-between flex-row mt-10">
+        <text>count:</text>
+        <text id="count">{{ count }}</text>
+      </view>
+      <button class="mt-10" id="increment-btn" @click="increment">
+        increment count
+      </button>
+      <view class="flex justify-between flex-row mt-10">
+        <text>obj.str:</text>
+        <text id="obj-str">{{ obj['str'] }}</text>
+      </view>
+      <view class="flex justify-between flex-row mt-10">
+        <text>obj.num:</text>
+        <text id="obj-num">{{ obj['num'] }}</text>
+      </view>
+      <view class="flex justify-between flex-row mt-10">
+        <text>obj.bool:</text>
+        <text id="obj-bool">{{ obj['bool'] }}</text>
+      </view>
+      <button class="mt-10" id="update-obj-btn" @click="updateObj">
+        update obj
+      </button>
+      
+      <RenderFunction
+        :str="str"
+        :count="count"
+        :obj="obj"
+        @compUpdateObj="compUpdateObj"
+        :isShow="true" />
+      
+      <Foo id="component-foo">
+        <text class="mt-10" id="default-slot-in-foo">default slot in Foo</text>
+      </Foo>
+    </view>
+    
+  </scroll-view>
+  
+</template>
+
+```
+
+## 单文件组件中方法兼容性 @single-file-component-script-methods
+
+|  | 兼容性 |
+| :- | :- |
+| defineProps() | Web 4.0 / 微信小程序 4.41 / Android 4.0 / iOS 4.11 / HarmonyOS 4.61 |
+| defineEmits() | Web 4.0 / 微信小程序 4.41 / Android 4.0 / iOS 4.11 / HarmonyOS 4.61 |
+| defineModel() | Web 4.11 / 微信小程序 4.41 / Android 4.0 / iOS 4.11 / HarmonyOS 4.61 |
+| defineExpose() | Web 4.0 / 微信小程序 4.41 / Android 4.0 / iOS 4.11 / HarmonyOS 4.61 |
+| defineOptions() | Web 4.11 / 微信小程序 4.41 / Android 4.0 / iOS 4.11 / HarmonyOS 4.61 |
+| defineSlots() | Web 4.0 / 微信小程序 4.41 / Android 4.0 / iOS 4.11 / HarmonyOS 4.61 |
+| useSlots() | Web 4.0 / 微信小程序 4.41 / Android 4.0 / iOS 4.11 / HarmonyOS 4.61 |
+| useAttrs() | Web 4.0 / 微信小程序 4.41 / Android 4.0 / iOS 4.11 / HarmonyOS 4.61 |
+| useRecycleState() | Web x / 微信小程序 x / Android(VDOM) x / Android(Vapor) 5.21 / iOS(VDOM) x / iOS(Vapor) 5.11 / HarmonyOS(VDOM) x / HarmonyOS(Vapor) 5.0（部分支持，见上） |
+
+### defineProps()
+
+仅支持数组字面量、对象字面量定义（等同于 `options` 中的 `props`规则）及使用纯类型参数的方式来声明。
+
+#### 示例
+
+[详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/props/props-composition.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/component-instance/props/props-composition
+
+```vue
+<template>
+  <view class="page">
+    <array-literal class="array-literal-component" :str="str" :num="num" :bool="bool" :obj="obj" :arr="arr" />
+    <object-type class="object-type-component" str="str" :num="num" :bool="bool" :obj="obj" :arr="arr" />
+    <same-name-prop-default-value class="same-name-prop-default-value-component" />
+    <props-with-defaults class="props-with-defaults-component" />
+    
+    <reference-types class="reference-types-component" :list="[1,2,3]" />
+    
+    
+    <reference-types class="reference-types-component" :list="['a','b','c']" />
+    
+  </view>
+</template>
+
+
+
+```
+
+### defineEmits()
+
+仅支持数组字面量和纯类型参数的方式来声明。
+
+```ts
+// 数组字面量
+const emit = defineEmits(['change'])
+
+// 纯类型参数
+const emit = defineEmits<{
+  (e : 'change', id : number) : void
+}>()
+const emit = defineEmits<{
+  // 具名元组语法
+  change : [id: number]
+}>()
+
+```
+
+#### 示例
+
+[详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/emit-function/emit-function-composition.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/component-instance/emit-function/emit-function-composition
+
+```vue
+<template>
+  <view>
+    <button @click="click" class="call-parent-btn">调用父组件事件</button>
+  </view>
+</template>
+
+```
+
+### defineOptions()
+
+仅支持对象字面量方式定义。
+
+```ts
+defineOptions({
+  data() {
+    return {
+      count: 0,
+      price: 10,
+      total: 0
+    }
+  },
+  computed: {
+    doubleCount() : number {
+      return this.count * 2
+    },
+  },
+  watch: {
+    count() {
+      this.total = this.price * this.count
+    },
+  },
+  methods: {
+    increment() {
+      this.count++
+    }
+  }
+})
+```
+
+#### 示例
+
+[详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/options/options-composition.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/component-instance/options/options-composition
+
+```vue
+<template>
+  <view class="page">
+    <view class="mb-10 flex justify-between flex-row">
+      <text>component name: </text>
+      <text id="component-name">{{ dataInfo.name }}</text>
+    </view>
+    
+    <view class="mb-10 flex justify-between flex-row">
+      <text>custom key: </text>
+      <text id="custom-key">{{ dataInfo.customKey }}</text>
+    </view>
+    
+    <view class="mb-10 flex justify-between flex-row">
+      <text>mixin data str: </text>
+      <text id="mixin-data-str">{{ dataInfo.mixinDataStr }}</text>
+    </view>
+    
+    
+  </view>
+</template>
+
+
+
+```
+
+### defineExpose()
+
+使用 `
+
+```
+
+### defineModel()
+
+这个宏可以用来声明一个双向绑定 prop，通过父组件的 `v-model` 来使用。组件 [v-model](./built-in.md#v-model) 指南中也讨论了示例用法。
+
+在底层，这个宏声明了一个 model prop 和一个相应的值更新事件。如果第一个参数是一个字符串字面量，它将被用作 prop 名称；否则，prop 名称将默认为 `"modelValue"`。在这两种情况下，你都可以再传递一个额外的对象，它可以包含 prop 的选项和 model ref 的值转换选项。
+
+**注意：** android 端 `defineModel` 暂不支持创建 `Array` 类型 `prop`。
+
+#### 示例
+
+[详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/directive/v-model/Foo-composition.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/directive/v-model/v-model-composition
+
+```vue
+<template>
+  <view>
+    <view class="mb-10 flex justify-between flex-row">
+      <text>v-model in Foo:</text>
+      <text id="model-value-text">{{ modelValue }}</text>
+    </view>
+    <view class="mb-10 flex justify-between flex-row">
+      <text>v-model:msg in Foo:</text>
+      <text id="model-msg-text">{{ msg }}</text>
+    </view>
+    <view class="mb-10 flex justify-between flex-row">
+      <text>defineModel num:</text>
+      <text id="model-num-text">{{ num }}</text>
+    </view>
+    <view class="mb-10 flex justify-between flex-row">
+      <text>defineModel strArr:</text>
+      <text id="model-str-arr-text">{{ JSON.stringify(strArr) }}</text>
+    </view>
+    <view class="mb-10 flex justify-between flex-row">
+      <text>defineModel numArr:</text>
+      <text id="model-num-arr-text">{{ JSON.stringify(numArr) }}</text>
+    </view>
+    <view class="mb-10 flex justify-between flex-row">
+      <text>defineModel utsObj.value:</text>
+      <text id="model-uts-obj-value-text">{{ utsObjModelValue }}</text>
+    </view>
+    <view class="mb-10 flex justify-between flex-row">
+      <text>defineModel typeObj.value:</text>
+      <text id="model-type-obj-value-text">{{ typeObjModelValue }}</text>
+    </view>
+    <button class="mb-10" id="update-value-btn" @click="updateValue">
+      update value
+    </button>
+  </view>
+</template>
+
+```
+
+### defineSlots()
+
+这个宏可以用于为 IDE 提供插槽名称和 props 类型检查的类型提示。
+
+`defineSlots()` 只接受类型参数，没有运行时参数。类型参数应该是一个类型字面量，其中属性键是插槽名称，值类型是插槽函数。函数的第一个参数是插槽期望接收的 props，其类型将用于模板中的插槽 props。返回类型目前被忽略，可以是 `any`，但我们将来可能会利用它来检查插槽内容。
+
+它还返回 `slots` 对象，该对象等同于在 setup 上下文中暴露或由 `useSlots()` 返回的 `slots` 对象。
+
+#### 示例
+
+[详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/directive/v-slot/Foo-composition.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/directive/v-slot/v-slot-composition
+
+```vue
+<template>
+  <view>
+    <slot name="header" :msg="msg"></slot>
+    <slot :num="num"></slot>
+    <slot name="num1" :num="num"></slot>
+    <slot name="num2" :num="num"></slot>
+    <slot name="msgTrue" :msg="msg"></slot>
+    <slot name="msgFalse" :msg="msg"></slot>
+    <slot name="footer" :arr="arr"></slot>
+    <template v-for="item in 2">
+      <slot name="withFor" :item="item"></slot>
+    </template>
+  </view>
+</template>
+
+```
+
+### useSlots() 和 useAttrs()
+
+在 `
+```
+
+#### useAttrs() 示例 @useattrs-example
+
+[详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/attrs/child-composition.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/component-instance/attrs/attrs-composition
+
+```vue
+<template>
+  <view>
+    <view class="mb-10 flex flex-row justify-between">
+      <text>hasPropsAttr</text>
+      <text id="has-props-attr">{{ hasPropsAttr }}</text>
+    </view>
+    <view class="mb-10 flex flex-row justify-between">
+      <text>hasEmitsAttr</text>
+      <text id="has-emits-attr">{{ hasEmitsAttr }}</text>
+    </view>
+    <view class="mb-10 flex flex-row justify-between">
+      <text>hasClassAttr</text>
+      <text id="has-class-attr">{{ hasClassAttr }}</text>
+    </view>
+    <view class="mb-10 flex flex-row justify-between">
+      <text>hasStyleAttr</text>
+      <text id="has-class-attr">{{ hasStyleAttr }}</text>
+    </view>
+  </view>
+</template>
+
+```
+
+### useComputedStyle() @use-computed-style
+
+获取组件根节点的计算样式。useComputedStyle返回一个响应式的map，开发者可以通过map的get方法获取对应的样式值。[详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/helpers/useComputedStyle/CompUseComputedStyle.uvue)
+
+类型定义：
+
+```ts
+type UseComputedStyleOptions = {
+    /**
+     * 需要监听的样式属性列表
+     */
+    properties?: string[] | null;
+    /**
+     * 是否从原根节点过滤 properties 中的属性，默认过滤
+     * @default true
+     */
+    filterProperties?: boolean | null;
+};
+declare function useComputedStyle(options: UseComputedStyleOptions | null): Map<string, string>;
+```
+
+::: preview
+
+```vue
+<template>
+	<view>
+		<text :style="{ 'font-size': style.get('font-size'), color: style.get('color') }" style="line-height: 100px;">hello world</text>
+	</view>
+</template>
+
+
+
+<style></style>
+```
+
+### useRecycleState() @use-recycle-state
+
+组件回收复用时状态存储工具方法
+
+### withDefaults()
+
+在组合式 API 中使用响应式 Props 解构时，需要使用 `withDefaults` 编译器宏。
+
+```ts
+interface Props {
+  msg: string
+  labels : string[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  msg: 'hello',
+  labels: ():string[] => ['a', 'b'],
+})
+```
+
+上面代码会被编译为等价的运行时 props 的 default 选项。此外，`withDefaults` 辅助函数提供了对默认值的类型检查。\
+请注意，在使用 `withDefaults` 时，默认值为可变引用类型 (如数组或对象) 应该封装在函数中，以避免意外修改和外部副作用。
+
+#### withDefaults() 示例 @withdefaults-example
+
+[详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/props/props-with-defaults.uvue)
+
+::: preview
+```vue
+<template>
+  <view class='mt-10'>
+    <text class="mb-10 bold">withDefaults</text>
+    <view class="mb-10 flex flex-row justify-between">
+      <text>msg</text>
+      <text id="prop-msg">{{ props.msg }}</text>
+    </view>
+    <view class="mb-10 flex flex-row justify-between">
+      <text>labels</text>
+      <text id="prop-labels">{{ JSON.stringify(props.labels) }}</text>
+    </view>
+  </view>
+</template>
+
+```
+
+### 与渲染函数一起使用
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/render-function/render/render-composition.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/render-function/render/render-composition
+```vue
+
+<template><render /></template>
+
+<style>
+.btn {
+  color: red;
+}
+</style>
+
+```