tmui-cli 2.0.3 → 2.0.4

package/data/uniappx/vue/README.md

@@ -0,0 +1,384 @@
+# uvue概述
+
+[vue.js](https://vuejs.org/) 是流行的js框架，它提供了：
+1. 简易的模板式写法。降低使用门槛，UI和逻辑分离更清晰。
+2. 数据双向绑定。减少手写dom，diff机制提高性能。
+3. 组件机制。封装UI和逻辑，让轮子更加丰富。
+
+但 vue.js 并不支持web之外的其他平台，也不支持uts。
+
+uni-app x 为vue开发者提供了跨平台的解决方案。
+
+uni-app x 中，web平台内置了vue.js，其他平台为 DCloud 参考vue规范提供的兼容实现。
+
+在 uni-app x 中，页面和组件的文件后缀名均为 `*.uvue`。u 即 uni 的意思。
+
+页面与组件均符合vue的单文件组件规范，只不过页面需要在pages.json中注册且多了一批生命周期和API。
+
+在非web平台，uvue 尽可能拉齐了vue.js的功能，但仍有些不常用的功能暂未提供，需注意查看相关文档的兼容性。同时 uvue 也新增了 [easycom](./component.md#easycom) 等技术，简化组件的使用。
+
+hello uvue 是非常重要的vue示例，演示了各种vue功能的应用。
+
+- 插件地址：[https://ext.dcloud.net.cn/plugin?id=15021](https://ext.dcloud.net.cn/plugin?id=15021)
+- 源码地址：[https://gitcode.com/dcloud/hello-uvue](https://gitcode.com/dcloud/hello-uvue)，注意有master和alpha分支，对应HBuilderX最新的正式版和alpha版。
+
+# 版本对应@ver
+HBuilderX/uni-app x，会跟踪vue版本的升级，版本映射表如下
+
+|HBuilderX	|vue版本	|
+|--	|--	|
+|4.14	|3.4	|
+
+# 页面/组件内容构成@sfc
+
+一个 uvue 页面/组件，符合vue单文件组件规范（SFC），有3个根节点标签：
+
+1. 模板组件区 `<template>`
+2. 脚本区 `
+
+<style>
+	.content {
+		width: 750rpx;
+	}
+</style>
+```
+
+可以看出整体和html还是很接近的。但响应式变量和绑定机制，可以免去写大量的dom操作代码，让开发更高效轻松。
+
+基于选项式的示例，下面章节会提供。
+
+## template
+
+template中文名为`模板`，它类似html的标签。但有2个区别：
+
+1. html中 `script` 和 `style` 是 html 的二级节点。但在 uvue 文件中，`template`、`script`、`style` 这3个是平级关系。
+2. html 中写的是 web 标签，但 vue 的 `template` 中写的全都是 vue 组件（包括[内置基础组件](../component/README.md)、自定义前端uvue组件、[uts原生插件组件](../plugin/uts-component.md)），每个组件支持属性、事件、vue 指令，还可以绑定 vue 的 data 数据。
+
+组件，即component，是vue中非常重要的概念，或者说现代开发框架都离不开组件概念。
+
+我们知道js逻辑可以封装为函数或类库。而对于页面上可视的元素，则可以将ui、样式、逻辑一起封装为组件。详见[uvue组件规范](./component.md)
+
+在 uni-app x 中， `<view>`是最基本的视图容器组件，`<text>`则是文字组件，`<button>`是按钮组件。这些都是[内置组件](../component/README.md)
+
+一个页面或组件只能有一个template标签，template下面可以有多个二级节点，即多个根组件。如下：
+
+```vue
+<template>
+	<view>
+		<text v-if="titleShow" :style="'color:' + titleColor">{{title}}</text> 
+	</view>
+	<scroll-view >
+		<button @click="buttonClick_changeText" type="primary">修改文字内容</button>
+		<button @click="buttonClick_showHide">点击让文字组件显示或消失</button>
+		<button @click="buttonClick_changeColor">修改文字颜色</button>
+	</scroll-view>
+</template>
+
+```
+
+组件有很多概念，属性、事件、指令。如果还不了解相关概念，请参阅 [组件介绍](../compiler/README.md)
+
+## script
+
+script中编写逻辑代码。
+
+uvue中只能有一个script标签。
+
+script标签的属性如下：
+- lang
+目前不推荐设置此项。
+
+在VDOM模式，lang只能使用uts，Android平台按uts2kt执行。其他平台按uts2js执行。
+
+在蒸汽模式，在HBuilderX 5.27以前，仅支持uts，按uts2js执行，强行设置ts/js会触发bug。从5.27+，lang可以设置ts和js。
+
+设置js、ts、uts，会影响编译速度，编译速度逐渐变慢。ts需要执行ts2js编译，uts还需要再追加uts2js编译。
+
+uts2js，为了拉齐uts编译的强类型整体表现，支持UTSJSONObject、把部分js内置API返回值从undefined改为null、type没有擦除而是编译成了class。不使用uts时，将无法再使用UTSJSONObject，type会被擦除，所有API表现均与标准js一致。
+
+- setup
+setup属性声明代表script里的代码为组合式写法，如果没有setup属性则为选项式写法。
+
+**注意：** 所有 `vue` 公开的 `API` 都是不需要 `import` 的, `uni-app x` 会自动引入。
+
+比如不需要写：
+```js
+import { ref } from 'vue';
+```
+
+### 组合式和选项式的区别
+
+vue最初只有选项式API，从vue3起，新增了组合式API。uni-app x仅支持vue3。
+
+所谓选项式，就是把script的内容在export default {} 中约定不同的对象，在其中通过多个选项的对象来定义data、method和生命周期。
+
+框定好这些后，开发者就在这个框框里分别写自己的业务逻辑。
+
+这种方式易用但不够灵活。所以在vue3以前，部分开发者会认为react更难学、更灵活，所以更高级。
+
+vue3新增的组合式API，是纯编程的，解决了选项式不够灵活的问题。同时维持了易学的特点。让vue变的即容易、又灵活。
+
+在vue3中，组合式和选项式是可以混合使用的。
+1. 可以A页面使用组合式，B页面使用选项式，互相跳转。
+2. 可以页面使用组合式，其中的某些组件使用选项式。反之亦然。
+3. 一个页面或组件内，可以混合使用组合式和选项式
+- 在选项式的script里，可通过setup选项，在其中编写组合式代码
+- 在组合式script里（即script有setup属性），也可以通过defineOptions来定义选项式写法
+
+但注意不支持一个页面/组件有2个script，分别写选项式和组合式。
+
+开发者可以根据自己的喜好选择2种写法，但还有几个差别需要注意：
+1. vue推出了蒸汽模式，该模式抛弃了VNode，让页面加载速度更快。但该模式仅支持组合式。为了更高的性能，推荐使用组合式。
+1. 组合式API的组件，可以监听引用其页面的页面级生命周期。而选项式是不能的。有相关需求的组件，需使用组合式API，或在选项式中使用setup函数。[详见](./component.md#component-page-lifecycle)
+2. 选项式的type类型定义在`export default {}`外，这些都是应用级全局的，略微影响性能。[见下](#export-default-out)
+3. uts插件的兼容模式组件，其中的根index.vue，只支持选项式。兼容模式组件已经不再推荐使用，推荐使用标准模式组件。
+
+一般推荐的建议是：
+1. 如果有历史的选项式代码需要复用，这些选项式代码仍然可以使用。
+2. 如果新写页面和组件，建议直接使用组合式。
+3. 虽然选项式可以用，但强烈推荐通过[uni-agent](https://doc.dcloud.net.cn/uni-app-x/ai/)来转换选项式代码为组合式，可以使用如下提示词：[见下](#ai)
+
+### 组合式API
+组合式 API，也称 Composition API，或 setup函数。
+
+组合式提供了更灵活自由、更简洁的编程方式，通过代码而不是通过规范约定死的选项来定义data、method和生命周期。
+
+如下页面代码的逻辑是：
+
+1. 定义了一个响应式`title`，初始值是"Hello world"。
+2. 在页面中放置了一个button组件，按钮文字区使用`{{}}`模板写法，里面写响应式变量`title`，那么`title`的值就会绑定到按钮的文字区，即按钮的初始文字是"Hello world"
+3. 按钮的点击事件`@click`，指向了一个方法`buttonClick`，点击按钮即触发这个方法的执行
+4. 页面onReady生命周期中打印日志
+
+```vue
+<template>
+	<view>
+		
+		<button @click="buttonClick">{{title}}</button>
+	</view>
+</template>
+
+```
+
+### 选项式API
+选项式 API，也称 Option API，指在script中写`export default {}`，在其中通过多个选项的对象来定义data、method和生命周期。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。
+
+以下代码的逻辑与上一章节组合式API的示例相同，只是写法改成了选项式写法。
+
+```vue
+<template>
+	<view>
+		<button @click="buttonClick">{{title}}</button>
+	</view>
+</template>
+
+```
+
+对比之前组合式的、相同业务逻辑的代码，可以看到两种方式的差异：
+1. 选项式由于有框框的存在，看起来结构清晰些，但代码行数也更长
+2. 组合式更灵活，代码更短。高级开发者也可以自己保证代码结构的清晰整洁。但初学者如果代码写的很长，容易乱糟糟
+
+上述代码比较简单，如果涉及到响应式变量的类型定义，那么会更明显的感受到组合式的灵活和简洁。
+
+#### `export default` 外的代码@export-default-out
+
+选项式主代码在`export default {}`里。但既然有`export default {}`里的代码，那么就有 `export default {}` 外面的代码。
+
+写在外面一般有几种情况：
+
+1. 引入第三方 uts 模块
+2. 引入非 easycom 的组件（一般组件推荐使用[easycom](./component.md#easycom)，无需导入注册）
+3. 定义 type，对 data 进行类型定义
+4. 定义作用域更大的变量
+
+```html
+
+```
+
+开发者应谨慎编写 `export default {}` 外面的代码，这里的代码有2个注意事项：
+
+1. 影响应用性能。不管写在哪个页面，这部分代码都在应用启动时执行，而不是页面加载。如果`export default {}`外的代码写的太复杂，会影响应用启动速度，占用更多内存。
+2. 不跟随组件、页面关闭而回收。在外层的静态变量不会跟随页面关闭而回收。如果必要，你需要手动处理。比如 `unmounted` 或 `onUnload` 生命周期进行处理。
+
+### JSX/TSX
+
+uni-app x 目前不支持使用 JSX/TSX 编写页面和组件，请使用 Vue 的 `template` 模板语法。
+
+在 App 端蒸汽模式下，视图层代码，即 Vue 文件中 `template` 和 `style` 内的代码，会在编译期进行静态分析，并直接编译为高度优化的机器码或字节码，它的运行速度远快于arkts、kotlin及k/n。
+
+JSX/TSX 是编写在 JavaScript/TypeScript 中的表达式语法，目前不支持将 JSX/TSX 编译为与 `template` 相同的高性能机器码或字节码，为了发挥 App 端蒸汽模式的视图层性能优势时，应使用 `template` 和 `style` 编写视图代码。
+
+## style（CSS功能） @css
+
+style的写法与web的css基本相同。但在App端，由于并非webview渲染，支持的css有限。[详见](../css/README.md)
+
+本章节重点讲解uvue下样式的使用注意事项。
+
+一个页面/组件允许有多个style标签。
+
+style通过lang属性，可以支持less、scss、stylus等css预处理语言。
+
+### style 标签 @style
+
+##### 兼容性 
+| Web | 微信小程序 | Android | iOS | HarmonyOS |
+| :- | :- | :- | :- | :- |
+| 4.0 | √ | 3.9 | 4.11 | 4.61 |
+
+##### 属性 
+| 名称 | 类型 | 兼容性 |
+| :- | :- |  :-: |
+| lang | string | Web 4.0 / 微信小程序 √ / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 |
+| 合法值 | 兼容性 |
+| :- |  :-: |
+| scss | Web 4.0 / 微信小程序 √ / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 |
+| less | Web 4.0 / 微信小程序 √ / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 |
+| stylus | Web 4.0 / 微信小程序 √ / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 |
+| scoped | boolean | Web 4.0 / 微信小程序 x / Android x / iOS x / HarmonyOS x（部分支持，见上） |
+| module | Any | Web 4.0 / 微信小程序 x / Android x / iOS x / HarmonyOS x（部分支持，见上） |
+
+##### 参见
+
+### Class 与 Style 绑定 @class-style
+
+- `uni-app x` 支持绑定  `UTSJSONObject` 和 `Map` 类型数据。
+- 在App-Android平台上 `Map` 的性能高于 `UTSJSONObject` 数据类型。从 `uni-app x 4.01` 起，Web平台也支持了 `Map` 类型绑定。
+
+如下示例中，给 view 组件的 style 和 class 分别绑定了两个响应式变量，就可以通过在逻辑代码里修改变量而实现动态修改样式。
+```vue
+<template>
+  <view>
+    <view :style="styleMap" :class="classMap"></view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+  .w-100 {
+    width: 100px;
+  }
+  .h-100 {
+    height: 100px;
+  }
+  .rounded {
+    border-radius: 8px;
+  }
+</style>
+```
+
+- [参见](https://uniapp.dcloud.net.cn/tutorial/vue3-basics.html#class-%E4%B8%8E-style-%E7%BB%91%E5%AE%9A)
+
+### 深度选择器 @scoped
+
+什么是 scoped CSS？
+
+参考 Vue 文档了解 [组件作用域 CSS](https://cn.vuejs.org/api/sfc-css-features.html) 基本用法。
+
+> 处于 `scoped` 样式中的选择器如果想要做更“深度”的选择，也即：影响到子组件，可以使用 `:deep()` / `::v-deep` 方案：
+
+```vue
+<style scoped>
+.a :deep(.b) {
+  /* ... */
+}
+
+.a ::v-deep .b {
+	/* ... */
+}
+</style>
+```
+
+在 uni-app x 项目中，深度选择器 `:deep()` / `::v-deep` 只在 Web 平台生效。
+
+但一般推荐使用[uni-app x样式隔离策略2.0](../css/common/style-isolation.md)，而不是深度选择器。
+
+如果使用样式隔离策略1.0，需注意如下：
+- 在 Web 平台，uni-app x 中 style 会自动添加 `scoped`（因为web端最终是编译成单页应用SPA，需要隔离不同页面间的样式），因此需要使用深度选择器，来影响子组件样式。
+- 微信小程序、App 平台页面可直接影响子组件，添加 scoped、使用深度选择器无意义
+
+HBuilderX 4.71 起，App 端可以使用深度选择器控制台不再告警，视为后代选择器。
+
+### CSS 中的 v-bind() @css-v-bind
+
+|App|Web|
+|:-:|:-:|
+|x  |4.13+  |
+
+[示例](./data-bind.md#v-bind-css-data)
+
+单文件组件的 `<style>` 标签支持使用 `v-bind` CSS 函数将 CSS 的值链接到动态的组件状态：
+
+```vue
+<template>
+  <text class="text">hello</text>
+</template>
+
+<style>
+.text {
+  color: v-bind(color);
+}
+</style>
+```
+
+这个语法同样也适用于 `
+
+<template>
+  <text class="view">hello</text>
+</template>
+
+<style scoped>
+.view {
+  color: v-bind('theme.color');
+}
+</style>
+```
+
+## 利用AI将选项式转换为组合式@ai
+
+推荐使用[uni-agent](https://doc.dcloud.net.cn/uni-app-x/ai/)，可以直接转换选项式代码为组合式代码，并自动监控控制台报错然后自动修复。
+官方的很多页面如hello uni-app x，都是这样转的。
+
+如果您使用其他AI，可以使用下面的提示词：
+
+把本项目下的页面改成组合式写法
+1. 在进行“选项式 API → 组合式 API”改造时，只做语法层面的转换，保证代码不报错，避免引入业务逻辑变更。
+2. 在改造过程中，不要删除或遗漏任何已有代码和注释，确保代码完整性。
+3. 在组合式 API 中，必须保证所有函数和变量在调用前已定义，如顺序不对，要根据依赖关系调整函数定义顺序，避免未定义前调用。
+4. 在组合式 API 中，不需要 import 所有 vue 的 API 和 uni-app-x 的生命周期函数（如 `ref、computed、watch、onLoad、onMounted` 等），uni-app x 会自动引入。
+5. 在选项式 API 中的 `onShow、onHide` 页面生命周期，改为组合式 API 时，分别改成 `onPageShow、onPageHide`。
+6. 在组件生命周期兼容性方面，选项式 API 的 `beforeUnmount、mounted、unmounted`，改为组合式 API 时，分别改成 `onBeforeUnmount、onMounted、onUnmounted`，避免生命周期名称不一致；选项式 API 的 created 改为组合式的 `<script setup>` 顶层代码直接执行。
+7. 在使用 ref 时
+- 如果引用内置组件（例如：scroll-view、swiper、slider等），类型应为：Uni组件名(驼峰)Element，例如 `<slider>` 组件类型为 `UniSliderElement`，声明为 `const sliderRef = ref<UniSliderElement | null>(null)`；避免类型错误，错误示例：swiper上的ref写成了`const swiper = ref<UniElement|null>(null)`。
+- 如果引用内置 DOM 元素（例如：view、text），类型为 `ref<UniElement|null>(null)` 或 `ref<UniElement[]|null>(null)`；
+- 如果引用自定义组件，类型为 `ref<ComponentPublicInstance|null>(null)` 或 `ref<ComponentPublicInstance[]|null>(null)`，避免类型声明错误。
+8. 在组合式 API 中，每个 ref 要单独声明，变量名与模板 ref 保持一致，直接用 `xxx.value` 访问，避免变量名与 import 的组件名重复，否则会报错。
+9. 在组合式 API 下，子组件方法不会自动暴露给父组件，只有通过 `defineExpose` 显式暴露的方法，父组件才能通过 ref 调用，避免父组件无法访问子组件方法。
+10. 在测试例页面用到页面中的数据或方法时，必须通过 `defineExpose` 显式暴露数据和方法，避免测试无法访问。
+11. 在页面生命周期中，`onPullDownRefresh` 应作为页面生命周期函数处理，而不是写成普通方法。
+12. 检查控制台的编译报错，如果有报错自行修复，并再次检查编译报错，直到无报错编译通过。
+
+## 利用 AI 适配蒸汽模式@ai-vapor
+
+下面提示词用于把已有 uni-app x 页面适配到蒸汽模式。
+
+把本项目下的页面适配为可用于蒸汽模式的写法
+
+1. 只做蒸汽模式兼容适配和必要的组合式改造，避免引入业务逻辑变更。
+2. 不要删除或遗漏任何已有代码、注释、测试入口和外部调用链路；确实需要调整时，保持原有功能等价。
+3. 蒸汽模式仅支持组合式 API。如果页面仍使用选项式 API，先转换为 `<script setup>` 组合式写法，再继续处理蒸汽模式兼容。
+4. 在组合式 API 中，保证所有函数和变量在调用前已定义；如定义顺序不合理，按依赖关系调整顺序，避免未定义前调用。
+5. 在组合式 API 中，不需要 import 所有 Vue API 和 uni-app x 生命周期函数，例如 `ref`、`reactive`、`computed`、`watch`、`onLoad`、`onMounted` 等，uni-app x 会自动引入；不要额外引入无必要的 import。
+6. 选项式 API 中的 `onShow`、`onHide` 页面生命周期，改为组合式 API 时分别使用 `onPageShow`、`onPageHide`。
+7. 选项式 API 中的 `beforeUnmount`、`mounted`、`unmounted`，改为组合式 API 时分别使用 `onBeforeUnmount`、`onMounted`、`onUnmounted`；`created` 的逻辑放到 `<script setup>` 顶层执行。
+8. 页面生命周期 `onPullDownRefresh` 不要当作普通方法处理；如果蒸汽模式当前平台不支持页面下拉刷新，改为使用页面内 `scroll-view` 等可兼容方案，并保持交互等价。
+9. 子组件方法、页面测试入口或外部需要访问的数据和方法，必须通过 `defineExpose` 显式暴露，避免父组件、测试用例或外部调用失效。
+10. 不要继续使用 `mixin`，将其中的数据、计算逻辑、方法和生命周期合并到当前组件的组合式代码中，或抽成普通 composable 函数。
+11. 检查模板中蒸汽模式不支持或行为变化的写法，按项目现有规范改成兼容写法，保持页面结构和交互不变。
+12. 检查 `scroll-view`、`swiper` 等组件的布尔属性；不要依赖旧默认值，按页面实际需要显式补齐 `true` 或 `false`，避免行为变化。
+13. 检查 `list-view` / `list-item`：用于复用的 `list-item` 循环必须有稳定 `:key`；`list-view` 和需要复用的 `list-item` 应在同一个 uvue 文件内；`list-item` 内文本必须使用 `text` 包裹；不要依赖横向滚动、`margin` 等不兼容能力。
+14. 检查 `swiper` 相关页面：如依赖内容高度、指示器样式或 `swiper-item` 定位，按蒸汽模式支持的属性和插槽调整，避免显示异常。
+15. 检查 CSS 选择器，避免运行时依赖复杂关系选择器；将 `.parent .child`、深层后代选择器等改为明确的 class 命名，优先使用 BEM 风格表达层级关系。
+16. 可以保留 SCSS 等编译期写法，但最终运行时应落到蒸汽模式支持的简单 class 选择器或分组选择器。
+17. 检查组件样式隔离影响。外部页面或全局样式不要默认假设能影响组件内部同名 class；如组件确实需要受外部样式影响，在 `<script setup>` 中通过 `defineOptions` 设置合适的 `styleIsolation`，并说明原因。
+18. 调整样式时保持视觉效果尽量一致，不要借适配蒸汽模式的机会重构设计或改动无关样式。
+19. 改造后检查控制台编译报错和运行时报错；如果有报错，自行修复并再次检查，直到无报错编译通过。
+20. 适配完成后，列出本次修改点、涉及的蒸汽模式差异，以及仍需人工在真机或目标平台确认的行为。

package/data/uniappx/vue/_sidebar.md

@@ -0,0 +1,10 @@
+- [概述](./README.md)
+- [数据绑定模型](./data-bind.md)
+- [组件模型](./component.md)
+- [修饰符](./modifier.md)
+- [全局 API](./global-api.md)
+- [组合式 API](./composition-api.md)
+- [选项式 API](./options-api.md)
+- [内置指令/组件/元素/属性](./built-in.md)
+- [进阶 API](./advanced-api.md)
+- [vue 生态](./others.md)

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

@@ -0,0 +1,253 @@
+# 进阶 API
+
+## 渲染函数
+
+|  | Web | 微信小程序 | Android(VDOM) | Android(Vapor) | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) |
+| :- | :- | :- | :- | :- | :- | :- | :- | :- |
+| h() | 4.0 | x | 3.99 | x | 4.11 | x | 4.61 | x |
+| mergeProps() | 4.0 | x | 4.0 | x | 4.11 | x | 4.61 | x |
+| cloneVNode() | 4.0 | x | 4.0 | x | x | x | x | x |
+| isVNode() | 4.0 | x | √ | x | 4.11 | x | 4.61 | x |
+| resolveComponent() | 4.0 | x | √ | x | 4.11 | x | 4.61 | x |
+| withDirectives() | 4.0 | 4.41 | x | x | 4.11 | x | 4.61 | x |
+| withModifiers() | 4.0 | x | √ | x | 4.11 | x | 4.61 | x |
+
+### 示例代码 @example
+
+#### h()
+
+创建虚拟 DOM 节点 (vnode)。
+
+- 详细信息
+
+  第一个参数既可以是一个字符串 (用于原生元素) 也可以是一个 Vue 组件定义。第二个参数是要传递的 prop，第三个参数是子节点。
+
+  当创建一个组件的 vnode 时，子节点必须以插槽函数进行传递。如果组件只有默认槽，可以使用单个插槽函数进行传递。否则，必须以插槽函数的对象形式来传递。
+
+  为了方便阅读，当子节点不是插槽对象时，可以省略 prop 参数。
+
+- 示例 [详情](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
+
+> 组合式 API
+```vue
+
+<template><render /></template>
+
+<style>
+.btn {
+  color: red;
+}
+</style>
+
+```
+
+> 选项式 API
+```vue
+
+
+<style>
+.btn {
+  color: red;
+}
+</style>
+```
+
+#### mergeProps()
+
+合并多个 props 对象，用于处理含有特定的 props 参数的情况。
+
+- 详细信息
+
+  mergeProps() 支持以下特定 props 参数的处理，将它们合并成一个对象。
+
+  - class
+  - style
+  - onXxx 事件监听器——多个同名的事件监听器将被合并到一个数组。
+  如果你不需要合并行为而是简单覆盖，可以使用原生 object spread 语法来代替。
+
+- 示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/render-function/mergeProps/mergeProps-options.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/render-function/mergeProps/mergeProps-options
+
+> 组合式 API
+```vue
+<template>
+  <view class="page">
+    <view class="mb-10 flex flex-row justify-between">
+      <text>merged class</text>
+      <text id="merged-class">{{mergedProps['class']}}</text>
+    </view>
+    <button class="mb-10" id="trigger-merged-click" @click="triggerMergedClick">trigger merged onClick</button>
+    <view>
+      <text class="mb-10">prop function result list</text>
+      <text class="click-res" v-for="(item, index) in propFnResList" :key="index">{{item}}</text>
+    </view>
+  </view>
+</template>
+
+
+```
+
+> 选项式 API
+```vue
+<template>
+  <view class="page">
+    <view class="mb-10 flex flex-row justify-between">
+      <text>merged class</text>
+      <text id="merged-class">{{mergedProps['class']}}</text>
+    </view>
+    <button class="mb-10" id="trigger-merged-click" @click="triggerMergedClick">trigger merged onClick</button>
+    <view>
+      <text class="mb-10">prop function result list</text>
+      <text class="click-res" v-for="(item, index) in propFnResList" :key="index">{{item}}</text>
+    </view>
+  </view>
+</template>
+
+
+```
+
+#### cloneVNode()
+
+克隆一个 vnode。
+
+- 详细信息
+
+  返回一个克隆的 vnode，可在原有基础上添加一些额外的 prop。
+
+  Vnode 被认为是一旦创建就不能修改的，你不应该修改已创建的 vnode 的 prop，而应该附带不同的/额外的 prop 来克隆它。
+
+  Vnode 具有特殊的内部属性，因此克隆它并不像 object spread 一样简单。cloneVNode() 处理了大部分这样的内部逻辑。
+
+- 示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/render-function/cloneVNode/cloneVNode-options.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/render-function/cloneVNode/cloneVNode-options
+
+> 组合式 API
+```vue
+
+
+<style>
+  .original {
+    background-color: #ff0000;
+  }
+
+  .cloned {
+    background-color: #00ff00;
+  }
+</style>
+```
+
+> 选项式 API
+```vue
+
+
+<style>
+  .original {
+    background-color: #ff0000;
+  }
+
+  .cloned {
+    background-color: #00ff00;
+  }
+</style>
+```
+
+#### isVNode()
+
+判断一个值是否为 vnode 类型。
+
+- 示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/render-function/isVNode/isVNode-options.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/render-function/isVNode/isVNode-options
+
+> 组合式 API
+```vue
+<template>
+  <view class="page">
+    <view class="mb-10 flex flex-row justify-between">
+      <text>isVNode VNode:</text>
+      <text id="is-vnode-vnode">{{ isVNodeVNode }}</text>
+    </view>
+    <view class="mb-10 flex flex-row justify-between">
+      <text>isVNode string:</text>
+      <text id="is-vnode-string">{{ isVNodeString }}</text>
+    </view>
+  </view>
+</template>
+
+
+```
+
+> 选项式 API
+```vue
+<template>
+  <view class="page">
+    <view class="mb-10 flex flex-row justify-between">
+      <text>isVNode VNode:</text>
+      <text id="is-vnode-vnode">{{ isVNodeVNode }}</text>
+    </view>
+    <view class="mb-10 flex flex-row justify-between">
+      <text>isVNode string:</text>
+      <text id="is-vnode-string">{{ isVNodeString }}</text>
+    </view>
+  </view>
+</template>
+
+
+```
+
+#### resolveComponent()
+
+按名称手动解析已注册的组件。
+
+- 详细信息
+
+  备注：如果你可以直接引入组件就不需使用此方法。
+
+  为了能从正确的组件上下文进行解析，`resolveComponent()` 必须在 `setup()` 或渲染函数内调用。
+
+  如果组件未找到，会抛出一个运行时警告，并返回组件名字符串。
+
+- 示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/render-function/resolveComponent/resolveComponent-options.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/render-function/resolveComponent/resolveComponent-options
+
+> 组合式 API
+```vue
+
+
+```
+
+> 选项式 API
+```vue
+
+```
+
+#### withDirectives()
+
+用于给 vnode 增加自定义指令。
+
+- 详细信息
+
+  用自定义指令包装一个现有的 vnode。第二个参数是自定义指令数组。每个自定义指令也可以表示为 `[Directive, value, argument, modifiers]` 形式的数组。如果不需要，可以省略数组的尾元素。
+
+- 示例 [详情](https://gitcode.com/dcloud/hello-uvue/blob/alpha/pages/render-function/withDirectives/withDirectives-options.uvue)
+
+::: preview https://hellouvue.dcloud.net.cn/#/pages/render-function/withDirectives/withDirectives-options
+
+> 组合式 API
+```vue
+
+```
+
+> 选项式 API
+```vue
+
+```
+
+#### withModifiers()
+
+用于向事件处理函数添加内置 [v-on](./built-in.md#v-on) 修饰符。