tmui-cli 2.0.6 → 5.3.2

package/data/uni-app-x-docs/uts/buildin-object-api/array.md

@@ -198,34 +198,6 @@ let arr = new Array(10)
 
 <!-- UTSJSON.Array.find.compatibility -->
 
-### find(predicate, thisArg?)
-
-<!-- UTSJSON.Array.find_1.description -->
-
-<!-- UTSJSON.Array.find_1.param -->
-
-<!-- UTSJSON.Array.find_1.returnValue -->
-
-<!-- UTSJSON.Array.find_1.test -->
-
-<!-- UTSJSON.Array.find_1.compatibility -->
-
-<!-- UTSJSON.Array.find_1.tutorial -->
-
-### find(predicate, thisArg?)
-
-<!-- UTSJSON.Array.find_2.description -->
-
-<!-- UTSJSON.Array.find_2.param -->
-
-<!-- UTSJSON.Array.find_2.returnValue -->
-
-<!-- UTSJSON.Array.find_2.test -->
-
-<!-- UTSJSON.Array.find_2.compatibility -->
-
-<!-- UTSJSON.Array.find_2.tutorial -->
-
 ### findIndex(predicate, thisArg?)
 
 <!-- UTSJSON.Array.findIndex.description -->
@@ -238,34 +210,6 @@ let arr = new Array(10)
 
 <!-- UTSJSON.Array.findIndex.compatibility -->
 
-### findIndex(predicate, thisArg?)
-
-<!-- UTSJSON.Array.findIndex_1.description -->
-
-<!-- UTSJSON.Array.findIndex_1.param -->
-
-<!-- UTSJSON.Array.findIndex_1.returnValue -->
-
-<!-- UTSJSON.Array.findIndex_1.test -->
-
-<!-- UTSJSON.Array.findIndex_1.compatibility -->
-
-<!-- UTSJSON.Array.findIndex_1.tutorial -->
-
-### findIndex(predicate, thisArg?)
-
-<!-- UTSJSON.Array.findIndex_2.description -->
-
-<!-- UTSJSON.Array.findIndex_2.param -->
-
-<!-- UTSJSON.Array.findIndex_2.returnValue -->
-
-<!-- UTSJSON.Array.findIndex_2.test -->
-
-<!-- UTSJSON.Array.findIndex_2.compatibility -->
-
-<!-- UTSJSON.Array.findIndex_2.tutorial -->
-
 ### fill(value, start?, end?)
 
 <!-- UTSJSON.Array.fill.description -->
@@ -488,35 +432,6 @@ let arr = new Array(10)
 
 <!-- UTSJSON.Array.every_1.tutorial -->
 
-### every(predicate, thisArg?)
-
-<!-- UTSJSON.Array.every_2.description -->
-
-<!-- UTSJSON.Array.every_2.param -->
-
-<!-- UTSJSON.Array.every_2.returnValue -->
-
-<!-- UTSJSON.Array.every_2.test -->
-
-<!-- UTSJSON.Array.every_2.compatibility -->
-
-<!-- UTSJSON.Array.every_2.tutorial -->
-
-### every(predicate, thisArg?)
-
-<!-- UTSJSON.Array.every_3.description -->
-
-<!-- UTSJSON.Array.every_3.param -->
-
-<!-- UTSJSON.Array.every_3.returnValue -->
-
-<!-- UTSJSON.Array.every_3.test -->
-
-<!-- UTSJSON.Array.every_3.compatibility -->
-
-<!-- UTSJSON.Array.every_3.tutorial -->
-
-
 ### some(predicate, thisArg?)
 
 <!-- UTSJSON.Array.some.description -->
@@ -529,34 +444,6 @@ let arr = new Array(10)
 
 <!-- UTSJSON.Array.some.compatibility -->
 
-### some(predicate, thisArg?)
-
-<!-- UTSJSON.Array.some_1.description -->
-
-<!-- UTSJSON.Array.some_1.param -->
-
-<!-- UTSJSON.Array.some_1.returnValue -->
-
-<!-- UTSJSON.Array.some_1.test -->
-
-<!-- UTSJSON.Array.some_1.compatibility -->
-
-<!-- UTSJSON.Array.some_1.tutorial -->
-
-### some(predicate, thisArg?)
-
-<!-- UTSJSON.Array.some_2.description -->
-
-<!-- UTSJSON.Array.some_2.param -->
-
-<!-- UTSJSON.Array.some_2.returnValue -->
-
-<!-- UTSJSON.Array.some_2.test -->
-
-<!-- UTSJSON.Array.some_2.compatibility -->
-
-<!-- UTSJSON.Array.some_2.tutorial -->
-
 ### forEach(callbackfn, thisArg?)
 
 <!-- UTSJSON.Array.forEach.description -->
@@ -574,34 +461,6 @@ let arr = new Array(10)
 
 <!-- UTSJSON.Array.forEach.compatibility -->
 
-### forEach(callbackfn, thisArg?)
-
-<!-- UTSJSON.Array.forEach_1.description -->
-
-<!-- UTSJSON.Array.forEach_1.param -->
-
-<!-- UTSJSON.Array.forEach_1.returnValue -->
-
-<!-- UTSJSON.Array.forEach_1.test -->
-
-<!-- UTSJSON.Array.forEach_1.compatibility -->
-
-<!-- UTSJSON.Array.forEach_1.tutorial -->
-
-### forEach(callbackfn, thisArg?)
-
-<!-- UTSJSON.Array.forEach_2.description -->
-
-<!-- UTSJSON.Array.forEach_2.param -->
-
-<!-- UTSJSON.Array.forEach_2.returnValue -->
-
-<!-- UTSJSON.Array.forEach_2.test -->
-
-<!-- UTSJSON.Array.forEach_2.compatibility -->
-
-<!-- UTSJSON.Array.forEach_2.tutorial -->
-
 ### map(callbackfn, thisArg?)
 
 <!-- UTSJSON.Array.map.description -->
@@ -614,34 +473,6 @@ let arr = new Array(10)
 
 <!-- UTSJSON.Array.map.compatibility -->
 
-### map(callbackfn, thisArg?)
-
-<!-- UTSJSON.Array.map_1.description -->
-
-<!-- UTSJSON.Array.map_1.param -->
-
-<!-- UTSJSON.Array.map_1.returnValue -->
-
-<!-- UTSJSON.Array.map_1.test -->
-
-<!-- UTSJSON.Array.map_1.compatibility -->
-
-<!-- UTSJSON.Array.map_1.tutorial -->
-
-### map(callbackfn, thisArg?)
-
-<!-- UTSJSON.Array.map_2.description -->
-
-<!-- UTSJSON.Array.map_2.param -->
-
-<!-- UTSJSON.Array.map_2.returnValue -->
-
-<!-- UTSJSON.Array.map_2.test -->
-
-<!-- UTSJSON.Array.map_2.compatibility -->
-
-<!-- UTSJSON.Array.map_2.tutorial -->
-
 ### filter(predicate, thisArg?)
 
 <!-- UTSJSON.Array.filter.description -->
@@ -668,34 +499,6 @@ let arr = new Array(10)
 
 <!-- UTSJSON.Array.filter_1.tutorial -->
 
-### filter(predicate, thisArg?)
-
-<!-- UTSJSON.Array.filter_2.description -->
-
-<!-- UTSJSON.Array.filter_2.param -->
-
-<!-- UTSJSON.Array.filter_2.returnValue -->
-
-<!-- UTSJSON.Array.filter_2.test -->
-
-<!-- UTSJSON.Array.filter_2.compatibility -->
-
-<!-- UTSJSON.Array.filter_2.tutorial -->
-
-### filter(predicate, thisArg?)
-
-<!-- UTSJSON.Array.filter_3.description -->
-
-<!-- UTSJSON.Array.filter_3.param -->
-
-<!-- UTSJSON.Array.filter_3.returnValue -->
-
-<!-- UTSJSON.Array.filter_3.test -->
-
-<!-- UTSJSON.Array.filter_3.compatibility -->
-
-<!-- UTSJSON.Array.filter_3.tutorial -->
-
 ### reduce(callbackfn)
 
 <!-- UTSJSON.Array.reduce.description -->
@@ -708,7 +511,6 @@ let arr = new Array(10)
 
 <!-- UTSJSON.Array.reduce.compatibility -->
 
-
 ### reduce(callbackfn)
 
 <!-- UTSJSON.Array.reduce_1.description -->
@@ -737,48 +539,6 @@ let arr = new Array(10)
 
 <!-- UTSJSON.Array.reduce_2.tutorial -->
 
-### reduce(callbackfn, initialValue)
-
-<!-- UTSJSON.Array.reduce_3.description -->
-
-<!-- UTSJSON.Array.reduce_3.param -->
-
-<!-- UTSJSON.Array.reduce_3.returnValue -->
-
-<!-- UTSJSON.Array.reduce_3.test -->
-
-<!-- UTSJSON.Array.reduce_3.compatibility -->
-
-<!-- UTSJSON.Array.reduce_3.tutorial -->
-
-### reduce(callbackfn, initialValue)
-
-<!-- UTSJSON.Array.reduce_4.description -->
-
-<!-- UTSJSON.Array.reduce_4.param -->
-
-<!-- UTSJSON.Array.reduce_4.returnValue -->
-
-<!-- UTSJSON.Array.reduce_4.test -->
-
-<!-- UTSJSON.Array.reduce_4.compatibility -->
-
-<!-- UTSJSON.Array.reduce_4.tutorial -->
-
-### reduce(callbackfn, initialValue)
-
-<!-- UTSJSON.Array.reduce_5.description -->
-
-<!-- UTSJSON.Array.reduce_5.param -->
-
-<!-- UTSJSON.Array.reduce_5.returnValue -->
-
-<!-- UTSJSON.Array.reduce_5.test -->
-
-<!-- UTSJSON.Array.reduce_5.compatibility -->
-
-<!-- UTSJSON.Array.reduce_5.tutorial -->
-
 ### reduceRight(callbackfn)
 
 <!-- UTSJSON.Array.reduceRight.description -->
@@ -819,62 +579,6 @@ let arr = new Array(10)
 
 <!-- UTSJSON.Array.reduceRight_2.tutorial -->
 
-### reduceRight(callbackfn, initialValue)
-
-<!-- UTSJSON.Array.reduceRight_3.description -->
-
-<!-- UTSJSON.Array.reduceRight_3.param -->
-
-<!-- UTSJSON.Array.reduceRight_3.returnValue -->
-
-<!-- UTSJSON.Array.reduceRight_3.test -->
-
-<!-- UTSJSON.Array.reduceRight_3.compatibility -->
-
-<!-- UTSJSON.Array.reduceRight_3.tutorial -->
-
-### reduceRight(callbackfn, initialValue)
-
-<!-- UTSJSON.Array.reduceRight_4.description -->
-
-<!-- UTSJSON.Array.reduceRight_4.param -->
-
-<!-- UTSJSON.Array.reduceRight_4.returnValue -->
-
-<!-- UTSJSON.Array.reduceRight_4.test -->
-
-<!-- UTSJSON.Array.reduceRight_4.compatibility -->
-
-<!-- UTSJSON.Array.reduceRight_4.tutorial -->
-
-### reduceRight(callbackfn, initialValue)
-
-<!-- UTSJSON.Array.reduceRight_5.description -->
-
-<!-- UTSJSON.Array.reduceRight_5.param -->
-
-<!-- UTSJSON.Array.reduceRight_5.returnValue -->
-
-<!-- UTSJSON.Array.reduceRight_5.test -->
-
-<!-- UTSJSON.Array.reduceRight_5.compatibility -->
-
-<!-- UTSJSON.Array.reduceRight_5.tutorial -->
-
-### reduceRight(callbackfn, initialValue)
-
-<!-- UTSJSON.Array.reduceRight_6.description -->
-
-<!-- UTSJSON.Array.reduceRight_6.param -->
-
-<!-- UTSJSON.Array.reduceRight_6.returnValue -->
-
-<!-- UTSJSON.Array.reduceRight_6.test -->
-
-<!-- UTSJSON.Array.reduceRight_6.compatibility -->
-
-<!-- UTSJSON.Array.reduceRight_6.tutorial -->
-
 ### includes(searchElement, fromIndex?)
 
 <!-- UTSJSON.Array.includes.description -->

package/data/uni-app-x-docs/uts/uts2js.md

@@ -0,0 +1,34 @@
+# uts2js
+
+uts在编译运行目标为js时，会通过uts2js来编译。
+
+## uts2js的应用范围
+- web、小程序
+- ios、鸿蒙的非uts插件
+- android蒸汽模式的非uts插件
+
+蒸汽模式支持独立的区分uts、ts、js，但需要指定版本以上：
+- 在HBuilder 5.31 以前，非uts插件，均执行uts2js。
+- 从HBuilder 5.31+，支持独立设置js、ts、uts。独立设置的js将不编译；ts将执行普通的ts编译；主动设置为uts，继续执行uts2js。
+
+从HBuilder 5.31+起，uts2js，主要用于历史代码兼容。新项目推荐使用ts。
+
+## uts2js编译器的功能和特点
+由于运行在js运行时，所以uts2js中，不要求强类型，大多数情况与ts是相同的。
+
+如果开发者写了js，可能会在编译器或IDE静态校验时提示类型错误，但不影响实际运行时表现。
+
+1. 为了拉齐uts编译原生强类型的跨端表现，uts编译后的js，与标准js有略微差异：
+	+ 支持UTSJSONObject。尤其是UTSJSONObject有几个方法，在标准js object中不存在，包括`parse`,`get`,`set`,`getAny`,`getBoolean`,`getNumber`,`getString`,`getArray`,`getJSON`,`toMap`。
+	+ type没有擦除而是编译成了class。这也是为了保持和uts2kt、uts2swift一致。
+	+ 把部分js内置API返回值从undefined改为null。因为kt、swift等强类型语言没有undefined概念，为拉齐而反向修改了js端逻辑。以下js内置API在uts2js编译后，会将返回值从undefined改为null：
+		* Array.prototype.pop
+		* Array.prototype.shift
+		* Array.prototype.find
+		* Array.prototype.findLast
+		* Array.prototype.at
+		* Map.prototype.get
+		* WeakMap.prototype.get
+		* String.prototype.at
+		* String.prototype.codePointAt
+2. 编译速度慢于普通ts编译器。

package/data/uni-app-x-docs/vue/README.md

@@ -153,12 +153,12 @@ VDOM模式lang的值域只有uts。Android平台按uts2kt执行，此时要求
 
 如果页面script未设置，则根据全局配置 manifest.json 中 蒸汽模式下 script lang 的默认值来执行。如果未改动manifest默认值，则默认为`ts`。
 
-注意：默认值是 `ts`。不是uni-app默认的`js`，也不是uni-app x VDOM模式默认的`uts`。
+注意：**默认值是 `ts`**。不是uni-app默认的`js`，也不是uni-app x VDOM模式默认的`uts`。
 默认值之所以调整，一是为了方便AI，二是为了提升编译速度。
 
 此时uts、ts、js三者将有不同的编译逻辑，见下。
 
-蒸汽模式下，使用uts、ts，实际也需要经过uts2js、ts2js的编译流程。uts、ts和js的区别：
+蒸汽模式下，使用uts、ts，实际也需要经过[uts2js](../uts/uts2js.md)、ts2js的编译流程。uts、ts和js的区别：
 - js：没有额外的编译流程。编译速度快。
 - ts：需执行ts2js的编译器，类型仅对开发阶段生效，实际运行时会擦除类型。编译速度中。
 - uts：需执行uts2js编译器。编译速度慢。为了拉齐uts编译原生强类型的跨端表现，运行时与标准js有略微差异：
@@ -166,11 +166,32 @@ VDOM模式lang的值域只有uts。Android平台按uts2kt执行，此时要求
 	+ type没有擦除而是编译成了class
 	+ 把部分js内置API返回值从undefined改为null
 
-	不使用uts时，将无法再使用UTSJSONObject，UTSJSONObject变成了普通的object，type会被擦除，运行时内置API被改成`null`的会还原为`undefined`。
+	不使用uts时，将无法再使用UTSJSONObject，UTSJSONObject变成了普通的object，type会被擦除，运行时内置API被改成`null`的会还原为`undefined`。。
 	
-	如果你之前使用过UTSJSONObject的专有方法，比如getString、getNumber、getArray等方法，在5.31+运行，由于默认按ts编译，会造成控制台报警找不到相关类型和方法，此时有如下处理方案：
+	如果你之前使用过UTSJSONObject的专有方法，比如getString、getNumber、getArray等方法，在5.31+运行，由于默认按ts编译，会造成控制台报警找不到相关类型和方法：
+	`getString is not a function`、`getNumber is not a function`、`getArray is not a function`。UTSJSONObject实例方法：`parse`,`get`,`set`,`getAny`,`getBoolean`,`getNumber`,`getString`,`getArray`,`getJSON`,`toMap`。
+	
+	此时有如下处理方案：
 	1. 把相关页面的script的lang，显式指定为uts。
-	2. 把UTSJSONObject的写法，改成普通object写法。
+	2. 把UTSJSONObject的写法，改成普通object写法，即`.`点运算符。（推荐，可以获得更快的编译速度和更好的AI支持度）
+
+	`JSON.parseArray`、`JSON.parseObject`在非uts环境下也无法使用，使用`JSON.parse`方法代替即可。
+
+	undefined转null的js内置API：
+	
+		```js
+		Array.prototype.pop
+		Array.prototype.shift
+		Array.prototype.find
+		Array.prototype.findLast
+		Array.prototype.at
+		Map.prototype.get
+		WeakMap.prototype.get
+		String.prototype.at
+		String.prototype.codePointAt
+		```
+
+5.31+，不同后缀的文件，比如`*.js`、`*.ts`、`*.uts`，互相import的时，都按各自独立的编译器编译。
 
 ### setup
 setup属性声明代表script里的代码为组合式写法，如果没有setup属性则为选项式写法。蒸汽模式只支持setup。
@@ -382,7 +403,7 @@ style通过lang属性，可以支持less、scss、stylus等css预处理语言。
   </view>
 </template>
 
-<script setup lang="uts">
+<script setup lang="ts">
   const styleMap = ref(new Map<string, string>([['border', '2px solid red'], ['background-color', 'green']]))
   const classMap = ref(new Map<string, boolean>([['w-100', true], ['h-100', true], ['rounded', false]]))
 </script>
@@ -558,7 +579,10 @@ const theme = {
 9. 在组合式 API 下，子组件方法不会自动暴露给父组件，只有通过 `defineExpose` 显式暴露的方法，父组件才能通过 ref 调用，避免父组件无法访问子组件方法。
 10. 在测试例页面用到页面中的数据或方法时，必须通过 `defineExpose` 显式暴露数据和方法，避免测试无法访问。
 11. 在页面生命周期中，`onPullDownRefresh` 应作为页面生命周期函数处理，而不是写成普通方法。
-12. 检查控制台的编译报错，如果有报错自行修复，并再次检查编译报错，直到无报错编译通过。
+12. 组合式写法不支持 `mixins` 选项：
+- 选项中若使用了 `mixins: [...]`，必须去掉，把 mixin 提供的 data、computed、watch、methods 和生命周期合并进当前组件的组合式代码，或抽成普通 composable 函数；
+- 若使用了 `uniCloud.mixinDatacom`，改用其对应的组合式 API：用 `const props = defineProps({ ...uniCloud.datacomProps })` 展开内置 props，再 `const datacom = uniCloud.useDatacom(props)` 创建实例并调用 `datacom.easyGet({})`，模板改用 `datacom.resData`/`datacom.loading`/`datacom.errorMessage`（不用 `.value`），不要手动拷贝其内部实现；注意：`uniCloud.useDatacom` 从 HBuilderX 5.32 版本起才支持，且仅在项目已关联 uniCloud 服务空间时可用，使用前需先关联服务空间。
+13. 检查控制台的编译报错，如果有报错自行修复，并再次检查编译报错，直到无报错编译通过。
 
 ## 利用 AI 适配蒸汽模式@ai-vapor
 
@@ -575,7 +599,9 @@ const theme = {
 7. 选项式 API 中的 `beforeUnmount`、`mounted`、`unmounted`，改为组合式 API 时分别使用 `onBeforeUnmount`、`onMounted`、`onUnmounted`；`created` 的逻辑放到 `<script setup>` 顶层执行。
 8. 页面生命周期 `onPullDownRefresh` 不要当作普通方法处理；如果蒸汽模式当前平台不支持页面下拉刷新，改为使用页面内 `scroll-view` 等可兼容方案，并保持交互等价。
 9. 子组件方法、页面测试入口或外部需要访问的数据和方法，必须通过 `defineExpose` 显式暴露，避免父组件、测试用例或外部调用失效。
-10. 不要继续使用 `mixin`，将其中的数据、计算逻辑、方法和生命周期合并到当前组件的组合式代码中，或抽成普通 composable 函数。
+10. 不要继续使用 `mixin`：
+- 普通 `mixins: [...]` 必须去掉，把 mixin 提供的 data、computed、watch、methods 和生命周期合并进当前组件的组合式代码，或抽成普通 composable 函数；
+- 若使用了 `uniCloud.mixinDatacom`，改用其对应的组合式 API：用 `const props = defineProps({ ...uniCloud.datacomProps })` 展开内置 props，再 `const datacom = uniCloud.useDatacom(props)` 创建实例并调用 `datacom.easyGet({})`，模板改用 `datacom.resData`/`datacom.loading`/`datacom.errorMessage`（不用 `.value`），不要手动拷贝其内部实现；注意：`uniCloud.useDatacom` 从 HBuilderX 5.32 版本起才支持，且仅在项目已关联 uniCloud 服务空间时可用，使用前需先关联服务空间。
 11. 检查模板中蒸汽模式不支持或行为变化的写法，按项目现有规范改成兼容写法，保持页面结构和交互不变。
 12. 检查 `scroll-view`、`swiper` 等组件的布尔属性；不要依赖旧默认值，按页面实际需要显式补齐 `true` 或 `false`，避免行为变化。
 13. 检查 `list-view` / `list-item`：用于复用的 `list-item` 循环必须有稳定 `:key`；`list-view` 和需要复用的 `list-item` 应在同一个 uvue 文件内；`list-item` 内文本必须使用 `text` 包裹；不要依赖横向滚动、`margin` 等不兼容能力。

package/data/uni-app-x-docs/vue/built-in.md

@@ -33,7 +33,7 @@
 更新元素的内容，并且不会被解析。
 
 ::: warning 注意
-在 `App-android` 平台，`v-html` 指令通过编译为 [rich-text](../component/rich-text.md) 组件实现。因此，`v-html` 指令的内容必须是 `rich-text` 支持的格式。\
+在 `App-android VDOM 模式`，`v-html` 指令通过编译为 [rich-text](../component/rich-text.md) 组件实现。因此，`v-html` 指令的内容必须是 `rich-text` 支持的格式。\
 同时，受限于 `rich-text` 组件不支持 `class` 样式，`v-html` 指令中同样不支持 `class` 样式。\
 绑定 `v-html` 的标签内的内容会被忽略，`v-html` 指令的内容会编译为 `rich-text` 组件渲染为该标签的子节点。
 :::
@@ -99,7 +99,7 @@
 
 基于原始数据多次渲染元素或模板块。
 
-- 期望的绑定值类型：`Array | UTSJSONObject | number | string | Iterable`
+- 期望的绑定值类型：`Array | Object/UTSJSONObject | number | string | Iterable`
 
 - 详细信息
 
@@ -318,7 +318,8 @@
   当组件的 `selected` 状态改变，默认会重新创建大量的 vnode，尽管绝大部分都跟之前是一模一样的。`v-memo` 用在这里本质上是在说“只有当该项的被选中状态改变时才需要更新”。这使得每个选中状态没有变的项能完全重用之前的 vnode 并跳过差异比较。注意这里 memo 依赖数组中并不需要包含 `item.id`，因为 Vue 也会根据 item 的 `:key` 进行判断。
 
   ::: warning 警告
-  当搭配 `v-for` 使用 `v-memo`，确保两者都绑定在同一个元素上。`v-memo` 不能用在 `v-for` 内部。
+  - 当搭配 `v-for` 使用 `v-memo`，确保两者都绑定在同一个元素上。`v-memo` 不能用在 `v-for` 内部。
+  - `v-memo` 的作用是在 VDOM 模式下缓存虚拟 DOM 子树，在依赖未变化时跳过 vnode 创建和虚拟 DOM diff。蒸汽模式去除了虚拟 DOM，不会创建 vnode，也不需要进行虚拟 DOM diff，因此不支持且不需要使用 `v-memo`。
   :::
 
   `v-memo` 也能被用于在一些默认优化失败的边际情况下，手动避免子组件出现不需要的更新。但是一样的，开发者需要负责指定正确的依赖数组以免跳过必要的更新。
@@ -346,10 +347,6 @@
 - [监听页面生命周期](../component/README.md#监听页面生命周期)
 - [vue 与 uvue 不同文件后缀的优先级](../component/README.md#priority)
 
-::: warning 注意
-- App 端，如需页面级滚动，根节点必须是 `scroll-view` 标签。
-:::
-
 ### \<KeepAlive> @keep-alive
 
 <!-- VUEJSON.keep-alive.description -->
@@ -625,14 +622,10 @@
   export default {
     components: { Foo },
     mounted() {
-      // #ifdef APP
-      (this.$refs['input'] as UniInputElement).setAttribute('value', 'input value');
-      // #endif
-      // #ifdef WEB
-      (this.$refs['input'] as UniInputElement).value = 'input value';
-      // #endif
+      // 通过元素引用修改样式
+      (this.$refs['input'] as UniElement).style.setProperty('background-color', '#f0f0f0');
       // 当在 v-for 中使用模板引用时，this.$refs 中对应的值是一个数组
-      (this.$refs['textItems'] as UniTextElement[]).forEach((item : UniTextElement) => {
+      (this.$refs['textItems'] as UniElement[]).forEach((item : UniElement) => {
         item.style.setProperty('color', 'red')
       });
       // 调用自定义组件方法
@@ -645,8 +638,8 @@
 
 <template>
   <view>
-    <input ref="input" />
-    <text v-for="item in 3" ref="textItems" :key="item">{{
+    <input id="input" ref="input" />
+    <text v-for="item in 3" :id="'text-item-' + item" ref="textItems" :key="item">{{
       item
     }}</text>
     <Foo ref="foo" />
@@ -655,39 +648,67 @@
 ```
 `this.$refs` 也是非响应式的，因此你不应该尝试在模板中使用它来进行数据绑定。
 
+对应的 `Foo` 组件（选项式 API）：
+
+```vue
+<!-- components/Foo.uvue -->
+<template>
+  <view>
+    <text>title: {{title}}</text>
+  </view>
+</template>
+
+<script lang="uts">
+  export default {
+    name: "Foo",
+    data() {
+      return {
+        title: 'default title'
+      }
+    },
+    methods: {
+      updateTitle() {
+        this.title = 'new title'
+      }
+    }
+  }
+</script>
+```
+
 使用组合式 API，引用将存储在与名字匹配的 ref 里：
 ```vue
-<script setup lang="uts">
+<script setup lang="ts">
   import Foo from '@/components/Foo.uvue'
 
   // 声明一个 ref 来存放该元素的引用, 必须和模板里的 ref 同名
+  // #ifndef MP
   const input = ref<UniInputElement | null>(null)
+  // #endif
+  // #ifdef MP
+  const input = ref<UniElement | null>(null)
+  // #endif
   // 当在 v-for 中使用模板引用时，对应的 ref 中包含的值是一个数组
-  const textItems = ref<UniTextElement[] | null>(null)
+  const textItems = ref<UniElement[] | null>(null)
   // 声明一个 ref 来存放自定义组件的引用, 必须和模板里的 ref 同名
   const foo = ref<ComponentPublicInstance | null>(null)
 
   onMounted(() => {
-    // #ifdef APP
-    input.value!.setAttribute('value', 'input value')
-    // #endif
-    // #ifdef WEB
-    input.value!.value = 'input value'
-    // #endif
-    textItems.value!.forEach((item: UniTextElement) => {
+    // 通过元素引用修改样式
+    input.value!.style.setProperty('background-color', '#f0f0f0')
+    textItems.value!.forEach((item: UniElement) => {
       item.style.setProperty('color', 'red')
     })
     // 调用自定义组件方法
     foo.value!.$callMethod('updateTitle')
-    // 获取自定义组件响应式数据
-    console.log(foo.value!.$data['title']) // new title
+    // 通过公开方法获取自定义组件响应式数据
+    console.log(foo.value!.$callMethod('getTitle')) // new title
   })
 </script>
 
 <template>
   <view>
-    <input ref="input" />
-    <text v-for="item in 3" ref="textItems" :key="item">{{
+    <input id="input" ref="input" />
+    <text v-for="item in 3" :id="'text-item-' + item" ref="textItems" :key="item">{{
       item
     }}</text>
     <Foo ref="foo" />
@@ -695,6 +716,8 @@
 </template>
 ```
 
+对应的 `Foo` 组件（组合式 API），通过 `defineExpose` 暴露供父组件调用的方法：
+
 ```vue
 <!-- components/Foo.uvue -->
 <template>
@@ -703,27 +726,28 @@
   </view>
 </template>
 
-<script>
-  export default {
-    name:"Foo",
-    data() {
-      return {
-        title: 'default title'
-      }
-    },
-    methods: {
-      updateTitle(){
-        this.title = 'new title'
-      }
-    }
+<script setup lang="ts">
+  const title = ref('default title')
+
+  const updateTitle = () => {
+    title.value = 'new title'
+  }
+
+  const getTitle = (): string => {
+    return title.value
   }
+
+  defineExpose({
+    updateTitle,
+    getTitle
+  })
 </script>
 ```
 
 #### 获取内置组件与自定义组件的区别
-- 使用 `ref` 获取内置组件实例时会获取到对应的 `Element`，例如上述代码示例中，`input` 组件获取到的是 `UniInputElement`, `text` 组件获取到的是 `UniTextElement`，可以调用 `Element` 的方法和属性。
+- App、Web 使用 `ref` 获取内置组件实例时会获取到对应的 `Element`，例如上述代码示例中，`input` 组件获取到的是 `UniInputElement`, `text` 组件获取到的是 `UniTextElement`，可以调用 `Element` 的方法和属性。
 - 使用 `ref` 获取自定义组件实例时会获取到对应的 vue 组件实例，例如上述代码示例中，`Foo` 组件获取到的是 `ComponentPublicInstance`，可以获取自定义组件的属性或调用方法，[详情](./component.md#page-call-component-method)。
-- 小程序平台如果期望使用`ref`获取到`UniElement`需要在此`UniElement`上设置id，此外小程序平台的`UniElement`使用是受限的，详情参考：[UniElement](../mp/README.md#unielement)
+- 小程序平台使用 `ref` 获取内置组件引用时，需要为节点设置 `id`，`v-for` 中各节点的 `id` 应保持唯一。小程序仅支持 `UniElement`，不支持 `UniInputElement`、`UniTextElement` 等类型，且可用的属性和方法受限，详情参考：[UniElement](../mp/README.md#unielement)。
 
 
 ### is