From b97016662592bfc10c66292725e15c6da8cbeb80 Mon Sep 17 00:00:00 2001
From: birdguo <birdguo@tencent.com>
Date: Wed, 28 Jun 2023 17:18:17 +0800
Subject: [PATCH 1/9] feat(docs): add vue-next doc

---
 docs/api/hippy-vue-next/_sidebar.md           |  30 ++
 docs/api/hippy-vue-next/components.md         | 503 ++++++++++++++++++
 docs/api/hippy-vue-next/customize.md          | 146 +++++
 .../api/hippy-vue-next/external-components.md | 321 +++++++++++
 docs/api/hippy-vue-next/introduction.md       |  39 ++
 docs/api/hippy-vue-next/native-event.md       |  88 +++
 docs/api/hippy-vue-next/router.md             |   7 +
 docs/api/hippy-vue-next/style.md              |  38 ++
 docs/api/hippy-vue-next/vue-native.md         | 400 ++++++++++++++
 docs/api/hippy-vue-next/vue3.md               | 310 +++++++++++
 docs/api/hippy-vue-next/web.md                |   5 +
 docs/development/web-integration.md           | 165 ++++++
 12 files changed, 2052 insertions(+)
 create mode 100644 docs/api/hippy-vue-next/_sidebar.md
 create mode 100644 docs/api/hippy-vue-next/components.md
 create mode 100644 docs/api/hippy-vue-next/customize.md
 create mode 100644 docs/api/hippy-vue-next/external-components.md
 create mode 100644 docs/api/hippy-vue-next/introduction.md
 create mode 100644 docs/api/hippy-vue-next/native-event.md
 create mode 100644 docs/api/hippy-vue-next/router.md
 create mode 100644 docs/api/hippy-vue-next/style.md
 create mode 100644 docs/api/hippy-vue-next/vue-native.md
 create mode 100644 docs/api/hippy-vue-next/vue3.md
 create mode 100644 docs/api/hippy-vue-next/web.md

diff --git a/docs/api/hippy-vue-next/_sidebar.md b/docs/api/hippy-vue-next/_sidebar.md
new file mode 100644
index 00000000000..e3f5b9ca36c
--- /dev/null
+++ b/docs/api/hippy-vue-next/_sidebar.md
@@ -0,0 +1,30 @@
+<!-- docs/hippy-vue/_sidebar.md -->
+* hippy-react
+  * [介绍](api/hippy-react/introduction.md)
+  * [组件](api/hippy-react/components.md)
+  * [模块](api/hippy-react/modules.md)
+  * [样式](api/hippy-react/style.md)
+  * [事件](api/hippy-react/native-event.md)
+  * [手势系统](api/hippy-react/gesture.md)
+  * [自定义组件和模块](api/hippy-react/customize.md)
+  * [转 Web](api/hippy-react/web.md)
+* hippy-vue
+  * [介绍](api/hippy-vue/introduction.md)
+  * [核心组件](api/hippy-vue/components.md)
+  * [扩展组件](api/hippy-vue/external-components.md)
+  * [模块](api/hippy-vue/vue-native.md)
+  * [样式](api/hippy-vue/style.md)
+  * [事件](api/hippy-vue/native-event.md)
+  * [自定义组件和模块](api/hippy-vue/customize.md)
+  * [路由](api/hippy-vue/router.md)
+  * [转 Web](api/hippy-vue/web.md)
+  * [Vue 3.x](api/hippy-vue/vue3.md)
+* 样式
+  * [布局](api/style/layout.md)
+  * [外观](api/style/appearance.md)
+  * [颜色](api/style/color.md)
+  * [变形](api/style/transform.md)
+  * [更改终端属性](api/style/setNativeProps.md)
+* [网络请求](api/network-request.md)
+* [性能监控](api/performance.md)
+* [定时器](api/timer.md)
diff --git a/docs/api/hippy-vue-next/components.md b/docs/api/hippy-vue-next/components.md
new file mode 100644
index 00000000000..55da7fdfd18
--- /dev/null
+++ b/docs/api/hippy-vue-next/components.md
@@ -0,0 +1,503 @@
+<!-- markdownlint-disable no-duplicate-header -->
+
+# 核心组件
+
+核心组件的定义是跟浏览器、Vue 中保持一致，如果只使用这些组件的话，可以直接跨浏览器。
+
+---
+
+# a
+
+该组件目前映射到终端 Text 组件，目前主要用于在 hippy-vue-router 中进行页面跳转。 一切同 [p](api/hippy-vue/components.md?id=p)。
+
+## 事件
+
+| 事件名称          | 描述                                                         | 类型                                      | 支持平台 |
+| ------------- | ------------------------------------------------------------ | ----------------------------------------- | -------- |
+| touchstart  | 触屏开始事件，最低支持版本 2.6.2，参数为 `evt: { touches: [{ clientX: number, clientY: number }] }`，`clientX` 和 `clientY` 分别表示点击在屏幕内的绝对位置 | `Function`                                | `Android、iOS、Web-Renderer、Voltron`    |
+| touchmove   | 触屏移动事件，最低支持版本 2.6.2，参数为 `evt: { touches: [{ clientX: number, clientY: number }] }`，`clientX` 和 `clientY` 分别表示点击在屏幕内的绝对位置 | `Function`                                | `Android、iOS、Web-Renderer、Voltron`    |
+| touchend    | 触屏结束事件，最低支持版本 2.6.2，参数为 `evt: { touches: [{ clientX: number, clientY: number }] }`，`clientX` 和 `clientY` 分别表示点击在屏幕内的绝对位置 | `Function`                                | `Android、iOS、Web-Renderer、Voltron`    |
+| touchcancel | 触屏取消事件，当用户触屏过程中，某个系统事件中断了触屏，例如电话呼入、组件变化（如设置为hidden）、其他组件的滑动手势，此函数会收到回调，最低支持版本 2.6.2，参数为 `evt: { touches: [{ clientX: number, clientY: number }] }`，`clientX` 和 `clientY` 分别表示点击在屏幕内的绝对位置 | `Function`                               | `Android、iOS、Web-Renderer、Voltron`    |
+
+---
+
+# button
+
+[[范例：demo-button.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/demos/demo-button.vue)
+
+该组件映射到 View 组件，容器里面可以放图片、也可以放文本。但是因为 View 不能包裹文本，所以需要在 `<button>` 里包裹其它文本组件才能显示文字，这个跟浏览器不一样，浏览器的 `<button>` 也可以包裹 `<span>` 组件，开发时注意一下。一切同 [div](api/hippy-vue/components.md?id=div)。
+
+## 事件
+
+| 事件名称          | 描述                                                         | 类型                                      | 支持平台 |
+| ------------- | ------------------------------------------------------------ | ----------------------------------------- | -------- |
+| click       | 当按钮被点击以后调用此回调函数。  例如， `@click="clickHandler"` | `Function`                                | `Android、iOS、Web-Renderer、Voltron`    |
+| longClick   | 当按钮被长按以后调用此回调函数。  例如， `@longClick="longClickHandler"}` | `Function`                                | `Android、iOS、Web-Renderer、Voltron`    |
+| touchstart  | 触屏开始事件，最低支持版本 2.6.2，参数为 `evt: { touches: [{ clientX: number, clientY: number }] }`，`clientX` 和 `clientY` 分别表示点击在屏幕内的绝对位置 | `Function`                                | `Android、iOS、Web-Renderer、Voltron`    |
+| touchmove   | 触屏移动事件，最低支持版本 2.6.2，参数为 `evt: { touches: [{ clientX: number, clientY: number }] }`，`clientX` 和 `clientY` 分别表示点击在屏幕内的绝对位置 | `Function`                                | `Android、iOS、Web-Renderer、Voltron`    |
+| touchend    | 触屏结束事件，最低支持版本 2.6.2，参数为 `evt: { touches: [{ clientX: number, clientY: number }] }`，`clientX` 和 `clientY` 分别表示点击在屏幕内的绝对位置 | `Function`                                | `Android、iOS、Web-Renderer、Voltron`    |
+| touchcancel | 触屏取消事件，当用户触屏过程中，某个系统事件中断了触屏，例如电话呼入、组件变化（如设置为hidden）、其他组件的滑动手势，此函数会收到回调，最低支持版本 2.6.2，参数为 `evt: { touches: [{ clientX: number, clientY: number }] }`，`clientX` 和 `clientY` 分别表示点击在屏幕内的绝对位置 | `Function`                                | `Android、iOS、Web-Renderer、Voltron`    |
+
+---
+
+# div
+
+[[范例：demo-div.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/demos/demo-div.vue)
+
+> div 组件容器，默认不可以滚动。可以通过增加样式参数 `overflow-y: scroll` 切换为可以纵向滚动容器，或者增加样式参数 `overflow-x: scroll` 切换为水平滚动容器。在终端侧会被映射成 [ScrollView](api/hippy-react/components.md?id=ScrollView)，因此具备 [ScrollView](hippy-react/components.md?id=ScrollView) 通用的能力。
+
+!> Android 具有节点优化的特性，请注意 `collapsable` 属性的使用
+
+## 参数
+
+| 参数               | 描述                                                         | 类型                                 | 支持平台  |
+| ------------------ | ------------------------------------------------------------ | ------------------------------------ | --------- |
+| accessibilityLabel | 设置当用户与此元素交互时，“读屏器”（对视力障碍人士的辅助功能）阅读的文字。默认情况下，这个文字会通过遍历所有的子元素并累加所有的文本标签来构建。 | `string`                               | `Android、iOS`     |
+| accessible         | 当此属性为 `true` 时，表示此视图时一个启用了无障碍功能的元素。默认情况下，所有可触摸操作的元素都是无障碍功能元素。 | `boolean`                            | `Android、iOS`     |
+| collapsable        | 如果一个 `div` 只用于布局它的子组件，则它可能会为了优化而从原生布局树中移除，因此该节点 DOM 的引用会丢失`（比如调用 measureInAppWindow 无法获取到大小和位置信息）`。 把此属性设为 `false` 可以禁用这个优化，以确保对应视图在原生结构中存在。`（Android 2.14.1 版本后支持在 Attribute 设置，以前版本请在静态 Style 属性里设置)` | `boolean`                            | `Android、Voltron` |
+| style              | -                                                            | [`View Styles`](api/style/layout.md) | `Android、iOS、Web-Renderer、Voltron`     |
+| opacity            | 配置 `View` 的透明度，同时会影响子节点的透明度               | `number`                             | `Android、iOS、Web-Renderer、Voltron`     |
+| overflow           | 指定当子节点内容溢出其父级 `View` 容器时, 是否剪辑内容       | `enum(visible, hidden)`         | `Android、iOS、Web-Renderer、Voltron`     |
+| focusable          | 允许使用遥控器触发 View 的激活状态，改为 true 后使用遥控器将能触发 div 的 `@focus` 事件，需要通过 `nextFocusDownId`、`nextFocusUpId`、`nextFocusLeftId`、`nextFocusRightId` 参数指明四个方向键将移动到的的节点 ID       | `boolean`         | `Android`     |
+| scrollEventThrottle            | 指定滑动事件的回调频率，传入数值指定了多少毫秒(ms)组件会调用一次 `onScroll` 回调事件。`（仅在 overflow-y/x: scroll 时适用）` | `number`                                                     | `Android、iOS、Web-Renderer、Voltron`    |
+| pagingEnabled                  | 当值为 `true` 时，滚动条会停在滚动视图的尺寸的整数倍位置。这个可以用在水平分页上。`default: false` `（仅在 overflow-y/x: scroll 时适用）` | `boolean`                                                    | `Android、iOS、Web-Renderer、Voltron`    |
+| bounces | 是否开启回弹效果，默认 `true` `（仅在 overflow-y/x: scroll 时适用）` | `boolean`                                                  | `iOS、Voltron`    |
+| scrollEnabled                  | 当值为 `false` 的时候，内容不能滚动。`default: true` `（仅在 overflow-y/x: scroll 时适用）` | `boolean`                                                    | `Android、iOS、Web-Renderer、Voltron`    |
+| showScrollIndicator            | 是否显示滚动条。 `default: false`（仅在 overflow-y/x: scroll 时适用） | `boolean`  | `Android、Voltron`    |
+| showsHorizontalScrollIndicator | 当此值设为 `false` 的时候，`ScrollView` 会隐藏水平的滚动条。`default: true` `（仅在 overflow-y/x: scroll 时适用）`| `boolean`                                                    | `iOS、Voltron`    |
+| showsVerticalScrollIndicator   | 当此值设为 `false` 的时候，`ScrollView` 会隐藏垂直的滚动条。 `default: true` `（仅在 overflow-y/x: scroll 时适用）`| `boolean`  | `iOS、Voltron`   | 
+| nativeBackgroundAndroid        | 配置水波纹效果，`最低支持版本 2.13.1`；配置项为 `{ borderless: boolean, color: Color, rippleRadius: number }`； `borderless` 表示波纹是否有边界，默认false；`color` 波纹颜色；`rippleRadius` 波纹半径，若不设置，默认容器边框为边界； `注意：设置水波纹后默认不显示，需要在对应触摸事件中调用 setPressed 和 setHotspot 方法进行水波纹展示，详情参考相关`[demo](//github.com/Tencent/Hippy/tree/master/examples/hippy-vue-demo/src/components/demos/demo-div.vue) | `Object`| `Android`    |
+
+---
+
+## 事件
+
+| 事件名称          | 描述                                                         | 类型                                      | 支持平台 |
+| ------------- | ------------------------------------------------------------ | ----------------------------------------- | -------- |
+| attachedToWindow   | 这个事件会在节点已经渲染并且添加到容器组件中触发，因为 Hippy 的渲染是异步的，这是很稳妥的执行后续操作的事件。 | `Function`                           | `Android、iOS、Web-Renderer、Voltron`     |
+| click       | 当按钮被点击以后调用此回调函数。  例如， `@click="clickHandler"` | `Function`                                | `Android、iOS、Web-Renderer、Voltron`    |
+| focus            | 该事件在 `focusable` 置为 true 时触发，通过遥控方向键可以移动活动组件位置，事件回调带有 `isFocused` 参数用于标记激活和非激活状态 | `Function`  | `Android` |
+| longClick   | 当按钮被长按以后调用此回调函数。  例如， `@longClick="longClickHandler"}` | `Function`                                | `Android、iOS、Web-Renderer、Voltron`    |
+| layout           | 当元素挂载或者布局改变的时候调用，参数为： `nativeEvent: { layout: { x, y, width, height } }`，其中 `x` 和 `y` 为相对父元素的坐标位置 | `Function`                           | `Android、iOS、Web-Renderer、Voltron`     |
+| momentumScrollBegin  | 在 ScrollView 滑动开始的时候调起。`（仅在 overflow-y/x: scroll 时适用）`, `2.14.6` 版本后支持 `offset` 相关参数 | `(event: { offsetX: number, offsetY: number }) => any`                                | `Android、iOS、Web-Renderer、Voltron`    |
+| momentumScrollEnd  | 在 ScrollView 滑动结束的时候调起。`（仅在 overflow-y/x: scroll 时适用）`，`2.14.6` 版本后支持 `offset` 相关参数 | `(event: { offsetX: number, offsetY: number }) => any`                                | `Android、iOS、Web-Renderer、Voltron`    |
+| scroll  | 在滚动的过程中，每帧最多调用一次此回调函数。`（仅在 overflow-y/x: scroll 时适用）` | `(event: { offsetX: number, offsetY: number }) => any`                                | `Android、iOS、Web-Renderer、Voltron`    |
+| scrollBeginDrag  | 当用户开始拖拽 ScrollView 时调用。`（仅在 overflow-y/x: scroll 时适用）` | `(event: { offsetX: number, offsetY: number }) => any`                                | `Android、iOS、Web-Renderer、Voltron`    |
+| scrollEndDrag  | 当用户停止拖拽 ScrollView 时调用。`（仅在 overflow-y/x: scroll 时适用）` | `(event: { offsetX: number, offsetY: number }) => any`                                | `Android、iOS、Web-Renderer、Voltron`    |
+| touchstart  | 触屏开始事件，参数为 `evt: { touches: [{ clientX: number, clientY: number }] }`，`clientX` 和 `clientY` 分别表示点击在屏幕内的绝对位置 | `Function`                                | `Android、iOS、Web-Renderer、Voltron`    |
+| touchmove   | 触屏移动事件，参数为 `evt: { touches: [{ clientX: number, clientY: number }] }`，`clientX` 和 `clientY` 分别表示点击在屏幕内的绝对位置 | `Function`                                | `Android、iOS、Web-Renderer、Voltron`    |
+| touchend    | 触屏结束事件，参数为 `evt: { touches: [{ clientX: number, clientY: number }] }`，`clientX` 和 `clientY` 分别表示点击在屏幕内的绝对位置 | `Function`                                | `Android、iOS、Web-Renderer、Voltron`    |
+| touchcancel | 触屏取消事件，当用户触屏过程中，某个系统事件中断了触屏，例如电话呼入、组件变化（如设置为hidden）、其他组件的滑动手势，此函数会收到回调，参数为 `evt: { touches: [{ clientX: number, clientY: number }] }`，`clientX` 和 `clientY` 分别表示点击在屏幕内的绝对位置 | `Function`                                | `Android、iOS、Web-Renderer、Voltron`    |
+
+## 方法
+
+### scrollTo
+
+> 仅在 overflow-y/x: scroll 时适用
+
+`(x: number, y: number, duration: boolean) => void` 滚动到指定的 X，Y 偏移值，第三个参数为是否启用平滑滚动动画。
+
+> * x: number - X 偏移值
+> * y: number - Y 偏移值
+> * duration: number | boolean - 毫秒为单位的滚动时间, 默认 1000ms，false 等同 0ms
+
+
+### setPressed
+
+[[setPressed 范例]](//github.com/Tencent/Hippy/tree/master/examples/hippy-vue-demo/src/components/demos/demo-ripple-div.vue)
+
+`最低支持版本 2.13.1`
+
+`(pressed: boolean) => void` 通过传入一个布尔值，通知终端当前是否需要显示水波纹效果
+
+> * pressed: boolean - true 显示水波纹，false 收起水波纹
+
+### setHotspot
+
+[[setHotspot 范例]](//github.com/Tencent/Hippy/tree/master/examples/hippy-vue-demo/src/components/demos/demo-ripple-div.vue)
+
+`最低支持版本 2.13.1`
+
+`(x: number, y: number) => void` 通过传入一个 `x, y` 坐标值，通知终端设置当前波纹中心位置
+
+---
+
+# form
+
+[[范例：demo-div.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/demos/demo-div.vue)
+
+容器组件。 一切同 [div](api/hippy-vue/components.md?id=div)。
+
+---
+
+# iframe
+
+[[范例：demo-iframe.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/demos/demo-iframe.vue)
+
+内嵌网页容器。
+
+## 参数
+
+| 参数               | 描述                                                         | 类型                                 | 支持平台  |
+| ------------------ | ------------------------------------------------------------ | ------------------------------------ | --------- |
+| src | 内嵌用的网址 | `string`                               | `Android、iOS、Web-Renderer、Voltron`     |
+| method | 请求方式，`get`、`post` | `string`   | `Android、iOS`    |
+| userAgent | Webview userAgent | `string` | `Android、iOS、Voltron`|
+
+## 事件
+
+| 事件名称          | 描述                                                         | 类型                                      | 支持平台 |
+| ------------- | ------------------------------------------------------------ | ----------------------------------------- | -------- |
+| load           | 网页加载成功后会触发 | `(object: { url: string }) => void`    | `Android、iOS、Web-Renderer、Voltron`     |
+| loadStart           | 网页开始加载时触发 | `(object: { url: string }) => void`    | `Android、iOS、Web-Renderer、Voltron`     |
+| loadEnd           | 网页加载结束时触发 (`success`与`error`参数仅`Android`、`iOS`上可用，最低支持版本`2.15.3`)  | `(object: { url: string, success: boolean, error: string }) => void` | `Android、iOS、Web-Renderer、Voltron`     |
+
+---
+
+# img
+
+[[范例：demo-img.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/demos/demo-img.vue)
+
+图片组件，和浏览器的一样。
+
+> * 注意: 必须指定样式中的宽度和高度，否则无法工作。
+> * 注意: Android 端默认会带上灰底色用于图片占位，可以加上 `background-color: transparent` 样式改为透明背景。
+
+## 参数
+
+| 参数          | 描述                                                         | 类型                                      | 支持平台 |
+| ------------- | ------------------------------------------------------------ | ----------------------------------------- | -------- |
+| src        | 图片地址。现在支持的图片格式有 png , jpg , jpeg , bmp , gif 。 | string                                | `Android、iOS、Web-Renderer、Voltron`    |
+| capInsets | 当调整 img 大小的时候，由 capInsets 指定的边角尺寸会被固定而不进行缩放，而中间和边上其他的部分则会被拉伸。这在制作一些可变大小的圆角按钮、阴影、以及其它资源的时候非常有用。 |  `{ top: number, left: number, bottom: number, right: number }` | `Android、iOS、Voltron` | 
+| placeholder | 指定当 `img` 组件还没加载出 `src` 属性指定的图片或者图片加载出错时的占位符图片 | `string`: 图片 base64 字符串                                     | `Android、iOS、Web-Renderer、Voltron`    |
+
+> `2.8.1` 版本后支持终端本地图片能力，可通过 webpack `file-loader` 加载。
+
+## 样式内特殊属性
+
+| 参数               | 描述                                                         | 类型                                 | 支持平台  |
+| ------------------ | ------------------------------------------------------------ | ------------------------------------ | --------- |
+| resize-mode        |  决定当组件尺寸和图片尺寸不成比例的时候如何调整图片的大小。(`Web-Renderer 不支持 repeat`)   |  `enum (cover, contain, stretch, repeat, center)` | `Android、iOS、Web-Renderer、Voltron`    |
+
+## 事件
+
+| 事件名称          | 描述                                                         | 类型                                      | 支持平台 |
+| ------------- | ------------------------------------------------------------ | ----------------------------------------- | -------- |
+| layout      | 当元素挂载或者布局改变的时候调用，参数为： `nativeEvent: { layout: { x, y, width, height } }`，其中 `x` 和 `y` 为相对父元素的坐标位置 | `Function`                                                   | `Android、iOS、Web-Renderer、Voltron`    |
+| load        | 加载成功完成时调用此回调函数。                               | `Function`                                                   | `Android、iOS、Web-Renderer、Voltron`    |
+| loadStart   | 加载开始时调用。 | `Function`                                                   | `Android、iOS、Web-Renderer、Voltron`    |
+| loadEnd     | 加载结束后，不论成功还是失败，调用此回调函数。               | `Function`                                                   | `Android、iOS、Web-Renderer、Voltron`    |
+| error       | 当加载错误的时候调用此回调函数。| `Function`                                                   | `Android、iOS、Web-Renderer、Voltron`    |
+| progress    | 在加载过程中不断调用，参数为 `nativeEvent: { loaded: number, total: number }`, `loaded` 表示加载中的图片大小， `total` 表示图片总大小 | `Function`                                                   | `iOS、Voltron`    |
+| touchstart  | 触屏开始事件，最低支持版本 2.6.2，参数为 `evt: { touches: [{ clientX: number, clientY: number }] }`，`clientX` 和 `clientY` 分别表示点击在屏幕内的绝对位置 | `Function`                                | `Android、iOS、Web-Renderer、Voltron`    |
+| touchmove   | 触屏移动事件，最低支持版本 2.6.2，参数为 `evt: { touches: [{ clientX: number, clientY: number }] }`，`clientX` 和 `clientY` 分别表示点击在屏幕内的绝对位置 | `Function`                                | `Android、iOS、Web-Renderer、Voltron`    |
+| touchend    | 触屏结束事件，最低支持版本 2.6.2，参数为 `evt: { touches: [{ clientX: number, clientY: number }] }`，`clientX` 和 `clientY` 分别表示点击在屏幕内的绝对位置 | `Function`                                | `Android、iOS、Web-Renderer、Voltron`    |
+| touchcancel | 触屏取消事件，当用户触屏过程中，某个系统事件中断了触屏，例如电话呼入、组件变化（如设置为hidden）、其他组件的滑动手势，此函数会收到回调，最低支持版本 2.6.2，参数为 `evt: { touches: [{ clientX: number, clientY: number }] }`，`clientX` 和 `clientY` 分别表示点击在屏幕内的绝对位置 | `Function`                                | `Android、iOS、Web-Renderer、Voltron`    |
+
+---
+
+# input
+
+[[范例：demo-input.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/demos/demo-input.vue)
+
+单行文本组件。
+
+> 不建议手工双向绑定数据，建议通过 `v-model` 来绑定视图和数据。
+
+## 差异性
+
+由于系统组件层的差异，如果 input 处于会被键盘遮住的位置，在呼出键盘后：
+
+* iOS 则是正常的遮住
+* Android 的表现为页面会被键盘顶起，顶起的幅度取决于 input 的 Y 轴位置决定
+
+关于解决此间的平台差异性，我们仍在讨论。
+
+若有 iOS 对齐 Android 的键盘顶起的需求，建议参考 [StackOverflow](//stackoverflow.com/questions/32382892/ios-xcode-how-to-move-view-up-when-keyboard-appears)，在业务层解决。
+
+### Android 弹出后盖住界面的解决办法
+
+在部分 Android 机型上，键盘弹出后也可能会产生盖住界面的情况，一般情况下可以通过修改 `AndroidMainfest.xml` 文件，在 activity 上增加 android:windowSoftInputMode="adjustPan" 解决。
+
+```xml
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    package="com.tencent.mtt.hippy.example"
+>
+    <application
+        android:allowBackup="true"
+        android:label="@string/app_name"
+    >
+        <!-- 注意 android:windowSoftInputMode="adjustPan" 写在 activity 的参数里-->
+        <activity android:name=".MyActivity"
+            android:windowSoftInputMode="adjustPan"
+            android:label="@string/activity_name"
+            android:configChanges="orientation|screenSize"
+        >
+        </activity>
+    </application>
+</manifest>
+```
+
+该参数的意义是：
+
+* adjustResize: resize the page content
+* adjustPan: move page content without resizing page content
+
+详情请参考 Android 开发文档。
+
+## 参数
+
+| 参数                  | 描述                                                         | 类型                                                         | 支持平台  |
+| --------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | --------- |
+| caret-color           | 输入光标颜色。(也可设置为 Style 属性) `最低支持版本2.11.5` | [`color`](api/style/color.md)        | `Android、Voltron`     |
+| defaultValue          | 提供一个文本框中的初始值。当用户开始输入的时候，值就可以改变。  在一些简单的使用情形下，如果你不想用监听消息然后更新 value 属性的方法来保持属性和状态同步的时候，就可以用 defaultValue 来代替。 | `string`                                                     | `Android、iOS、Voltron`     |
+| editable              | 如果为 false，文本框是不可编辑的。`default: true`                        | `boolean`                                                    | `Android、iOS、Web-Renderer、Voltron`     |
+| type          | 决定弹出的何种软键盘的。 注意，`password`仅在属性 `multiline=false` 单行文本框时生效。 | `enum(default, numeric, password, email, phone-pad)` | `Android、iOS、Web-Renderer、Voltron`     |
+| maxlength             | 限制文本框中最多的字符数。使用这个属性而不用JS 逻辑去实现，可以避免闪烁的现象。 | `numbers`                                                    | `Android、iOS、Web-Renderer、Voltron`     |
+| numberOfLines         | 设置 `input` 最大显示行数，如果 `input` 没有显式设置高度，会根据 `numberOfLines` 来计算高度撑开。在使用的时候必需同时设置 `multiline` 参数为 `true`。 | `number`                                                     | `Android、Voltron、Web-Renderer`     |
+| placeholder           | 如果没有任何文字输入，会显示此字符串。                       | `string`                                                     | `Android、iOS、Web-Renderer、Voltron`     |
+| placeholder-text-color  | 占位字符串显示的文字颜色。（也可设置为 Style 属性）  `最低支持版本2.13.4`                                   | [`color`](api/style/color.md)                                | `Android、iOS、Web-Renderer、Voltron`     |
+| underline-color-android  | `input` 下底线的颜色。 可以设置为 'transparent' 来去掉下底线。（也可设置为 Style 属性）  `最低支持版本2.13.4`      | [`color`](api/style/color.md)                                                      | `Android` |
+| returnKeyType         | 指定软键盘的回车键显示的样式。                               | `enum(done, go, next, search, send)`              | `Android、iOS、Web-Renderer`     |
+| value                 | 指定 `input` 组件的值。                                  | `string`                                                     | `Android、iOS、Web-Renderer、Voltron`     |
+| break-strategy* | 设置Android API 23及以上系统的文本换行策略。`default: simple` | `enum(simple, high_quality, balanced)` | `Android(版本 2.14.2以上)` |
+
+* break-strategy 的参数含义：
+  * `simple`（默认值）：简单折行，每一行显示尽可能多的字符，直到这一行不能显示更多字符时才进行换行，这种策略下不会自动折断单词（当一行只有一个单词并且宽度显示不下的情况下才会折断）；
+  * `high_quality`：高质量折行，针对整段文本的折行进行布局优化，必要时会自动折断单词，比其他两种策略略微影响性能，通常比较适合只读文本；
+  * `balanced`：平衡折行，尽可能保证一个段落的每一行的宽度相同，必要时会折断单词。
+
+## 事件
+
+| 事件名称          | 描述                                                         | 类型                                      | 支持平台 |
+| ------------- | ------------------------------------------------------------ | ----------------------------------------- | -------- |
+| blur                | 当文本框失去焦点的时候调用此回调函数。                       | `Function`                                                   | `Android、iOS、Web-Renderer、Voltron`     |
+| focus | 当文本框获得焦点的时候调用此回调函数。 | `Function` | `Android、iOS、Voltron` |
+| change          | 当文本框内容变化时调用此回调函数。改变后的文字内容会作为参数传递。 | `Function`                                                   | `Android、iOS、Voltron`     |
+| keyboardWillShow    | 在弹出输入法键盘时候会触发此回调函数，返回值包含键盘高度 `keyboardHeight`，样式如 `{ keyboardHeight: 260 }`。                                     | `Function`                                                   | `Android、iOS、Voltron`     |
+| keyboardWillHide     | 在隐藏输入法键盘时候会触发此回调函数 | `Function`                                                   | `Android、iOS、Voltron`     |
+| keyboardHeightChanged | 在输入法键盘高度改变时触发此回调函数，返回值包含键盘高度 `keyboardHeight`，样式如 `{ keyboardHeight: 260 }`, `最低支持版本2.14.0`。 | `Function` | `iOS、Voltron` |                                 
+| endEditing          | 当文本输入结束后调用此回调函数。                             | `Function`                                                   | `Android、iOS、Web-Renderer、Voltron`     |
+| layout              | 当元素挂载或者布局改变的时候调用，参数为： `nativeEvent: { layout: { x, y, width, height } }`，其中 `x` 和 `y` 为相对父元素的坐标位置。 | `Function`                                                   | `Android、iOS、Web-Renderer、Voltron`     |
+| selectionChange     | 当输入框选择文字的范围被改变时调用。返回参数的样式如 `{ nativeEvent: { selection: { start, end } } }`。 | `Function`                                                   | `Android、iOS、Web-Renderer、Voltron`     |
+
+## 方法
+
+### blur
+
+`() => void` 让指定的 input 组件失去光标焦点，与 focus() 的作用相反。
+
+### clear
+
+`() => void` 清空输入框的内容。
+
+### focus
+
+`() => void` 指派 input 获得焦点。
+
+### getValue
+
+`() => Promise<string>` 获得文本框中的内容。注意，由于是异步回调，收到回调时值可能已经改变。
+
+### setValue
+
+`(value: string) => void` 设置文本框内容。
+
+> * value: string - 文本框内容
+
+### isFocused
+
+`最低支持版本 2.14.1。hippy-react-web 不支持。`
+
+`() => Promise<boolean>` 获得文本框的焦点状态。注意，由于是异步回调，收到回调时值可能已经改变。
+
+---
+
+# label
+
+[[范例：demo-p.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/demos/demo-p.vue)
+
+显示文本。 一切同 [p](api/hippy-vue/components.md?id=p)。
+
+## 事件
+
+| 事件名称          | 描述                                                         | 类型                                      | 支持平台 |
+| ------------- | ------------------------------------------------------------ | ----------------------------------------- | -------- |
+| touchstart  | 触屏开始事件，最低支持版本 2.6.2，参数为 `evt: { touches: [{ clientX: number, clientY: number }] }`，`clientX` 和 `clientY` 分别表示点击在屏幕内的绝对位置 | `Function`                                | `Android、iOS、Web-Renderer、Voltron`    |
+| touchmove   | 触屏移动事件，最低支持版本 2.6.2，参数为 `evt: { touches: [{ clientX: number, clientY: number }] }`，`clientX` 和 `clientY` 分别表示点击在屏幕内的绝对位置 | `Function`                                | `Android、iOS、Web-Renderer、Voltron`    |
+| touchend    | 触屏结束事件，最低支持版本 2.6.2，参数为 `evt: { touches: [{ clientX: number, clientY: number }] }`，`clientX` 和 `clientY` 分别表示点击在屏幕内的绝对位置 | `Function`                                | `Android、iOS、Web-Renderer、Voltron`    |
+| touchcancel | 触屏取消事件，当用户触屏过程中，某个系统事件中断了触屏，例如电话呼入、组件变化（如设置为hidden）、其他组件的滑动手势，此函数会收到回调，最低支持版本 2.6.2，参数为 `evt: { touches: [{ clientX: number, clientY: number }] }`，`clientX` 和 `clientY` 分别表示点击在屏幕内的绝对位置 | `Function`                                | `Android、iOS、Web-Renderer、Voltron`    |
+
+---
+
+# ul
+
+[[范例：demo-list.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/demos/demo-list.vue)
+
+Hippy 的重点功能，高性能的可复用列表组件，在终端侧会被映射成 `ListView`，包含 `ListView` 所有能力。里面第一层只能包含 `<li>`。
+
+!> Android `2.14.0` 版本后会采用 `RecyclerView` 替换原有 `ListView`
+
+## 参数
+
+| 参数                  | 描述                                                         | 类型                                                        | 支持平台 |
+| --------------------- | ------------------------------------------------------------ | ----------------------------------------------------------- | -------- |
+| horizontal       | 指定 `ul` 是否采用横向布局。`default: undefined` 纵向布局，Android `2.14.1` 版本后可设置 `false` 显式固定纵向布局；iOS 暂不支持横向 `ul` | `boolean \| undefined` | `Android、Voltron`    |
+| initialContentOffset  | 初始位移值。在列表初始化时即可指定滚动距离，避免初始化后再通过 scrollTo 系列方法产生的闪动。Android 在 `2.8.0` 版本后支持    | `number`  | `Android、iOS、Web-Renderer、Voltron` |
+| bounces | 是否开启回弹效果，默认 `true` | `boolean`                                                  | `iOS、Voltron`    |
+| overScrollEnabled | 是否开启回弹效果，默认 `true` | `boolean`                                                  | `Android、Voltron`    |
+| rowShouldSticky  | 设置 `ul` 是否需要开启悬停效果能力，与 `li` 的 `sticky` 配合使用。 `default: false` | `boolean`  | `Android、iOS、Web-Renderer、Voltron`
+| scrollEnabled    | 滑动是否开启。`default: true` | `boolean` | `Android、iOS、Web-Renderer、Voltron` |
+| scrollEventThrottle   | 指定滑动事件的回调频率，传入数值指定了多少毫秒(ms)组件会调用一次 `onScroll` 回调事件，默认 200ms | `number`                                                    | `Android、iOS、Web-Renderer、Voltron`    |
+| showScrollIndicator   | 是否显示滚动条。`default: true` | `boolean`                                                   | `iOS、Voltron`    |
+| preloadItemNumber     | 指定当列表滚动至倒数第几行时触发 `endReached` 回调。 | `number` | `Android、iOS、Web-Renderer、Voltron` |
+| exposureEventEnabled | Android 曝光能力启用开关，如果要使用 `appear`、`disappear` 相关事件，Android 需要设置该开关（iOS无需设置）, `default: true` | `boolean` | `Android、Voltron`
+| endReached | 当所有的数据都已经渲染过，并且列表被滚动到最后一条时，将触发 `endReached` 回调。 | `Function`                                                  | `Android、iOS、Web-Renderer、Voltron`    |
+| editable | 是否可编辑，开启侧滑删除时需要设置为 `true`。`最低支持版本2.9.0` | `boolean`                                                  | `iOS`    |
+| delText | 侧滑删除文本。`最低支持版本2.9.0` | `string`                                                  | `iOS`    |
+
+## 事件
+
+| 事件名称          | 描述                                                         | 类型                                      | 支持平台 |
+| ------------- | ------------------------------------------------------------ | ----------------------------------------- | -------- |
+| endReached          | 当所有的数据都已经渲染过，并且列表被滚动到最后一条时，将触发 `onEndReached` 回调。 | `Function`                                                  | `Android、iOS、Web-Renderer、Voltron`    |
+| momentumScrollBegin | 在 `ListView` 开始滑动的时候调起，`2.14.6` 版本后支持 `offset` 相关参数      | `(event: { offsetX: number, offsetY: number }) => any`                                                  | `Android、iOS、Web-Renderer、Voltron`    |
+| momentumScrollEnd   | 在 `ListView` 结束滑动的时候调起，`2.14.6` 版本后支持 `offset` 相关参数   | `(event: { offsetX: number, offsetY: number }) => any`                                                  | `Android、iOS、Web-Renderer、Voltron`    |
+| scroll              | 当触发 `ListView` 的滑动事件时回调。由于在 `ListView` 滑动时回调，调用会非常频繁，请使用 `scrollEventThrottle` 进行频率控制。 注意：ListView 在滚动时会进行组件回收，不要在滚动时对 renderRow() 生成的 ListItemView 做任何 ref 节点级的操作（例如：所有 callUIFunction 和 measureInAppWindow 方法），回收后的节点将无法再进行操作而报错。横向ListView时，Android在 `2.8.0` 版本后支持 | `(event: { offsetX: number, offsetY: number }) => any` | `Android、iOS、Web-Renderer、Voltron`    |
+| scrollBeginDrag     | 当用户开始拖拽 `ListView` 时调用，`2.14.6` 版本后支持 `offset` 相关参数   | `(event: { offsetX: number, offsetY: number }) => any`                                                  | `Android、iOS、Web-Renderer、Voltron`    |
+| scrollEndDrag       | 当用户停止拖拽 `ListView` 或者放手让 `ListView` 开始滑动的时候调用，`2.14.6` 版本后支持 `offset` 相关参数 | `(event: { offsetX: number, offsetY: number }) => any`                                                  | `Android、iOS、Web-Renderer、Voltron`    |
+| layout      | 当元素挂载或者布局改变的时候调用，参数为： `nativeEvent: { layout: { x, y, width, height } }`，其中 `x` 和 `y` 为相对父元素的坐标位置。 | `Function`                                | `Android、iOS、Web-Renderer、Voltron`    |
+| delete      | 在列表项侧滑删除时调起。`最低支持版本2.9.0` | `(nativeEvent: { index: number}) => void`                                | `iOS`    |
+
+## 方法
+
+### scrollTo
+
+`(xOffset: number, yOffset: number, animated: boolean) => void` 通知 ListView 滑动到某个具体坐标偏移值(offset)的位置。
+
+> * `xOffset`: number - 滑动到 X 方向的 offset
+> * `yOffset`: number - 滑动到 Y 方向的 offset
+> * `animated`: boolean - 滑动过程是否使用动画
+
+### scrollToIndex
+
+`(xIndex: number, yIndex: number, animated: boolean) => void` 通知 ListView 滑动到第几个 item。
+
+> * `xIndex`: number - 滑动到 X 方向的第 xIndex 个 item
+> * `yIndex`: number - 滑动到 Y 方向的 yIndex 个 item
+> * `animated`: boolean - 滑动过程是否使用动画
+
+---
+
+# li
+
+ul 的子节点，终端层节点回收和复用的最小颗粒度。
+
+[[范例：demo-list.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/demos/demo-list.vue)
+
+## 参数
+
+> 当设置`ul` 的 `:horizontal=true` 启用横向无限列表时，需显式设置 `li` 样式宽度
+
+| 参数                  | 描述                                                         | 类型                                                        | 支持平台 |
+| --------------------- | ------------------------------------------------------------ | ----------------------------------------------------------- | -------- |
+| type            | 指定一个函数，在其中返回对应条目的类型（返回Number类型的自然数，默认是0），List 将对同类型条目进行复用，所以合理的类型拆分，可以很好地提升 List 性能。`注意：同一 type 的 item 组件由于复用可能不会走完整组件创建生命周期` | `number`              | `Android、iOS、Web-Renderer、Voltron`    |
+| key             | 指定一个函数，在其中返回对应条目的 Key 值，详见 [Vue 官网](//vuejs.org/v2/guide/list.html) | `string`                                    | `Android、iOS、Web-Renderer、Voltron`    |
+| sticky       | 对应的 item 是否需要使用悬停效果（滚动到顶部时，会悬停在 ListView 顶部，不会滚出屏幕），需跟 `ul` 的 `rowShouldSticky` 配合使用 | `boolean`                                | `Android、iOS、Web-Renderer、Voltron`
+| appear       | 当有`li`节点滑动进入屏幕时（曝光）触发，入参返回曝光的`li`节点对应索引值。 | `(index) => any` | `Android、iOS、Web-Renderer、Voltron` |
+| disappear       | 当有`li`节点滑动离开屏幕时触发，入参返回离开的`li`节点对应索引值。 | `(index) => any` | `Android、iOS、Web-Renderer、Voltron` |
+| willAppear       | 当有`li`节点至少一个像素滑动进入屏幕时（曝光）触发，入参返回曝光的`li`节点对应索引值。`最低支持版本2.3.0` | `(index) => any` | `Android、iOS、Voltron` |
+| willDisappear       | 当有`li`节点至少一个像素滑动离开屏幕时触发，入参返回离开的`li`节点对应索引值。`最低支持版本2.3.0` | `(index) => any` | `Android、iOS、Voltron` |
+
+---
+
+# p
+
+[[范例：demo-p.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/demos/demo-p.vue)
+
+显示文本，不过因为 Hippy 下没有 `display: inline` 的显示模式，默认全部都是 flex 的。
+
+## 事件
+
+| 事件名称          | 描述                                                         | 类型                                      | 支持平台 |
+| ------------- | ------------------------------------------------------------ | ----------------------------------------- | -------- |
+| touchstart  | 触屏开始事件，最低支持版本 2.6.2，参数为 `evt: { touches: [{ clientX: number, clientY: number }] }`，`clientX` 和 `clientY` 分别表示点击在屏幕内的绝对位置 | `Function`                                | `Android、iOS、Web-Renderer、Voltron`    |
+| touchmove   | 触屏移动事件，最低支持版本 2.6.2，参数为 `evt: { touches: [{ clientX: number, clientY: number }] }`，`clientX` 和 `clientY` 分别表示点击在屏幕内的绝对位置 | `Function`                                | `Android、iOS、Web-Renderer、Voltron`    |
+| touchend    | 触屏结束事件，最低支持版本 2.6.2，参数为 `evt: { touches: [{ clientX: number, clientY: number }] }`，`clientX` 和 `clientY` 分别表示点击在屏幕内的绝对位置 | `Function`                                | `Android、iOS、Web-Renderer、Voltron`    |
+| touchcancel | 触屏取消事件，当用户触屏过程中，某个系统事件中断了触屏，例如电话呼入、组件变化（如设置为hidden）、其他组件的滑动手势，此函数会收到回调，最低支持版本 2.6.2，参数为 `evt: { touches: [{ clientX: number, clientY: number }] }`，`clientX` 和 `clientY` 分别表示点击在屏幕内的绝对位置 | `Function`                                | `Android、iOS、Web-Renderer、Voltron`    |
+
+## 参数
+
+| 参数          | 描述                                                         | 类型                                      | 支持平台 |
+| ------------- | ------------------------------------------------------------ | ----------------------------------------- | -------- |
+| numberOfLines | 用来当文本过长的时候裁剪文本。包括折叠产生的换行在内，总的行数不会超过这个属性的限制。 | `number`                                  | `Android、iOS、Web-Renderer、Voltron`    |
+| opacity       | 配置 `View` 的透明度，同时会影响子节点的透明度。             | `number`                                  | `Android、iOS、Web-Renderer、Voltron`    |
+| ellipsizeMode* | 当设定了 `numberOfLines` 值后，这个参数指定了字符串如何被截断。所以在使用 `ellipsizeMode` 时，必须得同时指定 `numberOfLines` 数值。`default: tail` | `enum(head, middle, tail, clip)` | `Android(版本2.14.1以上全支持，低版本仅支持tail)、iOS(全支持)、Voltron(tail, clip)` |
+| break-strategy* | 设置Android API 23及以上系统的文本换行策略。`default: simple` | `enum(simple, high_quality, balanced)` | `Android(版本 2.14.2以上)` |
+
+* ellipsizeMode 的参数含义：
+  * `clip` - 超过指定行数的文字会被直接截断，不显示“...”；（Android 2.14.1以上、iOS全支持）
+  * `head` - 文字将会从头开始截断，保证字符串的最后的文字可以正常显示在 `Text` 组件的最后，而从开头给截断的文字，将以 “...” 代替，例如 “...wxyz”；（Android 2.14.1以上、iOS全支持）
+  * `middle` - "文字将会从中间开始截断，保证字符串的最后与最前的文字可以正常显示在Text组件的响应位置，而中间给截断的文字，将以 “...” 代替，例如 “ab...yz”；（Android 2.14.1以上、iOS全支持）
+  * `tail`(默认值) - 文字将会从最后开始截断，保证字符串的最前的文字可以正常显示在 Text 组件的最前，而从最后给截断的文字，将以 “...” 代替，例如 “abcd...”；
+* break-strategy 的参数含义：
+  * `simple`（默认值）：简单折行，每一行显示尽可能多的字符，直到这一行不能显示更多字符时才进行换行，这种策略下不会自动折断单词（当一行只有一个单词并且宽度显示不下的情况下才会折断）；
+  * `high_quality`：高质量折行，针对整段文本的折行进行布局优化，必要时会自动折断单词，比其他两种策略略微影响性能，通常比较适合只读文本；
+  * `balanced`：平衡折行，尽可能保证一个段落的每一行的宽度相同，必要时会折断单词。
+
+## whitespace 处理
+
+`2.15.3` 版本前，Hippy 对模板中文本空格的处理行为默认采用 `trim` 的处理，即会将元素中开头和结尾的空格（包括特殊 `&nbsp;`）均去除。
+
+`2.15.3` 版本后，增加 `Vue.config.trimWhitespace` 配置，设为 `false` 可关闭 `trim` 的处理，其余遵循 [Vue-Loader compilerOptions](https://cn.vuejs.org/api/application.html#app-config-compileroptions-whitespace) 本身的配置。
+
+!> 注意：Vue2.x compilerOptions.whitespace 的默认值为 `preserve`
+
+```javascript
+// entry file
+// trimWhitespace default is  true
+Vue.config.trimWhitespace = false; // close trim handler
+
+// webpack script
+rules: [
+  {
+    test: /\.vue$/,
+    use: [
+      {
+        loader: vueLoader,
+        options: {
+          compilerOptions: {
+            // whitespace handler, default is 'preserve'
+            whitespace: 'condense',
+          },
+        },
+      },
+    ],
+  },
+]
+```
+
+---
+
+# span
+
+[[范例：demo-p.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/demos/demo-p.vue)
+
+显示文本。 一切同 [p](api/hippy-vue/components.md?id=p)。
+
+## 事件
+
+| 事件名称          | 描述                                                         | 类型                                      | 支持平台 |
+| ------------- | ------------------------------------------------------------ | ----------------------------------------- | -------- |
+| touchstart  | 触屏开始事件，最低支持版本 2.6.2，参数为 `evt: { touches: [{ clientX: number, clientY: number }] }`，`clientX` 和 `clientY` 分别表示点击在屏幕内的绝对位置 | `Function`                                | `Android、iOS、Web-Renderer、Voltron`    |
+| touchmove   | 触屏移动事件，最低支持版本 2.6.2，参数为 `evt: { touches: [{ clientX: number, clientY: number }] }`，`clientX` 和 `clientY` 分别表示点击在屏幕内的绝对位置 | `Function`                                | `Android、iOS、Web-Renderer、Voltron`    |
+| touchend    | 触屏结束事件，最低支持版本 2.6.2，参数为 `evt: { touches: [{ clientX: number, clientY: number }] }`，`clientX` 和 `clientY` 分别表示点击在屏幕内的绝对位置 | `Function`                                | `Android、iOS、Web-Renderer、Voltron`    |
+| touchcancel | 触屏取消事件，当用户触屏过程中，某个系统事件中断了触屏，例如电话呼入、组件变化（如设置为hidden）、其他组件的滑动手势，此函数会收到回调，最低支持版本 2.6.2，参数为 `evt: { touches: [{ clientX: number, clientY: number }] }`，`clientX` 和 `clientY` 分别表示点击在屏幕内的绝对位置 | `Function`                                | `Android、iOS、Web-Renderer、Voltron`    |
+
+---
+
+# textarea
+
+[[范例：demo-p.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/demos/demo-textarea.vue)
+
+多行文本输入框。 一切同 [input](api/hippy-vue/components.md?id=input)。
diff --git a/docs/api/hippy-vue-next/customize.md b/docs/api/hippy-vue-next/customize.md
new file mode 100644
index 00000000000..a8e04624fcb
--- /dev/null
+++ b/docs/api/hippy-vue-next/customize.md
@@ -0,0 +1,146 @@
+# 自定义组件和模块
+
+---
+
+# Vue.registerElement
+
+hippy-vue 提供了 `registerElement` 方法来注册组件，将 template 中的 tag 和原生组件映射起来。
+
+## 示例
+
+```javascript
+import Vue from 'vue';
+
+/*
+ * 直接注册一个 ComponentName 到终端组件，这里推荐单词首字母大写的拼写。
+ * template 里可以直接用 <ComponentName />
+ * ComponentName 必须跟终端组件名称一致，且不能包含 Hippy 字符。
+ */
+Vue.registerElement('MyView');
+
+/*
+ * 也可以注册一个小写的 tagname，然后通过参数映射到 ComponentName 终端组件
+ * 但是 tagname 忽略大小写后也不能和 ComponentName 相同。(如 tag name 命名为 my-view, component name 不能命名为 MyView)
+ * template 里可以直接用 <tagname />，同样会映射 ComponentName 组件上。
+ * ComponentName 必须跟终端组件名称一致，不能包含 Hippy 字符。
+ */
+Vue.registerElement('h-my-view', {
+  component: {
+    name: 'MyView',
+  },
+});
+```
+
+## 绑定终端事件返回值
+
+因为 hippy-vue 采用了和浏览器一致的事件模型，又希望能统一双端的事件（有的时候双端事件返回值不一样），所以采取了手动修改事件返回值的方案，需要显式声明每个事件的返回值。
+
+这一步是在注册组件时通过 `processEventData` 方法进行处理的，它有三个参数：
+
+* event: 终端回调函数里接收到的事件实例，需要对它进行修改
+* nativeEventName: 终端的原生事件名称
+* nativeEventParams：终端的原生事件返回体
+
+例如，hippy-vue 的 [hi-swiper 组件](//github.com/Tencent/Hippy/blob/master/packages/hippy-vue-native-components/src/swiper.js#L4)，它是 swiper 实际渲染的对应节点。
+
+```javascript
+component: {
+  name: 'ViewPager',
+  processEventData(event, nativeEventName, nativeEventParams) {
+    switch (nativeEventName) {
+    case 'onPageSelected':
+      // 显式将 native 的事件参数 nativeEventParams 的值赋予 hippy-vue 真正绑定的事件 event
+      event.currentSlide = nativeEventParams.position;
+      break;
+    case 'onPageScroll':
+      event.nextSlide = nativeEventParams.position;
+      event.offset = nativeEventParams.offset;
+      break;
+    default:
+      break;
+    }
+    return event;
+  }
+}
+```
+
+# Vue.component
+
+当你需要处理更加复杂的交互、事件、生命周期的时候，需要通过 `Vue.component` 注册一个单独的组件，registerElement 只能做到很基本的元素名称到组件的映射，和基本的参数映射。
+
+详情参考：//cn.vuejs.org/v2/guide/components-registration.html
+
+## 事件处理
+
+通过 `Vue.component` 自定义的组件，若需要将终端事件传给组件外层，需要做额外处理，有两种方式：
+
+* 使用 `render` 函数（推荐）
+
+```javascript
+  Vue.component('Swiper', {
+    /*
+     * 可以用 render 函数的方式
+     * 'pageScroll'是传输给终端的事件名（传输终端时会被自动转成转成onPageScroll）
+     * 'dragging' 是真正暴露给用户使用的事件名
+     */
+    render(h) {
+        const on = {
+            pageSelected: evt => this.$emit('dropped', evt),
+            pageScroll: evt => this.$emit('dragging', evt),
+            pageScrollStateChanged: evt => this.$emit('stateChanged', evt),
+        };
+        return h('hi-swiper', {
+            on,
+            ref: 'swiper',
+            attrs: {
+                initialPage: this.$initialSlide,
+            },
+        }, this.$slots.default);
+    },
+});
+```
+
+* 使用 `template`
+
+```javascript
+  Vue.component('Swiper', {
+    /*
+     * 可以用 template 的方式，HippyVue会在运行时将其转换成 render 函数
+     * 'pageScroll'是传输给终端的事件名（传输终端时会被自动转成onPageScroll）
+     * 'dragging' 是真正暴露给用户使用的事件名
+     */
+    template: `
+      <hi-swiper
+          :initialPage="$initialSlide"
+          ref="swiper"
+          @pageScroll="$emit('dragging', $event)"
+          @pageScrollStateChanged="$emit('stateChanged', $event)"
+          @pageSelected="$emit('dropped', $event)"
+      >
+      <slot />
+      </hi-swiper>`,
+});
+```
+
+# 自定义模块
+
+> 该范例仅可以在 Android 下运行。
+
+hippy-vue 的模块其实只是一个 `Vue.Native.callNative` 调用，写个 `function` 即可。
+
+```js
+import Vue from 'vue';
+
+function log(msg) {
+  Vue.Native.callNative("TestModule", "log", msg)
+}
+
+function helloNative(msg) {
+  Vue.Native.callNative("TestModule", "helloNative", msg)
+}
+
+// 这个是需要终端回调的
+function helloNativeWithPromise(msg) {
+  return Vue.Native.callNativeWithPromise("TestModule", "helloNativeWithPromise", msg);
+}
+```
diff --git a/docs/api/hippy-vue-next/external-components.md b/docs/api/hippy-vue-next/external-components.md
new file mode 100644
index 00000000000..8c175c52baa
--- /dev/null
+++ b/docs/api/hippy-vue-next/external-components.md
@@ -0,0 +1,321 @@
+<!-- markdownlint-disable no-duplicate-header -->
+
+# 终端扩展组件
+
+扩展组件是终端提供了一些很方便的组件，在 hippy-vue 中由 [@hippy/vue-native-components](//www.npmjs.com/package/@hippy/vue-native-components) 提供
+
+---
+
+# animation
+
+[[范例：demo-animation.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/native-demos/demo-animation.vue)
+
+该组件是 hippy-vue 的动画解决方案，直接传入一个样式值和动画方案数组，即可触发动作效果。
+
+需要说明的是一个 animation 本身就是个 View，它会带动所有子节点一起动画，所以如果动画需要分开控制的话，需要在界面层级上进行拆分。
+
+## 参数
+
+| 参数          | 描述                                                         | 类型                                      | 支持平台 |
+| ------------- | ------------------------------------------------------------ | ----------------------------------------- | -------- |
+| playing        | 控制动画是否播放 | boolean                                | `Android、iOS、Web-Renderer、Voltron`    |
+| actions*        | 动画方案，其实是一个样式值跟上它的动画方案，详情请参考范例。 | Object                                | `Android、iOS、Web-Renderer、Voltron`    |
+
+* actions 详解
+  
+  和 HippyReact 不同，HippyVue 将单个动画 Animation 和动画序列 AnimationSet 合二为一，如果是一个对象，就使用 Animation 处理，如果是数组动画序列就用 AnimationSet 处理。动画参数具体可参考 [HippyReact Animation 模块](api/hippy-react/modules.md?id=animation) 和 [范例](https://github.com/Tencent/Hippy/tree/master/examples/hippy-vue-demo/src/components/native-demos/animations)。
+
+
+```vue
+<template>
+  <div>
+    <animation
+        ref="animationRef"
+        :actions="actionsConfig"
+        :playing="true"
+        @start="animationStart"
+        @end="animationEnd"
+        @repeat="animationRepeat"
+        @cancel="animationCancel"
+        @actionsDidUpdate="actionsDidUpdate"
+    />
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      actionsConfig: {
+        // AnimationSet
+        top: [
+          {
+            startValue: 14,
+            toValue: 8,
+            duration: 125, // 动画持续时间
+          },
+          {
+            startValue: 8,
+            toValue: 14,
+            duration: 250,
+            timingFunction: 'linear', // 动画插值器类型，可选 linear、ease-in、ease-out、ease-in-out、cubic-bezier(最低支持版本 2.9.0)
+            delay: 750, // 动画延迟开始的时间，单位为毫秒
+            repeatCount: -1, // 动画的重复次数，0 为不重复，-1('loop') 为重复播放，如果在数组中，整个动画数组的重复次数以最后一个动画的值为准
+          },
+        ],
+        transform: {
+          // 单个 Animation
+          rotate: {
+              startValue: 0,
+              toValue: 90,
+              duration: 250,
+              timingFunction: 'linear',
+              valueType: 'deg',  // 动画的开始和结束值的单位类型，默认为 undefined, 可设为 rad、deg、color
+            },
+        },
+      },
+    };
+  },
+  methods: {
+    animationStart() {
+      console.log('animation-start callback');
+    },
+    animationEnd() {
+      console.log('animation-end callback');
+    },
+    animationRepeat() {
+      console.log('animation-repeat callback');
+    },
+    animationCancel() {
+      console.log('animation-cancel callback');
+    },
+    actionsDidUpdate() {
+      this.animationRef.start();
+    }
+  },
+};
+</script>
+```
+
+  > 特别说明，对 actions 替换后会重新创建动画，需手动启动新动画。有两种处理方式：
+  > 
+  > * 替换 actions => 延迟一定时间（如setTimeout）后 或者在 `actionsDidUpdate` 勾子内 `(2.14.0 版本后支持)`，调用 `this.[animation ref].start()`（推荐）
+  > * 设置 `playing = false` =>  替换 actions  => 延迟一定时间（如setTimeout）后 或者在 `actionsDidUpdate` 勾子内 `(2.14.0 版本后支持)`，设置 `playing = true`
+
+  > `2.6.0` 及以上版本支持 `backgroundColor` 背景色渐变动画，参考 [渐变色动画DEMO](https://github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/native-demos/animations/color-change.vue)
+  > 
+  > * 设置 `actions` 对 `backgroundColor` 进行修饰
+  > * 设置 `valueType` 为 `color`
+  > * 设置 `startValue` 和 `toValue` 为 [color值](api/style/color.md)
+
+  > `2.12.2` 及以上版本支持循环播放参数 `repeatCount: 'loop'` 写法，低版本请使用 `repeatCount: -1`
+
+## 事件
+
+| 参数          | 描述                                                         | 类型                                      | 支持平台 |
+| ------------- | ------------------------------------------------------------ | ----------------------------------------- | -------- |
+| start              | 动画开始时触发，最低支持版本 `2.5.2`      | `Function`                                                    | `Android、iOS、Web-Renderer、Voltron`    |
+| end         | 动画结束时触发，最低支持版本 `2.5.2`             | `Function`| `Android、iOS、Web-Renderer、Voltron`    |
+| repeat | 每次循环播放时触发，最低支持版本 `2.5.2`               | `Function` | `Android、Voltron`   |
+| actionsDidUpdate | 替换 actions 且动画对象创建成功后触发，可以在这个时机重新启动动画，最低支持版本 `2.14.0`  | `Function` | `Android、iOS、Voltron`   |
+
+## 方法
+
+> 最低支持版本 2.5.2
+
+### start
+
+`() => void` 手动触发动画开始（`playing`属性置为`true`也会自动触发`start`函数调用）
+
+### pause
+
+`() => void` 手动触发动画暂停（`playing`属性置为`false`也会自动触发`pause`函数调用）
+
+### resume
+
+`() => void` 手动触发动画继续（`playing`属性置为`false`后再置为`true`会自动触发`resume`函数调用）
+
+### create
+
+`() => void` 手动触发动画创建
+
+### reset
+
+`() => void` 重置开始标记
+
+### destroy
+
+`() => void` 销毁动画
+
+---
+
+# dialog
+
+[[范例：demo-dialog.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/native-demos/demo-dialog.vue)
+
+用于模态弹窗，默认透明背景色，需要加一个带背景色的 `<div>` 填充。
+
+## 参数
+
+| 参数          | 描述                                                         | 类型                                      | 支持平台 |
+| ------------- | ------------------------------------------------------------ | ----------------------------------------- | -------- |
+| animationType         | 动画效果                                                            | `enum(none, slide, fade, slide_fade)` | `Android、iOS、Web-Renderer、Voltron`    |
+| supportedOrientations | 支持屏幕翻转方向                                                       | `enum(portrait, portrait-upside-down, landscape, landscape-left, landscape-right)[]` | `iOS`    |
+| immersionStatusBar    | 是否是沉浸式状态栏。`default: true`                                         | `boolean`                                                    | `Android、Voltron`    |
+| darkStatusBarText     | 是否是亮色主体文字，默认字体是黑色的，改成 true 后会认为 Modal 背景为暗色调，字体就会改成白色。 | `boolean`                                                    | `Android、iOS、Voltron`    |
+| transparent | 背景是否是透明的。`default: true` | `boolean`                                                    | `Android、iOS、Web-Renderer、Voltron`    |
+
+## 事件
+
+| 事件名称          | 描述                                                         | 类型                                      | 支持平台 |
+| ------------- | ------------------------------------------------------------ | ----------------------------------------- | -------- |
+| show                | 在`Modal`显示时会执行此回调函数。                            | `Function`                                                   | `Android、iOS、Web-Renderer、Voltron`    |
+| orientationChange   | 屏幕旋转方向改变                                           | `Function`                                                   | `Android、iOS`    |
+| requestClose        | 在 `Modal`请求关闭时会执行此回调函数，一般时在 Android 系统里按下硬件返回按钮时触发，一般要在里面处理关闭弹窗。 | `Function`                                                   | `Android、Voltron`    |
+
+---
+
+# swiper
+
+[[范例：demo-swiper.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/native-demos/demo-swiper.vue)
+
+支持翻页的容器，它的每一个子容器组件会被视作一个单独的页面，对应终端 `ViewPager`组件， 里面只能包含 `<swiper-slide>` 组件。
+
+## 参数
+
+| 参数                     | 描述                                                         | 类型                                         | 支持平台 |
+| ------------------------ | ------------------------------------------------------------ | -------------------------------------------- | -------- |
+| bounces | 是否开启回弹效果，默认 `true` | `boolean`                                                  | `iOS、Voltron`    |
+| current              | 实时改变当前所处页码 | `number`                                     | `Android、iOS、Web-Renderer、Voltron`    |
+| initialPage              | 指定一个数字，用于决定初始化后默认显示的页面index，默认不指定的时候是0 | `number`                                     | `Android、iOS、Web-Renderer、Voltron`    |
+| needAnimation            | 切换页面时是否需要动画。                        | `boolean`                                    | `Android、iOS、Voltron`    |
+| scrollEnabled            | 指定ViewPager是否可以滑动，默认为true                        | `boolean`                                    | `Android、iOS、Web-Renderer、Voltron`    |
+| direction            | 设置viewPager滚动方向，不设置默认横向滚动，设置 `vertical` 为竖向滚动                       | `string`                                    | `Android、Voltron`    |
+
+## 事件
+
+| 事件名称          | 描述                                                         | 类型                                      | 支持平台 |
+| ------------- | ------------------------------------------------------------ | ----------------------------------------- | -------- |
+| dragging                | 拖动时触发。                            | `Function`                                                   | `Android、iOS、Web-Renderer、Voltron`    |
+| dropped   | 拖拽松手时触发，就是确定了滚动的页面时触发。                                                            | `Function`                                                   | `Android、iOS、Web-Renderer、Voltron`    |
+| stateChanged*   | 手指行为发生改变时触发，包含了 idle、dragging、settling 三种状态，通过 state 参数返回                                                             | `Function`                                                   | `Android、iOS、Web-Renderer、Voltron`    |
+
+* stateChanged 三种值的意思：
+  * idle 空闲状态
+  * dragging 拖拽中
+  * settling 松手后触发，然后马上回到 idle
+
+---
+
+# swiper-slide
+
+[[范例：demo-swiper.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/native-demos/demo-swiper.vue)
+
+翻页子容器组件容器。
+
+---
+
+# pull-header
+
+[[范例：demo-pull-header.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/native-demos/demo-pull-header-footer.vue)
+
+下拉刷新组件，嵌套在 `ul` 中作为第一个子元素使用
+
+## 事件
+
+| 事件名称          | 描述                                                         | 类型                                      | 支持平台 |
+| ------------- | ------------------------------------------------------------ | ----------------------------------------- | -------- |
+| idle                | 滑动距离在 pull-header 区域内触发一次，参数 contentOffset                            | `Function`                                                   | `Android、iOS、Voltron`    |
+| pulling   | 滑动距离超出 pull-header 后触发一次，参数 contentOffset                                                        | `Function`   | `Android、iOS、Voltron`    |
+| released   | 滑动超出距离，松手后触发一次          | `Function`   | `Android、iOS、Voltron`    |
+
+## 方法
+
+### collapsePullHeader
+
+`(otions: { time: number }) => void` 收起顶部刷新条 `<pull-header>`。当使用了 `pull-header` 后，每当下拉刷新结束需要主动调用该方法收回 pull-header。
+
+> options 参数，最低支持版本 `2.14.0`
+>
+>* time: number: 可指定延迟多久后收起 PullHeader，单位ms
+
+---
+
+# pull-footer
+
+[[范例：demo-pull-footer.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/native-demos/demo-pull-header-footer.vue)
+
+上拉刷新组件，嵌套在 `ul` 中作为最后一个子元素使用
+
+## 事件
+
+| 事件名称          | 描述                                                         | 类型                                      | 支持平台 |
+| ------------- | ------------------------------------------------------------ | ----------------------------------------- | -------- |
+| idle                | 滑动距离在 pull-footer 区域内触发一次，参数 contentOffset                            | `Function`                                                   | `Android、iOS、Voltron`    |
+| pulling   | 滑动距离超出 pull-footer 后触发一次，参数 contentOffset      | `Function`   | `Android、iOS、Voltron`    |
+| released   | 滑动超出距离松手后触发一次          | `Function`   | `Android、iOS、Voltron`    |
+
+## 方法
+
+### collapsePullFooter
+
+`() => void` 收起底部刷新条 `<pull-footer>`。
+
+---
+
+# waterfall
+
+> 最低支持版本 2.9.0
+
+[[范例：demo-waterfall]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/native-demos/demo-waterfall.vue)
+
+瀑布流组件，子元素必须是 `waterfall-item` ，瀑布流组件下拉刷新需在最外层用`ul-refresh-wrapper`， 可在`waterfall` 内用 `pull-footer` 展示上拉加载文案。
+
+## 参数
+
+| 参数              | 描述                                                  | 类型       | 支持平台 |
+| ----------------- | ----------------------------------------------------- | ---------- | -------- |
+| columnSpacing     | 瀑布流每列之前的水平间距                                      | `number`   | `Android、iOS、Voltron`    |
+| interItemSpacing  | item 间的垂直间距                                        | `number`   | `Android、iOS、Voltron`    |
+| contentInset      | 内容缩进 ，默认值 `{ top:0, left:0, bottom:0, right:0 }`  | `Object`   | `Android、iOS、Voltron`    |
+| containBannerView | 是否包含`bannerView`，只能有一个bannerView，`Android` 暂不支持  | `boolean`  | `iOS、Voltron`    |
+| containPullHeader | 是否包含`pull-header`；`Android` 暂不支持，可以用 `ul-refresh` 组件替代  | `boolean`  | `iOS、Voltron`    |
+| containPullFooter | 是否包含 `pull-footer` | `boolean`  | `Android、iOS、Voltron` |
+| numberOfColumns   | 瀑布流列数量，Default: 2                                               | `number`   | `Android、iOS、Voltron`    |
+| preloadItemNumber | 滑动到瀑布流底部前提前预加载的 item 数量       | `number`   | `Android、iOS、Voltron`    |
+
+## 事件
+
+| 事件名称              | 描述           | `类型`     | 支持平台 |
+| --------------------- | -------------- | ---------- | -------- |
+| endReached      | 当所有的数据都已经渲染过，并且列表被滚动到最后一条时，将触发 `onEndReached` 回调。                                           | `Function` | `Android、iOS、Voltron`    |
+| scroll          | 当触发 `WaterFall` 的滑动事件时回调。`startEdgePos`表示距离 List 顶部边缘滚动偏移量；`endEdgePos`表示距离 List 底部边缘滚动偏移量；`firstVisibleRowIndex`表示当前可见区域内第一个元素的索引；`lastVisibleRowIndex`表示当前可见区域内最后一个元素的索引；`visibleRowFrames`表示当前可见区域内所有 item 的信息(x，y，width，height)    | `{ nativeEvent: { startEdgePos: number, endEdgePos: number, firstVisibleRowIndex: number, lastVisibleRowIndex: number, visibleRowFrames: Object[] } }` | `Android、iOS、Voltron`    |
+
+## 方法
+
+### scrollToIndex
+
+`(obj: { index: number, animated: boolean }) => void` 通知 Waterfall 滑动到第几个 item。
+
+> * `index`: number - 滑动到的第 index 个 item
+> * `animated`: boolean - 滑动过程是否使用动画, 默认 `true`
+
+### scrollToContentOffset
+
+`(obj: { xOffset: number, yOffset: number, animated: boolean }) => void` 通知 Waterfall 滑动到某个具体坐标偏移值(offset)的位置。
+
+> * `xOffset`: number - 滑动到 X 方向的 offset
+> * `yOffset`: number - 滑动到 Y 方向的 offset
+> * `animated`: boolean - 滑动过程是否使用动画，默认 `true`
+
+---
+
+# waterfall-item
+
+> 最低支持版本 2.9.0
+
+瀑布流组件 Cell 容器，瀑布流子元素
+
+| 参数                  | 描述                                                         | 类型                                                        | 支持平台 |
+| --------------------- | ------------------------------------------------------------ | ----------------------------------------------------------- | -------- |
+| type            | 指定一个函数，在其中返回对应条目的类型（返回Number类型的自然数，默认是0），List 将对同类型条目进行复用，所以合理的类型拆分，可以很好地提升 List 性能。 | `number`              | `Android、iOS、Voltron`    |
+| key             | 指定一个函数，在其中返回对应条目的 Key 值，详见 [Vue 官网](//vuejs.org/v2/guide/list.html) | `string`                                    | `Android、iOS、Voltron`    |
diff --git a/docs/api/hippy-vue-next/introduction.md b/docs/api/hippy-vue-next/introduction.md
new file mode 100644
index 00000000000..b4d3e1dfd84
--- /dev/null
+++ b/docs/api/hippy-vue-next/introduction.md
@@ -0,0 +1,39 @@
+
+# hippy-vue 介绍
+
+hippy-vue 基于官方 Vue 2.x 源代码，通过改写 [node-ops](//github.com/Tencent/Hippy/blob/master/packages/hippy-vue/src/runtime/node-ops.js) 外挂实现自定义渲染层，但不仅仅是个到终端的渲染层，还同时实现前端组件到终端的映射、CSS 语法解析。和其它跨端框架不同，它尽力将 Web 端的开发体验带到终端上来，同时保持了对 Web 生态的兼容。
+
+---
+
+# 架构图
+
+<img src="assets/img/hippy-vue.png" alt="hippy-vue 架构图" width="80%"/>
+<br />
+<br />
+
+# 初始化
+
+```javascript
+import Vue from '@hippy/vue';
+import App from './app.vue';
+const app = new Vue({
+  // 终端指定的 App 名称
+  appName: 'Demo',
+  rootView: '#root',
+  // 渲染入口
+  render: h => h(App),
+});
+
+/**
+  * $start 是 Hippy 启动完以后触发的回调
+  * @param {Function} callback - 引擎加载成功后回调函数
+  *  @param {Object} instance - 业务vue实例对象
+  *  @param {Object} initialProps - 终端给前端的初始化参数，终端可以将一些启动需要的自定义属性放到入口文件里
+  */
+app.$start((instance, initialProps) => {
+  console.log('instance', instance, 'initialProps', initialProps);
+});
+
+// 如果需要在首个 View 渲染时就获取到 initialProps，可以通过直接读取 app.$options.$superProps 
+
+```
diff --git a/docs/api/hippy-vue-next/native-event.md b/docs/api/hippy-vue-next/native-event.md
new file mode 100644
index 00000000000..ce5a637f129
--- /dev/null
+++ b/docs/api/hippy-vue-next/native-event.md
@@ -0,0 +1,88 @@
+# 事件
+
+有一些事件不是发给单个 UI，而是发给整个业务的，例如屏幕的翻转、网络的变化等等，我们称之它为 `终端事件`。
+
+Hippy 提供了两种方式来管理全局事件:
+
++ `Hippy.on`、`Hippy.off`、`Hippy.emit` 是框架无关的全局事件 EventBus，主要用来监听如 `dealloc`、`destroyInstance` 等特殊 C++ 底层事件，也可以手动定制 JS 内的全局事件。
+
++ `app.$on`、`app.$off`、`app.$emit` 是 Vue 定制的 EventBus，除了可以手动定制 JS 内的全局事件外，所有全局 `NativeEvent` 都由其来分发，如 `rotate` 事件等。
+
+---
+
+# 事件监听器
+
+这里监听 rotate 的事件，里面有回调参数 result。
+
+```js
+// 将入口文件中 setApp() 时保存的 Vue 实例取出来。
+const app = getApp();
+
+export default {
+  method: {
+    listener(rsp) {
+      console.log(rsp.result);
+    }
+  },
+  mounted() {
+    // 通过 app 监听 rotate 事件，并通过 this.listener 在事件发生时触发回调。
+    app.$on('rotate', this.listener);
+  }
+}
+
+```
+
+# 事件触发
+
+如果需要手动发送事件，可以通过 `app.$emit` 触发。
+
+```js
+const app = getApp();
+app.$emit('rotate', { width: 100, height: 100 });
+```
+
+# 事件卸载
+
+如果不需要使用的时候记得调用一下移除监听的方法，一般放在组件的卸载生命周期中执行。
+
+```js
+const app = getApp();
+app.$off('rotate', this.listener);
+```
+
+# JS 引擎销毁事件
+
+`最低支持版本 2.3.4`
+
+当 hippy js 引擎被销毁前会触发该事件，能够保证回调函数里的最后一句 js 代码被执行到，hippy 业务可以通过监听 `dealloc` 事件做一些离开时的操作，但回调函数不能使用 `async`
+
+```jsx
+Hippy.on('dealloc', () => {
+    // do something
+});
+```
+
+# 界面节点销毁事件
+
+`最低支持版本 2.3.4`
+
+当 RootView 被卸载时调用该事件，与 `dealloc` 不同的是该事件早于 `dealloc` 触发，但不会阻塞 JS 线程。
+
+```jsx
+Hippy.on('destroyInstance', () => {
+  // do something
+});
+```
+
+# 容器大小改变事件
+
+!> iOS 最低支持版本 `2.16.0`
+
+当容器大小改变时，如屏幕旋转、折叠屏切换等，会触发该事件
+
+```jsx
+app.$on('onSizeChanged', ({rootViewId, oldWidth, oldHeight, width, height}) => {
+    // rootViewId: root view id; oldWidth: 旧的宽度；oldHeight: 旧的高度；width: 新的宽度; height: 新的高度;
+    console.log('size', rootViewId, oldWidth, oldHeight, width, height);
+});
+```
diff --git a/docs/api/hippy-vue-next/router.md b/docs/api/hippy-vue-next/router.md
new file mode 100644
index 00000000000..76ab29a9165
--- /dev/null
+++ b/docs/api/hippy-vue-next/router.md
@@ -0,0 +1,7 @@
+# 路由
+
+vue-router 通过小幅度修改官方路由，实现了 [@hippy/vue-router](//www.npmjs.com/package/@hippy/vue-router)，提供一样的接口。
+
+文档可以直接进行参考：[vue-router 官方网站](//router.vuejs.org/) 。
+
+但不支持页面切换时的动画效果，因为 `<transition>` 组件尚未实现。
diff --git a/docs/api/hippy-vue-next/style.md b/docs/api/hippy-vue-next/style.md
new file mode 100644
index 00000000000..c16ecf1ca14
--- /dev/null
+++ b/docs/api/hippy-vue-next/style.md
@@ -0,0 +1,38 @@
+# 样式
+
+标准 Hippy 中长度单位是不允许带有单位，不过为了和浏览器保持兼容，hippy-vue 采取了 1px = 1pt 的方案进行换算，把 CSS 单位中的 px 直接去掉变成了 Hippy 中不带单位的数字。
+
+HippyVue 提供了 `beforeLoadStyle` 的 Vue options 勾子函数，供开发者做定制化修改 CSS 样式，如
+
+```js
+    new Vue({
+      // ...
+      beforeLoadStyle(decl) {
+         let { type, property, value } = decl;
+         console.log('property|value', property, value); // => height, 1rem
+          // 比如可以对 rem 单位进行处理
+         if(typeof value === 'string' && /rem$/.test(value)) {
+             // ...value = xxx
+         } 
+         return { ...decl, value}
+      }
+    });
+```
+
+# CSS 选择器
+
+目前已经实现了基本的 `Universal`、`Type`、`ID`、`Class`、`Grouping` 选择器，而且可以支持除兄弟组合器以外的基本组合关系。
+
+## Scoped & Attribute
+
+> `2.15.0` 版本增加支持 Vue `scoped` 样式能力, `2.15.2` 支持子组件根元素样式合并
+
+> `2.15.1` 版本增加支持 `Attribute` 选择器和 Vue `deep` 深度选择器
+
+如何开启？
+
+1. 升级 `@hippy/vue` 和 `@hippy/vue-css-loader` 到 `2.15.1+` 版本
+2. Vue2.0 设置全局开关 `Vue.config.scoped = true;`（Vue2.0 默认 `scoped` 和 `Attribute` 选择器能力关闭，Vue3.0 默认开启无需设置开关）
+
+
+
diff --git a/docs/api/hippy-vue-next/vue-native.md b/docs/api/hippy-vue-next/vue-native.md
new file mode 100644
index 00000000000..bbeb81c073a
--- /dev/null
+++ b/docs/api/hippy-vue-next/vue-native.md
@@ -0,0 +1,400 @@
+<!-- markdownlint-disable no-duplicate-header -->
+
+# 模块
+
+hippy-vue 通过在 Vue 上绑定了一个 `Native` 属性，实现获取终端设备信息、以及调用终端模块。也可以用来监测是否在 Hippy 环境下运行。
+
+> 对应 Demo: [demo-vue-native.vue](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/native-demos/demo-vue-native.vue)
+
+---
+
+# 获取终端信息
+
+它无需任何方法，直接取值即可。
+
+## version
+
+获取 hippy-vue 的版本
+
+* 示例
+
+```javascript
+console.log(Vue.Native.version); // => 2.0.0
+```
+
+## Device
+
+获取设备名称，iPhone 可以拿到具体的 iPhone 型号，Android 设备暂时只能拿到 `Android device`的文本。
+
+## OSVersion
+
+iOS 版本。
+
+## APILevel
+
+Android 操作系统版本。
+
+## SDKVersion
+
+Hippy 终端 SDK 版本。
+
+## Platform
+
+获取操作系统类型。
+
+* 示例
+
+```javascript
+console.log(Vue.Native.Platform); // => android
+```
+
+## Dimensions
+
+获取屏幕分辨率。
+
+* 示例
+
+```javascript
+const { window, screen } = Vue.Native.Dimensions;
+console.log(`屏幕尺寸：${screen.height}x${screen.width}`); // => 640x480
+console.log(`带状态栏的窗口尺寸：${window.height}x${window.width}`); // => 640x460
+```
+
+## PixelRatio
+
+获取设备像素比例。
+
+* 示例
+
+```javascript
+console.log(Vue.Native.PixelRatio); // => 3
+```
+
+## isIPhoneX
+
+获取是否是异形屏幕的 iPhoneX。
+
+## screenIsVertical
+
+屏幕是否切换成横屏。
+
+## OnePixel
+
+一个像素的 dp/pt 值。
+
+## Localization
+
+>* 最低支持版本 2.8.0
+
+输出国际化相关信息，`object: { country: string , language: string, direction: number }`， 其中 `direction` 为 0 表示 LTR 方向，1 表示 RTL 方向
+
+---
+
+# AsyncStorage
+
+>* 最低支持版本 2.7.0
+>* AsyncStorage 能力与挂载在全局变量下的 localStorage 模块一致，localStorage 可以在所有版本使用
+
+[[AsyncStorage 范例（与Hippy-React AsyncStorage 一致）]](//github.com/Tencent/Hippy/tree/master/examples/hippy-react-demo/src/modules/AsyncStorage/index.jsx)
+
+AsyncStorage 是一个简单的、异步的、持久化的 Key-Value 存储系统。
+
+* 示例：
+
+``` js
+Vue.Native.AsyncStorage.setItem('itemKey', 'itemValue');
+Vue.Native.AsyncStorage.getItem('itemKey');
+```
+
+## 方法
+
+### AsyncStorage.getAllKeys
+
+`() => Promise<string[]>` 获取 AsyncStorage 所有的key。
+
+### AsyncStorage.getItem
+
+`(key: string) => Promise<string>` 根据 key 值获取对应数据。
+
+> * key: string - 需要获取值的目标 key
+
+### AsyncStorage.multiGet
+
+`(key: string[]) => Promise<[key: string, value: value][]>` 一次性用多个 key 值的数组去批量请求缓存数据，返回值将在回调函数以键值对的二维数组形式返回。
+
+> * key: string[] - 需要获取值的目标 key 数组
+
+### AsyncStorage.multiRemove
+
+`(key: string[]) => void` 调用此函数批量删除 AsyncStorage 里面在传入的 keys 数组存在的 key 值。
+
+> * key: string[] - 需要删除的目标 key 数组
+
+### AsyncStorage.multiSet
+
+`(keyValuePairs: [key: string, value: value][]) => void` 调用这个函数可以批量存储键值对对象。
+
+> * keyValuePairs: [key: string, value: value][] - 需要设置的储键值二维数组
+
+### AsyncStorage.removeItem
+
+`(key: string) => void` 根据 key 值删除对应数据。
+
+> * key: string - 需要删除的目标 key
+
+### AsyncStorage.setItem
+
+`(key: string, value: string) => void` 根据 key 和 value 设置保存键值对。
+
+> * key: string - 需要获取值的目标 key
+> * value: string - 需要获取值的目标值
+
+---
+
+# BackAndroid
+
+[[BackAndroid 范例]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/main-native.js)
+
+可以监听 Android 实体键的回退，在退出前做操作或拦截实体键的回退。
+
+>* 最低支持版本 2.7.0
+>* 注意：该方法需要终端拦截实体返回按钮的事件，可以参考 [android-demo 的 onBackPressed 方法](//github.com/Tencent/Hippy/blob/master/examples/android-demo/example/src/main/java/com/tencent/mtt/hippy/example/MyActivity.java)
+
+## 方法
+
+### BackAndroid.addListener
+
+`(handler: () => boolean) => { remove: Function }` 监听Android实体健回退，触发时执行 handler 回调函数。回调函数返回 true 时，拦截终端的回退操作；回调函数返回 false 时, 就不会拦截回退。该方法会返回包含 `remove()` 方法的对象，可通过调用 `remove()` 方法移除监听，同 `BackAndroid.removeListener`。
+
+> * handler: Function - 实体键回退时触发的回调函数
+
+### BackAndroid.exitApp
+
+`() => void`直接执行终端的退出 App 逻辑。
+
+### BackAndroid.removeListener
+
+`(handler: () => boolean) => void` 移除 BackAndroid 关于Android实体健回退事件的监听器。
+
+* handler: Function - 建议使用 `addListener` 返回的包含 `remove()` 方法的对象，也可以是之前 BackAndroid 的回调函数。
+
+---
+
+# callNative/callNativeWithPromise
+
+调用终端模块的方法，`callNative` 一般用于无返回的模块方法调用，`callNativeWithPromise` 一般用于有返回的模块方法调用，它会返回一个带着结果的 Promise。
+
+# callUIFunction
+
+调用组件定义的终端方法
+
+`callUIFunction(instance: ref, method: string, options: Array)`
+
+> * instance: 组件的引用 Ref
+> * method：方法名称，如 ListView 的 `scrollToIndex`
+> * options: 需传递的数据，如 ListView 的 `[xIndex, yIndex, animated]`
+
+---
+
+# Clipboard
+
+剪贴板读写模块，但是目前只支持纯文本。
+
+## 方法
+
+### getString()
+
+返回值：
+
+* string
+
+### setString(content)
+
+| 参数 | 类型     | 必需 | 参数意义 |
+| --------  | -------- | -------- |  -------- |
+| content | string | 是       | 保存进入剪贴板的内容 |
+
+---
+
+# ConsoleModule
+
+> 最低支持版本 2.10.0
+
+提供了将前端日志输出到 iOS 终端日志和 [Android logcat](//developer.android.com/studio/command-line/logcat) 的能力
+
+## 方法
+
+### ConsoleModule.log
+
+`(...value: string) => void`
+
+### ConsoleModule.info
+
+`(...value: string) => void`
+
+### ConsoleModule.warn
+
+`(...value: string) => void`
+
+### ConsoleModule.error
+
+`(...value: string) => void`
+
+> * `log` 和 `info` 默认都输出为终端 INFO 级别日志
+> * Hippy 2.10.0 版本之后将原始 js 的 `console` 方法与 `ConsoleModule` 方法进行分离，`console` 不再输出日志到终端
+
+---
+
+# Cookie
+
+Hippy 中通过 fetch 服务返回的 `set-cookie` Header 会自动将 Cookie 保存起来，下次再发出请求的时候就会带上，业务可以获取或者修改保存好的 Cookie。
+
+## 方法
+
+### getAll(url)
+
+| 参数 | 类型     | 必需 | 参数意义 |
+| --------  | -------- | -------- |  -------- |
+| url | string | 是       | 获取指定 url 下的所有 cookies，`2.14.0` 版本后过期的 Cookies 将不再返回。 |
+
+返回值：
+
+* `Prmoise<string>`，获取到诸如 `name=hippy;network=mobile` 的字符串。
+
+### set(url, keyValue, expireDate)
+
+参数：
+
+| 参数 | 类型     | 必需 | 参数意义 |
+| -------- | -------- | -------- |  -------- |
+| url | string | 是   | 设置指定 URL 下设置的 cookie |
+| keyValue | string | 是   | 需要设置成 cookie 的完整字符串，例如 `name=hippy;network=mobile`，`2.14.0` 版本后设置 `空字符串` 会强制清除（过期）指定域名下的所有 Cookies |
+| expireDate | Date | 否 | Date 类型的过期时间，不填不过期, 内部会通过 `toUTCString` 转成 `String` 传给客户端 |
+
+---
+
+# getElemCss
+
+获取具体节点的 CSS 样式。
+
+> 最低支持版本 `2.10.1`
+
+`(ref: ElementNode) => {}`
+
+* 示例：
+
+```js
+this.demon1Point = this.$refs['demo-1-point'];
+console.log(Vue.Native.getElemCss(this.demon1Point)) // => { height: 80, left: 0, position: "absolute" }
+```
+
+---
+
+# ImageLoader
+
+通过该模块可以对远程图片进行相应操作
+
+> 最低支持版本 `2.7.0`
+
+## 方法
+
+### ImageLoader.getSize
+
+`(url: string) => Promise<{width, height}>` 获取图片大小（会同时预加载图片）。
+
+> * url - 图片地址
+
+### ImageLoader.prefetch
+
+`(url: string) => void` 用于预加载图片。
+
+> * url - 图片地址
+
+---
+
+# measureInAppWindow
+
+> 最低支持版本 `2.11.0`
+
+测量在 App 窗口范围内某个组件的尺寸和位置，注意需要保证节点实例真正上屏后（layout事件后）才能调用该方法。
+
+`(ref) => Promise<{top: number, left: number, right: number, bottom: number, width: number, height: number}>`
+
+> * Promise resolve 的参数可以获取到引用组件在 App 窗口范围内的坐标值和宽高，如果出错或 [节点被优化（仅在Android）](api/style/layout?id=collapsable) 会返回 { top: -1, left: -1, right: -1, bottom: -1, width: -1, height: -1 }
+
+---
+
+# getBoundingClientRect
+
+> 最低支持版本 `2.15.3`，原有 `measureInWindow` 和 `measureInAppWindow` 将逐渐废弃
+
+测量元素在宿主容器（RootView）或者 App 窗口（屏幕）范围内的尺寸和位置。
+
+`(instance: ref, options: { relToContainer: boolean }) => Promise<DOMRect: { x: number, y: number, width: number, height: number, bottom: number, right: number, left: number, top: number }>`
+
+> * instance: 元素或组件的引用 Ref。
+> * options: 可选参数，`relToContainer` 表示是否相对宿主容器（RootView）进行测量，默认 `false` 相对 App 窗口或屏幕进行测量。当对宿主容器（RootView）进行测量时，`iOS` 包含顶部状态栏高度，`Android` 不包含。
+> * DOMRect: 与 [MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect) 一致的返回参数, 可以获取元素相应的位置信息和尺寸，如果出错或者 [节点被优化（仅在Android）](api/style/layout?id=collapsable)，会触发 `Promise.reject`。
+
+---
+
+# NetInfo
+
+通过该接口可以获得当前设备的网络状态；也可以注册一个监听器，当系统网络切换的时候，得到网络变化通知。
+
+> 最低支持版本 `2.7.0`
+
+安卓的开发者，在请求网络状态之前，你需要在app的 `AndroidManifest.xml` 加入以下配置 :
+
+```xml
+<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
+```
+
+## 网络状态
+
+以异步的方式判断设备是否联网，以及是否使用了移动数据网络。
+
+* `NONE` -  设备处于离线状态。
+* `WIFI` - 设备通过wifi联网
+* `CELL` - 设备通过移动网络联网
+* `UNKNOWN` - 出现异常或联网状态不可知
+
+## 方法
+
+### NetInfo.addEventListener
+
+`(eventName: string, handler: Function) => NetInfoRevoker` 添加一个网络变化监听器。
+
+> * eventName: 'change' - 事件名称
+> * handler: ({ network_info:string }) => any - 网络发生变化时触发的回调函数
+
+### NetInfo.fetch
+
+`() => Promise<NetInfo>` 用于获取当前的网络状态。
+
+### NetInfo.removeEventListener
+
+`(eventName: string, handler: NetInfoRevoker | Function) => void` 移除事件监听器
+
+> * eventName: 'change' - 事件名称
+> * handler: Function - 需要删除的对应事件监听。
+
+---
+
+# parseColor
+
+色值类型转换，通过该 API 获取终端可识别的 `int32` 类型色值。可应用于与终端直接通讯（如 `callNative`) 时的接口传参。
+
+| 参数 | 类型     | 必需 | 参数意义 |
+| --------  | -------- | -------- |  -------- |
+| color | `string` `number` | 是  | 转换的色值，支持类型：`rgb`,`rgba`, `hex` |
+
+返回值：
+
+* `number`: 返回值为终端可识别的 `int32Color`
+
+* 示例：
+
+``` js
+const int32Color = Vue.Native.parseColor('#40b883') // int32Color: 4282431619
+```
diff --git a/docs/api/hippy-vue-next/vue3.md b/docs/api/hippy-vue-next/vue3.md
new file mode 100644
index 00000000000..cc199bb8215
--- /dev/null
+++ b/docs/api/hippy-vue-next/vue3.md
@@ -0,0 +1,310 @@
+# Hippy-Vue-Next (基于Vue3)
+
+<br />
+
+# 介绍
+
+@hippy/vue-next 基于 @hippy/vue 的已有逻辑。通过 Vue3.x 提供的 [createRenderer()](//github.com/vuejs/vue-next/blob/v3.0.0-alpha.0/packages/runtime-core/src/renderer.ts#L154)，无需侵入 Vue 代码直接通过外部库的方式引用 Vue，
+可以及时跟随 Vue 生态，在实现原理上与 @hippy/vue 基本一致。
+
+@hippy/vue-next 全部代码采用 typescript 进行编写，可以拥有更好的程序健壮性和类型提示，并且 @hippy/vue-next 在整体架构上也进行了一定程度的优化。
+
+# 架构图
+
+<img src="assets/img/hippy-vue-next-arch-cn.png" alt="hippy-vue-next 架构图" width="80%"/>
+<br />
+<br />
+
+# 如何使用
+
+@hippy/vue-next 支持的能力与 @hippy/vue 基本一致。因此关于 Hippy-Vue 的组件、模块、样式等就不做额外声明了，可以直接参考 [Hippy-Vue](api/hippy-vue/introduction)
+中的相关内容，本文档仅对差异部分进行说明：
+
+## 初始化
+
+```javascript
+// app.ts
+import { defineComponent, ref } from 'vue';
+import { type HippyApp, createApp } from '@hippy/vue-next';
+
+// 创建 Hippy App 实例，需要注意 Vue3.x 使用 Typescript，因此需要使用 defineComponent 将组件对象进行包裹
+const app: HippyApp = createApp(defineComponent({
+  setup() {
+    const counter = ref(0);
+    return {
+      counter,
+    }
+  }
+}), {
+  // Hippy App Name 必传，示例项目可以使用 Demo
+  appName: 'Demo',
+});
+
+// 启动 Hippy App
+app.$start().then(({ superProps, rootViewId }) => {
+  // superProps 是 Native 传入的初始化参数，如果需要做路由预处理等操作，则可以让 Native 将对应参数传入
+  // rootViewId 是 Native 当前 Hippy 实例所挂载的 Native 的根节点的 id
+  // mount app，完成渲染上屏 
+  app.mount('#mount');
+})
+```
+
+如果要使用 Vue-Router，则需要使用另外的初始化逻辑
+
+```javascript
+// Vue + Vue Router
+
+// app.vue
+<template>
+  <div><span>{{ msg }}</span></div>
+  <router-view />
+</template>
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+
+export default defineComponent({
+  setup() {
+    const msg: string = 'This is the Root Page';
+    return {
+      msg,
+    };
+  },
+});
+</script>
+
+// index.vue
+<template>
+  <div><span>{{ msg }}</span></div>
+</template>
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+
+export default defineComponent({
+  setup() {
+    const msg: string = 'This is the Index Page';
+    return {
+      msg,
+    };
+  },
+});
+</script>
+
+// app.ts
+import { defineComponent, ref } from 'vue';
+import { type HippyApp, createApp } from '@hippy/vue-next';
+import { createHippyRouter } from '@hippy/vue-router-next-history';
+import { type Router } from 'vue-router';
+import App from 'app.vue';
+
+// 创建 Hippy App 实例，需要注意 Vue3.x 使用 Typescript，因此需要使用 defineComponent 将组件对象进行包裹
+const app: HippyApp = createApp(App, {
+  // Hippy App Name，必传，示例项目可以使用 Demo
+  appName: 'Demo',
+});
+
+// 路由列表
+const routes = [
+  {
+    path: '/',
+    component: Index,
+  },
+];
+
+// 创建路由对象
+const router: Router = createHippyRouter({
+  routes,
+});
+
+// 使用路由
+app.use(router);
+
+// 启动 Hippy App
+app.$start().then(({ superProps, rootViewId }) => {
+  // superProps 是 Native 传入的初始化参数，如果需要做路由预处理等操作，则可以让 Native 将对应参数传入
+  // rootViewId 是 Native 当前 Hippy 实例所挂载的 Native 的跟节点的 id
+
+  // 因为现在使用的是vue-router的memory history，因此需要手动推送初始位置，否则router将无法ready
+  // 浏览器上则是由vue-router根据location.href去匹配，默认推送根路径'/'，如果想要实现类似浏览器中默认跳转到指定页面，可以让终端同学将初始化的 path
+  // 从 superProps 中传入，然后再通过 path 的值去进行 router.push({ path: 'other path' }) 等操作
+  router.push('/');
+  
+  // mount app，完成渲染上屏 
+  app.mount('#mount');
+})
+```
+
+> @hippy/vue-router-next-history 对 vue-router 的 history 模式做了处理，为 Android 加上了触发物理返回键时优先回退历史记录的逻辑
+
+如果不需要这个逻辑，可以直接使用原生 vue-router 来实现路由：
+
+```javascript
+import { createRouter, createMemoryHistory, type Router } from 'vue-router';
+
+// 路由列表
+const routes = [
+  {
+    path: '/',
+    component: Index,
+  },
+]; 
+
+const router: Router = createRouter({
+  history: createMemoryHistory(),
+  routes,
+});
+```
+
+# 其他差异说明
+
+目前 `@hippy/vue-next` 与 `@hippy/vue` 功能上基本对齐，不过在 API 方面与 @hippy/vue 有一些区别，以及还有一些问题还没有解决，这里做些说明：
+
+- Vue.Native
+
+  在 @hippy/vue 中，Native 提供的能力是通过挂载在全局 Vue 对象的 Native 属性来提供的，在 Vue3.x 中这种实现方式不再可行，因此现在 Native 属性需通过 @hippy/vue-next 导出来使用
+
+  ```javascript
+  import { Native } from '@hippy/vue-next';
+  
+  console.log('do somethig', Native.xxx)
+  ```
+
+- registerElement
+
+  @hippy/vue 中 `registerElement` 方法是挂在全局 Vue 中，与 Native 类似，@hippy/vue-next 中 `registerElement` 方法也是单独提供了导出
+
+  ```javascript
+    import { registerElement } from '@hippy/vue-next';
+  ```
+
+- 全局事件
+
+  在 @hippy/vue 中，全局事件是挂载在 Vue 上的，在 @hippy/vue-next 中，提供了单独的 `EventBus` 事件总线来处理该问题
+
+  ```javascript
+  import { EventBus } from '@hippy/vue-next';
+  
+  // 监听容器大小改变事件
+  EventBus.$on('onSizeChanged', ({ oldWidth, oldHeight, width, height }) => {
+    // oldWidth: 旧的宽度；oldHeight: 旧的高度；width: 新的宽度; height: 新的高度
+    console.log('size', oldWidth, oldHeight, width, height);
+  });
+  // 触发全局事件
+  EventBus.$emit('eventName', {
+    ...args, // 事件参数
+  });
+  ```
+
+- v-model 指令
+
+  因为 Vue3.x 中内置指令的实现采用的是编译时插入代码的方式，目前 v-model 指令还没有找到很好的办法去处理，这里可以先使用临时解决办法实现对应功能
+
+  ```javascript
+  // 具体的可以参考 demo 中的 demo-input.vue 中的示例
+  <template>
+    <input type="text" ref="inputRef" :value="textValue" @change="textValue = $event.value" />
+    <div>
+      <span>Input Value：{{ textValue }}</span>
+    </div>
+  </template>
+  <script lang="ts">
+  import { defineComponent, ref } from '@vue/runtime-core';
+  
+  export default defineComponent({
+    setup() {
+      const inputRef = ref(null);
+      const textValue = ref('This is default value.');
+      return {
+        inputRef,
+        textValue,
+      };
+    },
+  }); 
+  </script>
+  ```
+
+- Keep-Alive HMR 问题
+
+  在示例代码中，我们的路由组件是包裹在 Keep-Alive 组件内的，但是目前使用 Keep-Alive 包裹的路由组件无法实现开发时热更新，需要刷新整个实例才能完成刷新。
+  如果是不包裹在 Keep-Alive 中则没有这个问题。目前官方[该问题](https://github.com/vuejs/core/pull/5165)也尚未解决，等待官方解决后升级 Vue 即可解决该问题。
+
+  !> vue@3.2.45+ 已经修复了该[问题](https://github.com/vuejs/core/pull/7049)，使用3.2.45及以上版本进行开发时，keep-alive内的组件也可以热更新了
+
+- Vue3.x 变量 Proxy 问题
+
+  因为 3.x 的响应式是通过 Proxy 代理对象来实现的，所以我们得到的对象其实是 Proxy 的实例而非原始对象，因此调用终端接口时需要注意，终端并不认识 Proxy 对象，需要使用 Vue 提供的 [`toRaw`](https://cn.vuejs.org/api/reactivity-advanced.html#toraw) 方法来拿到原始的对象并传递给终端接口。
+
+- Native 接口和自定义组件的类型提示
+
+    @hippy/vue-next 提供了 Native 模块接口的 Typescript 类型提示，如果有业务自定义的 Native 接口，也可以采用类似的方式进行扩展
+  
+    ```javascript
+    declare module '@hippy/vue-next' {
+      export interface NativeInterfaceMap {
+        // 用户自定义的 Native 接口，接下来你可以在调用 Native.callNative，Native.callNativeWithPromise 时拥有类型提示了
+      }
+    }
+    ```
+
+    @hippy/vue-next 也参考 `lib.dom.d.ts` 的事件声明提供了事件类型，具体可以参考 hippy-event.ts 文件。如果需要在内置的事件上进行扩展，可以采用类似方式
+
+    ```javascript
+      declare module '@hippy/vue-next' {
+        export interface HippyEvent {
+          testProp: number;
+        }
+      }
+    ```
+
+    在使用 `registerElement` 去注册组件的时候，利用了 typescript 的 `type narrowing`，在 switch case 中提供了准确的类型提示。如果在业务注册自定义组件的时候也需要类型提示，可以采用如下方式:
+
+    ```javascript
+      export interface HippyGlobalEventHandlersEventMap {
+        // extend new event name and related event interface
+        onTest: CustomEvent;
+        // extend existing event interface
+        onAnotherTest: HippyEvent;
+      }
+    ```
+
+    更多信息可以参考 demo 里的 [extend.ts](https://github.com/Tencent/Hippy/blob/master/examples/hippy-vue-next-demo/src/extend.ts).
+  
+- whitespace 处理
+
+  Vue2.x Vue-Loader `compilerOptions.whitespace` 默认值为 `preserve`， Vue3.x 默认值为 `condense`（可参考 [Vue3 whitespace说明](https://cn.vuejs.org/api/application.html#app-config-compileroptions-whitespace)）。
+
+  关闭 `trim` 能力的配置方式也有所不同，改在了 `createApp` 的参数中进行设置。
+
+  ```javascript
+    // entry file
+    const app: HippyApp = createApp(App, {
+     // hippy native module name
+     appName: 'Demo',
+     // trimWhitespace default is true
+     trimWhitespace: false,
+    });
+
+    //  webpack script
+    rules: [
+    {
+        test: /\.vue$/,
+        use: [
+        {
+          loader: vueLoader,
+          options: {
+              compilerOptions: {
+                // whitespace handler, default is 'condense'
+                whitespace: 'condense',
+              },
+          },
+        }],
+     },
+    ]
+  ```
+
+- dialog 差异
+
+  `<dialog>` 组件的第一个子元素不能设置  `{ position: absolute }` 样式，如果想将 `<dialog>` 内容铺满全屏，可以给第一个子元素设置 `{ flex: 1 }` 样式或者显式设置 width 和 height 数值。这与 Hippy3.0 的逻辑保持一致。
+
+# 示例
+
+更多使用请参考 [示例项目](https://github.com/Tencent/Hippy/tree/master/examples/hippy-vue-next-demo).
diff --git a/docs/api/hippy-vue-next/web.md b/docs/api/hippy-vue-next/web.md
new file mode 100644
index 00000000000..046700833aa
--- /dev/null
+++ b/docs/api/hippy-vue-next/web.md
@@ -0,0 +1,5 @@
+# 转 Web
+
+## WebRenderer 方案
+
+Hippy 全新 [`WebRenderer`](web/integration.md) 方案，增加基于公共通信协议的转换层，业务开发者可以使用同一套 Hippy 语法开发的业务代码，映射成 JS 实现的组件和模块，上层无论使用 React，Vue 或者其他第三方框架，都可以实现兼容，可参考。
diff --git a/docs/development/web-integration.md b/docs/development/web-integration.md
index 4d373acddcb..1f74d2f1401 100644
--- a/docs/development/web-integration.md
+++ b/docs/development/web-integration.md
@@ -131,6 +131,171 @@ export default function app() {
 
 请参考专门的 [hippy-react 转 Web 章节](api/hippy-react/web.md)。
 
+# hippy-vue-next
+
+[[hippy-vue-next 介绍]](api/hippy-vue/introduction.md) [[范例工程]](//github.com/Tencent/Hippy/tree/master/examples/hippy-vue-demo)
+
+hippy-vue 相对简单很多，hippy-vue 只是 [Vue](//vuejs.org) 在终端上的渲染层，组件也基本和浏览器保持一致。可以通过 [vue-cli](//cli.vuejs.org/) 先[创建一个 Web 项目](//cli.vuejs.org/zh/guide/creating-a-project.html)，然后加上一些 hippy-vue 的内容就可以直接将网页渲染到终端了。
+
+## 准备 hippy-vue 运行时依赖
+
+请使用 `npm i` 安装以下 npm 包，保证运行时正常。
+
+| 包名                        | 说明                             |
+| --------------------------- | -------------------------------- |
+| @hippy/vue                   | hippy-vue 运行时核心             |
+| @hippy/vue-native-components | hippy-vue 的扩展终端组件         |
+| @hippy/vue-router            | vue-router 在 hippy-vue 上的移植 |
+
+## hippy-vue 编译时依赖
+
+以官方提供的 [范例工程](//github.com/Tencent/Hippy/tree/master/examples/hippy-vue-demo) 范例工程为例，需要使用 `npm i -D` 准备好以下依赖，当然开发者可以根据需要自行选择：
+
+必须的：
+
+| 包名                 | 说明                                       |
+| -------------------- | ------------------------------------------ |
+| @hippy/debug-server   | Hippy 前终端调试服务                       |
+| @hippy/vue-css-loader | hippy-vue 的 CSS 文本到 JS 语法树转换      |
+| @babel/preset-env                       | Babel 插件 - 根据所设置的环境选择 polyfill     |
+| @babel/core                             | Babel - 高版本 ES 转换为 ES6 和 ES5 的转译程序 |
+| babel-loader                            | Webpack 插件 - 加载 Babel 转译后的代码         |
+| webpack                                 | Webpack 打包程序                               |
+| webpack-cli                             | Webpack 命令行                                 |
+
+可选的：
+
+| 包名                                | 说明                                       |
+| ----------------------------------- | ------------------------------------------ |
+| case-sensitive-paths-webpack-plugin | Webpack 插件，对 import 文件进行大小写检查 |
+| @hippy/hippy-live-reload-polyfill   | live-reload 必备脚本 - 会在调试模式编译时注入代码到工程里 |
+| @hippy/hippy-dynamic-import-plugin  | 动态加载插件 - 拆分出子包用于按需加载
+| @babel/plugin-x                     | Babel 其余相关插件，如 `@babel/plugin-proposal-nullish-coalescing-operator` 等 |
+| file-loader                         | 静态文件加载                               |
+| url-loader                          | 静态文件以 Base64 形式加载                 |
+
+## hippy-vue 编译配置
+
+当前 hippy-vue 采用 `Webpack 4`构建，配置全部放置于 [scripts](//github.com/Tencent/Hippy/tree/master/examples/hippy-vue-demo/scripts) 目录下，其实只是 [webpack](//webpack.js.org/) 的配置文件，建议先阅读 [webpack](//webpack.js.org/) 官网内容，具备一定基础后再进行修改。
+
+### hippy-vue 开发调试编译配置
+
+该配置展示了将 Hippy 运行于终端的最小化配置。
+
+| 配置文件                                                     | 说明       |
+| ------------------------------------------------------------ | ---------- |
+| [hippy-webpack.dev.js](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/scripts/hippy-webpack.dev.js) | 调试用配置 |
+
+### hippy-vue 生产环境编译配置
+
+线上包和开发调试用包主要有两个区别：
+
+1. 开启了 production 模式，去掉调试信息，关闭了 `watch`（watch 模式下会监听文件变动并重新打包）。
+2. 终端内很可能不止运行一个 Hippy 业务，所以将共享的部分单独拆出来做成了 `vendor` 包，这样可以有效减小业务包体积，这里使用了 [DllPlugin](//webpack.js.org/plugins/dll-plugin/) 和 [DllReferencePlugin](//webpack.js.org/plugins/dll-plugin/#dllreferenceplugin) 来实现。
+
+| 配置文件                                                     | 说明                          |
+| ------------------------------------------------------------ | ----------------------------- |
+| [vendor.js](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/scripts/vendor.js) | vendor 包中需要包含的共享部分 |
+| [hippy-webpack.ios.js](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/scripts/hippy-webpack.ios.js) | iOS 业务包配置                |
+| [hippy-webpack.ios-vendor.js](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/scripts/hippy-webpack.ios-vendor.js) | iOS Vendor 包配置             |
+| [hippy-webpack.android.js](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/scripts/hippy-webpack.android.js) | Android 业务包配置            |
+| [hippy-webpack.android-vendor.js](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/scripts/hippy-webpack.android-vendor.js) | Android Vendor 包配置             |
+
+如果仔细观察 webpack 配置，可以看出 iOS 和 Android 配置相差不大，但因为 iOS 上受苹果政策影响只能使用 [JavaScriptCore](//developer.apple.com/documentation/javascriptcore)（以下简称 JSC）作为运行环境，而 JSC 是跟随 iOS 操作系统的，无法进行独立升级，低版本 iOS 带的 JSC 甚至无法完整支持 ES6，所以需要输出一份 ES5 版本的 JS 代码。而 Android 下可以使用独立升级的 [X5](//x5.tencent.com/) 中的 V8 作为运行环境，就可以直接使用 ES6 代码了。
+
+!> **特别说明：** JS 可以使用的语法受到 iOS 覆盖的最低版本的影响，绝大多数能力可以通过 `@babel/preset-env` 自动安装 polyfill，但是部分特性不行，例如要使用 [Proxy](//caniuse.com/#feat=proxy)，就无法覆盖 iOS 10 以下版本。
+
+## hippy-vue 入口文件
+
+hippy-cli 初始化的项目自带了一个 [Web 端入口文件](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/main.js)，可以保留着用来启动 Web 端网页，但是因为 hippy-vue 的启动参数不一样，需要专门的 [终端入口文件](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/main-native.js)来加载一些终端上用到的模块。
+
+```js
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+import HippyVueNativeComponents from '@hippy/vue-native-components';
+import App from './app.vue';
+import routes from './routes';
+import { setApp } from './util';
+
+// 禁止框架调试信息输出，取消注释即可使用。
+// Vue.config.silent = true;
+
+Vue.config.productionTip = false;
+
+// Hippy 终端组件扩展中间件，可以使用 modal、view-pager、tab-host、ul-refresh 等终端扩展组件了。
+Vue.use(HippyVueNativeComponents);
+Vue.use(VueRouter);
+
+const router = new VueRouter(routes);
+
+/**
+ * 声明一个 app，这是同步生成的
+ */
+const app = new Vue({
+  // 终端指定的 App 名称
+  appName: 'Demo',
+  // 根节点，必须是 Id，当根节点挂载时才会触发上屏
+  rootView: '#root',
+  // 渲染自己
+  render: h => h(App),
+  // iPhone 下的状态栏配置
+  iPhone: {
+    // 状态栏配置
+    statusBar: {
+      // 禁用状态栏自动填充
+      // disabled: true,
+
+      // 状态栏背景色，如果不配的话，会用 4282431619，也就是 #40b883 - Vue 的绿色
+      // 因为运行时只支持样式和属性的实际转换，所以需要用下面的转换器将颜色值提前转换，可以在 Node 中直接运行。
+      // hippy-vue-css-loader/src/compiler/style/color-parser.js
+      backgroundColor: 4283416717,
+
+      // 状态栏背景图，要注意这个会根据容器尺寸拉伸。
+      // backgroundImage: '//mat1.gtimg.com/www/qq2018/imgs/qq_logo_2018x2.png',
+    },
+  },
+  // 路由
+  router,
+});
+
+/**
+ * $start 是 Hippy 启动完以后触发的回调
+ * Vue 会在 Hippy 启动之前完成首屏 VDOM 的渲染，所以首屏性能非常高
+ * 在 $start 里可以通知终端说已经启动完成，可以开始给前端发消息了。
+ */
+app.$start((/* app */) => {
+  // 这里干一点 Hippy 启动后的需要干的事情，比如通知终端前端已经准备完毕，可以开始发消息了。
+  // setApp(app);
+});
+
+/**
+ * 保存 app 供后面通过 app 接受来自终端的事件。
+ *
+ * 之前是放到 $start 里的，但是有个问题时因为 $start 执行太慢，如果首页就 getApp() 的话可能会
+ * 导致获得了 undefined，然后监听失败。所以挪出来了。
+ *
+ * 但是终端事件依然要等到 $start 也就是 Hippy 启动之后再发，因为之前桥尚未建立，终端发消息前端也
+ * 接受不到。
+ */
+setApp(app);
+```
+
+## hippy-vue npm 脚本
+
+在 [package.json](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/package.json#L13) 中提供了几个以 `hippy:`开头的 npm 脚本，可用来启动 [@hippy/debug-server-next](//www.npmjs.com/package/@hippy/debug-server-next) 等调试工具。
+
+```json
+  "scripts": {
+    "hippy:dev": "node ./scripts/env-polyfill.js hippy-dev --config ./scripts/hippy-webpack.dev.js",
+    "hippy:vendor": "node ./scripts/env-polyfill.js webpack --config ./scripts/hippy-webpack.ios-vendor.js --config ./scripts/hippy-webpack.android-vendor.js",
+    "hippy:build": "node ./scripts/env-polyfill.js webpack --config ./scripts/hippy-webpack.ios.js --config ./scripts/hippy-webpack.android.js"
+  },
+```
+
+## 路由
+
+`@hippy/vue-router` 完整支持 vue-router 中的跳转功能，具体请参考 [hippy-vue-router](api/hippy-vue/router.md) 文档。
+
 # hippy-vue
 
 [[hippy-vue 介绍]](api/hippy-vue/introduction.md) [[范例工程]](//github.com/Tencent/Hippy/tree/master/examples/hippy-vue-demo)

From 6b4ea3e2c2a1dca565c4676fb26d14897d13f383 Mon Sep 17 00:00:00 2001
From: birdguo <birdguo@tencent.com>
Date: Thu, 29 Jun 2023 01:05:52 +0800
Subject: [PATCH 2/9] feat(vue-next): update web-integration.md

---
 docs/development/web-integration.md | 219 +++++++++++++++-------------
 1 file changed, 118 insertions(+), 101 deletions(-)

diff --git a/docs/development/web-integration.md b/docs/development/web-integration.md
index 1f74d2f1401..5beeea21951 100644
--- a/docs/development/web-integration.md
+++ b/docs/development/web-integration.md
@@ -133,156 +133,171 @@ export default function app() {
 
 # hippy-vue-next
 
-[[hippy-vue-next 介绍]](api/hippy-vue/introduction.md) [[范例工程]](//github.com/Tencent/Hippy/tree/master/examples/hippy-vue-demo)
+[[hippy-vue-next 介绍]](api/hippy-vue-next/introduction.md) [[范例工程]](//github.com/Tencent/Hippy/tree/master/examples/hippy-vue-next-demo)
 
-hippy-vue 相对简单很多，hippy-vue 只是 [Vue](//vuejs.org) 在终端上的渲染层，组件也基本和浏览器保持一致。可以通过 [vue-cli](//cli.vuejs.org/) 先[创建一个 Web 项目](//cli.vuejs.org/zh/guide/creating-a-project.html)，然后加上一些 hippy-vue 的内容就可以直接将网页渲染到终端了。
+hippy-vue-next 是 [Vue](//cn.vuejs.org) 在终端上的渲染层，组件也基本和浏览器保持一致。可以通过脚手架 [vue-cli](//github.com/vuejs/vue-cli) 先[创建一个 Web 项目](//cli.vuejs.org/zh/guide/creating-a-project.html#vue-create)，然后加上一些 hippy-vue-next 的内容就可以直接将网页渲染到终端了。也可以参考我们的范例项目来初始化你的项目。
+>注意这里使用vue-cli创建项目时构建工具要选择webpack，并且Router和Typescript需要勾选，我们的hippy-vue-next默认都是基于Typescript开发的
 
-## 准备 hippy-vue 运行时依赖
+## 准备 hippy-vue-next 运行时依赖
 
 请使用 `npm i` 安装以下 npm 包，保证运行时正常。
 
-| 包名                        | 说明                             |
-| --------------------------- | -------------------------------- |
-| @hippy/vue                   | hippy-vue 运行时核心             |
-| @hippy/vue-native-components | hippy-vue 的扩展终端组件         |
-| @hippy/vue-router            | vue-router 在 hippy-vue 上的移植 |
+| 包名            | 说明                                  |
+|---------------|-------------------------------------|
+| @hippy/vue-next | hippy-vue-next 运行时核心                |
+| @hippy/vue-router-next-history       | hippy-vue-next 的路由历史处理，支持物理按键回退路由历史 |
 
-## hippy-vue 编译时依赖
+## hippy-vue-next 编译时依赖
 
-以官方提供的 [范例工程](//github.com/Tencent/Hippy/tree/master/examples/hippy-vue-demo) 范例工程为例，需要使用 `npm i -D` 准备好以下依赖，当然开发者可以根据需要自行选择：
+以官方提供的 [范例工程](//github.com/Tencent/Hippy/tree/master/examples/hippy-vue-next-demo) 范例工程为例，需要使用 `npm i -D` 准备好以下依赖，当然开发者可以根据需要自行选择：
 
 必须的：
 
-| 包名                 | 说明                                       |
-| -------------------- | ------------------------------------------ |
-| @hippy/debug-server   | Hippy 前终端调试服务                       |
-| @hippy/vue-css-loader | hippy-vue 的 CSS 文本到 JS 语法树转换      |
-| @babel/preset-env                       | Babel 插件 - 根据所设置的环境选择 polyfill     |
-| @babel/core                             | Babel - 高版本 ES 转换为 ES6 和 ES5 的转译程序 |
-| babel-loader                            | Webpack 插件 - 加载 Babel 转译后的代码         |
-| webpack                                 | Webpack 打包程序                               |
-| webpack-cli                             | Webpack 命令行                                 |
+| 包名                           | 说明                                 |
+|------------------------------|------------------------------------|
+| @hippy/debug-server-next     | Hippy 前终端调试服务                      |
+| @hippy/vue-css-loader        | hippy-vue-next 的 CSS 文本到 JS 语法树转换  |
+| @hippy/vue-next-style-parser | hippy-vue-next 的样式 parser          |
+| @babel/preset-env            | Babel 插件 - 根据所设置的环境选择 polyfill     |
+| @babel/core                  | Babel - 高版本 ES 转换为 ES6 和 ES5 的转译程序 |
+| babel-loader                 | Webpack 插件 - 加载 Babel 转译后的代码       |
+| webpack                      | Webpack 打包程序                       |
+| webpack-cli                  | Webpack 命令行                        |
 
 可选的：
 
-| 包名                                | 说明                                       |
-| ----------------------------------- | ------------------------------------------ |
-| case-sensitive-paths-webpack-plugin | Webpack 插件，对 import 文件进行大小写检查 |
-| @hippy/hippy-live-reload-polyfill   | live-reload 必备脚本 - 会在调试模式编译时注入代码到工程里 |
-| @hippy/hippy-dynamic-import-plugin  | 动态加载插件 - 拆分出子包用于按需加载
+| 包名                                  | 说明                                                                    |
+|-------------------------------------|-----------------------------------------------------------------------|
+| case-sensitive-paths-webpack-plugin | Webpack 插件，对 import 文件进行大小写检查                                         |
+| @hippy/hippy-live-reload-polyfill   | live-reload 必备脚本 - 会在调试模式编译时注入代码到工程里                                  |
+| @hippy/hippy-dynamic-import-plugin  | 动态加载插件 - 拆分出子包用于按需加载                                                  
 | @babel/plugin-x                     | Babel 其余相关插件，如 `@babel/plugin-proposal-nullish-coalescing-operator` 等 |
-| file-loader                         | 静态文件加载                               |
-| url-loader                          | 静态文件以 Base64 形式加载                 |
+| file-loader                         | 静态文件加载                                                                |
+| url-loader                          | 静态文件以 Base64 形式加载                                                     |
+| esbuild & esbuild-loader            | 开发环境webpack支持使用esbuild构建，性能比babel更好                                   |
 
-## hippy-vue 编译配置
+## hippy-vue-next 编译配置
 
-当前 hippy-vue 采用 `Webpack 4`构建，配置全部放置于 [scripts](//github.com/Tencent/Hippy/tree/master/examples/hippy-vue-demo/scripts) 目录下，其实只是 [webpack](//webpack.js.org/) 的配置文件，建议先阅读 [webpack](//webpack.js.org/) 官网内容，具备一定基础后再进行修改。
+当前 hippy-vue-next 支持 `Webpack 4 或 Webpack 5`构建，配置全部放置于 [scripts](//github.com/Tencent/Hippy/tree/master/examples/hippy-vue-next-demo/scripts) 目录下，其实只是 [webpack](//webpack.js.org/) 的配置文件，建议先阅读 [webpack](//webpack.js.org/) 官网内容，具备一定基础后再进行修改。
 
-### hippy-vue 开发调试编译配置
+### hippy-vue-next 开发调试编译配置
 
 该配置展示了将 Hippy 运行于终端的最小化配置。
 
-| 配置文件                                                     | 说明       |
-| ------------------------------------------------------------ | ---------- |
-| [hippy-webpack.dev.js](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/scripts/hippy-webpack.dev.js) | 调试用配置 |
+| 配置文件                                                                                                                     | 说明       |
+|--------------------------------------------------------------------------------------------------------------------------| ---------- |
+| [hippy-webpack.dev.js](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-next-demo/scripts/hippy-webpack.dev.js) | 调试用配置 |
 
-### hippy-vue 生产环境编译配置
+### hippy-vue-next 生产环境编译配置
 
 线上包和开发调试用包主要有两个区别：
 
 1. 开启了 production 模式，去掉调试信息，关闭了 `watch`（watch 模式下会监听文件变动并重新打包）。
 2. 终端内很可能不止运行一个 Hippy 业务，所以将共享的部分单独拆出来做成了 `vendor` 包，这样可以有效减小业务包体积，这里使用了 [DllPlugin](//webpack.js.org/plugins/dll-plugin/) 和 [DllReferencePlugin](//webpack.js.org/plugins/dll-plugin/#dllreferenceplugin) 来实现。
 
-| 配置文件                                                     | 说明                          |
-| ------------------------------------------------------------ | ----------------------------- |
-| [vendor.js](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/scripts/vendor.js) | vendor 包中需要包含的共享部分 |
-| [hippy-webpack.ios.js](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/scripts/hippy-webpack.ios.js) | iOS 业务包配置                |
-| [hippy-webpack.ios-vendor.js](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/scripts/hippy-webpack.ios-vendor.js) | iOS Vendor 包配置             |
-| [hippy-webpack.android.js](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/scripts/hippy-webpack.android.js) | Android 业务包配置            |
-| [hippy-webpack.android-vendor.js](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/scripts/hippy-webpack.android-vendor.js) | Android Vendor 包配置             |
+| 配置文件                                                                                                                                      | 说明                          |
+|-------------------------------------------------------------------------------------------------------------------------------------------| ----------------------------- |
+| [vendor.js](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-next-demo/scripts/vendor.js)                                        | vendor 包中需要包含的共享部分 |
+| [hippy-webpack.ios.js](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-next-demo/scripts/hippy-webpack.ios.js)                       | iOS 业务包配置                |
+| [hippy-webpack.ios-vendor.js](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-next-demo/scripts/hippy-webpack.ios-vendor.js)         | iOS Vendor 包配置             |
+| [hippy-webpack.android.js](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-next-demo/scripts/hippy-webpack.android.js)               | Android 业务包配置            |
+| [hippy-webpack.android-vendor.js](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-next-demo/scripts/hippy-webpack.android-vendor.js) | Android Vendor 包配置             |
 
 如果仔细观察 webpack 配置，可以看出 iOS 和 Android 配置相差不大，但因为 iOS 上受苹果政策影响只能使用 [JavaScriptCore](//developer.apple.com/documentation/javascriptcore)（以下简称 JSC）作为运行环境，而 JSC 是跟随 iOS 操作系统的，无法进行独立升级，低版本 iOS 带的 JSC 甚至无法完整支持 ES6，所以需要输出一份 ES5 版本的 JS 代码。而 Android 下可以使用独立升级的 [X5](//x5.tencent.com/) 中的 V8 作为运行环境，就可以直接使用 ES6 代码了。
 
-!> **特别说明：** JS 可以使用的语法受到 iOS 覆盖的最低版本的影响，绝大多数能力可以通过 `@babel/preset-env` 自动安装 polyfill，但是部分特性不行，例如要使用 [Proxy](//caniuse.com/#feat=proxy)，就无法覆盖 iOS 10 以下版本。
+!> **特别说明：** JS 可以使用的语法受到 iOS 覆盖的最低版本的影响，绝大多数能力可以通过 `@babel/preset-env` 自动安装 polyfill，但是部分特性不行，例如要使用 [Proxy](//caniuse.com/#feat=proxy)，就无法覆盖 iOS 10 以下版本，而hippy-vue-next是基于vue-next的，因此使用hippy-vue-next iOS版本必须要10及以上。
 
-## hippy-vue 入口文件
+## hippy-vue-next 入口文件
 
-hippy-cli 初始化的项目自带了一个 [Web 端入口文件](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/main.js)，可以保留着用来启动 Web 端网页，但是因为 hippy-vue 的启动参数不一样，需要专门的 [终端入口文件](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/main-native.js)来加载一些终端上用到的模块。
+因为 hippy-vue-next 的启动参数与 web 页面不一样，所以我们需要专门的 [终端入口文件](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-next-demo/src/main-native.ts)来加载一些终端上用到的模块，并作为项目的入口文件
 
-```js
-import Vue from 'vue';
-import VueRouter from 'vue-router';
-import HippyVueNativeComponents from '@hippy/vue-native-components';
-import App from './app.vue';
-import routes from './routes';
-import { setApp } from './util';
-
-// 禁止框架调试信息输出，取消注释即可使用。
-// Vue.config.silent = true;
-
-Vue.config.productionTip = false;
-
-// Hippy 终端组件扩展中间件，可以使用 modal、view-pager、tab-host、ul-refresh 等终端扩展组件了。
-Vue.use(HippyVueNativeComponents);
-Vue.use(VueRouter);
+```ts
+// 首先导入所需模块
+import {
+  createApp,
+  type HippyApp,
+  EventBus,
+  setScreenSize,
+  BackAndroid,
+} from '@hippy/vue-next';
 
-const router = new VueRouter(routes);
+import App from './app.vue';
+import { createRouter } from './routes';
+import { setGlobalInitProps } from './util';
 
-/**
- * 声明一个 app，这是同步生成的
- */
-const app = new Vue({
-  // 终端指定的 App 名称
+// 创建 hippy app 实例
+const app: HippyApp = createApp(App, {
+  // hippy native module name
   appName: 'Demo',
-  // 根节点，必须是 Id，当根节点挂载时才会触发上屏
-  rootView: '#root',
-  // 渲染自己
-  render: h => h(App),
-  // iPhone 下的状态栏配置
   iPhone: {
-    // 状态栏配置
+    // config of statusBar
     statusBar: {
-      // 禁用状态栏自动填充
+      // disable status bar autofill
       // disabled: true,
 
-      // 状态栏背景色，如果不配的话，会用 4282431619，也就是 #40b883 - Vue 的绿色
-      // 因为运行时只支持样式和属性的实际转换，所以需要用下面的转换器将颜色值提前转换，可以在 Node 中直接运行。
+      // Status bar background color, if not set, it will use 4282431619, as #40b883, Vue default green
       // hippy-vue-css-loader/src/compiler/style/color-parser.js
       backgroundColor: 4283416717,
 
       // 状态栏背景图，要注意这个会根据容器尺寸拉伸。
-      // backgroundImage: '//mat1.gtimg.com/www/qq2018/imgs/qq_logo_2018x2.png',
+      // backgroundImage: 'https://user-images.githubusercontent.com/12878546/148737148-d0b227cb-69c8-4b21-bf92-739fb0c3f3aa.png',
     },
   },
-  // 路由
-  router,
+  // do not print trace info when set to true
+  // silent: true,
+  /**
+   * whether to trim whitespace on text element,
+   * default is true, if set false, it will follow vue-loader compilerOptions whitespace setting
+   */
+  trimWhitespace: true,
 });
-
-/**
- * $start 是 Hippy 启动完以后触发的回调
- * Vue 会在 Hippy 启动之前完成首屏 VDOM 的渲染，所以首屏性能非常高
- * 在 $start 里可以通知终端说已经启动完成，可以开始给前端发消息了。
- */
-app.$start((/* app */) => {
-  // 这里干一点 Hippy 启动后的需要干的事情，比如通知终端前端已经准备完毕，可以开始发消息了。
-  // setApp(app);
-});
-
-/**
- * 保存 app 供后面通过 app 接受来自终端的事件。
- *
- * 之前是放到 $start 里的，但是有个问题时因为 $start 执行太慢，如果首页就 getApp() 的话可能会
- * 导致获得了 undefined，然后监听失败。所以挪出来了。
- *
- * 但是终端事件依然要等到 $start 也就是 Hippy 启动之后再发，因为之前桥尚未建立，终端发消息前端也
- * 接受不到。
- */
-setApp(app);
+// create router
+const router = createRouter();
+app.use(router);
+
+// init callback
+const initCallback = ({ superProps, rootViewId }) => {
+  setGlobalInitProps({
+    superProps,
+    rootViewId,
+  });
+  /**
+   * Because the memory history of vue-router is now used,
+   * the initial position needs to be pushed manually, otherwise the router will not be ready.
+   * On the browser, it is matched by vue-router according to location.href, and the default push root path '/'
+   */
+  router.push('/');
+
+  // listen android native back press, must before router back press inject
+  BackAndroid.addListener(() => {
+    console.log('backAndroid');
+    // set true interrupts native back
+    return true;
+  });
+
+  // mount first， you can do something before mount
+  app.mount('#root');
+
+  /**
+   * You can also mount the app after the route is ready, However,
+   * it is recommended to mount first, because it can render content on the screen as soon as possible
+   */
+  // router.isReady().then(() => {
+  //   // mount app
+  //   app.mount('#root');
+  // });
+};
+
+// start hippy app
+app.$start().then(initCallback);
+
+// you can also use callback to start app like @hippy/vue before
+// app.$start(initCallback);
 ```
 
-## hippy-vue npm 脚本
+## hippy-vue-next npm 脚本
 
-在 [package.json](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/package.json#L13) 中提供了几个以 `hippy:`开头的 npm 脚本，可用来启动 [@hippy/debug-server-next](//www.npmjs.com/package/@hippy/debug-server-next) 等调试工具。
+在 [package.json](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-next-demo/package.json#L13) 中提供了几个以 `hippy:`开头的 npm 脚本，可用来启动 [@hippy/debug-server-next](//www.npmjs.com/package/@hippy/debug-server-next) 等调试工具。
 
 ```json
   "scripts": {
@@ -294,10 +309,12 @@ setApp(app);
 
 ## 路由
 
-`@hippy/vue-router` 完整支持 vue-router 中的跳转功能，具体请参考 [hippy-vue-router](api/hippy-vue/router.md) 文档。
+`@hippy/vue-next` 无需侵入式修改vue-router，直接使用官方 vue-router 即可，如果需要支持安卓物理健回退时路由历史回退，则可以安装@hippy/vue-router-next-history模块。
 
 # hippy-vue
 
+>注意：@hippy/vue(即vue2.x版本将于年底停止更新，请用户尽快升级至@hippy/vue-next，即vue3.x版本)
+
 [[hippy-vue 介绍]](api/hippy-vue/introduction.md) [[范例工程]](//github.com/Tencent/Hippy/tree/master/examples/hippy-vue-demo)
 
 hippy-vue 相对简单很多，hippy-vue 只是 [Vue](//vuejs.org) 在终端上的渲染层，组件也基本和浏览器保持一致。可以通过 [vue-cli](//cli.vuejs.org/) 先[创建一个 Web 项目](//cli.vuejs.org/zh/guide/creating-a-project.html)，然后加上一些 hippy-vue 的内容就可以直接将网页渲染到终端了。

From acca0d5c001f15840e0b7e4a7a1c2353db495557 Mon Sep 17 00:00:00 2001
From: birdguo <birdguo@tencent.com>
Date: Thu, 29 Jun 2023 08:40:44 +0800
Subject: [PATCH 3/9] feat(vue-next): add vue-next api docs

---
 docs/api/hippy-react/_sidebar.md    |  11 +-
 docs/api/hippy-vue-next/_sidebar.md |  11 +-
 docs/api/hippy-vue/_sidebar.md      |  11 +-
 docs/api/hippy-vue/vue3.md          | 310 ----------------------------
 docs/api/style/_sidebar.md          |  14 +-
 5 files changed, 41 insertions(+), 316 deletions(-)
 delete mode 100644 docs/api/hippy-vue/vue3.md

diff --git a/docs/api/hippy-react/_sidebar.md b/docs/api/hippy-react/_sidebar.md
index e3f5b9ca36c..e86b8a51a6a 100644
--- a/docs/api/hippy-react/_sidebar.md
+++ b/docs/api/hippy-react/_sidebar.md
@@ -8,6 +8,16 @@
   * [手势系统](api/hippy-react/gesture.md)
   * [自定义组件和模块](api/hippy-react/customize.md)
   * [转 Web](api/hippy-react/web.md)
+* hippy-vue-next
+  * [介绍](api/hippy-vue-next/introduction.md)
+  * [核心组件](api/hippy-vue-next/components.md)
+  * [扩展组件](api/hippy-vue-next/external-components.md)
+  * [模块](api/hippy-vue-next/vue-native.md)
+  * [样式](api/hippy-vue-next/style.md)
+  * [事件](api/hippy-vue-next/native-event.md)
+  * [自定义组件和模块](api/hippy-vue-next/customize.md)
+  * [路由](api/hippy-vue-next/router.md)
+  * [转 Web](api/hippy-vue-next/web.md)
 * hippy-vue
   * [介绍](api/hippy-vue/introduction.md)
   * [核心组件](api/hippy-vue/components.md)
@@ -18,7 +28,6 @@
   * [自定义组件和模块](api/hippy-vue/customize.md)
   * [路由](api/hippy-vue/router.md)
   * [转 Web](api/hippy-vue/web.md)
-  * [Vue 3.x](api/hippy-vue/vue3.md)
 * 样式
   * [布局](api/style/layout.md)
   * [外观](api/style/appearance.md)
diff --git a/docs/api/hippy-vue-next/_sidebar.md b/docs/api/hippy-vue-next/_sidebar.md
index e3f5b9ca36c..e86b8a51a6a 100644
--- a/docs/api/hippy-vue-next/_sidebar.md
+++ b/docs/api/hippy-vue-next/_sidebar.md
@@ -8,6 +8,16 @@
   * [手势系统](api/hippy-react/gesture.md)
   * [自定义组件和模块](api/hippy-react/customize.md)
   * [转 Web](api/hippy-react/web.md)
+* hippy-vue-next
+  * [介绍](api/hippy-vue-next/introduction.md)
+  * [核心组件](api/hippy-vue-next/components.md)
+  * [扩展组件](api/hippy-vue-next/external-components.md)
+  * [模块](api/hippy-vue-next/vue-native.md)
+  * [样式](api/hippy-vue-next/style.md)
+  * [事件](api/hippy-vue-next/native-event.md)
+  * [自定义组件和模块](api/hippy-vue-next/customize.md)
+  * [路由](api/hippy-vue-next/router.md)
+  * [转 Web](api/hippy-vue-next/web.md)
 * hippy-vue
   * [介绍](api/hippy-vue/introduction.md)
   * [核心组件](api/hippy-vue/components.md)
@@ -18,7 +28,6 @@
   * [自定义组件和模块](api/hippy-vue/customize.md)
   * [路由](api/hippy-vue/router.md)
   * [转 Web](api/hippy-vue/web.md)
-  * [Vue 3.x](api/hippy-vue/vue3.md)
 * 样式
   * [布局](api/style/layout.md)
   * [外观](api/style/appearance.md)
diff --git a/docs/api/hippy-vue/_sidebar.md b/docs/api/hippy-vue/_sidebar.md
index e3f5b9ca36c..e86b8a51a6a 100644
--- a/docs/api/hippy-vue/_sidebar.md
+++ b/docs/api/hippy-vue/_sidebar.md
@@ -8,6 +8,16 @@
   * [手势系统](api/hippy-react/gesture.md)
   * [自定义组件和模块](api/hippy-react/customize.md)
   * [转 Web](api/hippy-react/web.md)
+* hippy-vue-next
+  * [介绍](api/hippy-vue-next/introduction.md)
+  * [核心组件](api/hippy-vue-next/components.md)
+  * [扩展组件](api/hippy-vue-next/external-components.md)
+  * [模块](api/hippy-vue-next/vue-native.md)
+  * [样式](api/hippy-vue-next/style.md)
+  * [事件](api/hippy-vue-next/native-event.md)
+  * [自定义组件和模块](api/hippy-vue-next/customize.md)
+  * [路由](api/hippy-vue-next/router.md)
+  * [转 Web](api/hippy-vue-next/web.md)
 * hippy-vue
   * [介绍](api/hippy-vue/introduction.md)
   * [核心组件](api/hippy-vue/components.md)
@@ -18,7 +28,6 @@
   * [自定义组件和模块](api/hippy-vue/customize.md)
   * [路由](api/hippy-vue/router.md)
   * [转 Web](api/hippy-vue/web.md)
-  * [Vue 3.x](api/hippy-vue/vue3.md)
 * 样式
   * [布局](api/style/layout.md)
   * [外观](api/style/appearance.md)
diff --git a/docs/api/hippy-vue/vue3.md b/docs/api/hippy-vue/vue3.md
deleted file mode 100644
index cc199bb8215..00000000000
--- a/docs/api/hippy-vue/vue3.md
+++ /dev/null
@@ -1,310 +0,0 @@
-# Hippy-Vue-Next (基于Vue3)
-
-<br />
-
-# 介绍
-
-@hippy/vue-next 基于 @hippy/vue 的已有逻辑。通过 Vue3.x 提供的 [createRenderer()](//github.com/vuejs/vue-next/blob/v3.0.0-alpha.0/packages/runtime-core/src/renderer.ts#L154)，无需侵入 Vue 代码直接通过外部库的方式引用 Vue，
-可以及时跟随 Vue 生态，在实现原理上与 @hippy/vue 基本一致。
-
-@hippy/vue-next 全部代码采用 typescript 进行编写，可以拥有更好的程序健壮性和类型提示，并且 @hippy/vue-next 在整体架构上也进行了一定程度的优化。
-
-# 架构图
-
-<img src="assets/img/hippy-vue-next-arch-cn.png" alt="hippy-vue-next 架构图" width="80%"/>
-<br />
-<br />
-
-# 如何使用
-
-@hippy/vue-next 支持的能力与 @hippy/vue 基本一致。因此关于 Hippy-Vue 的组件、模块、样式等就不做额外声明了，可以直接参考 [Hippy-Vue](api/hippy-vue/introduction)
-中的相关内容，本文档仅对差异部分进行说明：
-
-## 初始化
-
-```javascript
-// app.ts
-import { defineComponent, ref } from 'vue';
-import { type HippyApp, createApp } from '@hippy/vue-next';
-
-// 创建 Hippy App 实例，需要注意 Vue3.x 使用 Typescript，因此需要使用 defineComponent 将组件对象进行包裹
-const app: HippyApp = createApp(defineComponent({
-  setup() {
-    const counter = ref(0);
-    return {
-      counter,
-    }
-  }
-}), {
-  // Hippy App Name 必传，示例项目可以使用 Demo
-  appName: 'Demo',
-});
-
-// 启动 Hippy App
-app.$start().then(({ superProps, rootViewId }) => {
-  // superProps 是 Native 传入的初始化参数，如果需要做路由预处理等操作，则可以让 Native 将对应参数传入
-  // rootViewId 是 Native 当前 Hippy 实例所挂载的 Native 的根节点的 id
-  // mount app，完成渲染上屏 
-  app.mount('#mount');
-})
-```
-
-如果要使用 Vue-Router，则需要使用另外的初始化逻辑
-
-```javascript
-// Vue + Vue Router
-
-// app.vue
-<template>
-  <div><span>{{ msg }}</span></div>
-  <router-view />
-</template>
-<script lang="ts">
-import { defineComponent, ref } from 'vue';
-
-export default defineComponent({
-  setup() {
-    const msg: string = 'This is the Root Page';
-    return {
-      msg,
-    };
-  },
-});
-</script>
-
-// index.vue
-<template>
-  <div><span>{{ msg }}</span></div>
-</template>
-<script lang="ts">
-import { defineComponent, ref } from 'vue';
-
-export default defineComponent({
-  setup() {
-    const msg: string = 'This is the Index Page';
-    return {
-      msg,
-    };
-  },
-});
-</script>
-
-// app.ts
-import { defineComponent, ref } from 'vue';
-import { type HippyApp, createApp } from '@hippy/vue-next';
-import { createHippyRouter } from '@hippy/vue-router-next-history';
-import { type Router } from 'vue-router';
-import App from 'app.vue';
-
-// 创建 Hippy App 实例，需要注意 Vue3.x 使用 Typescript，因此需要使用 defineComponent 将组件对象进行包裹
-const app: HippyApp = createApp(App, {
-  // Hippy App Name，必传，示例项目可以使用 Demo
-  appName: 'Demo',
-});
-
-// 路由列表
-const routes = [
-  {
-    path: '/',
-    component: Index,
-  },
-];
-
-// 创建路由对象
-const router: Router = createHippyRouter({
-  routes,
-});
-
-// 使用路由
-app.use(router);
-
-// 启动 Hippy App
-app.$start().then(({ superProps, rootViewId }) => {
-  // superProps 是 Native 传入的初始化参数，如果需要做路由预处理等操作，则可以让 Native 将对应参数传入
-  // rootViewId 是 Native 当前 Hippy 实例所挂载的 Native 的跟节点的 id
-
-  // 因为现在使用的是vue-router的memory history，因此需要手动推送初始位置，否则router将无法ready
-  // 浏览器上则是由vue-router根据location.href去匹配，默认推送根路径'/'，如果想要实现类似浏览器中默认跳转到指定页面，可以让终端同学将初始化的 path
-  // 从 superProps 中传入，然后再通过 path 的值去进行 router.push({ path: 'other path' }) 等操作
-  router.push('/');
-  
-  // mount app，完成渲染上屏 
-  app.mount('#mount');
-})
-```
-
-> @hippy/vue-router-next-history 对 vue-router 的 history 模式做了处理，为 Android 加上了触发物理返回键时优先回退历史记录的逻辑
-
-如果不需要这个逻辑，可以直接使用原生 vue-router 来实现路由：
-
-```javascript
-import { createRouter, createMemoryHistory, type Router } from 'vue-router';
-
-// 路由列表
-const routes = [
-  {
-    path: '/',
-    component: Index,
-  },
-]; 
-
-const router: Router = createRouter({
-  history: createMemoryHistory(),
-  routes,
-});
-```
-
-# 其他差异说明
-
-目前 `@hippy/vue-next` 与 `@hippy/vue` 功能上基本对齐，不过在 API 方面与 @hippy/vue 有一些区别，以及还有一些问题还没有解决，这里做些说明：
-
-- Vue.Native
-
-  在 @hippy/vue 中，Native 提供的能力是通过挂载在全局 Vue 对象的 Native 属性来提供的，在 Vue3.x 中这种实现方式不再可行，因此现在 Native 属性需通过 @hippy/vue-next 导出来使用
-
-  ```javascript
-  import { Native } from '@hippy/vue-next';
-  
-  console.log('do somethig', Native.xxx)
-  ```
-
-- registerElement
-
-  @hippy/vue 中 `registerElement` 方法是挂在全局 Vue 中，与 Native 类似，@hippy/vue-next 中 `registerElement` 方法也是单独提供了导出
-
-  ```javascript
-    import { registerElement } from '@hippy/vue-next';
-  ```
-
-- 全局事件
-
-  在 @hippy/vue 中，全局事件是挂载在 Vue 上的，在 @hippy/vue-next 中，提供了单独的 `EventBus` 事件总线来处理该问题
-
-  ```javascript
-  import { EventBus } from '@hippy/vue-next';
-  
-  // 监听容器大小改变事件
-  EventBus.$on('onSizeChanged', ({ oldWidth, oldHeight, width, height }) => {
-    // oldWidth: 旧的宽度；oldHeight: 旧的高度；width: 新的宽度; height: 新的高度
-    console.log('size', oldWidth, oldHeight, width, height);
-  });
-  // 触发全局事件
-  EventBus.$emit('eventName', {
-    ...args, // 事件参数
-  });
-  ```
-
-- v-model 指令
-
-  因为 Vue3.x 中内置指令的实现采用的是编译时插入代码的方式，目前 v-model 指令还没有找到很好的办法去处理，这里可以先使用临时解决办法实现对应功能
-
-  ```javascript
-  // 具体的可以参考 demo 中的 demo-input.vue 中的示例
-  <template>
-    <input type="text" ref="inputRef" :value="textValue" @change="textValue = $event.value" />
-    <div>
-      <span>Input Value：{{ textValue }}</span>
-    </div>
-  </template>
-  <script lang="ts">
-  import { defineComponent, ref } from '@vue/runtime-core';
-  
-  export default defineComponent({
-    setup() {
-      const inputRef = ref(null);
-      const textValue = ref('This is default value.');
-      return {
-        inputRef,
-        textValue,
-      };
-    },
-  }); 
-  </script>
-  ```
-
-- Keep-Alive HMR 问题
-
-  在示例代码中，我们的路由组件是包裹在 Keep-Alive 组件内的，但是目前使用 Keep-Alive 包裹的路由组件无法实现开发时热更新，需要刷新整个实例才能完成刷新。
-  如果是不包裹在 Keep-Alive 中则没有这个问题。目前官方[该问题](https://github.com/vuejs/core/pull/5165)也尚未解决，等待官方解决后升级 Vue 即可解决该问题。
-
-  !> vue@3.2.45+ 已经修复了该[问题](https://github.com/vuejs/core/pull/7049)，使用3.2.45及以上版本进行开发时，keep-alive内的组件也可以热更新了
-
-- Vue3.x 变量 Proxy 问题
-
-  因为 3.x 的响应式是通过 Proxy 代理对象来实现的，所以我们得到的对象其实是 Proxy 的实例而非原始对象，因此调用终端接口时需要注意，终端并不认识 Proxy 对象，需要使用 Vue 提供的 [`toRaw`](https://cn.vuejs.org/api/reactivity-advanced.html#toraw) 方法来拿到原始的对象并传递给终端接口。
-
-- Native 接口和自定义组件的类型提示
-
-    @hippy/vue-next 提供了 Native 模块接口的 Typescript 类型提示，如果有业务自定义的 Native 接口，也可以采用类似的方式进行扩展
-  
-    ```javascript
-    declare module '@hippy/vue-next' {
-      export interface NativeInterfaceMap {
-        // 用户自定义的 Native 接口，接下来你可以在调用 Native.callNative，Native.callNativeWithPromise 时拥有类型提示了
-      }
-    }
-    ```
-
-    @hippy/vue-next 也参考 `lib.dom.d.ts` 的事件声明提供了事件类型，具体可以参考 hippy-event.ts 文件。如果需要在内置的事件上进行扩展，可以采用类似方式
-
-    ```javascript
-      declare module '@hippy/vue-next' {
-        export interface HippyEvent {
-          testProp: number;
-        }
-      }
-    ```
-
-    在使用 `registerElement` 去注册组件的时候，利用了 typescript 的 `type narrowing`，在 switch case 中提供了准确的类型提示。如果在业务注册自定义组件的时候也需要类型提示，可以采用如下方式:
-
-    ```javascript
-      export interface HippyGlobalEventHandlersEventMap {
-        // extend new event name and related event interface
-        onTest: CustomEvent;
-        // extend existing event interface
-        onAnotherTest: HippyEvent;
-      }
-    ```
-
-    更多信息可以参考 demo 里的 [extend.ts](https://github.com/Tencent/Hippy/blob/master/examples/hippy-vue-next-demo/src/extend.ts).
-  
-- whitespace 处理
-
-  Vue2.x Vue-Loader `compilerOptions.whitespace` 默认值为 `preserve`， Vue3.x 默认值为 `condense`（可参考 [Vue3 whitespace说明](https://cn.vuejs.org/api/application.html#app-config-compileroptions-whitespace)）。
-
-  关闭 `trim` 能力的配置方式也有所不同，改在了 `createApp` 的参数中进行设置。
-
-  ```javascript
-    // entry file
-    const app: HippyApp = createApp(App, {
-     // hippy native module name
-     appName: 'Demo',
-     // trimWhitespace default is true
-     trimWhitespace: false,
-    });
-
-    //  webpack script
-    rules: [
-    {
-        test: /\.vue$/,
-        use: [
-        {
-          loader: vueLoader,
-          options: {
-              compilerOptions: {
-                // whitespace handler, default is 'condense'
-                whitespace: 'condense',
-              },
-          },
-        }],
-     },
-    ]
-  ```
-
-- dialog 差异
-
-  `<dialog>` 组件的第一个子元素不能设置  `{ position: absolute }` 样式，如果想将 `<dialog>` 内容铺满全屏，可以给第一个子元素设置 `{ flex: 1 }` 样式或者显式设置 width 和 height 数值。这与 Hippy3.0 的逻辑保持一致。
-
-# 示例
-
-更多使用请参考 [示例项目](https://github.com/Tencent/Hippy/tree/master/examples/hippy-vue-next-demo).
diff --git a/docs/api/style/_sidebar.md b/docs/api/style/_sidebar.md
index 31e08a29e76..e86b8a51a6a 100644
--- a/docs/api/style/_sidebar.md
+++ b/docs/api/style/_sidebar.md
@@ -1,5 +1,4 @@
-<!-- docs/api/style/_sidebar.md -->
-
+<!-- docs/hippy-vue/_sidebar.md -->
 * hippy-react
   * [介绍](api/hippy-react/introduction.md)
   * [组件](api/hippy-react/components.md)
@@ -9,6 +8,16 @@
   * [手势系统](api/hippy-react/gesture.md)
   * [自定义组件和模块](api/hippy-react/customize.md)
   * [转 Web](api/hippy-react/web.md)
+* hippy-vue-next
+  * [介绍](api/hippy-vue-next/introduction.md)
+  * [核心组件](api/hippy-vue-next/components.md)
+  * [扩展组件](api/hippy-vue-next/external-components.md)
+  * [模块](api/hippy-vue-next/vue-native.md)
+  * [样式](api/hippy-vue-next/style.md)
+  * [事件](api/hippy-vue-next/native-event.md)
+  * [自定义组件和模块](api/hippy-vue-next/customize.md)
+  * [路由](api/hippy-vue-next/router.md)
+  * [转 Web](api/hippy-vue-next/web.md)
 * hippy-vue
   * [介绍](api/hippy-vue/introduction.md)
   * [核心组件](api/hippy-vue/components.md)
@@ -19,7 +28,6 @@
   * [自定义组件和模块](api/hippy-vue/customize.md)
   * [路由](api/hippy-vue/router.md)
   * [转 Web](api/hippy-vue/web.md)
-  * [Vue 3.x](api/hippy-vue/vue3.md)
 * 样式
   * [布局](api/style/layout.md)
   * [外观](api/style/appearance.md)

From 5ca9f8946cee48d845a2cde1f9d6fb6a69e32531 Mon Sep 17 00:00:00 2001
From: birdguo <birdguo@tencent.com>
Date: Thu, 29 Jun 2023 10:07:55 +0800
Subject: [PATCH 4/9] feat(docs): add vue-next integration doc

---
 docs/development/web-integration.md | 217 +++++++++++++++++++++++++---
 1 file changed, 199 insertions(+), 18 deletions(-)

diff --git a/docs/development/web-integration.md b/docs/development/web-integration.md
index 4d373acddcb..30ed61bfe31 100644
--- a/docs/development/web-integration.md
+++ b/docs/development/web-integration.md
@@ -97,20 +97,20 @@ new Hippy({
 // P.S. entryPage需要通过单节点包裹，不能用数组的形式，例如
 import React from 'react';
 import {
-    View,
-    Text,
+  View,
+  Text,
 } from '@hippy/react';
 export default function app() {
-    // 入口文件不要使用这种形式，非入口文件可以使用
-    return [
-        <View key="root_blk" />,
-        <Text key="root_txt">test test</Text>
-    ];
-    // 修改成通过单节点包裹
-    return (<View>
-            <View key="root_blk" />,
-            <Text key="root_txt">test test</Text>
-        </View>);
+  // 入口文件不要使用这种形式，非入口文件可以使用
+  return [
+    <View key="root_blk" />,
+    <Text key="root_txt">test test</Text>
+  ];
+  // 修改成通过单节点包裹
+  return (<View>
+    <View key="root_blk" />,
+    <Text key="root_txt">test test</Text>
+  </View>);
 }
 
 ```
@@ -121,10 +121,10 @@ export default function app() {
 
 ```json
   "scripts": {
-    "hippy:dev": "node ./scripts/env-polyfill.js hippy-dev --config ./scripts/hippy-webpack.dev.js",
-    "hippy:vendor": "node ./scripts/env-polyfill.js webpack --config ./scripts/hippy-webpack.ios-vendor.js --config ./scripts/hippy-webpack.android-vendor.js",
-    "hippy:build": "node ./scripts/env-polyfill.js webpack --config ./scripts/hippy-webpack.ios.js --config ./scripts/hippy-webpack.android.js"
-  }
+"hippy:dev": "node ./scripts/env-polyfill.js hippy-dev --config ./scripts/hippy-webpack.dev.js",
+"hippy:vendor": "node ./scripts/env-polyfill.js webpack --config ./scripts/hippy-webpack.ios-vendor.js --config ./scripts/hippy-webpack.android-vendor.js",
+"hippy:build": "node ./scripts/env-polyfill.js webpack --config ./scripts/hippy-webpack.ios.js --config ./scripts/hippy-webpack.android.js"
+}
 ```
 
 ## hippy-react 转 Web
@@ -133,6 +133,8 @@ export default function app() {
 
 # hippy-vue
 
+>注意：因vue2.x版本将于年底停止更新，建议用户升级至使用vue3.x版本的@hippy/vue-next
+
 [[hippy-vue 介绍]](api/hippy-vue/introduction.md) [[范例工程]](//github.com/Tencent/Hippy/tree/master/examples/hippy-vue-demo)
 
 hippy-vue 相对简单很多，hippy-vue 只是 [Vue](//vuejs.org) 在终端上的渲染层，组件也基本和浏览器保持一致。可以通过 [vue-cli](//cli.vuejs.org/) 先[创建一个 Web 项目](//cli.vuejs.org/zh/guide/creating-a-project.html)，然后加上一些 hippy-vue 的内容就可以直接将网页渲染到终端了。
@@ -284,6 +286,186 @@ setApp(app);
 
 在 [package.json](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/package.json#L13) 中提供了几个以 `hippy:`开头的 npm 脚本，可用来启动 [@hippy/debug-server-next](//www.npmjs.com/package/@hippy/debug-server-next) 等调试工具。
 
+```json
+  "scripts": {
+"hippy:dev": "node ./scripts/env-polyfill.js hippy-dev --config ./scripts/hippy-webpack.dev.js",
+"hippy:vendor": "node ./scripts/env-polyfill.js webpack --config ./scripts/hippy-webpack.ios-vendor.js --config ./scripts/hippy-webpack.android-vendor.js",
+"hippy:build": "node ./scripts/env-polyfill.js webpack --config ./scripts/hippy-webpack.ios.js --config ./scripts/hippy-webpack.android.js"
+},
+```
+
+## 路由
+
+`@hippy/vue-router` 完整支持 vue-router 中的跳转功能，具体请参考 [hippy-vue-router](api/hippy-vue/router.md) 文档。
+
+# hippy-vue-next
+
+[[hippy-vue-next 介绍]](api/hippy-vue/vue3) [[范例工程]](//github.com/Tencent/Hippy/tree/master/examples/hippy-vue-next-demo)
+
+hippy-vue-next 是 [Vue](//cn.vuejs.org) 在终端上的渲染层，组件也基本和浏览器保持一致。可以通过脚手架 [vue-cli](//github.com/vuejs/vue-cli) 先[创建一个 Web 项目](//cli.vuejs.org/zh/guide/creating-a-project.html#vue-create)，然后加上一些 hippy-vue-next 的内容就可以直接将网页渲染到终端了。也可以参考我们的范例项目来初始化你的项目。
+>注意这里使用vue-cli创建项目时构建工具要选择webpack，并且Router和Typescript需要勾选，我们的hippy-vue-next默认都是基于Typescript开发的
+
+## 准备 hippy-vue-next 运行时依赖
+
+请使用 `npm i` 安装以下 npm 包，保证运行时正常。
+
+| 包名            | 说明                                  |
+|---------------|-------------------------------------|
+| @hippy/vue-next | hippy-vue-next 运行时核心                |
+
+## hippy-vue-next 编译时依赖
+
+以官方提供的 [范例工程](//github.com/Tencent/Hippy/tree/master/examples/hippy-vue-next-demo) 范例工程为例，需要使用 `npm i -D` 准备好以下依赖，当然开发者可以根据需要自行选择：
+
+必须的：
+
+| 包名                           | 说明                                 |
+|------------------------------|------------------------------------|
+| @hippy/debug-server-next     | Hippy 前终端调试服务                      |
+| @hippy/vue-css-loader        | hippy-vue-next 的 CSS 文本到 JS 语法树转换  |
+| @hippy/vue-next-style-parser | hippy-vue-next 的样式 parser          |
+| @babel/preset-env            | Babel 插件 - 根据所设置的环境选择 polyfill     |
+| @babel/core                  | Babel - 高版本 ES 转换为 ES6 和 ES5 的转译程序 |
+| babel-loader                 | Webpack 插件 - 加载 Babel 转译后的代码       |
+| webpack                      | Webpack 打包程序                       |
+| webpack-cli                  | Webpack 命令行                        |
+
+可选的：
+
+| 包名                                  | 说明                                                                    |
+|-------------------------------------|-----------------------------------------------------------------------|
+| case-sensitive-paths-webpack-plugin | Webpack 插件，对 import 文件进行大小写检查                                         |
+| @hippy/hippy-live-reload-polyfill   | live-reload 必备脚本 - 会在调试模式编译时注入代码到工程里                                  |
+| @hippy/hippy-dynamic-import-plugin  | 动态加载插件 - 拆分出子包用于按需加载                                                  |
+| @hippy/vue-router-next-history  | 支持按安卓物理返回键回退路由                                                        |
+| @babel/plugin-x                     | Babel 其余相关插件，如 `@babel/plugin-proposal-nullish-coalescing-operator` 等 |
+| file-loader                         | 静态文件加载                                                                |
+| url-loader                          | 静态文件以 Base64 形式加载                                                     |
+| esbuild & esbuild-loader            | 开发环境webpack支持使用esbuild构建，性能比babel更好                                   |
+
+## hippy-vue-next 编译配置
+
+当前 hippy-vue-next 支持 `Webpack 4 或 Webpack 5`构建，配置全部放置于 [scripts](//github.com/Tencent/Hippy/tree/master/examples/hippy-vue-next-demo/scripts) 目录下，其实只是 [webpack](//webpack.js.org/) 的配置文件，建议先阅读 [webpack](//webpack.js.org/) 官网内容，具备一定基础后再进行修改。
+
+### hippy-vue-next 开发调试编译配置
+
+该配置展示了将 Hippy 运行于终端的最小化配置。
+
+| 配置文件                                                                                                                     | 说明       |
+|--------------------------------------------------------------------------------------------------------------------------| ---------- |
+| [hippy-webpack.dev.js](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-next-demo/scripts/hippy-webpack.dev.js) | 调试用配置 |
+
+### hippy-vue-next 生产环境编译配置
+
+线上包和开发调试用包主要有两个区别：
+
+1. 开启了 production 模式，去掉调试信息，关闭了 `watch`（watch 模式下会监听文件变动并重新打包）。
+2. 终端内很可能不止运行一个 Hippy 业务，所以将共享的部分单独拆出来做成了 `vendor` 包，这样可以有效减小业务包体积，这里使用了 [DllPlugin](//webpack.js.org/plugins/dll-plugin/) 和 [DllReferencePlugin](//webpack.js.org/plugins/dll-plugin/#dllreferenceplugin) 来实现。
+
+| 配置文件                                                                                                                                      | 说明                          |
+|-------------------------------------------------------------------------------------------------------------------------------------------| ----------------------------- |
+| [vendor.js](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-next-demo/scripts/vendor.js)                                        | vendor 包中需要包含的共享部分 |
+| [hippy-webpack.ios.js](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-next-demo/scripts/hippy-webpack.ios.js)                       | iOS 业务包配置                |
+| [hippy-webpack.ios-vendor.js](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-next-demo/scripts/hippy-webpack.ios-vendor.js)         | iOS Vendor 包配置             |
+| [hippy-webpack.android.js](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-next-demo/scripts/hippy-webpack.android.js)               | Android 业务包配置            |
+| [hippy-webpack.android-vendor.js](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-next-demo/scripts/hippy-webpack.android-vendor.js) | Android Vendor 包配置             |
+
+如果仔细观察 webpack 配置，可以看出 iOS 和 Android 配置相差不大，但因为 iOS 上受苹果政策影响只能使用 [JavaScriptCore](//developer.apple.com/documentation/javascriptcore)（以下简称 JSC）作为运行环境，而 JSC 是跟随 iOS 操作系统的，无法进行独立升级，低版本 iOS 带的 JSC 甚至无法完整支持 ES6，所以需要输出一份 ES5 版本的 JS 代码。而 Android 下可以使用独立升级的 [X5](//x5.tencent.com/) 中的 V8 作为运行环境，就可以直接使用 ES6 代码了。
+
+!> **特别说明：** JS 可以使用的语法受到 iOS 覆盖的最低版本的影响，绝大多数能力可以通过 `@babel/preset-env` 自动安装 polyfill，但是部分特性不行，例如要使用 [Proxy](//caniuse.com/#feat=proxy)，就无法覆盖 iOS 10 以下版本，而hippy-vue-next是基于vue-next的，因此使用hippy-vue-next iOS版本必须要10及以上。
+
+## hippy-vue-next 入口文件
+
+因为 hippy-vue-next 的启动参数与 web 页面不一样，所以我们需要专门的 [终端入口文件](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-next-demo/src/main-native.ts)来加载一些终端上用到的模块，并作为项目的入口文件
+
+```ts
+// 首先导入所需模块
+import {
+  createApp,
+  type HippyApp,
+  EventBus,
+  setScreenSize,
+  BackAndroid,
+} from '@hippy/vue-next';
+
+import App from './app.vue';
+import { createRouter } from './routes';
+import { setGlobalInitProps } from './util';
+
+// 创建 hippy app 实例
+const app: HippyApp = createApp(App, {
+  // hippy native module name
+  appName: 'Demo',
+  iPhone: {
+    // config of statusBar
+    statusBar: {
+      // disable status bar autofill
+      // disabled: true,
+
+      // Status bar background color, if not set, it will use 4282431619, as #40b883, Vue default green
+      // hippy-vue-css-loader/src/compiler/style/color-parser.js
+      backgroundColor: 4283416717,
+
+      // 状态栏背景图，要注意这个会根据容器尺寸拉伸。
+      // backgroundImage: 'https://user-images.githubusercontent.com/12878546/148737148-d0b227cb-69c8-4b21-bf92-739fb0c3f3aa.png',
+    },
+  },
+  // do not print trace info when set to true
+  // silent: true,
+  /**
+   * whether to trim whitespace on text element,
+   * default is true, if set false, it will follow vue-loader compilerOptions whitespace setting
+   */
+  trimWhitespace: true,
+});
+// create router
+const router = createRouter();
+app.use(router);
+
+// init callback
+const initCallback = ({ superProps, rootViewId }) => {
+  setGlobalInitProps({
+    superProps,
+    rootViewId,
+  });
+  /**
+   * Because the memory history of vue-router is now used,
+   * the initial position needs to be pushed manually, otherwise the router will not be ready.
+   * On the browser, it is matched by vue-router according to location.href, and the default push root path '/'
+   */
+  router.push('/');
+
+  // listen android native back press, must before router back press inject
+  BackAndroid.addListener(() => {
+    console.log('backAndroid');
+    // set true interrupts native back
+    return true;
+  });
+
+  // mount first， you can do something before mount
+  app.mount('#root');
+
+  /**
+   * You can also mount the app after the route is ready, However,
+   * it is recommended to mount first, because it can render content on the screen as soon as possible
+   */
+  // router.isReady().then(() => {
+  //   // mount app
+  //   app.mount('#root');
+  // });
+};
+
+// start hippy app
+app.$start().then(initCallback);
+
+// you can also use callback to start app like @hippy/vue before
+// app.$start(initCallback);
+```
+
+## hippy-vue-next npm 脚本
+
+在 [package.json](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-next-demo/package.json#L13) 中提供了几个以 `hippy:`开头的 npm 脚本，可用来启动 [@hippy/debug-server-next](//www.npmjs.com/package/@hippy/debug-server-next) 等调试工具。
+
 ```json
   "scripts": {
     "hippy:dev": "node ./scripts/env-polyfill.js hippy-dev --config ./scripts/hippy-webpack.dev.js",
@@ -294,5 +476,4 @@ setApp(app);
 
 ## 路由
 
-`@hippy/vue-router` 完整支持 vue-router 中的跳转功能，具体请参考 [hippy-vue-router](api/hippy-vue/router.md) 文档。
-
+`@hippy/vue-next` 无需侵入式修改vue-router，直接使用官方 vue-router 即可，如果需要支持安卓物理健回退时路由历史回退，则可以安装@hippy/vue-router-next-history模块。

From 3f65abd1b520126752e7f22ef9d6db454c0791fb Mon Sep 17 00:00:00 2001
From: birdguo <birdguo@tencent.com>
Date: Thu, 29 Jun 2023 10:09:12 +0800
Subject: [PATCH 5/9] feat(docs): update vue-next integration doc

---
 docs/development/web-integration.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/development/web-integration.md b/docs/development/web-integration.md
index 30ed61bfe31..3d77a392597 100644
--- a/docs/development/web-integration.md
+++ b/docs/development/web-integration.md
@@ -1,7 +1,7 @@
 
 # 前端接入
 
-Hippy 同时支持 React 和 Vue 两种 UI 框架，通过 [@hippy/react](//www.npmjs.com/package/@hippy/react) 和 [@hippy/vue](//www.npmjs.com/package/@hippy/vue) 两个包提供实现。
+Hippy 同时支持 React 和 Vue 两种 UI 框架，通过 [@hippy/react](//www.npmjs.com/package/@hippy/react) 和 [@hippy/vue](//www.npmjs.com/package/@hippy/vue) 及 [@hippy/vue-next](//www.npmjs.com/package/@hippy/vue-next) 三个包提供实现。
 
 # hippy-react
 

From b4b27d67971728be629196d1a6a524849f271e0e Mon Sep 17 00:00:00 2001
From: birdguo <birdguo@tencent.com>
Date: Thu, 29 Jun 2023 15:19:15 +0800
Subject: [PATCH 6/9] feat(docs): update vue-next api docs

---
 docs/api/_sidebar.md                          |  12 +-
 docs/api/hippy-react/_sidebar.md              |  22 +-
 docs/api/hippy-vue-next/_sidebar.md           |  22 +-
 docs/api/hippy-vue-next/components.md         |  87 ++---
 docs/api/hippy-vue-next/customize.md          |  96 +++---
 .../api/hippy-vue-next/external-components.md |  99 +++---
 docs/api/hippy-vue-next/introduction.md       | 230 +++++++++++--
 docs/api/hippy-vue-next/native-event.md       |  36 +-
 docs/api/hippy-vue-next/router.md             |   4 +-
 docs/api/hippy-vue-next/style.md              |  32 +-
 docs/api/hippy-vue-next/vue-native.md         |  24 +-
 docs/api/hippy-vue-next/vue3.md               | 310 ------------------
 docs/api/hippy-vue/_sidebar.md                |  20 +-
 docs/api/hippy-vue/customize.md               |   2 +-
 docs/api/style/_sidebar.md                    |  22 +-
 15 files changed, 473 insertions(+), 545 deletions(-)
 delete mode 100644 docs/api/hippy-vue-next/vue3.md

diff --git a/docs/api/_sidebar.md b/docs/api/_sidebar.md
index e3f5b9ca36c..032722fc7c6 100644
--- a/docs/api/_sidebar.md
+++ b/docs/api/_sidebar.md
@@ -1,4 +1,3 @@
-<!-- docs/hippy-vue/_sidebar.md -->
 * hippy-react
   * [介绍](api/hippy-react/introduction.md)
   * [组件](api/hippy-react/components.md)
@@ -18,7 +17,16 @@
   * [自定义组件和模块](api/hippy-vue/customize.md)
   * [路由](api/hippy-vue/router.md)
   * [转 Web](api/hippy-vue/web.md)
-  * [Vue 3.x](api/hippy-vue/vue3.md)
+* hippy-vue-next
+  * [介绍](api/hippy-vue-next/introduction.md)
+  * [核心组件](api/hippy-vue-next/components.md)
+  * [扩展组件](api/hippy-vue-next/external-components.md)
+  * [模块](api/hippy-vue-next/vue-native.md)
+  * [样式](api/hippy-vue-next/style.md)
+  * [事件](api/hippy-vue-next/native-event.md)
+  * [自定义组件和模块](api/hippy-vue-next/customize.md)
+  * [路由](api/hippy-vue-next/router.md)
+  * [转 Web](api/hippy-vue-next/web.md)
 * 样式
   * [布局](api/style/layout.md)
   * [外观](api/style/appearance.md)
diff --git a/docs/api/hippy-react/_sidebar.md b/docs/api/hippy-react/_sidebar.md
index e86b8a51a6a..6c60a51dcf0 100644
--- a/docs/api/hippy-react/_sidebar.md
+++ b/docs/api/hippy-react/_sidebar.md
@@ -1,4 +1,4 @@
-<!-- docs/hippy-vue/_sidebar.md -->
+<!-- docs/hippy-react/_sidebar.md -->
 * hippy-react
   * [介绍](api/hippy-react/introduction.md)
   * [组件](api/hippy-react/components.md)
@@ -8,16 +8,6 @@
   * [手势系统](api/hippy-react/gesture.md)
   * [自定义组件和模块](api/hippy-react/customize.md)
   * [转 Web](api/hippy-react/web.md)
-* hippy-vue-next
-  * [介绍](api/hippy-vue-next/introduction.md)
-  * [核心组件](api/hippy-vue-next/components.md)
-  * [扩展组件](api/hippy-vue-next/external-components.md)
-  * [模块](api/hippy-vue-next/vue-native.md)
-  * [样式](api/hippy-vue-next/style.md)
-  * [事件](api/hippy-vue-next/native-event.md)
-  * [自定义组件和模块](api/hippy-vue-next/customize.md)
-  * [路由](api/hippy-vue-next/router.md)
-  * [转 Web](api/hippy-vue-next/web.md)
 * hippy-vue
   * [介绍](api/hippy-vue/introduction.md)
   * [核心组件](api/hippy-vue/components.md)
@@ -28,6 +18,16 @@
   * [自定义组件和模块](api/hippy-vue/customize.md)
   * [路由](api/hippy-vue/router.md)
   * [转 Web](api/hippy-vue/web.md)
+* hippy-vue-next
+  * [介绍](api/hippy-vue-next/introduction.md)
+  * [核心组件](api/hippy-vue-next/components.md)
+  * [扩展组件](api/hippy-vue-next/external-components.md)
+  * [模块](api/hippy-vue-next/vue-native.md)
+  * [样式](api/hippy-vue-next/style.md)
+  * [事件](api/hippy-vue-next/native-event.md)
+  * [自定义组件和模块](api/hippy-vue-next/customize.md)
+  * [路由](api/hippy-vue-next/router.md)
+  * [转 Web](api/hippy-vue-next/web.md)
 * 样式
   * [布局](api/style/layout.md)
   * [外观](api/style/appearance.md)
diff --git a/docs/api/hippy-vue-next/_sidebar.md b/docs/api/hippy-vue-next/_sidebar.md
index e86b8a51a6a..b25696c61f4 100644
--- a/docs/api/hippy-vue-next/_sidebar.md
+++ b/docs/api/hippy-vue-next/_sidebar.md
@@ -1,4 +1,4 @@
-<!-- docs/hippy-vue/_sidebar.md -->
+<!-- docs/hippy-vue-next/_sidebar.md -->
 * hippy-react
   * [介绍](api/hippy-react/introduction.md)
   * [组件](api/hippy-react/components.md)
@@ -8,16 +8,6 @@
   * [手势系统](api/hippy-react/gesture.md)
   * [自定义组件和模块](api/hippy-react/customize.md)
   * [转 Web](api/hippy-react/web.md)
-* hippy-vue-next
-  * [介绍](api/hippy-vue-next/introduction.md)
-  * [核心组件](api/hippy-vue-next/components.md)
-  * [扩展组件](api/hippy-vue-next/external-components.md)
-  * [模块](api/hippy-vue-next/vue-native.md)
-  * [样式](api/hippy-vue-next/style.md)
-  * [事件](api/hippy-vue-next/native-event.md)
-  * [自定义组件和模块](api/hippy-vue-next/customize.md)
-  * [路由](api/hippy-vue-next/router.md)
-  * [转 Web](api/hippy-vue-next/web.md)
 * hippy-vue
   * [介绍](api/hippy-vue/introduction.md)
   * [核心组件](api/hippy-vue/components.md)
@@ -28,6 +18,16 @@
   * [自定义组件和模块](api/hippy-vue/customize.md)
   * [路由](api/hippy-vue/router.md)
   * [转 Web](api/hippy-vue/web.md)
+* hippy-vue-next
+  * [介绍](api/hippy-vue-next/introduction.md)
+  * [核心组件](api/hippy-vue-next/components.md)
+  * [扩展组件](api/hippy-vue-next/external-components.md)
+  * [模块](api/hippy-vue-next/vue-native.md)
+  * [样式](api/hippy-vue-next/style.md)
+  * [事件](api/hippy-vue-next/native-event.md)
+  * [自定义组件和模块](api/hippy-vue-next/customize.md)
+  * [路由](api/hippy-vue-next/router.md)
+  * [转 Web](api/hippy-vue-next/web.md)
 * 样式
   * [布局](api/style/layout.md)
   * [外观](api/style/appearance.md)
diff --git a/docs/api/hippy-vue-next/components.md b/docs/api/hippy-vue-next/components.md
index 55da7fdfd18..b01e4c4aa33 100644
--- a/docs/api/hippy-vue-next/components.md
+++ b/docs/api/hippy-vue-next/components.md
@@ -8,7 +8,7 @@
 
 # a
 
-该组件目前映射到终端 Text 组件，目前主要用于在 hippy-vue-router 中进行页面跳转。 一切同 [p](api/hippy-vue/components.md?id=p)。
+该组件目前映射到终端 Text 组件，目前主要用于在 hippy-vue-router 中进行页面跳转。 一切同 [p](api/hippy-vue-next/components.md?id=p)。
 
 ## 事件
 
@@ -23,9 +23,9 @@
 
 # button
 
-[[范例：demo-button.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/demos/demo-button.vue)
+[[范例：demo-button.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-next-demo/src/components/demo/demo-button.vue)
 
-该组件映射到 View 组件，容器里面可以放图片、也可以放文本。但是因为 View 不能包裹文本，所以需要在 `<button>` 里包裹其它文本组件才能显示文字，这个跟浏览器不一样，浏览器的 `<button>` 也可以包裹 `<span>` 组件，开发时注意一下。一切同 [div](api/hippy-vue/components.md?id=div)。
+该组件映射到 View 组件，容器里面可以放图片、也可以放文本。但是因为 View 不能包裹文本，所以需要在 `<button>` 里包裹其它文本组件才能显示文字，这个跟浏览器不一样，浏览器的 `<button>` 也可以包裹 `<span>` 组件，开发时注意一下。一切同 [div](api/hippy-vue-next/components.md?id=div)。
 
 ## 事件
 
@@ -42,7 +42,7 @@
 
 # div
 
-[[范例：demo-div.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/demos/demo-div.vue)
+[[范例：demo-div.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-next-demo/src/components/demo/demo-div.vue)
 
 > div 组件容器，默认不可以滚动。可以通过增加样式参数 `overflow-y: scroll` 切换为可以纵向滚动容器，或者增加样式参数 `overflow-x: scroll` 切换为水平滚动容器。在终端侧会被映射成 [ScrollView](api/hippy-react/components.md?id=ScrollView)，因此具备 [ScrollView](hippy-react/components.md?id=ScrollView) 通用的能力。
 
@@ -66,7 +66,7 @@
 | showScrollIndicator            | 是否显示滚动条。 `default: false`（仅在 overflow-y/x: scroll 时适用） | `boolean`  | `Android、Voltron`    |
 | showsHorizontalScrollIndicator | 当此值设为 `false` 的时候，`ScrollView` 会隐藏水平的滚动条。`default: true` `（仅在 overflow-y/x: scroll 时适用）`| `boolean`                                                    | `iOS、Voltron`    |
 | showsVerticalScrollIndicator   | 当此值设为 `false` 的时候，`ScrollView` 会隐藏垂直的滚动条。 `default: true` `（仅在 overflow-y/x: scroll 时适用）`| `boolean`  | `iOS、Voltron`   | 
-| nativeBackgroundAndroid        | 配置水波纹效果，`最低支持版本 2.13.1`；配置项为 `{ borderless: boolean, color: Color, rippleRadius: number }`； `borderless` 表示波纹是否有边界，默认false；`color` 波纹颜色；`rippleRadius` 波纹半径，若不设置，默认容器边框为边界； `注意：设置水波纹后默认不显示，需要在对应触摸事件中调用 setPressed 和 setHotspot 方法进行水波纹展示，详情参考相关`[demo](//github.com/Tencent/Hippy/tree/master/examples/hippy-vue-demo/src/components/demos/demo-div.vue) | `Object`| `Android`    |
+| nativeBackgroundAndroid        | 配置水波纹效果，`最低支持版本 2.13.1`；配置项为 `{ borderless: boolean, color: Color, rippleRadius: number }`； `borderless` 表示波纹是否有边界，默认false；`color` 波纹颜色；`rippleRadius` 波纹半径，若不设置，默认容器边框为边界； `注意：设置水波纹后默认不显示，需要在对应触摸事件中调用 setPressed 和 setHotspot 方法进行水波纹展示，详情参考相关`[demo](//github.com/Tencent/Hippy/tree/master/examples/hippy-vue-next-demo/src/components/demo/demo-div.vue) | `Object`| `Android`    |
 
 ---
 
@@ -104,7 +104,7 @@
 
 ### setPressed
 
-[[setPressed 范例]](//github.com/Tencent/Hippy/tree/master/examples/hippy-vue-demo/src/components/demos/demo-ripple-div.vue)
+[[setPressed 范例]](//github.com/Tencent/Hippy/tree/master/examples/hippy-vue-next-demo/src/components/demo/demo-ripple-div.vue)
 
 `最低支持版本 2.13.1`
 
@@ -114,7 +114,7 @@
 
 ### setHotspot
 
-[[setHotspot 范例]](//github.com/Tencent/Hippy/tree/master/examples/hippy-vue-demo/src/components/demos/demo-ripple-div.vue)
+[[setHotspot 范例]](//github.com/Tencent/Hippy/tree/master/examples/hippy-vue-next-demo/src/components/demo/demo-ripple-div.vue)
 
 `最低支持版本 2.13.1`
 
@@ -124,15 +124,15 @@
 
 # form
 
-[[范例：demo-div.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/demos/demo-div.vue)
+[[范例：demo-div.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-next-demo/src/components/demo/demo-div.vue)
 
-容器组件。 一切同 [div](api/hippy-vue/components.md?id=div)。
+容器组件。 一切同 [div](api/hippy-vue-next/components.md?id=div)。
 
 ---
 
 # iframe
 
-[[范例：demo-iframe.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/demos/demo-iframe.vue)
+[[范例：demo-iframe.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-next-demo/src/components/demo/demo-iframe.vue)
 
 内嵌网页容器。
 
@@ -156,7 +156,7 @@
 
 # img
 
-[[范例：demo-img.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/demos/demo-img.vue)
+[[范例：demo-img.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-next-demo/src/components/demo/demo-img.vue)
 
 图片组件，和浏览器的一样。
 
@@ -198,7 +198,7 @@
 
 # input
 
-[[范例：demo-input.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/demos/demo-input.vue)
+[[范例：demo-input.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-next-demo/src/components/demo/demo-input.vue)
 
 单行文本组件。
 
@@ -315,9 +315,9 @@
 
 # label
 
-[[范例：demo-p.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/demos/demo-p.vue)
+[[范例：demo-p.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-next-demo/src/components/demo/demo-p.vue)
 
-显示文本。 一切同 [p](api/hippy-vue/components.md?id=p)。
+显示文本。 一切同 [p](api/hippy-vue-next/components.md?id=p)。
 
 ## 事件
 
@@ -332,7 +332,7 @@
 
 # ul
 
-[[范例：demo-list.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/demos/demo-list.vue)
+[[范例：demo-list.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-next-demo/src/components/demo/demo-list.vue)
 
 Hippy 的重点功能，高性能的可复用列表组件，在终端侧会被映射成 `ListView`，包含 `ListView` 所有能力。里面第一层只能包含 `<li>`。
 
@@ -393,7 +393,7 @@ Hippy 的重点功能，高性能的可复用列表组件，在终端侧会被
 
 ul 的子节点，终端层节点回收和复用的最小颗粒度。
 
-[[范例：demo-list.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/demos/demo-list.vue)
+[[范例：demo-list.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-next-demo/src/components/demo/demo-list.vue)
 
 ## 参数
 
@@ -402,7 +402,7 @@ ul 的子节点，终端层节点回收和复用的最小颗粒度。
 | 参数                  | 描述                                                         | 类型                                                        | 支持平台 |
 | --------------------- | ------------------------------------------------------------ | ----------------------------------------------------------- | -------- |
 | type            | 指定一个函数，在其中返回对应条目的类型（返回Number类型的自然数，默认是0），List 将对同类型条目进行复用，所以合理的类型拆分，可以很好地提升 List 性能。`注意：同一 type 的 item 组件由于复用可能不会走完整组件创建生命周期` | `number`              | `Android、iOS、Web-Renderer、Voltron`    |
-| key             | 指定一个函数，在其中返回对应条目的 Key 值，详见 [Vue 官网](//vuejs.org/v2/guide/list.html) | `string`                                    | `Android、iOS、Web-Renderer、Voltron`    |
+| key             | 指定一个函数，在其中返回对应条目的 Key 值，详见 [Vue 官网](//cn.vuejs.org/guide/essentials/list.html) | `string`                                    | `Android、iOS、Web-Renderer、Voltron`    |
 | sticky       | 对应的 item 是否需要使用悬停效果（滚动到顶部时，会悬停在 ListView 顶部，不会滚出屏幕），需跟 `ul` 的 `rowShouldSticky` 配合使用 | `boolean`                                | `Android、iOS、Web-Renderer、Voltron`
 | appear       | 当有`li`节点滑动进入屏幕时（曝光）触发，入参返回曝光的`li`节点对应索引值。 | `(index) => any` | `Android、iOS、Web-Renderer、Voltron` |
 | disappear       | 当有`li`节点滑动离开屏幕时触发，入参返回离开的`li`节点对应索引值。 | `(index) => any` | `Android、iOS、Web-Renderer、Voltron` |
@@ -413,7 +413,7 @@ ul 的子节点，终端层节点回收和复用的最小颗粒度。
 
 # p
 
-[[范例：demo-p.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/demos/demo-p.vue)
+[[范例：demo-p.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-next-demo/src/components/demo/demo-p.vue)
 
 显示文本，不过因为 Hippy 下没有 `display: inline` 的显示模式，默认全部都是 flex 的。
 
@@ -447,43 +447,48 @@ ul 的子节点，终端层节点回收和复用的最小颗粒度。
 
 ## whitespace 处理
 
-`2.15.3` 版本前，Hippy 对模板中文本空格的处理行为默认采用 `trim` 的处理，即会将元素中开头和结尾的空格（包括特殊 `&nbsp;`）均去除。
+Vue3.x 默认值为 `condense`（可参考 [Vue3 whitespace说明](https://cn.vuejs.org/api/application.html#app-config-compileroptions-whitespace)）。
 
-`2.15.3` 版本后，增加 `Vue.config.trimWhitespace` 配置，设为 `false` 可关闭 `trim` 的处理，其余遵循 [Vue-Loader compilerOptions](https://cn.vuejs.org/api/application.html#app-config-compileroptions-whitespace) 本身的配置。
+`2.15.3` 版本前，Hippy 对模板中文本空格的处理行为默认采用 `trim` 的处理，即会将元素中开头和结尾的空格（包括特殊 `&nbsp;`）均去除。
 
-!> 注意：Vue2.x compilerOptions.whitespace 的默认值为 `preserve`
+`2.15.3` 版本后，支持在初始化 APP （createApp）时传入 whitespace 的处理方式
 
 ```javascript
-// entry file
-// trimWhitespace default is  true
-Vue.config.trimWhitespace = false; // close trim handler
-
-// webpack script
-rules: [
+  // entry file
+  const app: HippyApp = createApp(App, {
+   // hippy native module name
+   appName: 'Demo',
+   // trimWhitespace default is true
+   trimWhitespace: false,
+  });
+
+  //  webpack script
+  rules: [
   {
-    test: /\.vue$/,
-    use: [
+      test: /\.vue$/,
+      use: [
       {
         loader: vueLoader,
         options: {
-          compilerOptions: {
-            // whitespace handler, default is 'preserve'
-            whitespace: 'condense',
-          },
+            compilerOptions: {
+              // whitespace handler, default is 'condense'
+              whitespace: 'condense',
+            },
         },
-      },
-    ],
-  },
-]
+      }],
+   },
+  ]
 ```
 
+!> 注意：Vue2.x compilerOptions.whitespace 的默认值为 `preserve`
+
 ---
 
 # span
 
-[[范例：demo-p.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/demos/demo-p.vue)
+[[范例：demo-p.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-next-demo/src/components/demo/demo-p.vue)
 
-显示文本。 一切同 [p](api/hippy-vue/components.md?id=p)。
+显示文本。 一切同 [p](api/hippy-vue-next/components.md?id=p)。
 
 ## 事件
 
@@ -498,6 +503,6 @@ rules: [
 
 # textarea
 
-[[范例：demo-p.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/demos/demo-textarea.vue)
+[[范例：demo-p.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-next-demo/src/components/demo/demo-textarea.vue)
 
-多行文本输入框。 一切同 [input](api/hippy-vue/components.md?id=input)。
+多行文本输入框。 一切同 [input](api/hippy-vue-next/components.md?id=input)。
diff --git a/docs/api/hippy-vue-next/customize.md b/docs/api/hippy-vue-next/customize.md
index a8e04624fcb..a37c787d3fc 100644
--- a/docs/api/hippy-vue-next/customize.md
+++ b/docs/api/hippy-vue-next/customize.md
@@ -2,21 +2,21 @@
 
 ---
 
-# Vue.registerElement
+# registerElement
 
-hippy-vue 提供了 `registerElement` 方法来注册组件，将 template 中的 tag 和原生组件映射起来。
+@hippy/vue-next 提供了 `registerElement` 方法来注册组件，可以将 template 中的 tag 和原生组件映射起来。
 
 ## 示例
 
 ```javascript
-import Vue from 'vue';
+import { registerElement } from '@hippy/vue-next';
 
 /*
  * 直接注册一个 ComponentName 到终端组件，这里推荐单词首字母大写的拼写。
  * template 里可以直接用 <ComponentName />
  * ComponentName 必须跟终端组件名称一致，且不能包含 Hippy 字符。
  */
-Vue.registerElement('MyView');
+registerElement('MyView');
 
 /*
  * 也可以注册一个小写的 tagname，然后通过参数映射到 ComponentName 终端组件
@@ -24,7 +24,7 @@ Vue.registerElement('MyView');
  * template 里可以直接用 <tagname />，同样会映射 ComponentName 组件上。
  * ComponentName 必须跟终端组件名称一致，不能包含 Hippy 字符。
  */
-Vue.registerElement('h-my-view', {
+registerElement('h-my-view', {
   component: {
     name: 'MyView',
   },
@@ -33,51 +33,58 @@ Vue.registerElement('h-my-view', {
 
 ## 绑定终端事件返回值
 
-因为 hippy-vue 采用了和浏览器一致的事件模型，又希望能统一双端的事件（有的时候双端事件返回值不一样），所以采取了手动修改事件返回值的方案，需要显式声明每个事件的返回值。
+因为 @hippy/vue-next 采用了和浏览器一致的事件模型，又希望能统一双端的事件（有的时候双端事件返回值不一样），所以采取了手动修改事件返回值的方案，需要显式声明每个事件的返回值。
 
 这一步是在注册组件时通过 `processEventData` 方法进行处理的，它有三个参数：
 
-* event: 终端回调函数里接收到的事件实例，需要对它进行修改
-* nativeEventName: 终端的原生事件名称
+* evtData: 包括终端回调函数里接收到的事件实例，需要对它进行修改。以及终端的原生事件名称
 * nativeEventParams：终端的原生事件返回体
 
-例如，hippy-vue 的 [hi-swiper 组件](//github.com/Tencent/Hippy/blob/master/packages/hippy-vue-native-components/src/swiper.js#L4)，它是 swiper 实际渲染的对应节点。
+例如，@hippy/vue-next 的 [hi-swiper 组件](//github.com/Tencent/Hippy/blob/master/packages/hippy-vue-next/src/native-component/swiper.ts#L38)，它是 swiper 实际渲染的对应节点。
 
 ```javascript
-component: {
-  name: 'ViewPager',
-  processEventData(event, nativeEventName, nativeEventParams) {
-    switch (nativeEventName) {
-    case 'onPageSelected':
-      // 显式将 native 的事件参数 nativeEventParams 的值赋予 hippy-vue 真正绑定的事件 event
-      event.currentSlide = nativeEventParams.position;
-      break;
-    case 'onPageScroll':
-      event.nextSlide = nativeEventParams.position;
-      event.offset = nativeEventParams.offset;
-      break;
-    default:
-      break;
+    component: {
+      name: 'ViewPager',
+      processEventData(
+        evtData: EventsUnionType,
+        nativeEventParams: { [key: string]: NeedToTyped },
+      ) {
+        // handler 及事件示例，可以对其进行修改。__evt则是终端的原生事件名称
+        const { handler: event, __evt: nativeEventName } = evtData;
+    
+        switch (nativeEventName) {
+          case 'onPageSelected':
+            event.currentSlide = nativeEventParams.position;
+            break;
+          case 'onPageScroll':
+            event.nextSlide = nativeEventParams.position;
+            event.offset = nativeEventParams.offset;
+            break;
+          case 'onPageScrollStateChanged':
+            event.state = nativeEventParams.pageScrollState;
+            break;
+          default:
+        }
+        return event;
+      },
     }
-    return event;
-  }
-}
 ```
 
-# Vue.component
+# app.component
 
-当你需要处理更加复杂的交互、事件、生命周期的时候，需要通过 `Vue.component` 注册一个单独的组件，registerElement 只能做到很基本的元素名称到组件的映射，和基本的参数映射。
+当你需要处理更加复杂的交互、事件、生命周期的时候，需要通过 `app.component` 注册一个单独的组件，registerElement 只能做到很基本的元素名称到组件的映射，和基本的参数映射。
 
-详情参考：//cn.vuejs.org/v2/guide/components-registration.html
+[详情参考](//cn.vuejs.org/guide/components/registration.html)
 
 ## 事件处理
 
-通过 `Vue.component` 自定义的组件，若需要将终端事件传给组件外层，需要做额外处理，有两种方式：
+通过 `app.component` 自定义的组件，若需要将终端事件传给组件外层，需要做额外处理，有两种方式：
 
 * 使用 `render` 函数（推荐）
 
 ```javascript
-  Vue.component('Swiper', {
+  // 这里的 vueApp 是通过 createApp 创建得到的 hippyVueApp 实例
+  vueApp.component('Swiper', {
     /*
      * 可以用 render 函数的方式
      * 'pageScroll'是传输给终端的事件名（传输终端时会被自动转成转成onPageScroll）
@@ -85,17 +92,16 @@ component: {
      */
     render(h) {
         const on = {
-            pageSelected: evt => this.$emit('dropped', evt),
-            pageScroll: evt => this.$emit('dragging', evt),
-            pageScrollStateChanged: evt => this.$emit('stateChanged', evt),
+            onPageSelected: this.$attrs['onDropped'],
+            onPageScroll: this.$attrs['onDragging'],
+            onPageScrollStateChanged: this.$attrs['onStateChanged'],
         };
         return h('hi-swiper', {
-            on,
+            ...on,
             ref: 'swiper',
-            attrs: {
-                initialPage: this.$initialSlide,
-            },
-        }, this.$slots.default);
+            initialPage: this.$initialSlide,
+        // 需要注意 Vue3.x 相比 2.x，slots这里参数有所变化，default是方法而不是属性了
+        }, this.$slots.default ? this.$slots.default() : null);
     },
 });
 ```
@@ -103,7 +109,7 @@ component: {
 * 使用 `template`
 
 ```javascript
-  Vue.component('Swiper', {
+  vueApp.component('Swiper', {
     /*
      * 可以用 template 的方式，HippyVue会在运行时将其转换成 render 函数
      * 'pageScroll'是传输给终端的事件名（传输终端时会被自动转成onPageScroll）
@@ -126,21 +132,21 @@ component: {
 
 > 该范例仅可以在 Android 下运行。
 
-hippy-vue 的模块其实只是一个 `Vue.Native.callNative` 调用，写个 `function` 即可。
+@hippy/vue-next 的模块其实只是一个 `Native.callNative` 调用，写个 `function` 即可。
 
 ```js
-import Vue from 'vue';
+import { Native } from  '@hippy/vue-next';
 
 function log(msg) {
-  Vue.Native.callNative("TestModule", "log", msg)
+  Native.callNative("TestModule", "log", msg)
 }
 
 function helloNative(msg) {
-  Vue.Native.callNative("TestModule", "helloNative", msg)
+  Native.callNative("TestModule", "helloNative", msg)
 }
 
 // 这个是需要终端回调的
 function helloNativeWithPromise(msg) {
-  return Vue.Native.callNativeWithPromise("TestModule", "helloNativeWithPromise", msg);
+  return Native.callNativeWithPromise("TestModule", "helloNativeWithPromise", msg);
 }
 ```
diff --git a/docs/api/hippy-vue-next/external-components.md b/docs/api/hippy-vue-next/external-components.md
index 8c175c52baa..3701ec032b1 100644
--- a/docs/api/hippy-vue-next/external-components.md
+++ b/docs/api/hippy-vue-next/external-components.md
@@ -2,15 +2,15 @@
 
 # 终端扩展组件
 
-扩展组件是终端提供了一些很方便的组件，在 hippy-vue 中由 [@hippy/vue-native-components](//www.npmjs.com/package/@hippy/vue-native-components) 提供
+扩展组件是终端提供了一些很方便的组件，在 @hippy/vue-next 中已经默认集成，只需直接使用即可
 
 ---
 
 # animation
 
-[[范例：demo-animation.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/native-demos/demo-animation.vue)
+[[范例：demo-animation.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-next-demo/src/components/native-demo/demo-animation.vue)
 
-该组件是 hippy-vue 的动画解决方案，直接传入一个样式值和动画方案数组，即可触发动作效果。
+该组件是 @hippy/vue-next 的动画解决方案，直接传入一个样式值和动画方案数组，即可触发动作效果。
 
 需要说明的是一个 animation 本身就是个 View，它会带动所有子节点一起动画，所以如果动画需要分开控制的话，需要在界面层级上进行拆分。
 
@@ -23,7 +23,7 @@
 
 * actions 详解
   
-  和 HippyReact 不同，HippyVue 将单个动画 Animation 和动画序列 AnimationSet 合二为一，如果是一个对象，就使用 Animation 处理，如果是数组动画序列就用 AnimationSet 处理。动画参数具体可参考 [HippyReact Animation 模块](api/hippy-react/modules.md?id=animation) 和 [范例](https://github.com/Tencent/Hippy/tree/master/examples/hippy-vue-demo/src/components/native-demos/animations)。
+  和 HippyReact 不同，HippyVue 将单个动画 Animation 和动画序列 AnimationSet 合二为一，如果是一个对象，就使用 Animation 处理，如果是数组动画序列就用 AnimationSet 处理。动画参数具体可参考 [HippyReact Animation 模块](api/hippy-react/modules.md?id=animation) 和 [范例](https://github.com/Tencent/Hippy/tree/master/examples/hippy-vue-next-demo/src/components/native-demo/animations)。
 
 
 ```vue
@@ -41,10 +41,41 @@
     />
   </div>
 </template>
-<script>
-export default {
-  data() {
+<script lang="ts">
+import { defineComponent, ref, nextTick } from 'vue';
+
+export default defineComponent({
+  setup(){
+    const animationRef = ref(null);
+    
+    const animationStart = () => {
+      console.log('animation-start callback');
+    };
+    const animationEnd = () => {
+      console.log('animation-end callback');
+    };
+    const animationRepeat = () => {
+      console.log('animation-repeat callback');
+    };
+    const animationCancel = () => {
+      console.log('animation-cancel callback');
+    };
+    const actionsDidUpdate = () => {
+      // pay attention pls, animate operate should execute
+      // after dom render finished
+      nextTick().then(() => {
+        console.log('actions updated & startAnimation');
+        if (animationRef.value) {
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          animationRef.value.start();
+        }
+      });
+    };
+    
+    
     return {
+      animationRef,
       actionsConfig: {
         // AnimationSet
         top: [
@@ -65,43 +96,31 @@ export default {
         transform: {
           // 单个 Animation
           rotate: {
-              startValue: 0,
-              toValue: 90,
-              duration: 250,
-              timingFunction: 'linear',
-              valueType: 'deg',  // 动画的开始和结束值的单位类型，默认为 undefined, 可设为 rad、deg、color
-            },
+            startValue: 0,
+            toValue: 90,
+            duration: 250,
+            timingFunction: 'linear',
+            valueType: 'deg',  // 动画的开始和结束值的单位类型，默认为 undefined, 可设为 rad、deg、color
+          },
         },
       },
-    };
-  },
-  methods: {
-    animationStart() {
-      console.log('animation-start callback');
-    },
-    animationEnd() {
-      console.log('animation-end callback');
-    },
-    animationRepeat() {
-      console.log('animation-repeat callback');
-    },
-    animationCancel() {
-      console.log('animation-cancel callback');
-    },
-    actionsDidUpdate() {
-      this.animationRef.start();
+      animationStart,
+      animationEnd,
+      animationRepeat,
+      animationCancel,
+      actionsDidUpdate,
     }
   },
-};
+});
 </script>
 ```
 
   > 特别说明，对 actions 替换后会重新创建动画，需手动启动新动画。有两种处理方式：
   > 
-  > * 替换 actions => 延迟一定时间（如setTimeout）后 或者在 `actionsDidUpdate` 勾子内 `(2.14.0 版本后支持)`，调用 `this.[animation ref].start()`（推荐）
+  > * 替换 actions => 延迟一定时间（如setTimeout）后 或者在 `actionsDidUpdate` 勾子内 `(2.14.0 版本后支持)`，调用 `animationRef.value.start()`（推荐）
   > * 设置 `playing = false` =>  替换 actions  => 延迟一定时间（如setTimeout）后 或者在 `actionsDidUpdate` 勾子内 `(2.14.0 版本后支持)`，设置 `playing = true`
 
-  > `2.6.0` 及以上版本支持 `backgroundColor` 背景色渐变动画，参考 [渐变色动画DEMO](https://github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/native-demos/animations/color-change.vue)
+  > `2.6.0` 及以上版本支持 `backgroundColor` 背景色渐变动画，参考 [渐变色动画DEMO](https://github.com/Tencent/Hippy/blob/master/examples/hippy-vue-next-demo/src/components/native-demo/animations/color-change.vue)
   > 
   > * 设置 `actions` 对 `backgroundColor` 进行修饰
   > * 设置 `valueType` 为 `color`
@@ -150,7 +169,7 @@ export default {
 
 # dialog
 
-[[范例：demo-dialog.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/native-demos/demo-dialog.vue)
+[[范例：demo-dialog.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-next-demo/src/components/native-demo/demo-dialog.vue)
 
 用于模态弹窗，默认透明背景色，需要加一个带背景色的 `<div>` 填充。
 
@@ -176,7 +195,7 @@ export default {
 
 # swiper
 
-[[范例：demo-swiper.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/native-demos/demo-swiper.vue)
+[[范例：demo-swiper.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-next-demo/src/components/native-demo/demo-swiper.vue)
 
 支持翻页的容器，它的每一个子容器组件会被视作一个单独的页面，对应终端 `ViewPager`组件， 里面只能包含 `<swiper-slide>` 组件。
 
@@ -208,7 +227,7 @@ export default {
 
 # swiper-slide
 
-[[范例：demo-swiper.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/native-demos/demo-swiper.vue)
+[[范例：demo-swiper.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-next-demo/src/components/native-demo/demo-swiper.vue)
 
 翻页子容器组件容器。
 
@@ -216,7 +235,7 @@ export default {
 
 # pull-header
 
-[[范例：demo-pull-header.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/native-demos/demo-pull-header-footer.vue)
+[[范例：demo-pull-header.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-next-demo/src/components/native-demo/demo-pull-header-footer.vue)
 
 下拉刷新组件，嵌套在 `ul` 中作为第一个子元素使用
 
@@ -242,7 +261,7 @@ export default {
 
 # pull-footer
 
-[[范例：demo-pull-footer.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/native-demos/demo-pull-header-footer.vue)
+[[范例：demo-pull-footer.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-next-demo/src/components/native-demo/demo-pull-header-footer.vue)
 
 上拉刷新组件，嵌套在 `ul` 中作为最后一个子元素使用
 
@@ -266,7 +285,7 @@ export default {
 
 > 最低支持版本 2.9.0
 
-[[范例：demo-waterfall]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/native-demos/demo-waterfall.vue)
+[[范例：demo-waterfall]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-next-demo/src/components/native-demo/demo-waterfall.vue)
 
 瀑布流组件，子元素必须是 `waterfall-item` ，瀑布流组件下拉刷新需在最外层用`ul-refresh-wrapper`， 可在`waterfall` 内用 `pull-footer` 展示上拉加载文案。
 
@@ -318,4 +337,4 @@ export default {
 | 参数                  | 描述                                                         | 类型                                                        | 支持平台 |
 | --------------------- | ------------------------------------------------------------ | ----------------------------------------------------------- | -------- |
 | type            | 指定一个函数，在其中返回对应条目的类型（返回Number类型的自然数，默认是0），List 将对同类型条目进行复用，所以合理的类型拆分，可以很好地提升 List 性能。 | `number`              | `Android、iOS、Voltron`    |
-| key             | 指定一个函数，在其中返回对应条目的 Key 值，详见 [Vue 官网](//vuejs.org/v2/guide/list.html) | `string`                                    | `Android、iOS、Voltron`    |
+| key             | 指定一个函数，在其中返回对应条目的 Key 值，详见 [Vue 官网](//cn.vuejs.org/guide/essentials/list.html) | `string`                                    | `Android、iOS、Voltron`    |
diff --git a/docs/api/hippy-vue-next/introduction.md b/docs/api/hippy-vue-next/introduction.md
index b4d3e1dfd84..eb87c871d61 100644
--- a/docs/api/hippy-vue-next/introduction.md
+++ b/docs/api/hippy-vue-next/introduction.md
@@ -1,39 +1,231 @@
 
-# hippy-vue 介绍
+# hippy-vue-next 介绍
 
-hippy-vue 基于官方 Vue 2.x 源代码，通过改写 [node-ops](//github.com/Tencent/Hippy/blob/master/packages/hippy-vue/src/runtime/node-ops.js) 外挂实现自定义渲染层，但不仅仅是个到终端的渲染层，还同时实现前端组件到终端的映射、CSS 语法解析。和其它跨端框架不同，它尽力将 Web 端的开发体验带到终端上来，同时保持了对 Web 生态的兼容。
+@hippy/vue-next 基于 @hippy/vue 的已有逻辑。通过 Vue3.x 提供的 [createRenderer()](//github.com/vuejs/vue-next/blob/v3.0.0-alpha.0/packages/runtime-core/src/renderer.ts#L154)来实现自定义渲染相关逻辑。相比@hippy/vue，@hippy/vue-next有如下几点优势：
+
+**性能更好：**得益于Vue3.x的性能提升，使用@hippy/vue-next在性能方便相比@hippy/vue有不小的提升
+
+**实现优雅：**无需侵入 Vue 代码直接通过外部库的方式引用 Vue，因此可以及时跟随 Vue 生态，享受 Vue 相关生态带来的好处
+
+**使用方便：**在实现上与 @hippy/vue 基本一致，用户@hippy/vue的相关代码只需要做不大的改动即可升级
+
+**开发效率更高：** @hippy/vue-next 全部代码采用 typescript 进行编写，可以拥有更好的程序健壮性和类型提示，并且 @hippy/vue-next 在整体架构上也进行了一定程度的优化。
 
 ---
 
 # 架构图
 
-<img src="assets/img/hippy-vue.png" alt="hippy-vue 架构图" width="80%"/>
+<img src="assets/img/hippy-vue-next-arch-cn.png" alt="hippy-vue-next 架构图" width="80%"/>
 <br />
 <br />
 
 # 初始化
 
 ```javascript
-import Vue from '@hippy/vue';
-import App from './app.vue';
-const app = new Vue({
-  // 终端指定的 App 名称
+// app.ts
+import { defineComponent, ref } from 'vue';
+import { type HippyApp, createApp } from '@hippy/vue-next';
+
+// 创建 Hippy App 实例，需要注意 Vue3.x 使用 Typescript，因此需要使用 defineComponent 将组件对象进行包裹
+const app: HippyApp = createApp(defineComponent({
+  setup() {
+    const counter = ref(0);
+    return {
+      counter,
+    }
+  }
+}), {
+  // Hippy App Name 必传，示例项目可以使用 Demo
+  appName: 'Demo',
+});
+
+// 启动 Hippy App
+app.$start().then(({ superProps, rootViewId }) => {
+  // superProps 是 Native 传入的初始化参数，如果需要做路由预处理等操作，则可以让 Native 将对应参数传入
+  // rootViewId 是 Native 当前 Hippy 实例所挂载的 Native 的根节点的 id
+  // mount app，完成渲染上屏 
+  app.mount('#mount');
+})
+```
+
+如果要使用 Vue-Router，则需要使用另外的初始化逻辑
+
+```javascript
+// Vue + Vue Router
+
+// app.vue
+<template>
+  <div><span>{{ msg }}</span></div>
+  <router-view />
+</template>
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+
+export default defineComponent({
+  setup() {
+    const msg: string = 'This is the Root Page';
+    return {
+      msg,
+    };
+  },
+});
+</script>
+
+// index.vue
+<template>
+  <div><span>{{ msg }}</span></div>
+</template>
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+
+export default defineComponent({
+  setup() {
+    const msg: string = 'This is the Index Page';
+    return {
+      msg,
+    };
+  },
+});
+</script>
+
+// app.ts
+import { defineComponent, ref } from 'vue';
+import { type HippyApp, createApp } from '@hippy/vue-next';
+import { createHippyRouter } from '@hippy/vue-router-next-history';
+import { type Router } from 'vue-router';
+import App from 'app.vue';
+
+// 创建 Hippy App 实例，需要注意 Vue3.x 使用 Typescript，因此需要使用 defineComponent 将组件对象进行包裹
+const app: HippyApp = createApp(App, {
+  // Hippy App Name，必传，示例项目可以使用 Demo
   appName: 'Demo',
-  rootView: '#root',
-  // 渲染入口
-  render: h => h(App),
 });
 
-/**
-  * $start 是 Hippy 启动完以后触发的回调
-  * @param {Function} callback - 引擎加载成功后回调函数
-  *  @param {Object} instance - 业务vue实例对象
-  *  @param {Object} initialProps - 终端给前端的初始化参数，终端可以将一些启动需要的自定义属性放到入口文件里
-  */
-app.$start((instance, initialProps) => {
-  console.log('instance', instance, 'initialProps', initialProps);
+// 路由列表
+const routes = [
+  {
+    path: '/',
+    component: Index,
+  },
+];
+
+// 创建路由对象
+const router: Router = createHippyRouter({
+  routes,
 });
 
-// 如果需要在首个 View 渲染时就获取到 initialProps，可以通过直接读取 app.$options.$superProps 
+// 使用路由
+app.use(router);
+
+// 启动 Hippy App
+app.$start().then(({ superProps, rootViewId }) => {
+  // superProps 是 Native 传入的初始化参数，如果需要做路由预处理等操作，则可以让 Native 将对应参数传入
+  // rootViewId 是 Native 当前 Hippy 实例所挂载的 Native 的跟节点的 id
+
+  // 因为现在使用的是vue-router的memory history，因此需要手动推送初始位置，否则router将无法ready
+  // 浏览器上则是由vue-router根据location.href去匹配，默认推送根路径'/'，如果想要实现类似浏览器中默认跳转到指定页面，可以让终端同学将初始化的 path
+  // 从 superProps 中传入，然后再通过 path 的值去进行 router.push({ path: 'other path' }) 等操作
+  router.push('/');
+  
+  // mount app，完成渲染上屏 
+  app.mount('#mount');
+})
+```
+
+> @hippy/vue-router-next-history 对 vue-router 的 history 模式做了处理，为 Android 加上了触发物理返回键时优先回退历史记录的逻辑
+
+如果不需要这个逻辑，可以直接使用原生 vue-router 来实现路由：
+
+```javascript
+import { createRouter, createMemoryHistory, type Router } from 'vue-router';
+
+// 路由列表
+const routes = [
+  {
+    path: '/',
+    component: Index,
+  },
+]; 
 
+const router: Router = createRouter({
+  history: createMemoryHistory(),
+  routes,
+});
 ```
+
+# 注意事项 
+
+目前 `@hippy/vue-next` 与 `@hippy/vue` 功能上基本对齐，不过在 API 方面与 @hippy/vue 有一些区别，统一在这里说明：
+
+- v-model 指令
+
+  因为 Vue3.x 中内置指令的实现采用的是编译时插入代码的方式，目前 v-model 指令暂不支持，这里我们可以先用如下方法来实现对应功能
+
+  ```javascript
+  // 具体的可以参考 demo 中的 demo-input.vue 中的示例
+  <template>
+    <input type="text" ref="inputRef" :value="textValue" @change="textValue = $event.value" />
+    <div>
+      <span>Input Value：{{ textValue }}</span>
+    </div>
+  </template>
+  <script lang="ts">
+  import { defineComponent, ref } from '@vue/runtime-core';
+  
+  export default defineComponent({
+    setup() {
+      const inputRef = ref(null);
+      const textValue = ref('This is default value.');
+      return {
+        inputRef,
+        textValue,
+      };
+    },
+  }); 
+  </script>
+  ```
+
+  v-model指令待我们后续开发支持
+
+- Vue3.x 变量 Proxy 问题
+
+  因为 3.x 的响应式是通过 Proxy 代理对象来实现的，所以我们得到的对象其实是 Proxy 的实例而非原始对象，因此调用终端接口时需要注意，终端并不认识 Proxy 对象，需要使用 Vue 提供的 [`toRaw`](https://cn.vuejs.org/api/reactivity-advanced.html#toraw) 方法来拿到原始的对象并传递给终端接口。
+
+- Native 接口和自定义组件的类型提示
+
+  @hippy/vue-next 提供了 Native 模块接口的 Typescript 类型提示，如果有业务自定义的 Native 接口，也可以采用类似的方式进行扩展
+
+    ```javascript
+    declare module '@hippy/vue-next' {
+      export interface NativeInterfaceMap {
+        // 用户自定义的 Native 接口，接下来你可以在调用 Native.callNative，Native.callNativeWithPromise 时拥有类型提示了
+      }
+    }
+    ```
+
+  @hippy/vue-next 也参考 `lib.dom.d.ts` 的事件声明提供了事件类型，具体可以参考 hippy-event.ts 文件。如果需要在内置的事件上进行扩展，可以采用类似方式
+
+    ```javascript
+      declare module '@hippy/vue-next' {
+        export interface HippyEvent {
+          testProp: number;
+        }
+      }
+    ```
+
+  在使用 `registerElement` 去注册组件的时候，利用了 typescript 的 `type narrowing`，在 switch case 中提供了准确的类型提示。如果在业务注册自定义组件的时候也需要类型提示，可以采用如下方式:
+
+    ```javascript
+      export interface HippyGlobalEventHandlersEventMap {
+        // extend new event name and related event interface
+        onTest: CustomEvent;
+        // extend existing event interface
+        onAnotherTest: HippyEvent;
+      }
+    ```
+
+  更多信息可以参考 demo 里的 [extend.ts](https://github.com/Tencent/Hippy/blob/master/examples/hippy-vue-next-demo/src/extend.ts).
+
+- dialog 差异
+
+  `<dialog>` 组件的第一个子元素不能设置  `{ position: absolute }` 样式，如果想将 `<dialog>` 内容铺满全屏，可以给第一个子元素设置 `{ flex: 1 }` 样式或者显式设置 width 和 height 数值。这与 Hippy3.0 的逻辑保持一致。
diff --git a/docs/api/hippy-vue-next/native-event.md b/docs/api/hippy-vue-next/native-event.md
index ce5a637f129..a6512bf7977 100644
--- a/docs/api/hippy-vue-next/native-event.md
+++ b/docs/api/hippy-vue-next/native-event.md
@@ -6,7 +6,7 @@ Hippy 提供了两种方式来管理全局事件:
 
 + `Hippy.on`、`Hippy.off`、`Hippy.emit` 是框架无关的全局事件 EventBus，主要用来监听如 `dealloc`、`destroyInstance` 等特殊 C++ 底层事件，也可以手动定制 JS 内的全局事件。
 
-+ `app.$on`、`app.$off`、`app.$emit` 是 Vue 定制的 EventBus，除了可以手动定制 JS 内的全局事件外，所有全局 `NativeEvent` 都由其来分发，如 `rotate` 事件等。
++ `EventBus.$on`、`EventBus.$off`、`EventBus.$emit` 是 @hippy/vue-next 定制的 EventBus，除了可以手动定制 JS 内的全局事件外，所有全局 `NativeEvent` 都由其来分发，如 `rotate` 事件等。
 
 ---
 
@@ -15,30 +15,31 @@ Hippy 提供了两种方式来管理全局事件:
 这里监听 rotate 的事件，里面有回调参数 result。
 
 ```js
-// 将入口文件中 setApp() 时保存的 Vue 实例取出来。
-const app = getApp();
+import { defineComponent } from 'vue';
+import { EventBus } from '@hippy/vue-next'
 
-export default {
+export default defineComponent({
   method: {
     listener(rsp) {
       console.log(rsp.result);
     }
   },
   mounted() {
-    // 通过 app 监听 rotate 事件，并通过 this.listener 在事件发生时触发回调。
-    app.$on('rotate', this.listener);
+    // 通过 EventBus 监听 rotate 事件，并通过 this.listener 在事件发生时触发回调。
+    EventBus.$on('rotate', this.listener);
   }
-}
+})
 
 ```
 
 # 事件触发
 
-如果需要手动发送事件，可以通过 `app.$emit` 触发。
+如果需要手动发送事件，可以通过 `EventBus.$emit` 触发。
 
 ```js
-const app = getApp();
-app.$emit('rotate', { width: 100, height: 100 });
+import { EventBus } from '@hippy/vue-next'
+
+EventBus.$emit('rotate', { width: 100, height: 100 });
 ```
 
 # 事件卸载
@@ -46,8 +47,9 @@ app.$emit('rotate', { width: 100, height: 100 });
 如果不需要使用的时候记得调用一下移除监听的方法，一般放在组件的卸载生命周期中执行。
 
 ```js
-const app = getApp();
-app.$off('rotate', this.listener);
+import { EventBus } from '@hippy/vue-next'
+
+EventBus.$off('rotate', this.listener);
 ```
 
 # JS 引擎销毁事件
@@ -56,7 +58,7 @@ app.$off('rotate', this.listener);
 
 当 hippy js 引擎被销毁前会触发该事件，能够保证回调函数里的最后一句 js 代码被执行到，hippy 业务可以通过监听 `dealloc` 事件做一些离开时的操作，但回调函数不能使用 `async`
 
-```jsx
+```js
 Hippy.on('dealloc', () => {
     // do something
 });
@@ -68,7 +70,7 @@ Hippy.on('dealloc', () => {
 
 当 RootView 被卸载时调用该事件，与 `dealloc` 不同的是该事件早于 `dealloc` 触发，但不会阻塞 JS 线程。
 
-```jsx
+```js
 Hippy.on('destroyInstance', () => {
   // do something
 });
@@ -80,8 +82,10 @@ Hippy.on('destroyInstance', () => {
 
 当容器大小改变时，如屏幕旋转、折叠屏切换等，会触发该事件
 
-```jsx
-app.$on('onSizeChanged', ({rootViewId, oldWidth, oldHeight, width, height}) => {
+```js
+import { EventBus } from '@hippy/vue-next'
+
+EventBus.$on('onSizeChanged', ({rootViewId, oldWidth, oldHeight, width, height}) => {
     // rootViewId: root view id; oldWidth: 旧的宽度；oldHeight: 旧的高度；width: 新的宽度; height: 新的高度;
     console.log('size', rootViewId, oldWidth, oldHeight, width, height);
 });
diff --git a/docs/api/hippy-vue-next/router.md b/docs/api/hippy-vue-next/router.md
index 76ab29a9165..12ba0097158 100644
--- a/docs/api/hippy-vue-next/router.md
+++ b/docs/api/hippy-vue-next/router.md
@@ -1,7 +1,9 @@
 # 路由
 
-vue-router 通过小幅度修改官方路由，实现了 [@hippy/vue-router](//www.npmjs.com/package/@hippy/vue-router)，提供一样的接口。
+@hippy/vue-next 中不再需要对 vue-router 做侵入修改，直接使用官方 vue-router npm 包即可
 
 文档可以直接进行参考：[vue-router 官方网站](//router.vuejs.org/) 。
 
 但不支持页面切换时的动画效果，因为 `<transition>` 组件尚未实现。
+
+>如果要为 Android 加上触发物理返回键时优先回退历史记录的逻辑，可以引入 @hippy/vue-router-next-history，该 package 对 vue-router 的 history 模式做了处理，具体使用可以参考[说明](api/hippy-vue-next/introduction?id=初始化)
diff --git a/docs/api/hippy-vue-next/style.md b/docs/api/hippy-vue-next/style.md
index c16ecf1ca14..5895a65c298 100644
--- a/docs/api/hippy-vue-next/style.md
+++ b/docs/api/hippy-vue-next/style.md
@@ -1,22 +1,25 @@
 # 样式
 
-标准 Hippy 中长度单位是不允许带有单位，不过为了和浏览器保持兼容，hippy-vue 采取了 1px = 1pt 的方案进行换算，把 CSS 单位中的 px 直接去掉变成了 Hippy 中不带单位的数字。
+标准 Hippy 中长度单位是不允许带有单位，不过为了和浏览器保持兼容，@hippy/vue-next 与 @hippy/vue 一致，采取了 1px = 1pt 的方案进行换算，把 CSS 单位中的 px 直接去掉变成了 Hippy 中不带单位的数字。
 
-HippyVue 提供了 `beforeLoadStyle` 的 Vue options 勾子函数，供开发者做定制化修改 CSS 样式，如
+@hippy/vue-next 提供了 `beforeLoadStyle` 的 options 勾子函数，供开发者做定制化修改 CSS 样式，如
 
 ```js
-    new Vue({
-      // ...
-      beforeLoadStyle(decl) {
-         let { type, property, value } = decl;
-         console.log('property|value', property, value); // => height, 1rem
-          // 比如可以对 rem 单位进行处理
-         if(typeof value === 'string' && /rem$/.test(value)) {
-             // ...value = xxx
-         } 
-         return { ...decl, value}
+// 创建 hippy-app 实例
+const app: HippyApp = createApp(App, {
+  // 样式相关钩子
+  styleOptions: {
+    beforeLoadStyle(decl) {
+      let { type, property, value } = decl;
+      console.log('property|value', property, value); // => height, 1rem
+      // 比如可以对 rem 单位进行处理
+      if(typeof value === 'string' && /rem$/.test(value)) {
+        // ...value = xxx
       }
-    });
+      return { ...decl, value}
+    }
+  },
+});
 ```
 
 # CSS 选择器
@@ -31,8 +34,7 @@ HippyVue 提供了 `beforeLoadStyle` 的 Vue options 勾子函数，供开发者
 
 如何开启？
 
-1. 升级 `@hippy/vue` 和 `@hippy/vue-css-loader` 到 `2.15.1+` 版本
-2. Vue2.0 设置全局开关 `Vue.config.scoped = true;`（Vue2.0 默认 `scoped` 和 `Attribute` 选择器能力关闭，Vue3.0 默认开启无需设置开关）
+1. 升级 `@hippy/vue-next` 和 `@hippy/vue-css-loader` 到 `2.15.1+` 版本
 
 
 
diff --git a/docs/api/hippy-vue-next/vue-native.md b/docs/api/hippy-vue-next/vue-native.md
index bbeb81c073a..414c06949cb 100644
--- a/docs/api/hippy-vue-next/vue-native.md
+++ b/docs/api/hippy-vue-next/vue-native.md
@@ -2,9 +2,9 @@
 
 # 模块
 
-hippy-vue 通过在 Vue 上绑定了一个 `Native` 属性，实现获取终端设备信息、以及调用终端模块。也可以用来监测是否在 Hippy 环境下运行。
+@hippy/vue-next package 导出了 `Native` 属性，实现获取终端设备信息、以及调用终端模块。也可以用来监测是否在 Hippy 环境下运行。
 
-> 对应 Demo: [demo-vue-native.vue](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/native-demos/demo-vue-native.vue)
+> 对应 Demo: [demo-vue-native.vue](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-next-demo/src/components/native-demo/demo-vue-native.vue)
 
 ---
 
@@ -14,12 +14,12 @@ hippy-vue 通过在 Vue 上绑定了一个 `Native` 属性，实现获取终端
 
 ## version
 
-获取 hippy-vue 的版本
+获取 @hippy/vue-next 的版本
 
 * 示例
 
 ```javascript
-console.log(Vue.Native.version); // => 2.0.0
+console.log(Native.version); // => 3.0.0
 ```
 
 ## Device
@@ -45,7 +45,7 @@ Hippy 终端 SDK 版本。
 * 示例
 
 ```javascript
-console.log(Vue.Native.Platform); // => android
+console.log(Native.Platform); // => android
 ```
 
 ## Dimensions
@@ -55,7 +55,7 @@ console.log(Vue.Native.Platform); // => android
 * 示例
 
 ```javascript
-const { window, screen } = Vue.Native.Dimensions;
+const { window, screen } = Native.Dimensions;
 console.log(`屏幕尺寸：${screen.height}x${screen.width}`); // => 640x480
 console.log(`带状态栏的窗口尺寸：${window.height}x${window.width}`); // => 640x460
 ```
@@ -67,7 +67,7 @@ console.log(`带状态栏的窗口尺寸：${window.height}x${window.width}`); /
 * 示例
 
 ```javascript
-console.log(Vue.Native.PixelRatio); // => 3
+console.log(Native.PixelRatio); // => 3
 ```
 
 ## isIPhoneX
@@ -102,8 +102,8 @@ AsyncStorage 是一个简单的、异步的、持久化的 Key-Value 存储系
 * 示例：
 
 ``` js
-Vue.Native.AsyncStorage.setItem('itemKey', 'itemValue');
-Vue.Native.AsyncStorage.getItem('itemKey');
+Native.AsyncStorage.setItem('itemKey', 'itemValue');
+Native.AsyncStorage.getItem('itemKey');
 ```
 
 ## 方法
@@ -153,7 +153,7 @@ Vue.Native.AsyncStorage.getItem('itemKey');
 
 # BackAndroid
 
-[[BackAndroid 范例]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/main-native.js)
+[[BackAndroid 范例]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-next-demo/src/main-native.ts)
 
 可以监听 Android 实体键的回退，在退出前做操作或拦截实体键的回退。
 
@@ -285,7 +285,7 @@ Hippy 中通过 fetch 服务返回的 `set-cookie` Header 会自动将 Cookie 
 
 ```js
 this.demon1Point = this.$refs['demo-1-point'];
-console.log(Vue.Native.getElemCss(this.demon1Point)) // => { height: 80, left: 0, position: "absolute" }
+console.log(Native.getElemCss(this.demon1Point)) // => { height: 80, left: 0, position: "absolute" }
 ```
 
 ---
@@ -396,5 +396,5 @@ console.log(Vue.Native.getElemCss(this.demon1Point)) // => { height: 80, left: 0
 * 示例：
 
 ``` js
-const int32Color = Vue.Native.parseColor('#40b883') // int32Color: 4282431619
+const int32Color = Native.parseColor('#40b883') // int32Color: 4282431619
 ```
diff --git a/docs/api/hippy-vue-next/vue3.md b/docs/api/hippy-vue-next/vue3.md
deleted file mode 100644
index cc199bb8215..00000000000
--- a/docs/api/hippy-vue-next/vue3.md
+++ /dev/null
@@ -1,310 +0,0 @@
-# Hippy-Vue-Next (基于Vue3)
-
-<br />
-
-# 介绍
-
-@hippy/vue-next 基于 @hippy/vue 的已有逻辑。通过 Vue3.x 提供的 [createRenderer()](//github.com/vuejs/vue-next/blob/v3.0.0-alpha.0/packages/runtime-core/src/renderer.ts#L154)，无需侵入 Vue 代码直接通过外部库的方式引用 Vue，
-可以及时跟随 Vue 生态，在实现原理上与 @hippy/vue 基本一致。
-
-@hippy/vue-next 全部代码采用 typescript 进行编写，可以拥有更好的程序健壮性和类型提示，并且 @hippy/vue-next 在整体架构上也进行了一定程度的优化。
-
-# 架构图
-
-<img src="assets/img/hippy-vue-next-arch-cn.png" alt="hippy-vue-next 架构图" width="80%"/>
-<br />
-<br />
-
-# 如何使用
-
-@hippy/vue-next 支持的能力与 @hippy/vue 基本一致。因此关于 Hippy-Vue 的组件、模块、样式等就不做额外声明了，可以直接参考 [Hippy-Vue](api/hippy-vue/introduction)
-中的相关内容，本文档仅对差异部分进行说明：
-
-## 初始化
-
-```javascript
-// app.ts
-import { defineComponent, ref } from 'vue';
-import { type HippyApp, createApp } from '@hippy/vue-next';
-
-// 创建 Hippy App 实例，需要注意 Vue3.x 使用 Typescript，因此需要使用 defineComponent 将组件对象进行包裹
-const app: HippyApp = createApp(defineComponent({
-  setup() {
-    const counter = ref(0);
-    return {
-      counter,
-    }
-  }
-}), {
-  // Hippy App Name 必传，示例项目可以使用 Demo
-  appName: 'Demo',
-});
-
-// 启动 Hippy App
-app.$start().then(({ superProps, rootViewId }) => {
-  // superProps 是 Native 传入的初始化参数，如果需要做路由预处理等操作，则可以让 Native 将对应参数传入
-  // rootViewId 是 Native 当前 Hippy 实例所挂载的 Native 的根节点的 id
-  // mount app，完成渲染上屏 
-  app.mount('#mount');
-})
-```
-
-如果要使用 Vue-Router，则需要使用另外的初始化逻辑
-
-```javascript
-// Vue + Vue Router
-
-// app.vue
-<template>
-  <div><span>{{ msg }}</span></div>
-  <router-view />
-</template>
-<script lang="ts">
-import { defineComponent, ref } from 'vue';
-
-export default defineComponent({
-  setup() {
-    const msg: string = 'This is the Root Page';
-    return {
-      msg,
-    };
-  },
-});
-</script>
-
-// index.vue
-<template>
-  <div><span>{{ msg }}</span></div>
-</template>
-<script lang="ts">
-import { defineComponent, ref } from 'vue';
-
-export default defineComponent({
-  setup() {
-    const msg: string = 'This is the Index Page';
-    return {
-      msg,
-    };
-  },
-});
-</script>
-
-// app.ts
-import { defineComponent, ref } from 'vue';
-import { type HippyApp, createApp } from '@hippy/vue-next';
-import { createHippyRouter } from '@hippy/vue-router-next-history';
-import { type Router } from 'vue-router';
-import App from 'app.vue';
-
-// 创建 Hippy App 实例，需要注意 Vue3.x 使用 Typescript，因此需要使用 defineComponent 将组件对象进行包裹
-const app: HippyApp = createApp(App, {
-  // Hippy App Name，必传，示例项目可以使用 Demo
-  appName: 'Demo',
-});
-
-// 路由列表
-const routes = [
-  {
-    path: '/',
-    component: Index,
-  },
-];
-
-// 创建路由对象
-const router: Router = createHippyRouter({
-  routes,
-});
-
-// 使用路由
-app.use(router);
-
-// 启动 Hippy App
-app.$start().then(({ superProps, rootViewId }) => {
-  // superProps 是 Native 传入的初始化参数，如果需要做路由预处理等操作，则可以让 Native 将对应参数传入
-  // rootViewId 是 Native 当前 Hippy 实例所挂载的 Native 的跟节点的 id
-
-  // 因为现在使用的是vue-router的memory history，因此需要手动推送初始位置，否则router将无法ready
-  // 浏览器上则是由vue-router根据location.href去匹配，默认推送根路径'/'，如果想要实现类似浏览器中默认跳转到指定页面，可以让终端同学将初始化的 path
-  // 从 superProps 中传入，然后再通过 path 的值去进行 router.push({ path: 'other path' }) 等操作
-  router.push('/');
-  
-  // mount app，完成渲染上屏 
-  app.mount('#mount');
-})
-```
-
-> @hippy/vue-router-next-history 对 vue-router 的 history 模式做了处理，为 Android 加上了触发物理返回键时优先回退历史记录的逻辑
-
-如果不需要这个逻辑，可以直接使用原生 vue-router 来实现路由：
-
-```javascript
-import { createRouter, createMemoryHistory, type Router } from 'vue-router';
-
-// 路由列表
-const routes = [
-  {
-    path: '/',
-    component: Index,
-  },
-]; 
-
-const router: Router = createRouter({
-  history: createMemoryHistory(),
-  routes,
-});
-```
-
-# 其他差异说明
-
-目前 `@hippy/vue-next` 与 `@hippy/vue` 功能上基本对齐，不过在 API 方面与 @hippy/vue 有一些区别，以及还有一些问题还没有解决，这里做些说明：
-
-- Vue.Native
-
-  在 @hippy/vue 中，Native 提供的能力是通过挂载在全局 Vue 对象的 Native 属性来提供的，在 Vue3.x 中这种实现方式不再可行，因此现在 Native 属性需通过 @hippy/vue-next 导出来使用
-
-  ```javascript
-  import { Native } from '@hippy/vue-next';
-  
-  console.log('do somethig', Native.xxx)
-  ```
-
-- registerElement
-
-  @hippy/vue 中 `registerElement` 方法是挂在全局 Vue 中，与 Native 类似，@hippy/vue-next 中 `registerElement` 方法也是单独提供了导出
-
-  ```javascript
-    import { registerElement } from '@hippy/vue-next';
-  ```
-
-- 全局事件
-
-  在 @hippy/vue 中，全局事件是挂载在 Vue 上的，在 @hippy/vue-next 中，提供了单独的 `EventBus` 事件总线来处理该问题
-
-  ```javascript
-  import { EventBus } from '@hippy/vue-next';
-  
-  // 监听容器大小改变事件
-  EventBus.$on('onSizeChanged', ({ oldWidth, oldHeight, width, height }) => {
-    // oldWidth: 旧的宽度；oldHeight: 旧的高度；width: 新的宽度; height: 新的高度
-    console.log('size', oldWidth, oldHeight, width, height);
-  });
-  // 触发全局事件
-  EventBus.$emit('eventName', {
-    ...args, // 事件参数
-  });
-  ```
-
-- v-model 指令
-
-  因为 Vue3.x 中内置指令的实现采用的是编译时插入代码的方式，目前 v-model 指令还没有找到很好的办法去处理，这里可以先使用临时解决办法实现对应功能
-
-  ```javascript
-  // 具体的可以参考 demo 中的 demo-input.vue 中的示例
-  <template>
-    <input type="text" ref="inputRef" :value="textValue" @change="textValue = $event.value" />
-    <div>
-      <span>Input Value：{{ textValue }}</span>
-    </div>
-  </template>
-  <script lang="ts">
-  import { defineComponent, ref } from '@vue/runtime-core';
-  
-  export default defineComponent({
-    setup() {
-      const inputRef = ref(null);
-      const textValue = ref('This is default value.');
-      return {
-        inputRef,
-        textValue,
-      };
-    },
-  }); 
-  </script>
-  ```
-
-- Keep-Alive HMR 问题
-
-  在示例代码中，我们的路由组件是包裹在 Keep-Alive 组件内的，但是目前使用 Keep-Alive 包裹的路由组件无法实现开发时热更新，需要刷新整个实例才能完成刷新。
-  如果是不包裹在 Keep-Alive 中则没有这个问题。目前官方[该问题](https://github.com/vuejs/core/pull/5165)也尚未解决，等待官方解决后升级 Vue 即可解决该问题。
-
-  !> vue@3.2.45+ 已经修复了该[问题](https://github.com/vuejs/core/pull/7049)，使用3.2.45及以上版本进行开发时，keep-alive内的组件也可以热更新了
-
-- Vue3.x 变量 Proxy 问题
-
-  因为 3.x 的响应式是通过 Proxy 代理对象来实现的，所以我们得到的对象其实是 Proxy 的实例而非原始对象，因此调用终端接口时需要注意，终端并不认识 Proxy 对象，需要使用 Vue 提供的 [`toRaw`](https://cn.vuejs.org/api/reactivity-advanced.html#toraw) 方法来拿到原始的对象并传递给终端接口。
-
-- Native 接口和自定义组件的类型提示
-
-    @hippy/vue-next 提供了 Native 模块接口的 Typescript 类型提示，如果有业务自定义的 Native 接口，也可以采用类似的方式进行扩展
-  
-    ```javascript
-    declare module '@hippy/vue-next' {
-      export interface NativeInterfaceMap {
-        // 用户自定义的 Native 接口，接下来你可以在调用 Native.callNative，Native.callNativeWithPromise 时拥有类型提示了
-      }
-    }
-    ```
-
-    @hippy/vue-next 也参考 `lib.dom.d.ts` 的事件声明提供了事件类型，具体可以参考 hippy-event.ts 文件。如果需要在内置的事件上进行扩展，可以采用类似方式
-
-    ```javascript
-      declare module '@hippy/vue-next' {
-        export interface HippyEvent {
-          testProp: number;
-        }
-      }
-    ```
-
-    在使用 `registerElement` 去注册组件的时候，利用了 typescript 的 `type narrowing`，在 switch case 中提供了准确的类型提示。如果在业务注册自定义组件的时候也需要类型提示，可以采用如下方式:
-
-    ```javascript
-      export interface HippyGlobalEventHandlersEventMap {
-        // extend new event name and related event interface
-        onTest: CustomEvent;
-        // extend existing event interface
-        onAnotherTest: HippyEvent;
-      }
-    ```
-
-    更多信息可以参考 demo 里的 [extend.ts](https://github.com/Tencent/Hippy/blob/master/examples/hippy-vue-next-demo/src/extend.ts).
-  
-- whitespace 处理
-
-  Vue2.x Vue-Loader `compilerOptions.whitespace` 默认值为 `preserve`， Vue3.x 默认值为 `condense`（可参考 [Vue3 whitespace说明](https://cn.vuejs.org/api/application.html#app-config-compileroptions-whitespace)）。
-
-  关闭 `trim` 能力的配置方式也有所不同，改在了 `createApp` 的参数中进行设置。
-
-  ```javascript
-    // entry file
-    const app: HippyApp = createApp(App, {
-     // hippy native module name
-     appName: 'Demo',
-     // trimWhitespace default is true
-     trimWhitespace: false,
-    });
-
-    //  webpack script
-    rules: [
-    {
-        test: /\.vue$/,
-        use: [
-        {
-          loader: vueLoader,
-          options: {
-              compilerOptions: {
-                // whitespace handler, default is 'condense'
-                whitespace: 'condense',
-              },
-          },
-        }],
-     },
-    ]
-  ```
-
-- dialog 差异
-
-  `<dialog>` 组件的第一个子元素不能设置  `{ position: absolute }` 样式，如果想将 `<dialog>` 内容铺满全屏，可以给第一个子元素设置 `{ flex: 1 }` 样式或者显式设置 width 和 height 数值。这与 Hippy3.0 的逻辑保持一致。
-
-# 示例
-
-更多使用请参考 [示例项目](https://github.com/Tencent/Hippy/tree/master/examples/hippy-vue-next-demo).
diff --git a/docs/api/hippy-vue/_sidebar.md b/docs/api/hippy-vue/_sidebar.md
index e86b8a51a6a..99b0eb18606 100644
--- a/docs/api/hippy-vue/_sidebar.md
+++ b/docs/api/hippy-vue/_sidebar.md
@@ -8,16 +8,6 @@
   * [手势系统](api/hippy-react/gesture.md)
   * [自定义组件和模块](api/hippy-react/customize.md)
   * [转 Web](api/hippy-react/web.md)
-* hippy-vue-next
-  * [介绍](api/hippy-vue-next/introduction.md)
-  * [核心组件](api/hippy-vue-next/components.md)
-  * [扩展组件](api/hippy-vue-next/external-components.md)
-  * [模块](api/hippy-vue-next/vue-native.md)
-  * [样式](api/hippy-vue-next/style.md)
-  * [事件](api/hippy-vue-next/native-event.md)
-  * [自定义组件和模块](api/hippy-vue-next/customize.md)
-  * [路由](api/hippy-vue-next/router.md)
-  * [转 Web](api/hippy-vue-next/web.md)
 * hippy-vue
   * [介绍](api/hippy-vue/introduction.md)
   * [核心组件](api/hippy-vue/components.md)
@@ -28,6 +18,16 @@
   * [自定义组件和模块](api/hippy-vue/customize.md)
   * [路由](api/hippy-vue/router.md)
   * [转 Web](api/hippy-vue/web.md)
+* hippy-vue-next
+  * [介绍](api/hippy-vue-next/introduction.md)
+  * [核心组件](api/hippy-vue-next/components.md)
+  * [扩展组件](api/hippy-vue-next/external-components.md)
+  * [模块](api/hippy-vue-next/vue-native.md)
+  * [样式](api/hippy-vue-next/style.md)
+  * [事件](api/hippy-vue-next/native-event.md)
+  * [自定义组件和模块](api/hippy-vue-next/customize.md)
+  * [路由](api/hippy-vue-next/router.md)
+  * [转 Web](api/hippy-vue-next/web.md)
 * 样式
   * [布局](api/style/layout.md)
   * [外观](api/style/appearance.md)
diff --git a/docs/api/hippy-vue/customize.md b/docs/api/hippy-vue/customize.md
index a8e04624fcb..01789c48a2c 100644
--- a/docs/api/hippy-vue/customize.md
+++ b/docs/api/hippy-vue/customize.md
@@ -68,7 +68,7 @@ component: {
 
 当你需要处理更加复杂的交互、事件、生命周期的时候，需要通过 `Vue.component` 注册一个单独的组件，registerElement 只能做到很基本的元素名称到组件的映射，和基本的参数映射。
 
-详情参考：//cn.vuejs.org/v2/guide/components-registration.html
+[详情参考](//v2.cn.vuejs.org/v2/guide/components-registration.html)
 
 ## 事件处理
 
diff --git a/docs/api/style/_sidebar.md b/docs/api/style/_sidebar.md
index e86b8a51a6a..56b36686384 100644
--- a/docs/api/style/_sidebar.md
+++ b/docs/api/style/_sidebar.md
@@ -1,4 +1,4 @@
-<!-- docs/hippy-vue/_sidebar.md -->
+<!-- docs/style/_sidebar.md -->
 * hippy-react
   * [介绍](api/hippy-react/introduction.md)
   * [组件](api/hippy-react/components.md)
@@ -8,16 +8,6 @@
   * [手势系统](api/hippy-react/gesture.md)
   * [自定义组件和模块](api/hippy-react/customize.md)
   * [转 Web](api/hippy-react/web.md)
-* hippy-vue-next
-  * [介绍](api/hippy-vue-next/introduction.md)
-  * [核心组件](api/hippy-vue-next/components.md)
-  * [扩展组件](api/hippy-vue-next/external-components.md)
-  * [模块](api/hippy-vue-next/vue-native.md)
-  * [样式](api/hippy-vue-next/style.md)
-  * [事件](api/hippy-vue-next/native-event.md)
-  * [自定义组件和模块](api/hippy-vue-next/customize.md)
-  * [路由](api/hippy-vue-next/router.md)
-  * [转 Web](api/hippy-vue-next/web.md)
 * hippy-vue
   * [介绍](api/hippy-vue/introduction.md)
   * [核心组件](api/hippy-vue/components.md)
@@ -28,6 +18,16 @@
   * [自定义组件和模块](api/hippy-vue/customize.md)
   * [路由](api/hippy-vue/router.md)
   * [转 Web](api/hippy-vue/web.md)
+* hippy-vue-next
+  * [介绍](api/hippy-vue-next/introduction.md)
+  * [核心组件](api/hippy-vue-next/components.md)
+  * [扩展组件](api/hippy-vue-next/external-components.md)
+  * [模块](api/hippy-vue-next/vue-native.md)
+  * [样式](api/hippy-vue-next/style.md)
+  * [事件](api/hippy-vue-next/native-event.md)
+  * [自定义组件和模块](api/hippy-vue-next/customize.md)
+  * [路由](api/hippy-vue-next/router.md)
+  * [转 Web](api/hippy-vue-next/web.md)
 * 样式
   * [布局](api/style/layout.md)
   * [外观](api/style/appearance.md)

From 473870fa50f11d02b8c788ef16d1d34c6a522ab4 Mon Sep 17 00:00:00 2001
From: birdguo <birdguo@tencent.com>
Date: Thu, 29 Jun 2023 15:31:19 +0800
Subject: [PATCH 7/9] fix(vue-next): fix beforeLoadStyle hooks no used

---
 .../hippy-vue-next/src/runtime/element/hippy-element.ts        | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/driver/js/packages/hippy-vue-next/src/runtime/element/hippy-element.ts b/driver/js/packages/hippy-vue-next/src/runtime/element/hippy-element.ts
index 5b92e16d70a..c56decc7d70 100644
--- a/driver/js/packages/hippy-vue-next/src/runtime/element/hippy-element.ts
+++ b/driver/js/packages/hippy-vue-next/src/runtime/element/hippy-element.ts
@@ -39,6 +39,7 @@ import {
   isStyleMatched,
   whitespaceFilter,
   getBeforeRenderToNative,
+  getBeforeLoadStyle,
 } from '../../util';
 import { isRTL } from '../../util/i18n';
 import { EventHandlerType, EventMethod } from '../../util/event';
@@ -260,7 +261,7 @@ export class HippyElement extends HippyNode {
   }
 
   // style preprocessor
-  public beforeLoadStyle: CallbackType = val => val;
+  public beforeLoadStyle: CallbackType = getBeforeLoadStyle;
 
   /**
    * get component info

From 443158bb677db7c4c9caa18b5ba27e11b9b0f94c Mon Sep 17 00:00:00 2001
From: birdguo <birdguo@tencent.com>
Date: Thu, 29 Jun 2023 15:39:12 +0800
Subject: [PATCH 8/9] feat(docs): fix web-renderer link issue

---
 docs/api/hippy-react/web.md    | 2 +-
 docs/api/hippy-vue-next/web.md | 2 +-
 docs/api/hippy-vue/web.md      | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/api/hippy-react/web.md b/docs/api/hippy-react/web.md
index fedd96d76ae..c551f714bda 100644
--- a/docs/api/hippy-react/web.md
+++ b/docs/api/hippy-react/web.md
@@ -67,4 +67,4 @@ hippy-react-web 使用了 [webpack-dev-server](//webpack.js.org/configuration/de
 
 # WebRenderer 方案
 
-Hippy 全新 [`WebRenderer`](web/integration.md) 方案，增加基于公共通信协议的转换层，业务开发者可以使用同一套 Hippy 语法开发的业务代码，映射成 JS 实现的组件和模块，上层无论使用 React，Vue 或者其他第三方框架，都可以实现兼容，可参考。
+Hippy 全新 [`WebRenderer`](architecture/render/web/web-render) 方案，增加基于公共通信协议的转换层，业务开发者可以使用同一套 Hippy 语法开发的业务代码，映射成 JS 实现的组件和模块，上层无论使用 React，Vue 或者其他第三方框架，都可以实现兼容，可参考。
diff --git a/docs/api/hippy-vue-next/web.md b/docs/api/hippy-vue-next/web.md
index 046700833aa..e846e0dcc48 100644
--- a/docs/api/hippy-vue-next/web.md
+++ b/docs/api/hippy-vue-next/web.md
@@ -2,4 +2,4 @@
 
 ## WebRenderer 方案
 
-Hippy 全新 [`WebRenderer`](web/integration.md) 方案，增加基于公共通信协议的转换层，业务开发者可以使用同一套 Hippy 语法开发的业务代码，映射成 JS 实现的组件和模块，上层无论使用 React，Vue 或者其他第三方框架，都可以实现兼容，可参考。
+Hippy 全新 [`WebRenderer`](architecture/render/web/web-render) 方案，增加基于公共通信协议的转换层，业务开发者可以使用同一套 Hippy 语法开发的业务代码，映射成 JS 实现的组件和模块，上层无论使用 React，Vue 或者其他第三方框架，都可以实现兼容，可参考。
diff --git a/docs/api/hippy-vue/web.md b/docs/api/hippy-vue/web.md
index 046700833aa..e846e0dcc48 100644
--- a/docs/api/hippy-vue/web.md
+++ b/docs/api/hippy-vue/web.md
@@ -2,4 +2,4 @@
 
 ## WebRenderer 方案
 
-Hippy 全新 [`WebRenderer`](web/integration.md) 方案，增加基于公共通信协议的转换层，业务开发者可以使用同一套 Hippy 语法开发的业务代码，映射成 JS 实现的组件和模块，上层无论使用 React，Vue 或者其他第三方框架，都可以实现兼容，可参考。
+Hippy 全新 [`WebRenderer`](architecture/render/web/web-render) 方案，增加基于公共通信协议的转换层，业务开发者可以使用同一套 Hippy 语法开发的业务代码，映射成 JS 实现的组件和模块，上层无论使用 React，Vue 或者其他第三方框架，都可以实现兼容，可参考。

From 67f746ede1dc122e6ce9bd65edfc57f6d275cd5a Mon Sep 17 00:00:00 2001
From: birdguo <birdguo@tencent.com>
Date: Thu, 29 Jun 2023 15:45:15 +0800
Subject: [PATCH 9/9] feat(docs): remove fix web-renderer link issue

---
 .../hippy-vue-next/src/runtime/element/hippy-element.ts        | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/driver/js/packages/hippy-vue-next/src/runtime/element/hippy-element.ts b/driver/js/packages/hippy-vue-next/src/runtime/element/hippy-element.ts
index c56decc7d70..5b92e16d70a 100644
--- a/driver/js/packages/hippy-vue-next/src/runtime/element/hippy-element.ts
+++ b/driver/js/packages/hippy-vue-next/src/runtime/element/hippy-element.ts
@@ -39,7 +39,6 @@ import {
   isStyleMatched,
   whitespaceFilter,
   getBeforeRenderToNative,
-  getBeforeLoadStyle,
 } from '../../util';
 import { isRTL } from '../../util/i18n';
 import { EventHandlerType, EventMethod } from '../../util/event';
@@ -261,7 +260,7 @@ export class HippyElement extends HippyNode {
   }
 
   // style preprocessor
-  public beforeLoadStyle: CallbackType = getBeforeLoadStyle;
+  public beforeLoadStyle: CallbackType = val => val;
 
   /**
    * get component info