tmui-cli 2.0.3 → 2.0.4

package/data/uniappx/vue/component.md

@@ -0,0 +1,1134 @@
+# 组件
+
+我们可以对一段要复用的js/uts逻辑代码进行封装，抽出function、module等形式。
+
+那么涉及UI的复用时，该如何抽象？
+
+这就是vue的组件机制，把视图template、script、style都封装到独立的uvue组件文件中，在其他需要的地方使用组件的名称进行引用。
+
+每个组件，包括如下几个部分：以组件名称为标记的开始标签和结束标签、组件text内容、组件属性、组件属性值。
+
+组件还可以封装方法、事件、插槽，提供了[组件的生命周期](#component-lifecycle)，提供了组件和页面的[互通信机制](#use-and-communication)，满足了各种高级需求。
+
+如果您还不了解这些概念，请务必先阅读 [组件概述文档](../component/README.md)
+
+## 组件内容构成 @component-structure
+
+uni-app x 组件基于 vue 单文件组件规范，一个组件内，有 3 个根节点标签：
+
+- `<template>`：组件的模板内容
+- `
+  ```
+
+这里出现了`uni_module`的概念，简单说下，它是uni-app的一种包管理方案。
+
+`uni_module`其实不止服务于组件，它可以容纳组件、script库、页面、项目等所有DCloud插件市场所支持的种类。
+
+在HBuilderX中点右键可方便的更新插件，插件作者也可以方便的上传插件。
+
+uni_module有详细的专项文档，请另行查阅[uni_module规范](https://uniapp.dcloud.net.cn/plugin/uni_modules.html)。
+
+如果你的组件不满足easycom标准的目录规范，还有一种办法是在[pages.json](../collocation/pagesjson.md#pages-easycom)里声明自己的目录规则，以便编译器查找到你的组件。自定义easycom路径规则的详细教程[详见](https://uniapp.dcloud.net.cn/collocation/pages.html#easycom)
+
+##### easycom组件的类型规范 @easycom-component-type
+
+组件标签名首字母大写，`驼峰+ComponentPublicInstance`，如：
+
+`<test/>` 类型为：TestComponentPublicInstance
+`<uni-data-checkbox/>` 类型为：UniDataCheckboxComponentPublicInstance
+
+#### 手动引入组件 @manual-import-component
+
+不符合 easycom 规范的组件，则需要手动引入：
+
+```vue
+
+<template>
+  <view>Child Component</view>
+</template>
+
+<template>
+  <view>
+    <child ref="component1"></child>
+  </view>
+</template>
+
+```
+
+##### 手动引入组件的类型规范 @manual-import-component-type
+
+类型为：ComponentPublicInstance
+
+## 使用及通信 @use-and-communication
+
+### 页面与页面通信 @page-page-communication
+
+1. 使用 [navigateTo](https://doc.dcloud.net.cn/uni-app-x/api/navigator.html#navigateto) 在 `url` 地址中携带参数
+2. 使用 [event-bus](https://doc.dcloud.net.cn/uni-app-x/api/event-bus.html)
+
+### 页面与组件通信 @page-component-communication
+
+#### 向组件传递 `props` @transfer-component-props
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/props/props-options.uvue)
+
+::: warning 注意
+- 选项式 API：`this.$props` 是 `Map` 类型，需要使用 `this.$props["propName"]` 来访问
+- 组合式 API：可以使用 `.` 点操作符来访问
+- 默认情况下，父组件传递的，但没有被子组件解析为 props 的 attributes 绑定会被“透传”。这意味着当我们有一个单根节点的子组件时，这些绑定会被作为一个常规的 attribute 应用在子组件的根节点元素上，可以通过 `inheritAttrs` 选项来关闭该行为，[详见](./options-api.md#inheritattrs)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/component-instance/props/props-options
+
+> 组合式 API
+
+```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>
+
+
+
+```
+
+> 选项式 API
+
+```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>
+
+
+
+```
+
+#### 向组件传递回调函数 @transfer-component-method
+
+示例 [详情](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
+
+> 组合式 API
+
+```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>
+
+```
+
+> 选项式 API
+
+```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>
+
+```
+
+#### 使用 `provide/inject` 来向下传递参数 @provide-inject
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/provide/provide-options-1.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/component-instance/provide/provide-options-1
+
+> 组合式 API
+
+```vue
+<template>
+  <view class="page">
+    <inject-comp class="component-for-inject" />
+  </view>
+</template>
+
+```
+
+> 选项式 API
+
+```vue
+<template>
+  
+  <scroll-view style="flex: 1">
+    
+    <view class="page">
+      <text>provide page</text>
+      <button class="mt-10" @click="goProvidePage2">
+        跳转函数方式定义 provide 示例
+      </button>
+      <ComponentForInject class="component-for-inject" />
+    </view>
+    
+  </scroll-view>
+  
+</template>
+
+```
+
+#### 使用 [全局变量与状态管理](../tutorial/store.md) @global-store
+
+> store/index.uts [文件详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/store/index.uts)
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/examples/nested-component-communication/nested-component-communication-options.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/examples/nested-component-communication/nested-component-communication-options
+
+> 组合式 API
+
+```vue
+<template>
+  <view class="page">
+    <view class="flex-row">
+      父组件:
+      <text class="parent-msg">{{ msg }}</text>
+    </view>
+    <button class="parent-btn" @click="change">父组件改变数据</button>
+    <child class="nested-child" />
+  </view>
+</template>
+
+```
+
+> 选项式 API
+
+```vue
+<template>
+  <view class="page">
+    <view class="flex-row">
+      父组件:
+      <text class="parent-msg">{{ msg }}</text>
+    </view>
+    <button class="parent-btn" @click="change">父组件改变数据</button>
+    <child class="nested-child"></child>
+  </view>
+</template>
+
+```
+
+#### 在 `main.uts` 中使用 `app.config.globalProperties`
+
+如在 `main.uts` 中的 `createApp` 方法中使用：
+```ts
+app.config.globalProperties.globalPropertiesReactiveObj = reactive({
+  str: 'default reactive string',
+  num: 0,
+  bool: false,
+} as UTSJSONObject)
+```
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/app-instance/globalProperties/globalProperties-options.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/app-instance/globalProperties/globalProperties-options
+
+> 组合式 API
+
+```vue
+<template>
+  
+  <scroll-view style="flex: 1;">
+    
+    <view class="uni-padding-wrap">
+      <text class="mt-10"
+        >globalProperties string: {{ globalPropertiesStr }}</text
+      >
+      <text class="mt-10"
+        >globalProperties number: {{ globalPropertiesNum }}</text
+      >
+      <text class="mt-10"
+        >globalProperties boolean: {{ globalPropertiesBool }}</text
+      >
+      <text class="mt-10"
+        >globalProperties object: {{ globalPropertiesObj }}</text
+      >
+      <text class="mt-10"
+        >globalProperties null: {{ globalPropertiesNull }}</text
+      >
+      <text class="mt-10"
+        >globalProperties array: {{ globalPropertiesArr }}</text
+      >
+      <text class="mt-10"
+        >globalProperties set: {{ globalPropertiesSet }}</text
+      >
+      <text class="mt-10"
+        >globalProperties map: {{ globalPropertiesMap }}</text
+      >
+      <text class="mt-10"
+        >globalProperties reactiveObj.str:
+        {{ globalPropertiesReactiveObj['str'] }}</text
+      >
+      <text class="mt-10"
+        >globalProperties reactiveObj.num:
+        {{ globalPropertiesReactiveObj['num'] }}</text
+      >
+      <text class="mt-10"
+        >globalProperties reactiveObj.boolean:
+        {{ globalPropertiesReactiveObj['bool'] }}</text
+      >
+      <text class="mt-10"
+        >globalProperties fun 返回值: {{ globalPropertiesFn() }}</text
+      >
+      <button @click="updateGlobalProperties" class="mt-10">
+        update globalProperties
+      </button>
+    </view>
+    
+  </scroll-view>
+  
+</template>
+
+
+
+<style>
+.uni-padding-wrap {
+  padding: 10px 10px 40px 10px;
+}
+</style>
+
+```
+
+> 选项式 API
+
+```vue
+<template>
+  
+  <scroll-view style="flex: 1;">
+    
+    <view class="uni-padding-wrap">
+      <text class="mt-10"
+        >globalProperties string: {{ globalPropertiesStr }}</text
+      >
+      <text class="mt-10"
+        >globalProperties number: {{ globalPropertiesNum }}</text
+      >
+      <text class="mt-10"
+        >globalProperties boolean: {{ globalPropertiesBool }}</text
+      >
+      <text class="mt-10"
+        >globalProperties object: {{ globalPropertiesObj }}</text
+      >
+      <text class="mt-10"
+        >globalProperties null: {{ globalPropertiesNull }}</text
+      >
+      <text class="mt-10"
+        >globalProperties array: {{ globalPropertiesArr }}</text
+      >
+      <text class="mt-10"
+        >globalProperties set: {{ globalPropertiesSet }}</text
+      >
+      <text class="mt-10"
+        >globalProperties map: {{ globalPropertiesMap }}</text
+      >
+      <text class="mt-10"
+        >globalProperties reactiveObj.str:
+        {{ globalPropertiesReactiveObj['str'] }}</text
+      >
+      <text class="mt-10"
+        >globalProperties reactiveObj.num:
+        {{ globalPropertiesReactiveObj['num'] }}</text
+      >
+      <text class="mt-10"
+        >globalProperties reactiveObj.boolean:
+        {{ globalPropertiesReactiveObj['bool'] }}</text
+      >
+      <text class="mt-10"
+        >globalProperties fun 返回值: {{ globalPropertiesFn() }}</text
+      >
+      <button @click="updateGlobalProperties" class="mt-10">
+        update globalProperties
+      </button>
+    </view>
+    
+  </scroll-view>
+  
+</template>
+
+
+
+<style>
+.uni-padding-wrap {
+  padding: 10px 10px 40px 10px;
+}
+</style>
+
+```
+
+### 父组件与子组件通信 @parent-child-communication
+
+上述 [页面与组件通信](#page-component-communication) 方法同样适用于父组件与子组件通信。
+
+### 页面调用组件方法 @page-call-component-method
+
+#### 调用 `easycom` 组件方法 @call-easycom-component-method
+
+> 在调用组件方法的时候如报错 `error: Reference has a nullable type` 则需要使用 `?.` 操作符（如：a?.b?.()）。
+
+easycom组件，用法和内置组件一样。也是使用 `this.$refs` 获取组件并转换为组件的类型，通过 `.`操作符 调用组件方法或设置属性。
+
+**语法**
+
+```(this.$refs['组件ref属性值'] as 驼峰ComponentPublicInstance)?.foo?.();```
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/methods/call-method-easycom-options.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/component-instance/methods/call-method-easycom-options
+
+> 组合式 API
+
+```vue
+<template>
+  <view>
+    <call-easy-method ref="callEasyMethod1"></call-easy-method>
+    <custom-call-easy-method ref="customCallEasyMethod1"></custom-call-easy-method>
+    <test-getter-setter-composition ref="getterAndSetterComposition"></test-getter-setter-composition>
+    
+    <test-getter-setter-options ref="getterAndSetterOptions"></test-getter-setter-options>
+    
+    <view>
+        <text>getter-setter: <text id="getterAndSetter">{{JSON.stringify(getterAndSetterResult)}}</text></text>
+    </view>
+  </view>
+</template>
+
+```
+
+> 选项式 API
+
+```vue
+<template>
+  <view>
+    <call-easy-method ref="callEasyMethod1"></call-easy-method>
+    <custom-call-easy-method ref="customCallEasyMethod1"></custom-call-easy-method>
+    <test-getter-setter-composition ref="getterAndSetterComposition"></test-getter-setter-composition>
+    <test-getter-setter-options ref="getterAndSetterOptions"></test-getter-setter-options>
+    <view>
+        <text>getter-setter: <text id="getterAndSetter">{{JSON.stringify(getterAndSetterResult)}}</text></text>
+    </view>
+  </view>
+</template>
+
+```
+
+##### 调用 `uni_modules easycom` 组件方法 <Badge text="HBuilderX 3.97+"/> @call-uni-modules-easycom-component-method
+
+使用 `ref` 属性拿到组件实例，调用 `easycom` 组件方法时不需要使用 `$callMethod` 方法，直接使用点操作符即可 `.`
+
+> 在调用组件方法的时候如报错 `error: Reference has a nullable type` 则需要使用 `?.` 操作符（如：a?.b?.()）。
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/component-instance/methods/call-method-easycom-uni-modules-options.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/component-instance/methods/call-method-easycom-uni-modules-options
+
+> 组合式 API
+
+```vue
+<template>
+  <view>
+    <call-easy-method-uni-modules ref="callEasyMethod1"></call-easy-method-uni-modules>
+    
+    
+    
+    <view>---</view>
+    <test-props id="btn1" :numList="numList" :objList='objList' @buttonclick='onButtonClick'
+      @numListChange='numListChange' @objListChange='objListChange'
+      style="width: 80px;height: 30px;background-color: lightblue"></test-props>
+    <view style="flex-direction: row ;">
+      <text>isNumListValid: </text>
+      <text id='isNumListValid'>{{isNumListValid}}</text>
+    </view>
+    <view style="flex-direction: row ;">
+      <text>isObjListValid: </text>
+      <text id='isObjListValid'>{{isObjListValid}}</text>
+    </view>
+    
+  </view>
+</template>
+
+```
+
+> 选项式 API
+
+```vue
+<template>
+  <view>
+    <call-easy-method-uni-modules ref="callEasyMethod1"></call-easy-method-uni-modules>
+
+    
+    
+    
+    <view>---</view>
+    <test-props id="btn1" :numList="numList" :objList='objList' @buttonclick='onButtonClick'
+      @numListChange='numListChange' @objListChange='objListChange'
+      style="width: 80px;height: 30px;background-color: lightblue"></test-props>
+    <view style="flex-direction: row ;">
+      <text>isNumListValid: </text>
+      <text id='isNumListValid'>{{isNumListValid}}</text>
+    </view>
+    <view style="flex-direction: row ;">
+      <text>isObjListValid: </text>
+      <text id='isObjListValid'>{{isObjListValid}}</text>
+    </view>
+    
+  </view>
+</template>
+
+```
+
+#### 使用 `ref` 属性搭配 `$callMethod` 方法 @call-component-method
+
+Android VDOM模式是强类型，如果不是内置组件，也不是easycom组件，无法使用`.`操作符访问组件的方法。
+
+此时需使用 `this.$refs` 获取组件实例，然后通过 `$callMethod` 调用组件的方法。也就是把组件的方法名、参数，当做callMethod的参数来传递。此时也就没有`.`操作符那样的代码提示和校验了。
+
+callMethod可用于所有自定义组件，包括easycom组件也可以使用，只不过easycom组件可以直接`.`。
+
+蒸汽模式下不再推荐使用`callMethod`
+
+**语法**
+
+```(this.$refs['组件ref属性值'] as ComponentPublicInstance)?.$callMethod('方法名', ...args)```
+
+**组件类型**
+
+ComponentPublicInstance
+
+示例 [详情](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
+
+> 组合式 API
+
+```vue
+<template>
+  <view class="page">
+    <child ref="childRef" class="parent-child" />
+  </view>
+</template>
+
+
+
+```
+
+> 选项式 API
+
+```vue
+<template>
+  <view class="page">
+    <child ref='child' class="parent-child" />
+  </view>
+</template>
+
+```
+
+**注意：**
+- App-Android 平台 `4.0` 版本开始支持 `$callMethod` 调用 `defineExpose` 导出的方法
+- Web 平台、App-iOS 平台 `4.13` 版本开始支持 `$callMethod` 调用 `defineExpose` 导出的方法
+- 小程序 平台 支持 `$callMethod` 调用 `defineExpose` 导出的方法
+- `
+```
+
+> 选项式 API
+
+```vue
+<template>
+  <view>
+    <slider :show-value="true" ref="slider1"></slider>
+  </view>
+</template>
+
+```
+
+**bug&tips**
+
+- 目前uts组件，即封装原生ui给uni-app或uni-app x的页面中使用，类型与内置组件的 Uni`组件名(驼峰)`Element 方式相同。目前没有代码提示。
+
+### 组件监听应用、页面生命周期 @component-page-lifecycle
+
+|组件中监听应用生命周期 |Android |Android(Vapor)  |iOS  | iOS(Vapor) |HarmonyOS | HarmonyOS(Vapor) |Web |微信小程序 |
+|:-:			          |:-:		 |:-:             |:-:  |:-:         |:-:		  |:-:               |:-:	 |:-:		  |
+|onAppShow          |4.11    |5.21            |4.11 |5.21        |4.61     |5.21             |4.11 |4.41     |
+|onAppHide          |4.11    |5.21            |4.11 |5.21        |4.61     |5.21             |4.11 |4.41     |
+|onError            |4.11    |5.21            |5.21 |5.21        |5.21     |5.21             |4.11 |4.41     |
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/lifecycle/page/monitor-app-lifecycle-composition.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/lifecycle/page/page-composition
+
+> 组合式 API
+
+```vue
+
+<template>
+	<text id="trigger-monitor-app-error" style="margin: 10px 0;" @click="triggerError">组件监听应用生命周期（组合式 API）</text>
+</template>
+
+```
+
+> 选项式 API
+
+```vue
+
+<template>
+	<text id="trigger-monitor-app-error" style="margin: 10px 0;" @click="triggerError">组件监听应用生命周期（选项式 API）</text>
+</template>
+
+```
+
+|组件中监听页面生命周期 |Android |Android(Vapor) |iOS  | iOS(Vapor) |HarmonyOS | HarmonyOS(Vapor) |Web |微信小程序 |
+|:-:			          |:-:		 |:-:             |:-:  |:-:         |:-:		   |:-:               |:-:	|:-:		  |
+|onLoad             |4.11    |5.21            |4.11 |5.21        |4.61     |5.21              |4.11 |4.41     |
+|onPageShow         |4.11    |5.21            |4.11 |5.21        |4.61     |5.21              |4.11 |4.41     |
+|onReady            |4.11    |5.21            |4.11 |5.21        |4.61     |5.21              |4.11 |4.41     |
+|onPullDownRefresh  |4.11    |5.21            |4.11 |5.21        |4.61     |5.21              |4.11 |4.41     |
+|onPageScroll       |4.11    |5.21            |4.11 |5.21        |4.61     |5.21              |4.11 |4.41     |
+|onReachBottom      |4.11    |5.21            |4.11 |5.21        |4.61     |5.21              |4.11 |4.41     |
+|onBackPress        |4.11    |5.21            |4.11 |5.21        |4.61     |5.21              |4.11 |4.41     |
+|onPageHide         |4.11    |5.21            |4.11 |5.21        |4.61     |5.21              |4.11 |4.41     |
+|onUnload           |4.11    |5.21            |4.11 |5.21        |4.61     |5.21              |4.11 |4.41     |
+
+> 选项式 API 和 组合式 API 在监听页面生命周期时有所不同
+>
+> 比如选项式 API 中的 `onShow`、`onHide` 监听页面生命周期在组合式 API 中分别对应 `onPageShow`、`onPageHide`（在组合式 API 时会和 App 的生命周期冲突）
+>
+> 具体请查看 [页面生命周期](../page.md#lifecycle)
+
+::: warning 注意
+ `onPageHide`、`onPageShow` 需要写在选项式的 setup 函数或者组合式 `
+
+<template>
+	<view>
+		<text class="mb-10">选项式组件监听页面生命周期（组合式 API）</text>
+		<view class="justify-between flex-row mb-10">
+			<text>组件中监听到页面滚动:</text>
+			<text>{{isScrolled}}</text>
+		</view>
+	</view>
+</template>
+
+<style>
+	.mb-10{
+		margin-bottom: 10px;
+	}
+	.justify-between{
+		justify-content: space-between;
+	}
+	.flex-row{
+		flex-direction: row;
+	}
+</style>
+```
+
+> 选项式 API
+
+```vue
+
+
+<template>
+	<view>
+		<text class="mb-10">选项式组件监听页面生命周期（选项式 API）</text>
+		<view class="justify-between flex-row mb-10">
+			<text>组件中监听到页面滚动:</text>
+			<text>{{isScrolled}}</text>
+		</view>
+	</view>
+</template>
+
+<style>
+	.mb-10{
+		margin-bottom: 10px;
+	}
+	.justify-between{
+		justify-content: space-between;
+	}
+	.flex-row{
+		flex-direction: row;
+	}
+</style>
+```
+
+## 组件的生命周期 @component-lifecycle
+
+### 组件生命周期（选项式 API）兼容性 @component-lifecycle-options-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 完成。 |
+
+### 组件生命周期（组合式 API）兼容性 @component-lifecycle-composition-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 | 页面尺寸改变时触发 |
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/lifecycle/component/ChildComponentOptions.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/lifecycle/component/component-options
+
+> 组合式 API
+
+```vue
+<template>
+	
+  title: {{ title }}
+	
+	
+	<text>title: {{ title }}</text>
+	
+  <button class="component-lifecycle-btn mt-10" @click="updateTitle">
+    updateTitle
+  </button>
+</template>
+
+
+
+```
+
+> 选项式 API
+
+```vue
+<template>
+  title: {{ title }}
+  <button class="component-lifecycle-btn mt-10" @click="updateTitle">
+    updateTitle
+  </button>
+</template>
+
+
+```
+
+## 全局组件 @global-component
+
+[详情见 app.component](./global-api.md#app-component)
+
+## props
+
+- 支持[对象方式](https://cn.vuejs.org/guide/components/props.html#props-declaration)声明。从 4.0+ 支持字符串数组方式声明。使用字符串数组方式声明时，所有 prop 类型均为 any | null。
+- 仅支持直接在 `export default` 内部声明，不支持其他位置定义后，在 `export default` 中引用。
+- 复杂数据类型需要通过 `PropType` 标记类型，[详见](https://cn.vuejs.org/guide/typescript/options-api.html#typing-component-props)。
+- `type` 不支持使用自定义的构造函数。
+
+示例 [详情](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
+> 组合式 API
+
+```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>
+
+
+
+```
+
+> 选项式 API
+
+```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>
+
+
+
+```
+
+## 透传 Attributes​
+
+### Attributes 继承​
+“透传 attribute”指的是传递给一个组件，却没有被该组件声明为 `props` 或 `emits` 的 attribute 或者 `v-on` 事件监听器。最常见的例子就是 `class`、`style` 和 `id`。
+
+当一个组件以单个元素为根作渲染时，透传的 attribute 会自动被添加到根元素上。举例来说，假如我们有一个 `<MyButton>` 组件，它的模板长这样：
+
+```vue
+
+<button>Click Me</button>
+```
+一个父组件使用了这个组件，并且传入了 `class`：
+
+```vue
+<MyButton class="large" />
+```
+最后渲染出的 DOM 结果是：
+
+```html
+<button class="large">Click Me</button>
+```
+这里，`<MyButton>` 并没有将 `class` 声明为一个它所接受的 prop，所以 `class` 被视作透传 attribute，自动透传到了 `<MyButton>` 的根元素上。
+
+#### 对 class 和 style 的合并​
+如果一个子组件的根元素已经有了 `class` 或 `style` attribute，它会和从父组件上继承的值合并。如果我们将之前的 `<MyButton>` 组件的模板改成这样：
+
+```vue
+
+<button class="btn">Click Me</button>
+```
+则最后渲染出的 DOM 结果会变成：
+
+```html
+<button class="btn large">Click Me</button>
+```
+#### v-on 监听器继承​
+同样的规则也适用于 v-on 事件监听器：
+
+```vue
+<MyButton @click="onClick" />
+```
+`click` 监听器会被添加到 `<MyButton>` 的根元素，即那个原生的 `<button>` 元素之上。当原生的 `<button>` 被点击，会触发父组件的 `onClick` 方法。同样的，如果原生 `button` 元素自身也通过 `v-on` 绑定了一个事件监听器，则这个监听器和从父组件继承的监听器都会被触发。
+
+#### 深层组件继承​
+有些情况下一个组件会在根节点上渲染另一个组件。例如，我们重构一下 `<MyButton>`，让它在根节点上渲染 `<BaseButton>`：
+
+```vue
+
+<BaseButton />
+```
+此时 `<MyButton>` 接收的透传 attribute 会直接继续传给 `<BaseButton>`。
+
+请注意：
+
+1. 透传的 attribute 不会包含 `<MyButton>` 上声明过的 props 或是针对 `emits` 声明事件的 `v-on` 侦听函数，换句话说，声明过的 props 和侦听函数被 `<MyButton>`“消费”了。
+2. 透传的 attribute 若符合声明，也可以作为 props 传入 `<BaseButton>`。
+
+### 禁用 Attributes 继承​
+如果你不想要一个组件自动地继承 attribute，你可以在组件选项中设置 `inheritAttrs: false`。
+
+你也可以直接在 `
+```
+最常见的需要禁用 attribute 继承的场景就是 attribute 需要应用在根节点以外的其他元素上。通过设置 `inheritAttrs` 选项为 `false`，你可以完全控制透传进来的 attribute 被如何使用。
+
+这些透传进来的 attribute 可以在模板的表达式中直接用 `$attrs` 访问到。
+
+```vue
+<span>Fallthrough attribute: {{ $attrs }}</span>
+```
+这个 `$attrs` 对象包含了除组件所声明的 `props` 和 `emits` 之外的所有其他 attribute，例如 `class`，`style`，`v-on` 监听器等等。
+
+有几点需要注意：
+
+- 和 `props` 有所不同，透传 attributes 在 JavaScript 中保留了它们原始的大小写，所以像 `foo-bar` 这样的一个 attribute 需要通过 `$attrs['foo-bar']` 来访问。
+- 像 `@click` 这样的一个 `v-on` 事件监听器将在此对象下被暴露为一个函数 `$attrs.onClick`。
+
+### 多根节点的 Attributes 继承​
+和单根节点组件有所不同，有着多个根节点的组件没有自动 attribute 透传行为。如果 `$attrs` 没有被显式绑定，将会抛出一个运行时警告。
+
+```vue
+<CustomLayout id="custom-layout" @click="changeValue" />
+```
+如果 `<CustomLayout>` 有下面这样的多根节点模板，由于 Vue 不知道要将 attribute 透传到哪里，所以会抛出一个警告。
+
+```vue
+<header>...</header>
+<main>...</main>
+<footer>...</footer>
+```
+如果 $attrs 被显式绑定，则不会有警告：
+
+```vue
+<header>...</header>
+<main v-bind="$attrs">...</main>
+<footer>...</footer>
+```
+
+## ref
+
+在 `uni-app js 引擎版`中，非 `Web端` 只能用于获取自定义组件，不能用于获取内置组件实例（如：`view`、`text`）。\
+在 `uni-app x` 中，内置组件会返回组件根节点的引用，自定义组件会返回组件实例。
+
+**注意事项：**
+- 如果多个节点或自定义组件绑定相同 `ref` 属性，将获取到最后一个节点或组件实例的引用。
+- 在 `v-for` 循环时，绑定 `ref` 属性会获取到节点或组件实例的集合。
+- 在 `uni-app x` 中，要访问 `$refs` 中的属性，需要使用索引方式。
+
+示例 [详情](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
+> uni-app x（组合式）
+
+```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>
+```
+
+> uni-app x（选项式）
+
+```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>
+
+```
+
+> uni-app js 引擎版
+
+```vue
+<template>
+	<view>
+		<text ref="textRef">text node</text>
+		<Foo ref="fooRef" />
+	</view>
+</template>
+
+```
+
+## 自定义组件 v-model 绑定复杂表达式 @v-model-complex-expression
+
+自定义组件 `v-model` 绑定复杂表达式时，需要通过 `as` 指定类型(仅App-Android 平台)。
+
+::: preview
+
+> 组合式 API
+```ts
+<template>
+  <input v-model="obj.str as string" />
+</template>
+
+```
+
+> 选项式 API
+```ts
+<template>
+  <input v-model="obj.str as string" />
+</template>
+
+```
+
+## 作用域插槽的类型 @scoped-slot-type
+
+示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/built-in/special-elements/slots/child-options.uvue)
+
+作用域插槽需在组件中指定插槽数据类型
+::: preview https://hellouvue.dcloud.net.cn/#/pages/built-in/special-elements/slots/child-options
+> 组合式 API
+
+```vue
+<template>
+  <view class="container">
+    <view>
+      <slot name="header" msg="Here might be a page title"></slot>
+    </view>
+    <view>
+      <slot msg="A paragraph for the main content."></slot>
+    </view>
+    <view>
+      <slot name="footer" msg="Here's some contact info"></slot>
+    </view>
+  </view>
+</template>
+
+```
+
+> 选项式 API
+
+```vue
+<template>
+  <view class="container">
+    <view>
+      <slot name="header" msg="Here might be a page title"></slot>
+    </view>
+    <view>
+      <slot msg="A paragraph for the main content."></slot>
+    </view>
+    <view>
+      <slot name="footer" msg="Here's some contact info"></slot>
+    </view>
+  </view>
+</template>
+
+```
+
+## 递归组件
+
+实现递归组件时不要使用组件 import 自身的写法，直接在模板内使用组件名即可。
+
+```vue
+
+<template>
+  <view>
+    <text>component-a::{{text}}</text>
+    <component-a v-if="!end" :text="text" :limit="limit-1"></component-a>
+  </view>
+</template>
+
+```