tmui-cli 2.0.2 → 2.0.4

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

@@ -0,0 +1,1489 @@
+# 选项式 API @options-api
+
+选项式 API，要求在script里编写`export default {}`，在其中定义data、methods、生命周期等选项。
+
+**vue蒸汽模式不支持选项式，仅支持组合式。**
+
+## 状态选项
+
+|  | Web | 微信小程序 | Android(VDOM) | Android(Vapor) | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) |
+| :- | :- | :- | :- | :- | :- | :- | :- | :- |
+| data | 4.0 | 4.41 | 3.9 | x | 4.11 | x | 4.61 | x |
+| props | 4.0 | 4.41 | 3.9 | x | 4.11 | x | 4.61 | x |
+| computed | 4.0 | 4.41 | 3.9 | x | 4.11 | x | 4.61 | x |
+| methods | 4.0 | 4.41 | 3.9 | x | 4.11 | x | 4.61 | x |
+| watch | 4.0 | 4.41 | 3.9 | x | 4.11 | x | 4.61 | x |
+| emits | 4.0 | 4.41 | 3.9 | x | 4.11 | x | 4.61 | x |
+| expose | 4.0 | 4.41 | x | x | x | x | x | x |
+
+### 示例代码 @example
+
+#### data
+
+用于声明组件初始响应式状态的函数。
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/data/data-options.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/component-instance/data/data-options
+```vue
+<template>
+  <view class="page">
+    <view class="flex justify-between flex-row mb-10">
+      <text>str: </text>
+      <text id="str">{{ str }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>num: </text>
+      <text id="num">{{ num }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>arr: </text>
+      <text id="arr">{{ arr.join(',') }}</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">{{ obj.arr.join(',') }}</text>
+    </view>
+    <view ref='htmlRef' id="idRef" class="flex justify-between flex-row mb-10">
+      <text>data 存储 element不需要被包装</text>
+      <text id="isSameRefText">{{ refElementIsSame }}</text>
+    </view>
+
+    <button @click="updateData">update data</button>
+  </view>
+</template>
+
+```
+
+#### props
+
+用于声明一个组件的 props。
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/props/props-options.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/component-instance/props/props-options
+```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>
+
+
+
+```
+
+#### computed
+
+用于声明要在组件实例上暴露的计算属性。
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/reactivity/core/computed/computed-options.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/reactivity/core/computed/computed-options
+
+```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>
+
+
+
+```
+
+#### methods
+
+用于声明要混入到组件实例中的方法。
+
+声明的方法可以直接通过组件实例访问，或者在模板语法表达式中使用。所有的方法都会将它们的 `this` 上下文自动绑定为组件实例，即使在传递时也如此。
+
+在声明方法时避免使用箭头函数，因为它们不能通过 `this` 访问组件实例。
+
+[详情点击查看](./component.md#page-call-component-method)
+
+#### watch
+
+用于声明在数据更改时调用的侦听回调。
+
+::: warning 注意
+- `watch immediate` 第一次调用时，App-Android 平台旧值为初始值，web 平台为 null。
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/reactivity/core/watch/watch-options.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/reactivity/core/watch/watch-options
+
+```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>
+  
+  </scroll-view>
+  
+</template>
+
+
+```
+
+##### 即时回调的侦听器​
+`watch` 默认是懒执行的：仅当数据源变化时，才会执行回调。但在某些场景中，我们希望在创建侦听器时，立即执行一遍回调。举例来说，我们想请求一些初始数据，然后在相关状态更改时重新请求数据。
+
+我们可以用一个对象来声明侦听器，这个对象有 handler 方法和 `immediate: true` 选项，这样便能强制回调函数立即执行：
+
+```js
+export default {
+  // ...
+  watch: {
+    question: {
+      handler(newQuestion) {
+        // 在组件实例创建时会立即调用
+      },
+      // 强制立即执行回调
+      immediate: true
+    }
+  }
+  // ...
+}
+```
+
+#### emits
+
+用于声明由组件触发的自定义事件。
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/emit-function/emit-function-options.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/component-instance/emit-function/emit-function-options
+
+```vue
+<template>
+  <view>
+    <button @click="click" class="call-parent-btn">调用父组件事件</button>
+  </view>
+</template>
+
+<style scoped>
+
+</style>
+
+```
+
+## 渲染选项 @rendering-options
+
+|  | Web | 微信小程序 | Android(VDOM) | Android(Vapor) | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) |
+| :- | :- | :- | :- | :- | :- | :- | :- | :- |
+| template | x | x | x | x | x | x | 4.61 | x |
+| render | 4.0 | x | 3.9 | x | 4.11 | x | 4.61 | x |
+| compilerOptions | x | x | x | x | x | x | 4.61 | x |
+| slots | 4.0 | 4.41 | 3.9 | 5.21 | 4.11 | 5.11 | 4.61 | 5.0 |
+
+### 示例代码 @example
+
+#### template
+
+用于声明组件的字符串模板。
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/built-in/special-elements/template/template-options.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/built-in/special-elements/template/template-options
+```vue
+<template>
+  <view class="page">
+    <template v-if="dataInfo.isShow">
+      <text id="title">{{ title }}</text>
+    </template>
+    <template v-else>
+      <text>隐藏标题时显示</text>
+    </template>
+    <text class="mt-10 btn" id="show-botton" @click="handleShow">{{ dataInfo.isShow ? '点击隐藏' : '点击显示' }}</text>
+    <template v-for="(item, index) in list" :key="index">
+      <text :class="'item'">{{ index + 1 }}.{{ item.name }}</text>
+    </template>
+    <button @click="goMapStyle">跳转绑定 Map 类型 style 页面</button>
+  </view>
+</template>
+
+<style>
+.btn{
+  border: 1px solid #eee;
+  border-radius: 4px;
+  text-align: center;
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+.item {
+  margin: 15px;
+  padding: 4px 8px;
+  border: #eee solid 1px;
+}
+</style>
+
+```
+
+#### render
+
+用于编程式地创建组件虚拟 DOM 树的函数。
+
+`render` 是字符串模板的一种替代，可以使你利用 JavaScript 的丰富表达力来完全编程式地声明组件最终的渲染输出。
+
+预编译的模板，例如单文件组件中的模板，会在构建时被编译为 `render` 选项。如果一个组件中同时存在 `render` 和 `template，则` `render` 将具有更高的优先级。
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/render-function/render/render-options.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/render-function/render/render-options
+```vue
+
+
+<style>
+.btn {
+  color: red;
+}
+</style>
+```
+
+#### slots
+
+一个在渲染函数中以编程方式使用插槽时辅助类型推断的选项。
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/directive/v-slot/v-slot-options.uvue)
+
+作用域插槽需在组件中指定插槽数据类型
+::: preview https://hellouvue.dcloud.net.cn/#/pages/directive/v-slot/v-slot-options
+
+```vue
+<template>
+  <view class="page">
+    <Foo>
+      <template #header="{ msg }">
+        <view class="mb-10 flex justify-between flex-row">
+          <text>header slot msg:</text>
+          <text id="slot-header">{{ msg }}</text>
+        </view>
+      </template>
+      <template #default="{ num }">
+        <view class="mb-10 flex justify-between flex-row">
+          <text>default slot num:</text>
+          <text id="slot-default">{{ num }}</text>
+        </view>
+      </template>
+      
+      <template v-for="item in 2" #[`num${item}`]="{ num }">
+        <view class="mb-10 flex justify-between flex-row">
+          <text>num{{ item }} slot:</text>
+          <text :id="`slot-num${item}`">{{ num }}</text>
+        </view>
+      </template>
+      <template v-if="msgTrue['isShow']" #[msgTrue['name']]="{ msg }">
+        <view class="mb-10 flex justify-between flex-row">
+          <text>{{ msgTrue['name'] }} slot msg:</text>
+          <text id="slot-msg-true">{{ msg }}</text>
+        </view>
+      </template>
+      <template v-if="msgFalse['isShow']" #[msgFalse['name']]="{ msg }">
+        <view class="mb-10 flex justify-between flex-row">
+          <text>{{ msgFalse['name'] }} slot msg:</text>
+          <text id="slot-msg-false">{{ msg }}</text>
+        </view>
+      </template>
+      
+      <template #footer="{ arr }">
+        <view class="mb-10 flex justify-between flex-row">
+          <text>footer slot arr:</text>
+          <text id="slot-footer">{{ JSON.stringify(arr) }}</text>
+        </view>
+      </template>
+      <template #withFor="{ item }">
+        <view class="mb-10 flex justify-between flex-row">
+          <text>v-for slot item:</text>
+          <text :id="`slot-for-${item}`">{{ item }}</text>
+        </view>
+      </template>
+    </Foo>
+  </view>
+</template>
+
+```
+
+## 生命周期选项 @lifecycle-options
+
+> [页面及组件生命周期流程图](../page.md#lifecycleflow)
+
+### 页面生命周期 @page-lifecycle-options
+
+#### 兼容性 @page-lifecycle-compatibility
+
+[页面生命周期](../page.md#lifecycle)
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/lifecycle/page/page-options.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/lifecycle/page/page-options
+
+```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>onShow 触发：</text>
+        <text>{{ isOnShowTriggered }}</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>onHide 触发：</text>
+        <text>{{ isOnHideTriggered }}</text>
+      </view>
+      <view class="flex flex-row justify-between mt-10">
+        <text>onResize 触发：</text>
+        <text>{{ isOnResizeTriggered }}</text>
+      </view>
+			<MonitorAppLifecycleOptions class="monitor-app-lifecycle" />
+			<MonitorPageLifecycleOptions />
+      <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-options
+
+#### 兼容性 @component-lifecycle-compatibility
+
+|  | 兼容性 | 描述 |
+| :- | :- | :- |
+| beforeCreate | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 在组件实例初始化完成之后立即调用。<br/>在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 |
+| created | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 在组件实例处理完所有与状态相关的选项后调用。<br/>在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。<br/>然而，此时挂载阶段还未开始，因此 $el 属性仍不可用。 |
+| beforeMount | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 在组件被挂载之前调用。<br/>相关的 render 函数首次被调用。<br/>当这个钩子被调用时，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点。<br/>它即将首次执行 DOM 渲染过程。 |
+| mounted | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 在组件被挂载之后调用。<br/>el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。<br/>如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。 |
+| beforeUpdate | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 在组件即将因为一个响应式状态变更而更新其 DOM 树之前调用。<br/>数据更新时调用，发生在虚拟 DOM 打补丁之前。<br/>这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。 |
+| updated | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 在组件因为一个响应式状态变更而更新其 DOM 树之后调用。<br/>父组件的更新钩子将在其子组件的更新钩子之后调用。<br/>这个钩子会在组件的任意 DOM 更新后被调用，这些更新可能是由不同的状态变更导致的。<br/>如果你需要在某个特定的状态更改后访问更新后的 DOM，请使用 nextTick() 作为替代。 |
+| beforeUnmount | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 在一个组件实例被卸载之前调用。<br/>当这个钩子被调用时，组件实例依然还保有全部的功能。 |
+| unmounted | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 在一个组件实例被卸载之后调用。<br/>可以在这个钩子中手动清理一些副作用，例如计时器、DOM 事件监听器或者与服务器的连接。 |
+| errorCaptured | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 在捕获了后代组件传递的错误时调用。<br/>这个钩子带有三个实参：错误对象、触发该错误的组件实例，以及一个说明错误来源类型的信息字符串。<br/>这个钩子可以通过返回 false 来阻止错误继续向上传递。 |
+| renderTracked | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 在一个响应式依赖被组件的渲染作用追踪后调用。<br/>跟踪虚拟 DOM 重新渲染时调用。钩子接收 debugger event 作为参数。<br/>此事件告诉你哪个操作跟踪了组件以及该操作的目标对象和键。 |
+| renderTriggered | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 在一个响应式依赖被组件触发了重新渲染之后调用。<br/>当虚拟 DOM 重新渲染为 triggered.Similarly 为renderTracked，接收 debugger event 作为参数。<br/>此事件告诉你是什么操作触发了重新渲染，以及该操作的目标对象和键。 |
+| activated | Web 4.0 / 微信小程序 x / Android 4.0 / iOS 4.11 / HarmonyOS 4.61（部分支持，见上） | 若组件实例是 \<KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。<br/>keep-alive 组件激活时调用。 |
+| deactivated | Web 4.0 / 微信小程序 x / Android 4.0 / iOS 4.11 / HarmonyOS 4.61（部分支持，见上） | 若组件实例是 \<KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。<br/>keep-alive 组件停用时调用。 |
+| serverPrefetch | Web x / 微信小程序 x / Android x / iOS x / HarmonyOS x（部分支持，见上） | 当组件实例在服务器上被渲染之前要完成的异步函数。<br/>如果这个钩子返回了一个 Promise，服务端渲染会在渲染该组件前等待该 Promise 完成。 |
+
+#### mounted、unmounted 使用注意事项 @mounted-unmounted-tips
+
+目前 mounted、unmounted 可以保证当前数据已经同步到 DOM，但是由于排版和渲染是异步的，所以 mounted、unmounted 不能保证 DOM 排版以及渲染完毕。\
+如果需要获取排版后的节点信息推荐使用 [uni.createSelectorQuery](../api/nodes-info.md) 不推荐直接使用 [Element](../dom/unielement.md) 对象。\
+在修改 DOM 后，立刻使用 [Element](../dom/unielement.md) 对象的同步接口获取 DOM 状态可能获取到的是排版之前的，而 [uni.createSelectorQuery](../api/nodes-info.md) 可以保障获取到的节点信息是排版之后的。
+
+#### activated、deactivated 使用注意事项 @activated-deactivated-tips
+
+当 A 页面存在 `keepAlive` 组件，A 页面 `navigateTo` B 页面时
+- Web 端 A 页面中 `keepAlive` 的组件会触发 `deactivated` 生命周期
+- App 端 A 页面中 `keepAlive` 的组件不会触发 `deactivated` 生命周期
+
+当 B 页面 back 返回 A 页面时
+- Web 端 A 页面中 `keepAlive` 的组件会触发 `activated` 生命周期
+- App 端 A 页面中 `keepAlive` 的组件不会触发 `activated` 生命周期
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/lifecycle/component/ChildComponentOptions.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/lifecycle/component/ChildComponentOptions
+
+```vue
+<template>
+  title: {{ title }}
+  <button class="component-lifecycle-btn mt-10" @click="updateTitle">
+    updateTitle
+  </button>
+</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-options-1.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/component-instance/provide/provide-options-1
+
+> inject 1
+
+```vue
+<template>
+  <view>
+    <text class="mt-10 bold">component for inject 1</text>
+    <text class="mt-10 alias-provide-page-title"
+      >aliasProvidePageTitle: {{ aliasProvidePageTitle }}</text
+    >
+    <text class="mt-10 provide-page-str"
+      >providePageStr: {{ providePageStr }}</text
+    >
+    <text class="mt-10 provide-page-num"
+      >providePageNum: {{ providePageNum }}</text
+    >
+    <text class="mt-10 provide-page-bool"
+      >providePageBool: {{ providePageBool }}</text
+    >
+    <text class="mt-10 provide-page-object-title"
+      >providePageObject.title: {{ providePageObject['title'] }}</text
+    >
+    <text class="mt-10 provide-page-object-content"
+      >providePageObject.content: {{ providePageObject['content'] }}</text
+    >
+    <text class="mt-10 provide-page-arr"
+      >providePageArr: {{ JSON.stringify(providePageArr) }}</text
+    >
+   <text class="mt-10 provide-page-map"
+      >providePageMap: {{ JSON.stringify(providePageMapObj) }}</text
+    >
+    <text class="mt-10 provide-page-set"
+      >providePageSet: {{ JSON.stringify(providePageSetArr) }}</text
+    >
+    <text class="mt-10 test-inject-string-default-value"
+      >testInjectStringDefaultValue: {{ testInjectStringDefaultValue }}</text
+    >
+    <text class="mt-10 test-inject-object-default-value-title"
+      >testInjectObjectDefaultValue.title:
+      {{ testInjectObjectDefaultValue['title'] }}</text
+    >
+    <text class="mt-10 test-inject-object-default-value-content"
+      >testInjectObjectDefaultValue.content:
+      {{ testInjectObjectDefaultValue['content'] }}</text
+    >
+  </view>
+</template>
+
+```
+
+> inject 2
+
+```vue
+<template>
+  <view>
+    <text class="mt-10 bold">component for inject 2</text>
+    <text class="mt-10 provide-page-title"
+      >providePageTitle: {{ providePageTitle }}</text
+    >
+    <text class="mt-10 provide-page-str">providePageStr: {{ providePageStr }}</text>
+    <text class="mt-10 provide-page-num">providePageNum: {{ providePageNum }}</text>
+    <text class="mt-10 provide-page-bool">providePageBool: {{ providePageBool }}</text>
+    <text class="mt-10 provide-page-object-title"
+      >providePageObject.title: {{ providePageObject['title'] }}</text
+    >
+    <text class="mt-10 provide-page-object-content"
+      >providePageObject.content: {{ providePageObject['content'] }}</text
+    >
+    <text class="mt-10 provide-page-arr">providePageArr: {{ JSON.stringify(providePageArr) }}</text>
+    <text class="mt-10 provide-page-map">providePageMap: {{ JSON.stringify(providePageMapObj) }}</text>
+    <text class="mt-10 provide-page-set">providePageSet: {{ JSON.stringify(providePageSetArr) }}</text>
+  </view>
+</template>
+
+```
+
+### mixins
+
+一个包含组件选项对象的数组，这些选项都将被混入到当前组件的实例中。
+
+`mixins` 选项接受一个 mixin 对象数组。这些 mixin 对象可以像普通的实例对象一样包含实例选项，它们将使用一定的选项合并逻辑与最终的选项进行合并。举例来说，如果你的 mixin 包含了一个 `created` 钩子，而组件自身也有一个，那么这两个函数都会被调用。
+
+- `mixins` 仅支持通过字面量对象方式和 `defineMixin` 函数方式定义。
+- 在 app-android 平台, `App.uvue` 不支持 `mixins`，全局 mixins 也不会对 `App.uvue` 生效，另外也不支持运行时根据条件动态构造mixins。
+  ```ts
+  const mixin1 = defineMixin({
+    onLoad() {
+      console.log('mixin1 onLoad')
+    }
+  })
+  export default {
+    mixins: [
+      mixin1,
+      {
+        data() {
+          return {
+            mixin2: 'mixin2'
+          }
+        }
+      }
+    ]
+  }
+  ```
+- 同名属性会被覆盖，同名生命周期会依次执行。同名属性的优先级如下：
+  - 在 `app.mixin` 内嵌入的 mixin `<` 在 `app.mixin` 中声明的 mixin `<` 在 `page.mixin` 内嵌入的 mixin `<` 在 `page.mixin` 中声明的 mixin `<` 在 `component.mixin` 内嵌入的 mixin `<` 在 `component.mixin` 中声明的 mixin
+  - 同名生命周期的执行顺序如下：
+    1. 在 `app.mixin` 内嵌入的 mixin
+    2. 在 `app.mixin` 中声明的 mixin
+    3. 在 `page.mixin` 内嵌入的 mixin
+    4. 在 `page.mixin` 中声明的 mixin
+    5. 在 `component.mixin` 内嵌入的 mixin
+    6. 在 `component.mixin` 中声明的 mixin
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/component-instance/mixins/mixins-web
+
+示例 [详情]()
+
+> mixins-web
+
+```vue
+<template>
+  
+  <scroll-view style="flex: 1">
+    
+    <view class="page">
+      <text id="mixin-prop" class="mb-10">mixinProp: {{mixinProp}}</text>
+      <text id="mixin-data-msg" class="mb-10">mixinDataMsg: {{mixinDataMsg}}</text>
+      <text id="mixin-onload-msg" class="mb-10">mixinOnloadMsg: {{mixinOnloadMsg}}</text>
+      <text id="mixin-computed" class="mb-10">mixinComputed: {{mixinComputed}}</text>
+
+      <Comp1 title="title" @globalMixinEmit1="(arg: string) => handleMixinEmitter('globalMixinEmit1', arg)"
+        @globalChildMixinEmit1="(arg: string) => handleMixinEmitter('globalChildMixinEmit1', arg)"
+        @globalMixinEmit2="(arg: string) => handleMixinEmitter('globalMixinEmit2', arg)"
+        @globalChildMixinEmit2="(arg: string) => handleMixinEmitter('globalChildMixinEmit2', arg)"
+        @mixinEmit="(arg: string) => handleMixinEmitter('mixinEmit', arg)"
+        @childMixinEmit="(arg: string) => handleMixinEmitter('childMixinEmit', arg)" />
+      <text v-if="handleMixinEmitterMsg" class="mt-10 handle-mixin-emitter-msg">
+        handleMixinEmitterMsg: {{ handleMixinEmitterMsg }}
+      </text>
+      <Comp2 class='comp2' title="title" />
+    </view>
+    
+  </scroll-view>
+  
+</template>
+
+
+
+```
+
+> mixins-app-page-namesake
+
+```vue
+<template>
+  
+  <scroll-view style="flex: 1">
+    
+    <view class="page">
+      <text class="bold">props:</text>
+      <text class="mt-10 namesake-mixin-prop">{{ namesakeMixinProp }}</text>
+      <text class="mt-10 namesake-child-mixin-prop">{{ namesakeChildMixinProp }}</text>
+
+      <text class="bold mt-10">data:</text>
+      <text class="mt-10 namesake-mixin-data-msg">{{ namesakeMixinDataMsg }}</text>
+      <text class="mt-10 namesake-child-mixin-data-msg">{{ namesakeChildMixinDataMsg }}</text>
+
+      <text class="bold mt-10">computed:</text>
+      <text class="mt-10 namesake-mixin-computed">{{ namesakeMixinComputed }}</text>
+      <text class="mt-10 namesake-child-mixin-computed">{{ namesakeChildMixinComputed }}</text>
+
+      <text class="mt-10 bold">method:</text>
+      <text class="mt-10 namesake-mixin-method">{{ namesakeMixinMethod() }}</text>
+      <text class="mt-10 namesake-child-mixin-method">{{ namesakeChildMixinMethod() }}</text>
+
+      <text class="mt-10 bold">mixin component:</text>
+      <GlobalMixinComp1 />
+      <GlobalChildMixinComp1 />
+      <GlobalMixinComp2 />
+      <GlobalChildMixinComp2 />
+      <MixinComp1 />
+      <ChildMixinComp1 />
+      <MixinComp2 />
+      <ChildMixinComp2 />
+      <MixinComp />
+    </view>
+    
+  </scroll-view>
+  
+</template>
+
+```
+
+> mixins-app
+
+```vue
+<template>
+  
+  <scroll-view style="flex: 1">
+    
+    <view class="page">
+      <button type="primary" @click="goMixinPageNamesake">go mixin page namesake</button>
+      <text class="mt-10 bold">props:</text>
+      <text class="mt-10 global-mixin-prop-1">{{ globalMixinProp1 }}</text>
+      <text class="mt-10 global-child-mixin-prop-1">{{ globalChildMixinProp1 }}</text>
+      <text class="mt-10 global-mixin-prop-2">{{ globalMixinProp2 }}</text>
+      <text class="mt-10 global-child-mixin-prop-2">{{ globalChildMixinProp2 }}</text>
+      <text class="mt-10 mixin-prop-1">{{ mixinProp1 }}</text>
+      <text class="mt-10 child-mixin-prop-1">{{ childMixinProp1 }}</text>
+      <text class="mt-10 mixin-prop-2">{{ mixinProp2 }}</text>
+      <text class="mt-10 child-mixin-prop-2">{{ childMixinProp2 }}</text>
+      <text class="mt-10 namesake-mixin-prop">{{ namesakeMixinProp }}</text>
+      <text class="mt-10 namesake-child-mixin-prop">{{ namesakeChildMixinProp }}</text>
+
+      <text class="bold mt-10">data:</text>
+      <text class="mt-10 global-mixin-data-msg-1">{{ globalMixinDataMsg1 }}</text>
+      <text class="mt-10 global-child-mixin-data-msg-1">{{ globalChildMixinDataMsg1 }}</text>
+      <text class="mt-10 global-mixin-data-msg-2">{{ globalMixinDataMsg2 }}</text>
+      <text class="mt-10 global-child-mixin-data-msg-2">{{ globalChildMixinDataMsg2 }}</text>
+      <text class="mt-10 mixin-data-msg-1">{{ mixinDataMsg1 }}</text>
+      <text class="mt-10 child-mixin-data-msg-1">{{ childMixinDataMsg1 }}</text>
+      <text class="mt-10 mixin-data-msg-2">{{ mixinDataMsg2 }}</text>
+      <text class="mt-10 child-mixin-data-msg-2">{{ childMixinDataMsg2 }}</text>
+      <text class="mt-10 namesake-mixin-data-msg">{{ namesakeMixinDataMsg }}</text>
+      <text class="mt-10 namesake-child-mixin-data-msg">{{ namesakeChildMixinDataMsg }}</text>
+
+      <text class="bold mt-10">computed:</text>
+      <text class="mt-10 global-mixin-computed-1">{{ globalMixinComputed1 }}</text>
+      <text class="mt-10 global-child-mixin-computed-1">{{ globalChildMixinComputed1 }}</text>
+      <text class="mt-10 global-mixin-computed-2">{{ globalMixinComputed2 }}</text>
+      <text class="mt-10 global-child-mixin-computed-2">{{ globalChildMixinComputed2 }}</text>
+      <text class="mt-10 mixin-computed-1">{{ mixinComputed1 }}</text>
+      <text class="mt-10 child-mixin-computed-1">{{ childMixinComputed1 }}</text>
+      <text class="mt-10 mixin-computed-2">{{ mixinComputed2 }}</text>
+      <text class="mt-10 child-mixin-computed-2">{{ childMixinComputed2 }}</text>
+      <text class="mt-10 namesake-mixin-computed">{{ namesakeMixinComputed }}</text>
+      <text class="mt-10 namesake-child-mixin-computed">{{ namesakeChildMixinComputed }}</text>
+
+      <text class="bold mt-10">watch:</text>
+      <text class="mt-10 global-mixin-watch-1">{{ globalMixinWatchMsg1 }}</text>
+      <text class="mt-10 global-child-mixin-watch-1">{{ globalChildMixinWatchMsg1 }}</text>
+      <text class="mt-10 global-mixin-watch-2">{{ globalMixinWatchMsg2 }}</text>
+      <text class="mt-10 global-child-mixin-watch-2">{{ globalChildMixinWatchMsg2 }}</text>
+      <text class="mt-10 mixin-watch-1">{{ mixinWatchMsg1 }}</text>
+      <text class="mt-10 child-mixin-watch-1">{{ childMixinWatchMsg1 }}</text>
+      <text class="mt-10 mixin-watch-2">{{ mixinWatchMsg2 }}</text>
+      <text class="mt-10 child-mixin-watch-2">{{ childMixinWatchMsg2 }}</text>
+      <text class="mt-10 mixin-watch">{{ mixinWatchMsg }}</text>
+
+      <text class="bold mt-10">lifecycle:</text>
+      <text class="mt-10">{{ globalMixinOnloadMsg1 }}</text>
+      <text class="mt-10">{{ globalMixinOnloadMsg2 }}</text>
+      <text class="mt-10">{{ globalChildMixinOnloadMsg1 }}</text>
+      <text class="mt-10">{{ globalChildMixinOnloadMsg2 }}</text>
+      <text class="mt-10">{{ mixinOnloadMsg1 }}</text>
+      <text class="mt-10">{{ mixinOnloadMsg2 }}</text>
+      <text class="mt-10">{{ childMixinOnloadMsg1 }}</text>
+      <text class="mt-10">{{ childMixinOnloadMsg2 }}</text>
+      <text class="mt-10">{{ onloadMsg }}</text>
+
+      <text class="mt-10 bold">method:</text>
+      <text class="mt-10 global-mixin-method-1">{{ globalMixinMethod1() }}</text>
+      <text class="mt-10 global-child-mixin-method-1">{{ globalChildMixinMethod1() }}</text>
+      <text class="mt-10 global-mixin-method-2">{{ globalMixinMethod2() }}</text>
+      <text class="mt-10 global-child-mixin-method-2">{{ globalChildMixinMethod2() }}</text>
+      <text class="mt-10 mixin-method-1">{{ mixinMethod1() }}</text>
+      <text class="mt-10 child-mixin-method-1">{{ childMixinMethod1() }}</text>
+      <text class="mt-10 mixin-method-2">{{ mixinMethod2() }}</text>
+      <text class="mt-10 child-mixin-method-2">{{ childMixinMethod2() }}</text>
+      <text class="mt-10 namesake-mixin-method">{{ namesakeMixinMethod() }}</text>
+      <text class="mt-10 namesake-child-mixin-method">{{ namesakeChildMixinMethod() }}</text>
+
+      <text class="mt-10 bold">component:</text>
+      <Comp1
+        title="title"
+        @globalMixinEmit1="(arg: string) => handleMixinEmitter('globalMixinEmit1', arg)"
+        @globalChildMixinEmit1="(arg: string) => handleMixinEmitter('globalChildMixinEmit1', arg)"
+        @globalMixinEmit2="(arg: string) => handleMixinEmitter('globalMixinEmit2', arg)"
+        @globalChildMixinEmit2="(arg: string) => handleMixinEmitter('globalChildMixinEmit2', arg)"
+        @mixinEmit="(arg: string) => handleMixinEmitter('mixinEmit', arg)"
+        @childMixinEmit="(arg: string) => handleMixinEmitter('childMixinEmit', arg)" />
+      <text v-if="handleMixinEmitterMsg" class="mt-10 handle-mixin-emitter-msg"
+        >handleMixinEmitterMsg: {{ handleMixinEmitterMsg }}</text
+      >
+      <Comp2 class='comp2' title="title" />
+      <text class="mt-10 bold">mixin component:</text>
+      <GlobalMixinComp1 />
+      <GlobalChildMixinComp1 />
+      <GlobalMixinComp2 />
+      <GlobalChildMixinComp2 />
+      <MixinComp1 />
+      <ChildMixinComp1 />
+      <MixinComp2 />
+      <ChildMixinComp2 />
+    </view>
+    
+  </scroll-view>
+  
+</template>
+
+```
+
+## 其他杂项
+
+|  | Web | 微信小程序 | Android(VDOM) | Android(Vapor) | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) |
+| :- | :- | :- | :- | :- | :- | :- | :- | :- |
+| name | 4.0 | 4.41 | 3.9 | x | 4.11 | x | 4.61 | x |
+| inheritAttrs | 4.0 | √ | 3.9 | 5.21 | 4.11 | 5.11 | 4.61 | 5.0 |
+| components | 4.0 | 4.41 | 3.9 | x | 4.11 | x | 4.61 | x |
+
+### 示例代码 @example
+
+#### name
+
+用于显式声明组件展示时的名称。
+
+组件的名字有以下用途：
+
+- 在组件自己的模板中递归引用自己时
+- 在 Vue 开发者工具中的组件树显示时
+- 在组件抛出的警告追踪栈信息中显示时
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/circular-reference/circular-reference-options.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/component-instance/circular-reference/circular-reference-options
+
+```vue
+<template>
+  <view class="page">
+    
+    
+    <child-a :limit="5" />
+    
+    <child-c :limit="5" />
+  </view>
+</template>
+
+
+```
+
+#### inheritAttrs
+
+用于控制是否启用默认的组件 attribute 透传行为。
+
+默认情况下，父组件传递的，但没有被子组件解析为 props 的 attributes 绑定会被“透传”。这意味着当我们有一个单根节点的子组件时，这些绑定会被作为一个常规的 attribute 应用在子组件的根节点元素上。当你编写的组件想要在一个目标元素或其他组件外面包一层时，可能并不期望这样的行为。我们可以通过设置 `inheritAttrs` 为 `false` 来禁用这个默认行为。这些 attributes 可以通过 `$attrs` 这个实例属性来访问，并且可以通过 `v-bind` 来显式绑定在一个非根节点的元素上。
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/mixins/mixins-web.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/component-instance/mixins/mixins-web
+
+> inheritAttrs: true
+
+```vue
+<template>
+  <view class="mt-10" ref="mixin-comp-root">
+    <text class="bold">Comp1: inheritAttrs: false</text>
+    <text class="mt-10" style="color:#ccc;"
+      >rootElementTitle should be null</text
+    >
+    <text class="mt-10 root-element-title-1">rootElementTitle: {{ rootElementTitle }}</text>
+    
+    <text class="mt-10 bold">trigger emitter:</text>
+    <button class="mt-10 global-mixin-emit-1" @click="triggerEmitter('globalMixinEmit1')">
+      trigger globalMixinEmit1
+    </button>
+    <button
+      class="mt-10 global-child-mixin-emit-1"
+      @click="triggerEmitter('globalChildMixinEmit1')">
+      trigger globalChildMixinEmit1
+    </button>
+    <button class="mt-10 global-mixin-emit-2" @click="triggerEmitter('globalMixinEmit2')">
+      trigger globalMixinEmit2
+    </button>
+    <button
+      class="mt-10 global-child-mixin-emit-2"
+      @click="triggerEmitter('globalChildMixinEmit2')">
+      trigger globalChildMixinEmit2
+    </button>
+    <button class="mt-10 mixin-emit" @click="triggerEmitter('mixinEmit')">
+      trigger mixinEmit
+    </button>
+    <button class="mt-10 child-mixin-emit" @click="triggerEmitter('childMixinEmit')">
+      trigger childMixinEmit
+    </button>
+    <MixinComp />
+    
+  </view>
+</template>
+
+```
+
+> inheritAttrs: false
+
+```vue
+<template>
+  <view class="mt-10" ref="mixin-comp-root">
+    <text class="bold">Comp2: inheritAttrs: true</text>
+    <text class="mt-10" style="color:#ccc;">rootElementTitle should not be null</text>
+    <text class="mt-10 root-element-title-2">rootElementTitle: {{ rootElementTitle }}</text>
+    <text class="mt-10">{{ namesakeMixinProp }}</text>
+    <text class="mt-10">{{ namesakeMixinDataMsg }}</text>
+    <text class="mt-10">{{ namesakeMixinComputed }}</text>
+    <text class="mt-10 mixin-watch-msg">{{ mixinWatchMsg }}</text>
+    <text class="mt-10">{{ namesakeMixinMethod() }}</text>
+    <button class="mt-10" @click="changeGlobalMixinOnloadMsg1">
+      change globalMixinOnloadMsg1
+    </button>
+    <MixinComp />
+  </view>
+</template>
+
+
+```
+
+#### components
+
+一个对象，用于注册对当前组件实例可用的组件。
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/attrs/attrs-options.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/component-instance/attrs/attrs-options
+
+```vue
+<template>
+  <view class="page">
+    <child
+      class="child-class"
+      str="str from parent"
+      style="background-color: lightblue;"
+      @childClick="() => {}" />
+
+    <child-multi-tag
+      class="child-class"
+      str="str from parent"
+      style='background-color: lightblue;'
+      @childClick="() => {}" />
+  </view>
+</template>
+
+```
+
+- 参考[组件](./component.md)
+
+## 组件实例 @component-instance
+
+|  | 兼容性 |
+| :- | :- |
+| $data | Web 4.0 / 微信小程序 4.41 / Android √ / iOS 4.11 / iOS(VDOM) UTS 插件 x / HarmonyOS 4.61（部分支持，见上） |
+| $props | Web 4.0 / 微信小程序 4.41 / Android √ / iOS 4.11 / iOS(VDOM) UTS 插件 x / HarmonyOS 4.61（部分支持，见上） |
+| $attrs | Web 4.0 / 微信小程序 4.41 / Android √ / iOS 4.11 / iOS(VDOM) UTS 插件 x / HarmonyOS 4.61（部分支持，见上） |
+| $slots | Web 4.0 / 微信小程序 4.41 / Android √ / iOS 4.11 / iOS(VDOM) UTS 插件 x / HarmonyOS 4.61（部分支持，见上） |
+| $refs | Web 4.0 / 微信小程序 4.41 / Android √ / iOS 4.11 / iOS(VDOM) UTS 插件 x / HarmonyOS 4.61（部分支持，见上） |
+| $parent | Web 4.0 / 微信小程序 4.41 / Android √ / iOS 4.11 / iOS(VDOM) UTS 插件 x / HarmonyOS 4.61（部分支持，见上） |
+| $root | Web 4.0 / 微信小程序 4.41 / Android √ / iOS 4.11 / iOS(VDOM) UTS 插件 x / HarmonyOS 4.61（部分支持，见上） |
+| $options | Web 4.0 / 微信小程序 4.41 / Android √ / iOS 4.11 / iOS(VDOM) UTS 插件 x / HarmonyOS 4.61（部分支持，见上） |
+| $nextTick | Web 4.0 / 微信小程序 4.41 / Android √ / iOS 4.11 / iOS(VDOM) UTS 插件 x / HarmonyOS 4.61（部分支持，见上） |
+| $forceUpdate | Web 4.0 / 微信小程序 4.41 / Android(VDOM) √ / Android(Vapor) x / iOS(VDOM) 4.11 / iOS(Vapor) x / iOS(VDOM) UTS 插件 x / HarmonyOS(VDOM) 4.61 / HarmonyOS(Vapor) x（部分支持，见上） |
+| $el | Web 4.0 / 微信小程序 4.41 / Android √ / iOS 4.11 / iOS(VDOM) UTS 插件 x / HarmonyOS 4.61（部分支持，见上） |
+| $callMethod | Web 4.0 / 微信小程序 4.41 / Android √ / iOS 4.11 / iOS(VDOM) UTS 插件 x / HarmonyOS 4.61（部分支持，见上） |
+| $emit | Web 4.0 / 微信小程序 4.41 / Android √ / iOS 4.11 / iOS(VDOM) UTS 插件 x / HarmonyOS 4.61（部分支持，见上） |
+| $watch | Web 4.0 / 微信小程序 4.41 / Android √ / iOS 4.11 / iOS(VDOM) UTS 插件 x / HarmonyOS 4.61（部分支持，见上） |
+| $page | Web 4.31 / 微信小程序 √ / Android 4.31 / iOS 4.31 / iOS(VDOM) UTS 插件 x / HarmonyOS 4.61（部分支持，见上） |
+
+### 示例代码 @example
+
+#### $data
+
+从 `data` 选项函数中返回的对象，会被组件赋为响应式。组件实例将会代理对其数据对象的属性访问。
+
+##### 使用注意事项 @options-data
+
+data内 $ 开头的属性不可直接使用 `this.$xxx`访问，需要使用 `this.$data['$xxx']` ，这是vue的规范
+
+> 目前安卓端可以使用 this.$xxx 访问是Bug而非特性，请勿使用此特性。
+
+示例
+
+```vue
+<template>
+  <view></view>
+</template>
+
+```
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/data/data-options.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/component-instance/data/data-options
+```vue
+<template>
+  <view class="page">
+    <view class="flex justify-between flex-row mb-10">
+      <text>str: </text>
+      <text id="str">{{ str }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>num: </text>
+      <text id="num">{{ num }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>arr: </text>
+      <text id="arr">{{ arr.join(',') }}</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">{{ obj.arr.join(',') }}</text>
+    </view>
+    <view ref='htmlRef' id="idRef" class="flex justify-between flex-row mb-10">
+      <text>data 存储 element不需要被包装</text>
+      <text id="isSameRefText">{{ refElementIsSame }}</text>
+    </view>
+
+    <button @click="updateData">update data</button>
+  </view>
+</template>
+
+```
+
+#### $props
+
+表示组件当前已解析的 props 对象。
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/props/props-options.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/component-instance/props/props-options
+```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>
+
+
+
+```
+
+#### $el
+
+该组件实例管理的 DOM 根节点。
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/el/el-options.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/component-instance/el/el-options
+```vue
+<template>
+  <view class="page flex justify-between flex-row">
+    <text class="child">root node tagName：</text>
+    <text class="tag-name">{{ el }}</text>
+  </view>
+</template>
+
+```
+
+#### $options
+
+已解析的用于实例化当前组件的组件选项。
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/options/options-options.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/component-instance/options/options-options
+```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>
+
+
+
+```
+
+#### $parent
+
+当前组件可能存在的父组件实例，如果当前组件是顶层组件，则为 `null`。
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/parent/parent-options.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/component-instance/parent/parent-options
+```vue
+<template>
+  <view class="page">
+    <child ref='child' class="parent-child" />
+  </view>
+</template>
+
+```
+
+#### $root
+
+当前组件树的根组件实例。如果当前实例没有父组件，那么这个值就是它自己。
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/root/root-options.uvue)
+
+::: preview
+```vue
+<template>
+  <view class="page">
+    <view class="mb-10 flex justify-between flex-row">
+      <text>root str in parent component: </text>
+      <text id="root-str-parent">{{ rootStr }}</text>
+    </view>
+    <child class="root-child" />
+  </view>
+</template>
+
+```
+
+#### $slots
+
+一个表示父组件所传入插槽的对象。
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/slots/slots-options.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/component-instance/slots/slots-options
+```vue
+<template>
+  <view class="page">
+    <SlotComp id="slot-comp">
+      <template v-slot:header>
+        <text>header</text>
+      </template>
+      <template v-slot:default>
+        <text>default</text>
+      </template>
+      <template v-slot:footer>
+        <text>footer</text>
+      </template>
+    </SlotComp>
+  </view>
+</template>
+
+```
+
+#### $refs
+
+一个包含 DOM 元素和组件实例的对象，通过模板引用注册。
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/refs/refs-options.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/component-instance/refs/refs-options
+```vue
+<template>
+  <view class="page">
+    <view class="row">
+      <text>NodeRef: </text>
+      <text ref="node">{{ 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>
+</template>
+
+<style>
+.row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+</style>
+
+```
+
+#### $attrs
+
+一个包含了组件所有透传 attributes 的对象。
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/attrs/attrs-options.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/component-instance/attrs/attrs-options
+```vue
+<template>
+  <view class="page">
+    <child
+      class="child-class"
+      str="str from parent"
+      style="background-color: lightblue;"
+      @childClick="() => {}" />
+
+    <child-multi-tag
+      class="child-class"
+      str="str from parent"
+      style='background-color: lightblue;'
+      @childClick="() => {}" />
+  </view>
+</template>
+
+```
+
+#### $watch()
+
+用于命令式地创建侦听器的 API。
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/reactivity/core/watch/watch-options.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/reactivity/core/watch/watch-options
+```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>
+  
+  </scroll-view>
+  
+</template>
+
+
+```
+
+#### $emit()
+
+在当前组件触发一个自定义事件。任何额外的参数都会传递给事件监听器的回调函数。
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/emit-function/emit-function-options.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/component-instance/emit-function/emit-function-options
+```vue
+<template>
+  <view class="page">
+    <view class="row">
+      <text>子组件传的参数</text>
+      <text id="value">
+        {{ value }}
+      </text>
+    </view>
+    <child class="emit-function-child" @callback="callback"></child>
+  </view>
+</template>
+
+<style>
+.row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+</style>
+
+```
+
+#### $forceUpdate()
+
+强制该组件重新渲染。
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/force-update/force-update-options.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/component-instance/force-update/force-update-options
+```vue
+<template>
+  <view class="page">
+    <view class="split-title">$forceUpdate</view>
+    <text class="mt-10 time">Date.now(): {{ Date.now() }}</text>
+    <button
+      class="mt-10 trigger-force-update-btn"
+      type="primary"
+      @click="triggerForceUpdate">
+      trigger $forceUpdate
+    </button>
+  </view>
+</template>
+
+```
+
+#### $nextTick()
+
+绑定在实例上的 nextTick() 函数。
+
+##### 使用注意事项 @options-nextTick
+
+目前 $nextTick 可以保证当前数据已经同步到 DOM，但是由于排版和渲染是异步的，所以 $nextTick 不能保证 DOM 排版以及渲染完毕。\
+如果需要获取排版后的节点信息推荐使用 [uni.createSelectorQuery](../api/nodes-info.md) 不推荐直接使用 [Element](../dom/unielement.md) 对象。\
+在修改 DOM 后，立刻使用 [Element](../dom/unielement.md) 对象的同步接口获取 DOM 状态可能获取到的是排版之前的，而 [uni.createSelectorQuery](../api/nodes-info.md) 可以保障获取到的节点信息是排版之后的。
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/nextTick/nextTick-options.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/component-instance/nextTick/nextTick-options
+```vue
+<template>
+  
+  <scroll-view style="flex: 1">
+  
+    <view class="page">
+      <view class="flex justify-between mb-10">
+        <text ref="text">title for callback:</text>
+        <text id="page-text-callback">{{ dataInfo.titleForCallback }}</text>
+      </view>
+      <view class="flex justify-between mb-10">
+        <text ref="text">before $nextTick callback title123:</text>
+        <text>{{ dataInfo.beforeNextTickCallbackTitle }}</text>
+      </view>
+      <view class="flex justify-between mb-10">
+        <text ref="text">after $nextTick callback title:</text>
+        <text>{{ dataInfo.afterNextTickCallbackTitle }}</text>
+      </view>
+      <view class="flex justify-between mb-10">
+        <text ref="text">title for promise:</text>
+        <text id="page-text-promise">{{ dataInfo.titleForPromise }}</text>
+      </view>
+      <view class="flex justify-between mb-10">
+        <text ref="text">before $nextTick promise title:</text>
+        <text>{{ dataInfo.beforeNextTickPromiseTitle }}</text>
+      </view>
+      <view class="flex justify-between mb-10">
+        <text ref="text">after $nextTick promise title:</text>
+        <text>{{ dataInfo.afterNextTickPromiseTitle }}</text>
+      </view>
+      <button id="page-test-next-tick-btn" @click="pageTestNextTick">page test $nextTick</button>
+      <Child id="child-component" />
+      <button class="mt-10" id="after-next-tick-get-text-btn" @click="afterNextTickGetText">toggle v-if text</button>
+      <text v-if="showTestText" class="mt-10" id="v-if-next-tick-should-getable">测试 v-if & nextTick 后获取元素</text>
+    </view>
+  
+  </scroll-view>
+  
+</template>
+
+
+```