Vant 3.0 (#7027)

2025-04-05 19:41:42 +08:00 · 2020-10-24 10:17:09 +08:00 · 2020-10-24 10:17:09 +08:00 · ab580f844b
commit ab580f844b
parent c6d10abdf9 bda3c34de4
817 changed files with 31616 additions and 27775 deletions
--- a/.stylelintignore
+++ b/.stylelintignore
@ -0,0 +1,4 @@
+node_modules
+dist
+lib
+*.tsx
--- a/README.md
+++ b/README.md
@ -42,10 +42,10 @@

 ```bash
 # Using npm
-npm i vant -S
+npm i vant@next -S

 # Using yarn
-yarn add vant
+yarn add vant@next
 ```

 > Tips: Please install Vant 3.0 for Vue 3 projects, see [issue#7035](https://github.com/youzan/vant/issues/7035).
@ -53,11 +53,12 @@ yarn add vant
 ## Quickstart

 ```js
-import Vue from 'vue';
+import { createApp } from 'vue';
 import { Button } from 'vant';
 import 'vant/lib/index.css';

-Vue.use(Button);
+const app = createApp();
+app.use(Button);
 ```

 See more in [Quickstart](https://youzan.github.io/vant#/en-US/quickstart).
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@ -45,10 +45,10 @@ Vant 是**有赞前端团队**开源的移动端组件库，于 2016 年开源

 ```bash
 # 通过 npm 安装
-npm i vant -S
+npm i vant@next -S

 # 通过 yarn 安装
-yarn add vant
+yarn add vant@next
 ```

 > Tips: Vue 3 项目请安装 Vant 3.0，参见 [issue#7035](https://github.com/youzan/vant/issues/7035)。
@ -56,11 +56,12 @@ yarn add vant
 ## 快速上手

 ```js
-import Vue from 'vue';
+import { createApp } from 'vue';
 import { Button } from 'vant';
 import 'vant/lib/index.css';

-Vue.use(Button);
+const app = createApp();
+app.use(Button);
 ```

 vant 也支持按需引入、CDN 引入等方式，详细说明见 [快速上手](https://vant-contrib.gitee.io/vant#/zh-CN/quickstart).
--- a/docs/markdown/changelog-v3.zh-CN.md
+++ b/docs/markdown/changelog-v3.zh-CN.md
@ -0,0 +1,270 @@
+# 更新日志
+
+### 提示
+
+当前文档为 Vant 3.x 版本的更新日志，如需查询 Vant 2.0 的更新内容，请访问 [Vant 2.0 更新日志](https://youzan.github.io/vant/#/zh-CN/changelog)。
+
+### 介绍
+
+Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
+
+**发布节奏**
+
+- 修订号：每周发布，包含新特性和问题修复。
+- 次版本号：每隔一至二个月发布，包含新特性和较大的功能更新，向下兼容。
+- 主版本号：发布时间不定，包含不兼容更新。
+
+### [v3.0.0-beta.5](https://github.com/youzan/vant/compare/v2.10.11...v3.0.0-beta.5)
+
+`2020-10-24`
+
+**Bug Fixes**
+
+- Swipe: 修复动态插入轮播时无法滚动的问题 [#7366](https://github.com/youzan/vant/issues/7366)
+- Toast: 修复 forbidClick 属性不生效的问题 [#7396](https://github.com/youzan/vant/issues/7396)
+- Toast: 修复 duration 变化未生效的问题 [#7394](https://github.com/youzan/vant/issues/7394)
+- 包含 `v2.10.11` 版本的所有改动
+
+### [v3.0.0-beta.4](https://github.com/youzan/vant/compare/v2.10.10...v3.0.0-beta.4)
+
+`2020-10-18`
+
+**refactor**
+
+- Layout: 默认使用 flex 布局，移除 type 属性 [f7a120](https://github.com/youzan/vant/commit/f7a1208a18f61eaa9dbec80db1c585f19229cd91)
+
+**style**
+
+- Stepper: 布局方式调整为 inline-block [e9c282](https://github.com/youzan/vant/commit/e9c28212358cd0317442051383b92d23441920c6)
+
+**Bug Fixes**
+
+- ContactList: 修复 select 事件重复触发的问题 [1dd408](https://github.com/youzan/vant/commit/1dd4083102272250637d6397bd98355d87d99bf5)
+- Search: 修复布局错误的问题 [9cd48e](https://github.com/youzan/vant/commit/9cd48e0e333fc6f0a2f71b568b7e5b5ca2138bae)
+- Image: 修复图片加载错误时仍会渲染图片节点的问题 [59fb1d](https://github.com/youzan/vant/commit/59fb1d4dfcdc99773642a63c62e6b08baa3fac30)
+- Pagination: 修复 change 事件触发时机错误的问题 [346035](https://github.com/youzan/vant/commit/3460351ce396bb418408ddbfad462ddac8ef9477)
+- Toast: 修复展示时会锁定滚动的问题 [a622ca](https://github.com/youzan/vant/commit/a622caa649baedac7cfe9614ded88e7ec1cd18e1)
+- 包含 `v2.10.10` 版本的所有改动
+
+### [v3.0.0-beta.3](https://github.com/youzan/vant/compare/v2.10.9...v3.0.0-beta.3)
+
+`2020-10-03`
+
+**breaking changes**
+
+- Checkbox: 在 Cell 内部使用时，现在需要手动添加 `@click.stop` 来阻止事件冒泡 [#7023](https://github.com/youzan/vant/issues/7023)
+
+**Feature**
+
+- 新增 Badge 徽标组件 [#6573](https://github.com/youzan/vant/issues/6573)
+- Tab: 增加滑动切换动画 [#1174](https://github.com/youzan/vant/issues/1174)
+- 包含 `v2.10.9` 版本的所有改动
+
+### [v3.0.0-beta.2](https://github.com/youzan/vant/compare/v3.0.0-beta.1...v3.0.0-beta.2)
+
+`2020-09-28`
+
+**Bug Fixes**
+
+- 修复引入 Vant 时提示 'global is not defined' 的问题 [7007fc](https://github.com/youzan/vant/commit/7007fcf9eaea239f5e680068d59d8e9f8202ec3b)
+
+### [v3.0.0-beta.1](https://github.com/youzan/vant/compare/v2.10.8...v3.0.0-beta.1)
+
+`2020-09-28`
+
+**breaking changes**
+
+- DatetimePicker: change 事件的第一个参数调整为当前选中值 [058665](https://github.com/youzan/vant/commit/05866514dbdac098d8210f8b08e2fbc8d3479ada)
+
+**refactor**
+
+使用 Composition API 重构以下组件：
+
+- AddressEdit [749e4a](https://github.com/youzan/vant/commit/749e4ae73b9c07265e81237493b5e7d37afc6255)
+- Calendar [fc50e2](https://github.com/youzan/vant/commit/fc50e26416feb1cbc3d07de23cd39bf6ba57eefc)
+- Checkbox [278ea6](https://github.com/youzan/vant/commit/278ea6a439b65c1bf1ce420ab7619858a739486c)
+- ContactEdit [4f0921](https://github.com/youzan/vant/commit/4f0921cbdffe1f654ce75222027f8b85120ab67b)
+- DatetimePicker [638842](https://github.com/youzan/vant/commit/6388423c9609e099565e51423271e333fab38a55)
+- Field [00dbf2](https://github.com/youzan/vant/commit/00dbf2cc50c44d0ac45bc43daeaa91730b1a6e23)
+- Form [92aac9](https://github.com/youzan/vant/commit/92aac941fc25e028a7631be301ed895edff53487)
+- Radio [aafbcf](https://github.com/youzan/vant/commit/aafbcfcf04e7c0a4b4f5da83291e9b158f2503c3)
+- Tabs [882e3e](https://github.com/youzan/vant/commit/882e3ef5e787e587909bde1064f5dabe3d66ad72)
+
+**Feature**
+
+- Locale: 新增德语语言包 [#7245](https://github.com/youzan/vant/issues/7245)
+- Pagination: 新增多个插槽 [#7222](https://github.com/youzan/vant/issues/7222)
+
+**Bug Fixes**
+
+- Picker: 修复 setIndex 方法无效的问题 [d2a542](https://github.com/youzan/vant/commit/d2a54279766acca3981403c4fb9eb34d3d586643)
+- Dialog: 修复最小高度错误的问题 [bf1f0f](https://github.com/youzan/vant/commit/bf1f0f57eb16e2308b388c4e2ccab46c65f76196)
+- 包含 `v2.10.8` 版本的所有改动
+
+### [v3.0.0-beta.0](https://github.com/youzan/vant/compare/v2.10.7...v3.0.0-beta.0)
+
+`2020-09-18`
+
+**breaking changes**
+
+- Dialog: allow-html 属性的默认值调整为 false [02c7a7](https://github.com/youzan/vant/commit/02c7a75ee3d7725157b744bb710bd879f01a0065)
+- Picker: allow-html 属性的默认值调整为 false [02c7a7](https://github.com/youzan/vant/commit/02c7a75ee3d7725157b744bb710bd879f01a0065)
+
+**refactor**
+
+使用 Composition API 重构以下组件：
+
+- ImagePreview [6ab2b3](https://github.com/youzan/vant/commit/6ab2b3bf1f53dabf272ae3a6d663221236eab47c)
+- Picker [85d0d4](https://github.com/youzan/vant/commit/85d0d423eb33567d74d029991509589237214cf8)
+- Popup [946565](https://github.com/youzan/vant/commit/9465653f429d216bf0f34cb9cf26cc1f51b3e358)
+- Swipe [39c68c](https://github.com/youzan/vant/commit/39c68c993a34f8cfb0de056f0da7edcd01bd6d4d)
+- Uploader [595b06](https://github.com/youzan/vant/commit/595b062c34e34e48b5f8d730dc6b13221fcad841)
+
+**Bug Fixes**
+
+- AddressEdit: 修复 emits 未声明导致 warning 的问题 [1e6a12](https://github.com/youzan/vant/commit/1e6a120b2e48f7262062729260d362c96355eca6)
+- AddressEdit: 修复点击省市区弹窗的蒙层时无法关闭的问题 [02e89a](https://github.com/youzan/vant/commit/02e89a73c57af1e59429ab320c2a13395abc0520)
+- Field: 修复在 iOS 上中文输入过程中触发 input 事件的问题 [#7035](https://github.com/youzan/vant/issues/7035)
+- 包含 `v2.10.7` 版本的所有改动
+
+### [v3.0.0-alpha.5](https://github.com/youzan/vant/compare/v2.10.6...v3.0.0-alpha.5)
+
+`2020-09-13`
+
+**breaking changes**
+
+- Button: native-type 属性的默认值调整为 button [df8059](https://github.com/youzan/vant/commit/df8059eb015f2804433a7306c208a5909a4d46ac)
+
+**refactor**
+
+使用 Composition API 重构以下组件：
+
+- DatetimePicker [60e087](https://github.com/youzan/vant/commit/60e08767b313e90b13c6a4a3246a113367ed09a5)
+- DropdownItem [cd5f5b](https://github.com/youzan/vant/commit/cd5f5bb65544676279e486790761c38a2a9f0fc1)
+- Grid [38740b](https://github.com/youzan/vant/commit/38740b6c1c783d49a2201b24ba51121576e4c643)
+- IndexBar [f94c8c](https://github.com/youzan/vant/commit/f94c8ccbb93f4783814832a9363d663fb4986f10)
+- NumberKeyboard [14c1d4](https://github.com/youzan/vant/commit/14c1d4ea771cd9f01cb282493e57303ced897fa9)
+- PullRefresh [9f632f](https://github.com/youzan/vant/commit/9f632f151e3028adfd376f8ad166bf9d8af356fc)
+- Stepper [a7c285](https://github.com/youzan/vant/commit/a7c28548fcefe48a2ffa95bb0423dee0a48f8e16)
+- SwipeCell [b17c67](https://github.com/youzan/vant/commit/b17c67ab53652a361185934cb4119eca23622d9a)
+
+**Feature**
+
+- Button: 新增 icon-position 属性 [#7174](https://github.com/youzan/vant/issues/7174)
+- slider: 新增 range 属性，支持范围选择 [#7175](https://github.com/youzan/vant/issues/7175)
+- TabbarItem: 新增 @tabbar-item-active-background-color 变量 [#7162](https://github.com/youzan/vant/issues/7162)
+
+**Bug Fixes**
+
+- Sticky: 修复组件销毁时报错的问题 [#7169](https://github.com/youzan/vant/issues/7169)
+
+### [v3.0.0-alpha.4](https://github.com/youzan/vant/compare/v2.10.5...v3.0.0-alpha.4)
+
+`2020-09-06`
+
+**breaking changes**
+
+- Dialog: `before-close` 属性用法调整，不再传入 done 函数，而是通过返回 Promise 来控制
+- SwipeCell: `before-close` 属性不再传入组件实例
+- ImagePreview: 移除 `async-close` 属性，新增 `before-close` 属性
+
+**refactor**
+
+使用 Composition API 重构以下组件：
+
+- Coupon [ec5a75](https://github.com/youzan/vant/commit/ec5a759f684531e7c5ab751d1d746d0e65d26279)
+- Dialog [2b8284](https://github.com/youzan/vant/commit/2b8284a227b6d483685cfa3a70e01774491a2ff9)
+- NumberKeyboard [f735b2](https://github.com/youzan/vant/commit/f735b24a4b71176ce5c214af69b7afc99deab85f)
+- Pagination [1cd918](https://github.com/youzan/vant/commit/1cd918395805f57a60f2cce1f5174b480cfd70f2)
+
+**Bug Fixes**
+
+- Tag: 修复 color 属性不生效的问题 [4b6da2](https://github.com/youzan/vant/commit/4b6da2aab6acae95977579094bc5707345f3d3e9)
+- 修复在 TSX 中使用组件时提示类型错误的问题 [#7076](https://github.com/youzan/vant/issues/7076)
+- 修复全量引入组件时提示类型错误的问题 [#7056](https://github.com/youzan/vant/issues/7056)
+
+### [v3.0.0-alpha.3](https://github.com/youzan/vant/compare/v3.0.0-alpha.2...v3.0.0-alpha.3)
+
+`2020-09-01`
+
+**Feature**
+
+- ActionSheet: 新增 description 插槽 [#7068](https://github.com/youzan/vant/issues/7068)
+- Toast: 使用 composition api 重构 [44aaa4](https://github.com/youzan/vant/commit/44aaa471879ac79b7baee0e07c92d7a71ff7f530)
+
+**Types**
+
+- 修复使用 app.use 注册组件时提示类型错误的问题 [#7056](https://github.com/youzan/vant/issues/7056)
+- 修复 $toast、$dialog 类型不存在的问题 [0acbc6](https://github.com/youzan/vant/commit/0acbc6ec21588686b41f6387d2fdf642ae2c024e)
+
+**Bug Fixes**
+
+- Dialog: 修复 Dialog.close 不生效的问题 [476e16](https://github.com/youzan/vant/commit/476e16ff2d22a5da3ab8b57a6c7789610b008e22)
+- Toast: 修复设置 toast.message 不生效的问题 [dac7fe](https://github.com/youzan/vant/commit/dac7feb919cfc4c3c1b8dc544431eb5547414604)
+
+### [v3.0.0-alpha.2](https://github.com/youzan/vant/compare/v3.0.0-alpha.1...v3.0.0-alpha.2)
+
+`2020-08-28`
+
+**Bug Fixes**
+
+- 修复使用 `yarn add vant@next` 安装失败的问题
+
+### [v3.0.0-alpha.1](https://github.com/youzan/vant/compare/v2.10.3...v3.0.0-alpha.1)
+
+`2020-08-28`
+
+**refactor**
+
+使用 Composition API 重构以下组件：
+
+- ActionBar
+- AddressList
+- Area
+- Badge
+- Button
+- Circle
+- Col
+- Collapse
+- CountDown
+- Image
+- Row
+- List
+- Loading
+- NavBar
+- NoticeBar
+- Progress
+- Rate
+- Sidebar
+- Slider
+- Steps
+- Sticky
+- Tabbar
+
+**Bug Fixes**
+
+- Rate: 修复控制台报 emit warning 提示的问题 [c32fba](https://github.com/youzan/vant/commit/c32fba0f1e7afa657c69c233d644c1994963a638)
+- Button: 修复 click 事件参数丢失的问题 [cea272](https://github.com/youzan/vant/commit/cea2724321daf693a1dd36dd6923c4d28585895a)
+- CellGroup: 修复 attrs 继承错误的问题 [8f978a](https://github.com/youzan/vant/commit/8f978addd49b7d2a5e6fcce0c952fcb05145ad1d)
+- Dialog: 修复部分弹窗相关属性不生效的问题 [af94c9](https://github.com/youzan/vant/commit/af94c92614b78e999e5377208e2c3c3672480210)
+- Image: 修复 loading 图标和 error 图标不展示的问题 [c720ee](https://github.com/youzan/vant/commit/c720eea83170b36e1b2f4eb8bdaff400e88bf714)
+
+### v3.0.0-alpha.0
+
+`2020-08-22`
+
+**主要改动**
+
+- 完成 Vue 3 适配
+- 调整部分组件的 v-model 和 prop.sync 用法，以适配 v-model 语法变更
+- 调整部分组件的 prop 和 event 用法
+- 重命名所有组件的 info 属性为 badge
+- 重命名所有组件的 get-container 属性为 teleport
+- 废弃 SwitchCell 组件
+- 废弃个别 API
+
+**已知问题**
+
+- Lazyload、Panel 和 Sku 组件暂未完成 Vue 3 适配
+
+> 详细改动请参考 [从 v2 升级](https://youzan.github.io/vant/next/#/zh-CN/migrate-from-v2)。
--- a/docs/markdown/migrate-from-v2.zh-CN.md
+++ b/docs/markdown/migrate-from-v2.zh-CN.md
@ -0,0 +1,232 @@
+# 从 v2 升级
+
+### 介绍
+
+本文档提供了从 Vant 2 到 Vant 3 的升级指南。
+
+### 升级步骤
+
+#### 1. 升级 Vue 3
+
+Vant 3 是基于 Vue 3 开发的，在使用 Vant 3 前，请将项目中的 Vue 升级到 3.0 以上版本。
+
+#### 2. 处理不兼容更新
+
+Vant 2 到 Vant 3 存在一些不兼容更新，请仔细阅读下方的不兼容更新内容，并依次处理。
+
+## 不兼容更新
+
+### 组件命名调整
+
+GoodsAction 商品导航组件重命名为 **ActionBar 行动栏**。
+
+```html
+<!-- Vant 2 -->
+<van-goods-action>
+  <van-goods-action-icon text="图标" />
+  <van-goods-action-button text="按钮" />
+</van-goods-action>
+
+<!-- Vant 3 -->
+<van-action-bar>
+  <van-action-bar-icon text="图标" />
+  <van-action-bar-button text="按钮" />
+</van-action-bar>
+```
+
+### 废弃组件
+
+移除 SwitchCell 组件，可以直接使用 Cell 和 Switch 组件代替。
+
+```html
+<!-- Vant 2 -->
+<van-switch-cell title="标题" v-model="checked" />
+
+<!-- Vant 3 -->
+<van-cell center title="标题">
+  <template #right-icon>
+    <van-switch v-model="checked" size="24" />
+  </template>
+</van-cell>
+```
+
+### 弹窗型组件 v-model 变更
+
+为了适配 Vue 3 的 v-model API 用法变更，所有提供 v-model 属性的组件在用法上有一定调整。以下弹窗类组件的 `v-model` 被重命名为 `v-model:show`：
+
+- ActionSheet
+- Calendar
+- Dialog
+- ImagePreview
+- Notify
+- Popup
+- ShareSheet
+
+```html
+<!-- Vant 2 -->
+<van-popup v-model="show" />
+
+<!-- Vant 3 -->
+<van-popup v-model:show="show" />
+```
+
+### 表单型组件 v-model 内部值变更
+
+以下表单型组件 v-model 对应的 prop 重命名为 `modelValue`，event 重命名为 `update:modelValue`：
+
+- Checkbox
+- CheckboxGroup
+- DatetimePicker
+- DropdownItem
+- Field
+- Radio
+- RadioGroup
+- Search
+- Stepper
+- Switch
+- Sidebar
+- Uploader
+
+```html
+<!-- Vant 2 -->
+<van-field :value="value" @input="onInput" />
+
+<!-- Vant 3 -->
+<van-field :model-value="value" @update:model-value="onInput" />
+```
+
+### 其他 v-model 调整
+
+- Circle: `v-model` 重命名为 `v-model:currentRate`
+- CouponList: `v-model` 重命名为 `v-model:code`
+- List: `v-model` 重命名为 `v-model:loading`，`error.sync` 重命名为 `v-model:error`
+- Tabs: `v-model` 重命名为 `v-model:active`
+- TreeSelect: `active-id.sync` 重命名为 `v-model:active-id`
+- TreeSelect: `main-active-index.sync` 重命名为 `v-model:main-active-index`
+
+### 徽标属性命名调整
+
+在之前的版本中，我们通过 info 属性来展示图标右上角的徽标信息，为了更符合社区的命名习惯，我们将这个属性重命名为 badge，影响以下组件：
+
+- Tab
+- Icon
+- GridItem
+- TreeSelect
+- TabbarItem
+- SidebarItem
+- GoodsActionIcon
+
+同时内部使用的 Info 组件也会重命名为 Badge。
+
+```html
+<!-- Vant 2 -->
+<van-icon info="5" />
+
+<!-- Vant 3 -->
+<van-icon badge="5" />
+```
+
+### 重命名 get-container 属性
+
+Vue 3.0 中增加了 `Teleport` 组件，提供将组件渲染到任意 DOM 位置的能力，Vant 2.x 也通过 `get-container` 属性提供了类似的能力。为了与官方的 API 保持一致，Vant 中的 `get-container` 属性将重命名为 `teleport`。
+
+```html
+<!-- Vant 2 -->
+<template>
+  <van-popup get-container="body" />
+  <van-popup :get-container="getContainer" />
+</template>
+<script>
+  export default {
+    methods: {
+      getContainer() {
+        return document.querySelector('#container');
+      },
+    },
+  };
+</script>
+
+<!-- Vant 3 -->
+<template>
+  <van-popup teleport="body" />
+  <van-popup :teleport="container" />
+</template>
+<script>
+  export default {
+    beforeCreate() {
+      this.container = document.querySelector('#container');
+    },
+  };
+</script>
+```
+
+### API 调整
+
+#### Area
+
+- `change` 事件参数不再传入组件实例
+
+#### Button
+
+- 蓝色按钮对应的类型由 `info` 调整为 `primary`
+- 绿色按钮对应的类型由 `primary` 调整为 `success`
+- `native-type` 的默认值由 `submit` 调整为 `button`
+
+#### Checkbox
+
+- 在 Cell 内部使用时，现在需要手动添加 `@click.stop` 来阻止事件冒泡
+
+#### Dialog
+
+- 默认关闭 `allow-html` 属性
+- `before-close` 属性用法调整，不再传入 done 函数，而是通过返回 Promise 来控制
+
+#### DatetimePicker
+
+- `change` 事件参数不再传入组件实例
+
+#### ImagePreview
+
+- 移除 `async-close` 属性，可以使用新增的 `before-close` 属性代替
+
+#### Picker
+
+- `change` 事件参数不再传入组件实例
+- 默认关闭 `allow-html` 属性
+- 默认开启 `show-toolbar` 属性
+- 级联选择下，`confirm`、`change` 事件返回的回调参数将包含为完整的选项对象。
+
+#### SwipeCell
+
+- `open` 事件的 `detail` 参数重命名为 `name`
+- `on-close` 属性重命名为 `before-close`，并调整参数结构
+- `before-close` 属性不再传入组件实例
+
+#### Toast
+
+- `mask` 属性重命名为 `overlay`
+
+#### TreeSelect
+
+- `navclick` 事件重命名为 `click-nav`
+- `itemclick` 事件重命名为 `click-item`
+
+### 注册全局方法
+
+Vant 2.x 中默认提供了 `$toast`、`$dialog` 等全局方法，但 Vue 3.0 不再支持直接在 Vue 的原型链上挂载方法，因此从 Vant 3.0 开始，使用全局方法前必须先通过 `app.use` 将组件注册到对应的 app 上。
+
+```js
+import { Toast, Dialog, Notify } from 'vant';
+
+// 将 Toast 等组件注册到 app 上
+app.use(Toast);
+app.use(Dialog);
+app.use(Notify);
+
+// app 内的子组件可以直接调用 $toast 等方法
+export default {
+  mounted() {
+    this.$toast('提示文案');
+  },
+};
+```
--- a/docs/markdown/quickstart.en-US.md
+++ b/docs/markdown/quickstart.en-US.md
@ -23,10 +23,10 @@ In the GUI, click on 'Dependencies' -> `Install Dependencies` and add `vant` to

 ```bash
 # Using npm
-npm i vant -S
+npm i vant@next -S

 # Using yarn
-yarn add vant
+yarn add vant@next
 ```

 > Tips: Please install Vant 3.0 for Vue 3 projects, see [issue#7035](https://github.com/youzan/vant/issues/7035)
@ -84,11 +84,12 @@ import 'vant/lib/button/style';
 ### 3. Import all components

 ```js
-import Vue from 'vue';
+import { createApp } from 'vue';
 import Vant from 'vant';
 import 'vant/lib/index.css';

-Vue.use(Vant);
+const app = createApp();
+app.use(Vant);
 ```

 > If you configured babel-plugin-import, you won't be allowed to import all components.
@ -101,25 +102,26 @@ The easiest way to use Vant is to include a CDN link in the html file, after whi
 <!-- import style -->
 <link
  rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/vant@2.10/lib/index.css"
+  href="https://cdn.jsdelivr.net/npm/vant@next/lib/index.css"
 />

 <!-- import script -->
-<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/vant@2.10/lib/vant.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
+<script src="https://cdn.jsdelivr.net/npm/vant@next/lib/vant.min.js"></script>

 <script>
  // Render the Button component
-  new Vue({
-    el: '#app',
+  const app = Vue.createApp({
    template: `<van-button>Button</van-button>`,
  });
+  app.use(vant);
+  app.mount('#app');

  // Call function component
  vant.Toast('Message');

  // Register Lazyload directive
-  Vue.use(vant.Lazyload);
+  // app.use(vant.Lazyload);
 </script>
 ```

--- a/docs/markdown/quickstart.zh-CN.md
+++ b/docs/markdown/quickstart.zh-CN.md
@ -25,10 +25,10 @@ vue ui

 ```bash
 # 通过 npm 安装
-npm i vant -S
+npm i vant@next -S

 # 通过 yarn 安装
-yarn add vant
+yarn add vant@next
 ```

 > Tips: Vue 3 项目请安装 Vant 3.0，参见 [issue#7035](https://github.com/youzan/vant/issues/7035)。
@ -101,11 +101,12 @@ import 'vant/lib/button/style';
 Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法。

 ```js
-import Vue from 'vue';
+import { createApp } from 'vue';
 import Vant from 'vant';
 import 'vant/lib/index.css';

-Vue.use(Vant);
+const app = createApp();
+app.use(Vant);
 ```

 > Tips: 配置按需引入后，将不允许直接导入所有组件。
@ -118,26 +119,27 @@ Vue.use(Vant);
 <!-- 引入样式文件 -->
 <link
  rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/vant@2.10/lib/index.css"
+  href="https://cdn.jsdelivr.net/npm/vant@next/lib/index.css"
 />

 <!-- 引入 Vue 和 Vant 的 JS 文件 -->
-<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/vant@2.10/lib/vant.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
+<script src="https://cdn.jsdelivr.net/npm/vant@next/lib/vant.min.js"></script>

 <script>
  // 在 #app 标签下渲染一个按钮组件
-  new Vue({
-    el: '#app',
+  const app = Vue.createApp({
    template: `<van-button>按钮</van-button>`,
  });
+  app.use(vant);
+  app.mount('#app');

  // 调用函数组件，弹出一个 Toast
  vant.Toast('提示');

  // 通过 CDN 引入时不会自动注册 Lazyload 组件
  // 可以通过下面的方式手动注册
-  Vue.use(vant.Lazyload);
+  // app.use(vant.Lazyload);
 </script>
 ```

--- a/docs/site/demo-locale.js
+++ b/docs/site/demo-locale.js
@ -0,0 +1,120 @@
+import Locale from '../../src/locale';
+import enUS from '../../src/locale/lang/en-US';
+import { get } from '../../src/utils';
+import { camelize } from '../../src/utils/format/string';
+
+Locale.add({
+  'en-US': enUS,
+});
+
+let demoUid = 0;
+
+export const DemoLocaleMixin = {
+  computed: {
+    t() {
+      const { name } = this.$options;
+      const prefix = name ? camelize(name) + '.' : '';
+      const messages = Locale.messages();
+
+      return (path, ...args) => {
+        const message = get(messages, prefix + path) || get(messages, path);
+        return typeof message === 'function' ? message(...args) : message;
+      };
+    },
+
+    // flag for vant-weapp demos
+    isWeapp() {
+      return location.search.indexOf('weapp=1') !== -1;
+    },
+  },
+
+  beforeCreate() {
+    if (!this.$options.name) {
+      this.$options.name = `demo-${demoUid++}`;
+    }
+
+    const { i18n, name } = this.$options;
+
+    if (i18n && name) {
+      const locales = {};
+      const camelizedName = camelize(name);
+
+      Object.keys(i18n).forEach((key) => {
+        locales[key] = { [camelizedName]: i18n[key] };
+      });
+
+      Locale.add(locales);
+    }
+  },
+};
+
+// switch lang after routing
+if (window.vueRouter) {
+  window.vueRouter.afterEach((to) => {
+    const { lang } = to.meta || {};
+
+    if (lang) {
+      Locale.use(lang);
+    }
+  });
+}
+
+// add some basic locale messages
+Locale.add({
+  'zh-CN': {
+    add: '增加',
+    decrease: '减少',
+    red: '红色',
+    orange: '橙色',
+    yellow: '黄色',
+    purple: '紫色',
+    tab: '标签',
+    tag: '标签',
+    desc: '描述信息',
+    back: '返回',
+    title: '标题',
+    status: '状态',
+    button: '按钮',
+    option: '选项',
+    search: '搜索',
+    content: '内容',
+    custom: '自定义',
+    username: '用户名',
+    password: '密码',
+    disabled: '禁用状态',
+    uneditable: '不可编辑',
+    basicUsage: '基础用法',
+    advancedUsage: '高级用法',
+    loadingStatus: '加载状态',
+    usernamePlaceholder: '请输入用户名',
+    passwordPlaceholder: '请输入密码',
+  },
+  'en-US': {
+    add: 'Add',
+    decrease: 'Decrease',
+    red: 'Red',
+    orange: 'Orange',
+    yellow: 'Yellow',
+    purple: 'Purple',
+    tab: 'Tab',
+    tag: 'Tag',
+    desc: 'Description',
+    back: 'Back',
+    title: 'Title',
+    status: 'Status',
+    button: 'Button',
+    option: 'Option',
+    search: 'Search',
+    content: 'Content',
+    custom: 'Custom',
+    username: 'Username',
+    password: 'Password',
+    loadingStatus: 'Loading',
+    disabled: 'Disabled',
+    uneditable: 'Uneditable',
+    basicUsage: 'Basic Usage',
+    advancedUsage: 'Advanced Usage',
+    usernamePlaceholder: 'Username',
+    passwordPlaceholder: 'Password',
+  },
+});
--- a/docs/site/mobile.js
+++ b/docs/site/mobile.js
@ -1,130 +1,13 @@
-import Vue from 'vue';
-import Locale from '../../src/locale';
-import Lazyload from '../../src/lazyload';
-import { get } from '../../src/utils';
-import { camelize } from '../../src/utils/format/string';
-import enUS from '../../src/locale/lang/en-US';
+import { DemoLocaleMixin } from './demo-locale';
+// import Lazyload from '../../src/lazyload';

-Vue.use(Lazyload, {
-  lazyComponent: true,
-});
+// TODO
+// Vue.use(Lazyload, {
+//   lazyComponent: true,
+// });

-Locale.add({
-  'en-US': enUS,
-});
-
-// flag for vant-weapp demos
-const isWeapp = location.search.indexOf('weapp=1') !== -1;
-
-let demoUid = 0;
-
-// helper for demo locales
-Vue.mixin({
-  computed: {
-    t() {
-      const { name } = this.$options;
-      const { lang = 'zh-CN' } = (this.$route && this.$route.meta) || {};
-      const prefix = name ? camelize(name) + '.' : '';
-      const messages = this.$vantMessages[lang];
-
-      return (path, ...args) => {
-        const message = get(messages, prefix + path) || get(messages, path);
-        return typeof message === 'function' ? message(...args) : message;
-      };
-    },
-
-    isWeapp() {
-      return isWeapp;
-    },
-  },
-
-  beforeCreate() {
-    if (!this.$options.name) {
-      this.$options.name = `demo-${demoUid++}`;
-    }
-
-    const { i18n, name } = this.$options;
-
-    if (i18n && name) {
-      const locales = {};
-      const camelizedName = camelize(name);
-
-      Object.keys(i18n).forEach((key) => {
-        locales[key] = { [camelizedName]: i18n[key] };
-      });
-
-      Locale.add(locales);
-    }
-  },
-});
-
-// switch lang after routing
-if (window.vueRouter) {
-  window.vueRouter.afterEach((to) => {
-    const { lang } = to.meta || {};
-
-    if (lang) {
-      Locale.use(lang);
-    }
-  });
+const { app } = window;
+if (app) {
+  // helper for demo locales
+  app.mixin(DemoLocaleMixin);
 }
-
-// add some basic locale messages
-Locale.add({
-  'zh-CN': {
-    add: '增加',
-    decrease: '减少',
-    red: '红色',
-    orange: '橙色',
-    yellow: '黄色',
-    purple: '紫色',
-    tab: '标签',
-    tag: '标签',
-    desc: '描述信息',
-    back: '返回',
-    title: '标题',
-    status: '状态',
-    button: '按钮',
-    option: '选项',
-    search: '搜索',
-    content: '内容',
-    custom: '自定义',
-    username: '用户名',
-    password: '密码',
-    disabled: '禁用状态',
-    uneditable: '不可编辑',
-    basicUsage: '基础用法',
-    advancedUsage: '高级用法',
-    loadingStatus: '加载状态',
-    usernamePlaceholder: '请输入用户名',
-    passwordPlaceholder: '请输入密码',
-  },
-  'en-US': {
-    add: 'Add',
-    decrease: 'Decrease',
-    red: 'Red',
-    orange: 'Orange',
-    yellow: 'Yellow',
-    purple: 'Purple',
-    tab: 'Tab',
-    tag: 'Tag',
-    desc: 'Description',
-    back: 'Back',
-    title: 'Title',
-    status: 'Status',
-    button: 'Button',
-    option: 'Option',
-    search: 'Search',
-    content: 'Content',
-    custom: 'Custom',
-    username: 'Username',
-    password: 'Password',
-    loadingStatus: 'Loading',
-    disabled: 'Disabled',
-    uneditable: 'Uneditable',
-    basicUsage: 'Basic Usage',
-    advancedUsage: 'Advanced Usage',
-    usernamePlaceholder: 'Username',
-    passwordPlaceholder: 'Password',
-  },
-});
--- a/docs/site/release.sh
+++ b/docs/site/release.sh
@ -5,4 +5,4 @@ superman-cdn /vant ./site/*.js

 rm -rf site/*.js

-gh-pages -d site --add
+gh-pages -d site --add --dest next
--- a/jest.config.js
+++ b/jest.config.js
@ -0,0 +1,3 @@
+module.exports = {
+  testPathIgnorePatterns: ['/node_modules/', '/packages/'],
+};
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "vant",
-  "version": "2.10.11",
+  "version": "3.0.0-beta.5",
  "description": "Mobile UI Components built on Vue",
  "main": "lib/index.js",
  "module": "es/index.js",
@ -21,11 +21,14 @@
    "lint": "vant-cli lint",
    "test": "vant-cli test",
    "build": "vant-cli build",
-    "release": "vant-cli release",
+    "release": "vant-cli release --tag next",
    "test:watch": "vant-cli test --watch",
    "release:site": "sh docs/site/release.sh",
    "test:coverage": "open test/coverage/index.html"
  },
+  "npm": {
+    "tag": "next"
+  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
@ -55,17 +58,17 @@
  "dependencies": {
    "@babel/runtime": "7.x",
    "@vant/icons": "1.3.2",
-    "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
+    "@vant/use": "^0.0.9",
    "vue-lazyload": "1.2.3"
  },
  "peerDependencies": {
-    "vue": ">= 2.5.22"
+    "vue": "^3.0.0"
  },
  "devDependencies": {
-    "@vant/cli": "^2.6.0",
+    "@vant/cli": "^3.0.0-beta.11",
+    "@vue/compiler-sfc": "^3.0.2",
    "prettier": "^2.0.4",
-    "vue": "^2.6.11",
-    "vue-template-compiler": "^2.6.11"
+    "vue": "^3.0.2"
  },
  "sideEffects": [
    "es/**/style/*",
--- a/packages/create-vant-cli-app/generators/templates/src/demo-button/demo/index.vue
+++ b/packages/create-vant-cli-app/generators/templates/src/demo-button/demo/index.vue
@ -1,11 +1,9 @@
 <template>
-  <demo-section>
-    <demo-block title="基础用法">
-      <demo-button type="primary" style="margin-left: 15px;">按钮</demo-button>
-    </demo-block>
+  <demo-block title="基础用法">
+    <demo-button type="primary" style="margin-left: 15px;">按钮</demo-button>
+  </demo-block>

-    <demo-block title="自定义颜色">
-      <demo-button color="#03a9f4" style="margin-left: 15px;">按钮</demo-button>
-    </demo-block>
-  </demo-section>
+  <demo-block title="自定义颜色">
+    <demo-button color="#03a9f4" style="margin-left: 15px;">按钮</demo-button>
+  </demo-block>
 </template>
--- a/packages/vant-cli/changelog.md
+++ b/packages/vant-cli/changelog.md
@ -16,7 +16,7 @@

 `2020-09-26`

- 新增 Open Sas 字体
+- 新增 Open Sans 字体
 - 修复搜索时无法跳转到对应锚点的问题
 - 修复自定义 webpack 配置时某些情况下出现配置错误的问题

--- a/packages/vant-cli/package.json
+++ b/packages/vant-cli/package.json
@ -1,6 +1,6 @@
 {
  "name": "@vant/cli",
-  "version": "2.6.1",
+  "version": "3.0.0-beta.11",
  "description": "",
  "main": "lib/index.js",
  "typings": "lib/index.d.ts",
@ -30,40 +30,36 @@
  "author": "chenjiahan",
  "license": "MIT",
  "peerDependencies": {
-    "vue": "^2.5.22",
-    "vue-template-compiler": "^2.5.22"
+    "@vue/compiler-sfc": "^3.0.0",
+    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@types/fs-extra": "^9.0.1",
    "@types/lodash": "^4.14.153",
-    "@types/postcss-load-config": "^2.0.1",
-    "@types/webpack-merge": "^4.1.5"
+    "@types/postcss-load-config": "^2.0.1"
  },
  "dependencies": {
    "@babel/core": "^7.10.1",
-    "@babel/plugin-syntax-jsx": "^7.10.1",
    "@babel/plugin-transform-object-assign": "^7.10.1",
    "@babel/plugin-transform-runtime": "^7.10.1",
    "@babel/preset-env": "^7.10.1",
    "@babel/preset-typescript": "^7.10.1",
    "@nuxt/friendly-errors-webpack-plugin": "^2.5.0",
-    "@types/jest": "^25.2.3",
-    "@types/webpack": "^4.41.13",
+    "@types/jest": "^26.0.0",
    "@types/webpack-dev-server": "^3.11.0",
-    "@vant/eslint-config": "^2.2.2",
-    "@vant/markdown-loader": "^2.3.0",
+    "@vant/eslint-config": "^3.0.0-beta.0",
+    "@vant/markdown-loader": "^3.0.0",
    "@vant/markdown-vetur": "^2.0.2",
    "@vant/stylelint-config": "^1.3.0",
    "@vant/touch-emulator": "^1.2.0",
-    "@vue/babel-preset-jsx": "^1.1.2",
+    "@vue/babel-plugin-jsx": "^1.0.0-rc.3",
    "@vue/component-compiler-utils": "^3.1.2",
-    "@vue/test-utils": "1.0.0-beta.29",
+    "@vue/test-utils": "2.0.0-beta.7",
    "address": "^1.1.2",
-    "autoprefixer": "^9.8.0",
+    "autoprefixer": "^10.0.0",
    "babel-jest": "^26.0.1",
    "babel-loader": "^8.1.0",
    "babel-plugin-import": "^1.13.0",
-    "cache-loader": "^4.1.0",
    "chokidar": "^3.4.0",
    "clean-css": "^4.2.3",
    "codecov": "^3.7.0",
@ -72,37 +68,38 @@
    "conventional-changelog": "^3.1.21",
    "cross-env": "^7.0.2",
    "css-loader": "^3.5.3",
-    "eslint": "^6.8.0",
+    "eslint": "^7.0.0",
    "fast-glob": "^3.2.2",
-    "fork-ts-checker-webpack-plugin": "^4.1.6",
-    "gh-pages": "^2.2.0",
+    "fork-ts-checker-webpack-plugin": "^5.0.0",
+    "gh-pages": "^3.0.0",
    "hash-sum": "^2.0.0",
-    "html-webpack-plugin": "4.3.0",
+    "html-webpack-plugin": "^5.0.0-alpha.6",
    "husky": "^4.2.5",
-    "jest": "^25.5.4",
+    "jest": "^26.0.0",
    "jest-canvas-mock": "^2.2.0",
    "jest-serializer-vue": "^2.0.2",
    "less": "^3.11.1",
-    "less-loader": "^6.1.0",
+    "less-loader": "^7.0.0",
    "lint-staged": "^10.2.7",
    "lodash": "^4.17.15",
-    "ora": "^4.0.4",
+    "ora": "^5.0.0",
    "portfinder": "^1.0.26",
-    "postcss": "^7.0.31",
+    "postcss": "^8.0.0",
+    "postcss-load-config": "^3.0.0",
    "postcss-loader": "^3.0.0",
    "prettier": "^2.0.5",
-    "release-it": "^13.6.1",
+    "release-it": "^14.0.0",
    "sass": "^1.26.7",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.2.1",
    "stylelint": "^13.5.0",
-    "typescript": "^3.9.3",
-    "vue-jest": "4.0.0-rc.0",
-    "vue-loader": "^15.9.2",
-    "vue-router": "^3.3.1",
-    "webpack": "^4.43.0",
+    "typescript": "^4.0.0",
+    "vue-jest": "^5.0.0-alpha.5",
+    "vue-loader": "^16.0.0-beta.8",
+    "vue-router": "^4.0.0-beta.13",
+    "webpack": "^5.1.2",
    "webpack-dev-server": "3.11.0",
-    "webpack-merge": "^4.2.2",
+    "webpack-merge": "^5.0.0",
    "webpackbar": "^4.0.0"
  },
  "release-it": {
--- a/packages/vant-cli/site/common/iframe-router.js
+++ b/packages/vant-cli/site/common/iframe-router.js
@ -7,7 +7,7 @@ import { iframeReady, isMobile } from '.';
 window.syncPath = function() {
  const router = window.vueRouter;
  const isInIframe = window !== window.top;
-  const currentDir = router.history.current.path;
+  const currentDir = router.currentRoute.value.path;

  if (isInIframe) {
    window.top.replacePath(currentDir);
@ -23,7 +23,7 @@ window.syncPath = function() {

 window.replacePath = function(path = '') {
  // should preserve hash for anchor
-  if (window.vueRouter.currentRoute.path !== path) {
+  if (window.vueRouter.currentRoute.value.path !== path) {
    window.vueRouter.replace(path).catch(() => {});
  }
 };
--- a/packages/vant-cli/site/common/index.js
+++ b/packages/vant-cli/site/common/index.js
@ -4,9 +4,7 @@ function iframeReady(iframe, callback) {
    if (iframe.contentWindow.replacePath) {
      callback();
    } else {
-      setTimeout(() => {
-        interval();
-      }, 50);
+      setTimeout(interval, 50);
    }
  };

--- a/packages/vant-cli/site/common/style/var.less
+++ b/packages/vant-cli/site/common/style/var.less
@ -13,13 +13,13 @@
@van-doc-code-color: #58727e;
@van-doc-code-background-color: #f1f4f8;
@van-doc-code-font-family: 'Source Code Pro', 'Monaco', 'Inconsolata', monospace;
-@van-doc-padding: 30px;
+@van-doc-padding: 24px;
@van-doc-row-max-width: 1680px;
@van-doc-nav-width: 220px;
-@van-doc-border-radius: 12px;
+@van-doc-border-radius: 20px;

 // header
-@van-doc-header-top-height: 60px;
+@van-doc-header-top-height: 64px;
@van-doc-header-bottom-height: 50px;

 // simulator
--- a/packages/vant-cli/site/desktop/App.vue
+++ b/packages/vant-cli/site/desktop/App.vue
@ -1,6 +1,7 @@
 <template>
  <div class="app">
    <van-doc
+      v-if="config"
      :lang="lang"
      :config="config"
      :versions="versions"
@ -16,6 +17,7 @@
 import VanDoc from './components';
 import { config, packageVersion } from 'site-desktop-shared';
 import { setLang } from '../common/locales';
+import { scrollToAnchor } from './utils';

 export default {
  components: {
@ -39,7 +41,7 @@ export default {

    langConfigs() {
      const { locales = {} } = config.site;
-      return Object.keys(locales).map(key => ({
+      return Object.keys(locales).map((key) => ({
        lang: key,
        label: locales[key].langLabel || '',
      }));
@ -65,21 +67,48 @@ export default {
  },

  watch: {
+    // eslint-disable-next-line
+    '$route.path'() {
+      this.setTitle();
+    },
+
    lang(val) {
      setLang(val);
      this.setTitle();
    },
+
+    config: {
+      handler(val) {
+        if (val) {
+          this.setTitle();
+        }
+      },
+      immediate: true,
+    },
  },

-  created() {
-    this.setTitle();
+  mounted() {
+    if (this.$route.hash) {
+      scrollToAnchor(this.$route.hash);
+    }
  },

  methods: {
    setTitle() {
      let { title } = this.config;

-      if (this.config.description) {
+      const navItems = this.config.nav.reduce(
+        (result, nav) => [...result, ...nav.items],
+        []
+      );
+
+      const current = navItems.find((item) => {
+        return item.path === this.$route.meta.name;
+      });
+
+      if (current && current.title) {
+        title = current.title + ' - ' + title;
+      } else if (this.config.description) {
        title += ` - ${this.config.description}`;
      }

--- a/packages/vant-cli/site/desktop/components/Content.vue
+++ b/packages/vant-cli/site/desktop/components/Content.vue
@ -203,7 +203,7 @@ export default {
  }

  section {
-    padding: 30px;
+    padding: 24px;
    overflow: hidden;
  }

@ -220,7 +220,8 @@ export default {
    border-radius: @van-doc-border-radius;
  }

-  &--changelog {
+  &--changelog,
+  &--changelog-v3 {
    strong {
      display: block;
      margin: 24px 0 12px;
--- a/packages/vant-cli/site/desktop/components/Header.vue
+++ b/packages/vant-cli/site/desktop/components/Header.vue
@ -14,7 +14,11 @@
        />

        <ul class="van-doc-header__top-nav">
-          <li v-for="item in config.links" class="van-doc-header__top-nav-item">
+          <li
+            v-for="(item, index) in config.links"
+            :key="index"
+            class="van-doc-header__top-nav-item"
+          >
            <a
              class="van-doc-header__logo-link"
              target="_blank"
@ -37,7 +41,8 @@
              <transition name="van-doc-dropdown">
                <div v-if="showVersionPop" class="van-doc-header__version-pop">
                  <div
-                    v-for="item in versions"
+                    v-for="(item, index) in versions"
+                    :key="index"
                    class="van-doc-header__version-pop-item"
                    @click="onSwitchVersion(item)"
                  >
@ -90,7 +95,7 @@ export default {
    },

    anotherLang() {
-      const items = this.langConfigs.filter(item => item.lang !== this.lang);
+      const items = this.langConfigs.filter((item) => item.lang !== this.lang);
      if (items.length) {
        return items[0];
      }
--- a/packages/vant-cli/site/desktop/components/Nav.vue
+++ b/packages/vant-cli/site/desktop/components/Nav.vue
@ -38,7 +38,7 @@ export default {

  data() {
    return {
-      top: 60,
+      top: 64,
      bottom: 0,
    };
  },
@ -64,7 +64,7 @@ export default {
  methods: {
    onScroll() {
      const { pageYOffset: offset } = window;
-      this.top = Math.max(0, 60 - offset);
+      this.top = Math.max(0, 64 - offset);
    },
  },
 };
@ -75,13 +75,11 @@ export default {

 .van-doc-nav {
  position: fixed;
-  top: 60px;
-  bottom: 0;
  left: 0;
  z-index: 1;
  min-width: @van-doc-nav-width;
  max-width: @van-doc-nav-width;
-  padding: 24px 0 72px;
+  padding: @van-doc-padding 0;
  overflow-y: scroll;
  background-color: #fff;
  box-shadow: 0 8px 12px #ebedf0;
@ -108,6 +106,7 @@ export default {

  &__group {
    margin-bottom: 16px;
+    padding-left: 6px;
  }

  &__title {
@ -121,11 +120,11 @@ export default {
  &__item {
    a {
      display: block;
-      margin: 0;
+      margin: 8px 0;
      padding: 8px 0 8px @van-doc-padding;
      color: #455a64;
      font-size: 14px;
-      line-height: 28px;
+      line-height: 20px;
      transition: color 0.2s;

      &:hover,
@ -134,7 +133,9 @@ export default {
      }

      &.active {
-        -webkit-font-smoothing: auto;
+        font-weight: 600;
+        background-color: #ebfff0;
+        border-radius: 999px;
      }

      span {
--- a/packages/vant-cli/site/desktop/components/SearchInput.vue
+++ b/packages/vant-cli/site/desktop/components/SearchInput.vue
@ -54,8 +54,8 @@ export default {
@import '../../common/style/var';

 .van-doc-search {
-  width: 200px;
-  height: 60px;
+  width: 400px;
+  height: @van-doc-header-top-height;
  margin-left: 140px;
  color: #fff;
  font-size: 14px;
--- a/packages/vant-cli/site/desktop/components/Simulator.vue
+++ b/packages/vant-cli/site/desktop/components/Simulator.vue
@ -57,7 +57,7 @@ export default {
  overflow: hidden;
  background: #fafafa;
  border-radius: @van-doc-border-radius;
-  box-shadow: #ebedf0 0 4px 12px;
+  box-shadow: 0 8px 12px #ebedf0;

  @media (max-width: 1100px) {
    right: auto;
--- a/packages/vant-cli/site/desktop/components/index.vue
+++ b/packages/vant-cli/site/desktop/components/index.vue
@ -50,9 +50,10 @@ export default {
    },
  },

+  emits: ['switch-version'],
+
  watch: {
-    // eslint-disable-next-line object-shorthand
-    '$route.path'() {
+    $route() {
      this.setNav();
    },
  },
--- a/packages/vant-cli/site/desktop/main.js
+++ b/packages/vant-cli/site/desktop/main.js
@ -1,19 +1,5 @@
-import Vue from 'vue';
+import { createApp } from 'vue';
 import App from './App';
 import { router } from './router';
-import { scrollToAnchor } from './utils';

-if (process.env.NODE_ENV !== 'production') {
-  Vue.config.productionTip = false;
-}
-
-new Vue({
-  el: '#app',
-  mounted() {
-    if (this.$route.hash) {
-      scrollToAnchor(this.$route.hash);
-    }
-  },
-  render: h => h(App),
-  router,
-});
+window.app = createApp(App).use(router).mount('#app');
--- a/packages/vant-cli/site/desktop/router.js
+++ b/packages/vant-cli/site/desktop/router.js
@ -1,5 +1,5 @@
-import Vue from 'vue';
-import VueRouter from 'vue-router';
+import { nextTick } from 'vue';
+import { createRouter, createWebHashHistory } from 'vue-router';
 import { isMobile, decamelize } from '../common';
 import { config, documents } from 'site-desktop-shared';
 import { getLang, setDefaultLang } from '../common/locales';
@ -47,12 +47,14 @@ function getRoutes() {

  if (locales) {
    routes.push({
-      path: '*',
-      redirect: route => `/${getLangFromRoute(route)}/`,
+      name: 'notFound',
+      path: '/:path(.*)+',
+      redirect: (route) => `/${getLangFromRoute(route)}/`,
    });
  } else {
    routes.push({
-      path: '*',
+      name: 'notFound',
+      path: '/:path(.*)+',
      redirect: '/',
    });
  }
@ -66,7 +68,7 @@ function getRoutes() {
    });
  }

-  names.forEach(name => {
+  names.forEach((name) => {
    const { component, lang } = parseName(name);

    if (component === 'home') {
@ -98,10 +100,8 @@ function getRoutes() {
  return routes;
 }

-Vue.use(VueRouter);
-
-export const router = new VueRouter({
-  mode: 'hash',
+export const router = createRouter({
+  history: createWebHashHistory(),
  routes: getRoutes(),
  scrollBehavior(to) {
    if (to.hash) {
@ -113,7 +113,7 @@ export const router = new VueRouter({
 });

 router.afterEach(() => {
-  Vue.nextTick(() => window.syncPath());
+  nextTick(() => window.syncPath());
 });

 window.vueRouter = router;
--- a/packages/vant-cli/site/mobile/App.vue
+++ b/packages/vant-cli/site/mobile/App.vue
@ -1,10 +1,12 @@
 <template>
-  <div>
-    <demo-nav />
+  <demo-nav />
+  <router-view v-slot="{ Component }">
    <keep-alive>
-      <router-view />
+      <demo-section>
+        <component :is="Component" />
+      </demo-section>
    </keep-alive>
-  </div>
+  </router-view>
 </template>

 <script>
--- a/packages/vant-cli/site/mobile/components/DemoHome.vue
+++ b/packages/vant-cli/site/mobile/components/DemoHome.vue
@ -10,9 +10,12 @@
    <h2 v-if="config.description" class="demo-home__desc">
      {{ config.description }}
    </h2>
-    <template v-for="(group, index) in config.nav">
-      <demo-home-nav :group="group" :lang="lang" :key="index" />
-    </template>
+    <demo-home-nav
+      v-for="(group, index) in config.nav"
+      :key="index"
+      :lang="lang"
+      :group="group"
+    />
  </div>
 </template>

--- a/packages/vant-cli/site/mobile/main.js
+++ b/packages/vant-cli/site/mobile/main.js
@ -1,21 +1,17 @@
-import Vue from 'vue';
+import { createApp } from 'vue';
 import DemoBlock from './components/DemoBlock';
 import DemoSection from './components/DemoSection';
 import { router } from './router';
+import { packageEntry } from 'site-mobile-shared';
 import App from './App';
 import '@vant/touch-emulator';

-if (process.env.NODE_ENV !== 'production') {
-  Vue.config.productionTip = false;
-}
-
-Vue.component(DemoBlock.name, DemoBlock);
-Vue.component(DemoSection.name, DemoSection);
+window.app = createApp(App)
+  .use(router)
+  .use(packageEntry)
+  .component(DemoBlock.name, DemoBlock)
+  .component(DemoSection.name, DemoSection);

 setTimeout(() => {
-  new Vue({
-    el: '#app',
-    render: h => h(App),
-    router,
-  });
+  window.app.mount('#app');
 }, 0);
--- a/packages/vant-cli/site/mobile/router.js
+++ b/packages/vant-cli/site/mobile/router.js
@ -1,5 +1,5 @@
-import Vue from 'vue';
-import VueRouter from 'vue-router';
+import { watch, nextTick } from 'vue';
+import { createRouter, createWebHashHistory } from 'vue-router';
 import DemoHome from './components/DemoHome';
 import { decamelize } from '../common';
 import { demos, config } from 'site-mobile-shared';
@ -28,11 +28,12 @@ function getRoutes() {

  if (langs.length) {
    routes.push({
-      path: '*',
-      redirect: route => `/${getLangFromRoute(route)}/`,
+      name: 'NotFound',
+      path: '/:path(.*)+',
+      redirect: (route) => `/${getLangFromRoute(route)}/`,
    });

-    langs.forEach(lang => {
+    langs.forEach((lang) => {
      routes.push({
        path: `/${lang}`,
        component: DemoHome,
@ -41,7 +42,8 @@ function getRoutes() {
    });
  } else {
    routes.push({
-      path: '*',
+      name: 'NotFound',
+      path: '/:path(.*)+',
      redirect: () => '/',
    });

@ -51,11 +53,11 @@ function getRoutes() {
    });
  }

-  names.forEach(name => {
+  names.forEach((name) => {
    const component = decamelize(name);

    if (langs.length) {
-      langs.forEach(lang => {
+      langs.forEach((lang) => {
        routes.push({
          name: `${lang}/${component}`,
          path: `/${lang}/${component}`,
@ -81,17 +83,15 @@ function getRoutes() {
  return routes;
 }

-Vue.use(VueRouter);
-
-export const router = new VueRouter({
-  mode: 'hash',
+export const router = createRouter({
+  history: createWebHashHistory(),
  routes: getRoutes(),
  scrollBehavior: (to, from, savedPosition) => savedPosition || { x: 0, y: 0 },
 });

-router.afterEach(() => {
-  if (!router.currentRoute.redirectedFrom) {
-    Vue.nextTick(window.syncPath);
+watch(router.currentRoute, () => {
+  if (!router.currentRoute.value.redirectedFrom) {
+    nextTick(window.syncPath);
  }
 });

--- a/packages/vant-cli/src/commands/build.ts
+++ b/packages/vant-cli/src/commands/build.ts
@ -46,7 +46,7 @@ async function compileDir(dir: string) {
  const files = readdirSync(dir);

  await Promise.all(
-    files.map(filename => {
+    files.map((filename) => {
      const filePath = join(dir, filename);

      if (isDemoDir(filePath) || isTestDir(filePath)) {
@ -153,9 +153,9 @@ async function runBuildTasks() {
 }

 function watchFileChange() {
-  consola.info('\nWatching file changes...');
+  consola.info('Watching file changes...');

-  chokidar.watch(SRC_DIR).on('change', async path => {
+  chokidar.watch(SRC_DIR).on('change', async (path) => {
    if (isDemoDir(path) || isTestDir(path)) {
      return;
    }
--- a/packages/vant-cli/src/commands/release.ts
+++ b/packages/vant-cli/src/commands/release.ts
@ -4,11 +4,14 @@ import { join } from 'path';

 const PLUGIN_PATH = join(__dirname, '../compiler/vant-cli-release-plugin.js');

-export async function release() {
+export async function release(command: { tag?: string }) {
  await releaseIt({
    plugins: {
      [PLUGIN_PATH]: {},
    },
+    npm: {
+      tag: command.tag,
+    },
    git: {
      tagName: 'v${version}',
      commitMessage: 'chore: release ${version}',
--- a/packages/vant-cli/src/common/index.ts
+++ b/packages/vant-cli/src/common/index.ts
@ -6,7 +6,7 @@ import {
  readFileSync,
  outputFileSync,
 } from 'fs-extra';
-import merge from 'webpack-merge';
+import { merge } from 'webpack-merge';
 import {
  SRC_DIR,
  getVantConfig,
@ -38,6 +38,7 @@ export function hasDefaultExport(code: string) {
 export function getComponents() {
  const EXCLUDES = ['.DS_Store'];
  const dirs = readdirSync(SRC_DIR);
+
  return dirs
    .filter((dir) => !EXCLUDES.includes(dir))
    .filter((dir) =>
@ -101,7 +102,7 @@ export function normalizePath(path: string): string {
  return path.replace(/\\/g, '/');
 }

-export function getWebpackConfig(defaultConfig: WebpackConfig): object {
+export function getWebpackConfig(defaultConfig: WebpackConfig): WebpackConfig {
  if (existsSync(ROOT_WEBPACK_CONFIG_FILE)) {
    const config = require(ROOT_WEBPACK_CONFIG_FILE);

@ -117,7 +118,7 @@ export function getWebpackConfig(defaultConfig: WebpackConfig): object {
  return defaultConfig;
 }

-export function getPostcssConfig(): object {
+export function getPostcssConfig() {
  if (existsSync(ROOT_POSTCSS_CONFIG_FILE)) {
    return require(ROOT_POSTCSS_CONFIG_FILE);
  }
--- a/packages/vant-cli/src/compiler/compile-package.ts
+++ b/packages/vant-cli/src/compiler/compile-package.ts
@ -6,7 +6,7 @@ export async function compilePackage(isMinify: boolean) {
    const config = getPackageConfig(isMinify);

    webpack(config, (err, stats) => {
-      if (err || stats.hasErrors()) {
+      if (err || (stats && stats.hasErrors())) {
        reject();
      } else {
        resolve();
--- a/packages/vant-cli/src/compiler/compile-sfc.ts
+++ b/packages/vant-cli/src/compiler/compile-sfc.ts
@ -1,4 +1,4 @@
-import * as compiler from 'vue-template-compiler';
+import * as compiler from '@vue/compiler-sfc';
 import * as compileUtils from '@vue/component-compiler-utils';
 import hash from 'hash-sum';
 import { parse } from 'path';
@ -87,7 +87,7 @@ export async function compileSfc(filePath: string): Promise<any> {
  const descriptor = parseSfc(filePath);
  const { template, styles } = descriptor;

-  const hasScoped = styles.some(s => s.scoped);
+  const hasScoped = styles.some((s) => s.scoped);
  const scopeId = hasScoped ? `data-v-${hash(source)}` : '';

  // compile js part
@ -107,9 +107,7 @@ export async function compileSfc(filePath: string): Promise<any> {
        }

        writeFileSync(jsFilePath, script);
-        compileJs(jsFilePath)
-          .then(resolve)
-          .catch(reject);
+        compileJs(jsFilePath).then(resolve).catch(reject);
      })
    );
  }
--- a/packages/vant-cli/src/compiler/compile-site.ts
+++ b/packages/vant-cli/src/compiler/compile-site.ts
@ -24,7 +24,7 @@ function runDevServer(
  const server = new WebpackDevServer(webpack(config), config.devServer);

  // this is a hack to disable wds status log
-  (server as any).showStatus = function() {};
+  (server as any).showStatus = function () {};

  const host = get(config.devServer, 'host', 'localhost');
  server.listen(port, host, (err?: Error) => {
@ -58,7 +58,7 @@ function build() {
    const config = getSitePrdConfig();

    webpack(config, (err, stats) => {
-      if (err || stats.hasErrors()) {
+      if (err || (stats && stats.hasErrors())) {
        reject();
      } else {
        resolve();
--- a/packages/vant-cli/src/compiler/gen-package-entry.ts
+++ b/packages/vant-cli/src/compiler/gen-package-entry.ts
@ -15,7 +15,7 @@ type Options = {

 function genImports(components: string[], options: Options): string {
  return components
-    .map(name => {
+    .map((name) => {
      let path = join(SRC_DIR, name);
      if (options.pathResolver) {
        path = options.pathResolver(path);
@ -27,7 +27,7 @@ function genImports(components: string[], options: Options): string {
 }

 function genExports(names: string[]): string {
-  return names.map(name => `${name}`).join(',\n  ');
+  return names.map((name) => `${name}`).join(',\n  ');
 }

 export function genPackageEntry(options: Options) {
@ -41,24 +41,20 @@ export function genPackageEntry(options: Options) {

 const version = '${version}';

-function install(Vue) {
+function install(app) {
  const components = [
-    ${components.filter(item => !skipInstall.includes(item)).join(',\n    ')}
+    ${components.filter((item) => !skipInstall.includes(item)).join(',\n    ')}
  ];

  components.forEach(item => {
    if (item.install) {
-      Vue.use(item);
+      app.use(item);
    } else if (item.name) {
-      Vue.component(item.name, item);
+      app.component(item.name, item);
    }
  });
 }

-if (typeof window !== 'undefined' && window.Vue) {
-  install(window.Vue);
-}
-
 export {
  install,
  version,
--- a/packages/vant-cli/src/compiler/gen-site-mobile-shared.ts
+++ b/packages/vant-cli/src/compiler/gen-site-mobile-shared.ts
@ -17,8 +17,7 @@ type DemoItem = {
 };

 function genInstall() {
-  return `import Vue from 'vue';
-import PackageEntry from './package-entry';
+  return `import packageEntry from './package-entry';
 import './package-style';
 `;
 }
@ -26,7 +25,7 @@ import './package-style';
 function genImports(demos: DemoItem[]) {
  return demos
    .map(
-      item =>
+      (item) =>
        `import ${item.name} from '${removeExt(normalizePath(item.path))}';`
    )
    .join('\n');
@ -34,22 +33,22 @@ function genImports(demos: DemoItem[]) {

 function genExports(demos: DemoItem[]) {
  return `export const demos = {\n  ${demos
-    .map(item => item.name)
+    .map((item) => item.name)
    .join(',\n  ')}\n};`;
 }

 function getSetName(demos: DemoItem[]) {
  return demos
-    .map(item => `${item.name}.name = 'demo-${item.component}';`)
+    .map((item) => `${item.name}.name = 'demo-${item.component}';`)
    .join('\n');
 }

 function genConfig(demos: DemoItem[]) {
  const vantConfig = getVantConfig();
-  const demoNames = demos.map(item => decamelize(item.name));
+  const demoNames = demos.map((item) => decamelize(item.name));

  function demoFilter(nav: any[]) {
-    return nav.filter(group => {
+    return nav.filter((group) => {
      group.items = group.items.filter((item: any) =>
        demoNames.includes(item.path)
      );
@ -73,17 +72,17 @@ function genConfig(demos: DemoItem[]) {

 function genCode(components: string[]) {
  const demos = components
-    .map(component => ({
+    .map((component) => ({
      component,
      name: pascalize(component),
      path: join(SRC_DIR, component, 'demo/index.vue'),
    }))
-    .filter(item => existsSync(item.path));
+    .filter((item) => existsSync(item.path));

  return `${genInstall()}
 ${genImports(demos)}

-Vue.use(PackageEntry);
+export { packageEntry };

 ${getSetName(demos)}

--- a/packages/vant-cli/src/compiler/vant-cli-site-plugin.ts
+++ b/packages/vant-cli/src/compiler/vant-cli-site-plugin.ts
@ -10,7 +10,7 @@ import { PACKAGE_ENTRY_FILE, PACKAGE_STYLE_FILE } from '../common/constant';

 const PLUGIN_NAME = 'VantCliSitePlugin';

-export async function genSiteEntry() {
+export async function genSiteEntry(): Promise<void> {
  return new Promise((resolve, reject) => {
    genStyleDepsMap()
      .then(() => {
@ -24,7 +24,7 @@ export async function genSiteEntry() {
        genSiteDesktopShared();
        resolve();
      })
-      .catch(err => {
+      .catch((err) => {
        console.log(err);
        reject(err);
      });
--- a/packages/vant-cli/src/config/babel.config.ts
+++ b/packages/vant-cli/src/config/babel.config.ts
@ -1,6 +1,6 @@
 import { ConfigAPI } from '@babel/core';

-module.exports = function(api?: ConfigAPI) {
+module.exports = function (api?: ConfigAPI) {
  if (api) {
    api.cache.never();
  }
@ -18,12 +18,6 @@ module.exports = function(api?: ConfigAPI) {
          modules: useESModules ? false : 'commonjs',
        },
      ],
-      [
-        '@vue/babel-preset-jsx',
-        {
-          functional: false,
-        },
-      ],
      '@babel/preset-typescript',
    ],
    plugins: [
@ -43,6 +37,7 @@ module.exports = function(api?: ConfigAPI) {
        },
        'vant',
      ],
+      '@vue/babel-plugin-jsx',
      '@babel/plugin-transform-object-assign',
    ],
  };
--- a/packages/vant-cli/src/config/jest.setup.ts
+++ b/packages/vant-cli/src/config/jest.setup.ts
@ -1,6 +1,12 @@
-import Vue from 'vue';
-import 'jest-canvas-mock';
+/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
 // @ts-ignore
-import Package from '../../dist/package-entry';
+import vant from '../../dist/package-entry';
+import 'jest-canvas-mock';

-Vue.use(Package);
+declare global {
+  interface Window {
+    vant: any;
+  }
+}
+
+window.vant = vant;
--- a/packages/vant-cli/src/config/webpack.base.ts
+++ b/packages/vant-cli/src/config/webpack.base.ts
@ -1,25 +1,18 @@
 import sass from 'sass';
+import webpack from 'webpack';
 import FriendlyErrorsPlugin from '@nuxt/friendly-errors-webpack-plugin';
 import { VueLoaderPlugin } from 'vue-loader';
 import { join } from 'path';
-import { existsSync } from 'fs';
 import { consola } from '../common/logger';
+import { existsSync } from 'fs';
 import { WebpackConfig } from '../common/types';
 import {
  CWD,
-  CACHE_DIR,
  STYLE_EXTS,
  SCRIPT_EXTS,
  POSTCSS_CONFIG_FILE,
 } from '../common/constant';

-const CACHE_LOADER = {
-  loader: 'cache-loader',
-  options: {
-    cacheDirectory: CACHE_DIR,
-  },
-};
-
 const CSS_LOADERS = [
  'style-loader',
  'css-loader',
@ -34,6 +27,10 @@ const CSS_LOADERS = [
 ];

 const plugins = [
+  new webpack.DefinePlugin({
+    __VUE_OPTIONS_API__: 'true',
+    __VUE_PROD_DEVTOOLS__: 'false',
+  }),
  new VueLoaderPlugin(),
  new FriendlyErrorsPlugin({
    clearConsole: false,
@ -46,16 +43,24 @@ if (existsSync(tsconfigPath)) {
  const ForkTsCheckerPlugin = require('fork-ts-checker-webpack-plugin');
  plugins.push(
    new ForkTsCheckerPlugin({
-      formatter: 'codeframe',
-      vue: { enabled: true },
-      logger: {
-        // skip info message
-        info() {},
-        warn(message: string) {
-          consola.warn(message);
+      typescript: {
+        extensions: {
+          vue: {
+            enabled: true,
+            compiler: '@vue/compiler-sfc',
+          },
        },
-        error(message: string) {
-          consola.error(message);
+      },
+      logger: {
+        issues: {
+          // skip info message
+          log() {},
+          warn(message: string) {
+            consola.warn(message);
+          },
+          error(message: string) {
+            consola.error(message);
+          },
        },
      },
    })
@ -72,7 +77,6 @@ export const baseConfig: WebpackConfig = {
      {
        test: /\.vue$/,
        use: [
-          CACHE_LOADER,
          {
            loader: 'vue-loader',
            options: {
@ -86,7 +90,7 @@ export const baseConfig: WebpackConfig = {
      {
        test: /\.(js|ts|jsx|tsx)$/,
        exclude: /node_modules\/(?!(@vant\/cli))/,
-        use: [CACHE_LOADER, 'babel-loader'],
+        use: ['babel-loader'],
      },
      {
        test: /\.css$/,
@ -113,9 +117,15 @@ export const baseConfig: WebpackConfig = {
      },
      {
        test: /\.md$/,
-        use: [CACHE_LOADER, 'vue-loader', '@vant/markdown-loader'],
+        use: ['@vant/markdown-loader'],
      },
    ],
  },
  plugins,
+  cache: {
+    type: 'filesystem',
+    buildDependencies: {
+      config: [__filename],
+    },
+  },
 };
--- a/packages/vant-cli/src/config/webpack.package.ts
+++ b/packages/vant-cli/src/config/webpack.package.ts
@ -1,4 +1,4 @@
-import merge from 'webpack-merge';
+import { merge } from 'webpack-merge';
 import { join } from 'path';
 import { baseConfig } from './webpack.base';
 import { WebpackConfig } from '../common/types';
--- a/packages/vant-cli/src/config/webpack.site.dev.ts
+++ b/packages/vant-cli/src/config/webpack.site.dev.ts
@ -1,8 +1,8 @@
-import merge from 'webpack-merge';
 import WebpackBar from 'webpackbar';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import { get } from 'lodash';
 import { join } from 'path';
+import { merge } from 'webpack-merge';
 import { baseConfig } from './webpack.base';
 import { WebpackConfig } from '../common/types';
 import { getVantConfig, getWebpackConfig } from '../common';
--- a/packages/vant-cli/src/config/webpack.site.prd.ts
+++ b/packages/vant-cli/src/config/webpack.site.prd.ts
@ -1,4 +1,4 @@
-import merge from 'webpack-merge';
+import { merge } from 'webpack-merge';
 import { get } from 'lodash';
 import { WebpackConfig } from '../common/types';
 import { getVantConfig, getWebpackConfig } from '../common';
@ -21,8 +21,8 @@ export function getSitePrdConfig(): WebpackConfig {
      output: {
        publicPath,
        path: outputDir,
-        filename: '[name].[hash:8].js',
-        chunkFilename: 'async_[name].[chunkhash:8].js',
+        filename: '[name].[contenthash:8].js',
+        chunkFilename: 'async_[name].[contenthash:8].js',
      },
    })
  );
--- a/packages/vant-cli/src/index.ts
+++ b/packages/vant-cli/src/index.ts
@ -19,13 +19,9 @@ version(`@vant/cli ${packageJson.version}`);

 process.env.VANT_CLI_VERSION = packageJson.version;

-command('dev')
-  .description('Run webpack dev server')
-  .action(dev);
+command('dev').description('Run webpack dev server').action(dev);

-command('lint')
-  .description('Run eslint and stylelint')
-  .action(lint);
+command('lint').description('Run eslint and stylelint').action(lint);

 command('test')
  .description('Run unit tests through jest')
@ -39,9 +35,7 @@ command('test')
  )
  .action(test);

-command('clean')
-  .description('Clean all dist files')
-  .action(clean);
+command('clean').description('Clean all dist files').action(clean);

 command('build')
  .description('Compile components in production mode')
@ -50,18 +44,15 @@ command('build')

 command('release')
  .description('Compile components and release it')
+  .option('--tag <tag>', 'Release tag')
  .action(release);

 command('build-site')
  .description('Compile site in production mode')
  .action(buildSite);

-command('changelog')
-  .description('Generate changelog')
-  .action(changelog);
+command('changelog').description('Generate changelog').action(changelog);

-command('commit-lint')
-  .description('Lint commit message')
-  .action(commitLint);
+command('commit-lint').description('Lint commit message').action(commitLint);

 parse();
--- a/packages/vant-cli/yarn.lock
+++ b/packages/vant-cli/yarn.lock
--- a/packages/vant-eslint-config/index.js
+++ b/packages/vant-eslint-config/index.js
@ -1,9 +1,8 @@
 module.exports = {
  extends: [
    'airbnb-base',
-    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
-    'plugin:vue/recommended',
+    'plugin:vue/vue3-recommended',
    'prettier',
    'prettier/vue',
  ],
@ -57,12 +56,13 @@ module.exports = {
    'vue/component-name-in-template-casing': ['error', 'kebab-case'],
    // typescript-eslint
    '@typescript-eslint/camelcase': 'off',
-    '@typescript-eslint/ban-ts-ignore': 'off',
+    '@typescript-eslint/ban-ts-comment': 'off',
    '@typescript-eslint/no-unused-vars': 'error',
    '@typescript-eslint/no-var-requires': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/no-empty-function': 'off',
    '@typescript-eslint/no-non-null-assertion': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
  },
 };
--- a/packages/vant-eslint-config/package.json
+++ b/packages/vant-eslint-config/package.json
@ -1,25 +1,26 @@
 {
  "name": "@vant/eslint-config",
-  "version": "2.2.3",
+  "version": "3.0.0-beta.0",
  "description": "eslint config of vant",
  "main": "index.js",
  "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
  },
  "license": "MIT",
  "repository": "https://github.com/youzan/vant/tree/dev/packages/vant-eslint-config",
  "peerDependencies": {
-    "eslint": "^6.0.0"
+    "eslint": "^7.7.0"
  },
  "dependencies": {
-    "@typescript-eslint/eslint-plugin": "^2.28.0",
-    "@typescript-eslint/parser": "^2.28.0",
-    "eslint-config-airbnb-base": "^14.1.0",
-    "eslint-config-prettier": "^6.10.1",
-    "eslint-plugin-import": "^2.20.2",
-    "eslint-plugin-vue": "^6.2.2"
+    "@typescript-eslint/eslint-plugin": "^3.9.1",
+    "@typescript-eslint/parser": "^3.9.1",
+    "eslint-config-airbnb-base": "^14.2.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-vue": "^7.0.1"
  },
  "devDependencies": {
-    "eslint": "^6.8.0"
+    "eslint": "^7.7.0"
  }
 }
--- a/packages/vant-eslint-config/yarn.lock
+++ b/packages/vant-eslint-config/yarn.lock
--- a/packages/vant-markdown-loader/package.json
+++ b/packages/vant-markdown-loader/package.json
@ -1,19 +1,20 @@
 {
  "name": "@vant/markdown-loader",
-  "version": "2.3.0",
+  "version": "3.0.0",
  "description": "Simple and fast vue markdown loader",
  "main": "src/index.js",
  "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
  },
  "license": "MIT",
  "repository": "https://github.com/youzan/vant/tree/dev/packages/vant-markdown-loader",
  "dependencies": {
-    "front-matter": "^3.0.2",
-    "highlight.js": "^9.17.1",
-    "loader-utils": "^1.2.3",
-    "markdown-it": "^10.0.0",
-    "markdown-it-anchor": "^5.2.5",
-    "transliteration": "^2.1.7"
+    "front-matter": "^4.0.2",
+    "highlight.js": "^10.3.1",
+    "loader-utils": "^2.0.0",
+    "markdown-it": "^12.0.1",
+    "markdown-it-anchor": "^6.0.0",
+    "transliteration": "^2.1.11"
  }
 }
--- a/packages/vant-markdown-loader/src/index.js
+++ b/packages/vant-markdown-loader/src/index.js
@ -12,16 +12,11 @@ function wrapper(content) {
  content = escape(content);

  return `
-<template>
-  <section v-html="content" v-once />
-</template>
+import { h } from 'vue';
+
+const content = unescape(\`${content}\`);

-<script>
 export default {
-  created() {
-    this.content = unescape(\`${content}\`);
-  },
-
  mounted() {
    const anchors = [].slice.call(this.$el.querySelectorAll('h2, h3, h4, h5'));

@ -39,9 +34,12 @@ export default {
        })
      }
    }
+  },
+
+  render() {
+    return h('section', { innerHTML: content });
  }
 };
-</script>
 `;
 }

@ -53,7 +51,7 @@ const parser = new MarkdownIt({
  slugify,
 });

-module.exports = function(source) {
+module.exports = function (source) {
  let options = loaderUtils.getOptions(this) || {};
  this.cacheable && this.cacheable();

--- a/packages/vant-markdown-loader/yarn.lock
+++ b/packages/vant-markdown-loader/yarn.lock
@ -2,17 +2,17 @@
 # yarn lockfile v1


-ansi-regex@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.npm.taobao.org/ansi-regex/download/ansi-regex-4.1.0.tgz#8b9f8f08cf1acb843756a839ca8c7e3168c51997"
-  integrity sha1-i5+PCM8ay4Q3Vqg5yox+MWjFGZc=
+ansi-regex@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npm.taobao.org/ansi-regex/download/ansi-regex-5.0.0.tgz#388539f55179bf39339c81af30a654d69f87cb75"
+  integrity sha1-OIU59VF5vzkznIGvMKZU1p+Hy3U=

-ansi-styles@^3.2.0:
-  version "3.2.1"
-  resolved "https://registry.npm.taobao.org/ansi-styles/download/ansi-styles-3.2.1.tgz?cache=0&sync_timestamp=1573557628456&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fansi-styles%2Fdownload%2Fansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
-  integrity sha1-QfuyAkPlCxK+DwS43tvwdSDOhB0=
+ansi-styles@^4.0.0:
+  version "4.3.0"
+  resolved "https://registry.npm.taobao.org/ansi-styles/download/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
+  integrity sha1-7dgDYornHATIWuegkG7a00tkiTc=
  dependencies:
-    color-convert "^1.9.0"
+    color-convert "^2.0.1"

 argparse@^1.0.7:
  version "1.0.10"
@ -21,6 +21,11 @@ argparse@^1.0.7:
  dependencies:
    sprintf-js "~1.0.2"

+argparse@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npm.taobao.org/argparse/download/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
+  integrity sha1-JG9Q88p4oyQPbJl+ipvR6sSeSzg=
+
 big.js@^5.2.2:
  version "5.2.2"
  resolved "https://registry.npm.taobao.org/big.js/download/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
@ -31,46 +36,41 @@ camelcase@^5.0.0:
  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
  integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==

-cliui@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.npm.taobao.org/cliui/download/cliui-5.0.0.tgz#deefcfdb2e800784aa34f46fa08e06851c7bbbc5"
-  integrity sha1-3u/P2y6AB4SqNPRvoI4GhRx7u8U=
+cliui@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.npm.taobao.org/cliui/download/cliui-6.0.0.tgz?cache=0&sync_timestamp=1602861405708&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcliui%2Fdownload%2Fcliui-6.0.0.tgz#511d702c0c4e41ca156d7d0e96021f23e13225b1"
+  integrity sha1-UR1wLAxOQcoVbX0OlgIfI+EyJbE=
  dependencies:
-    string-width "^3.1.0"
-    strip-ansi "^5.2.0"
-    wrap-ansi "^5.1.0"
+    string-width "^4.2.0"
+    strip-ansi "^6.0.0"
+    wrap-ansi "^6.2.0"

-color-convert@^1.9.0:
-  version "1.9.3"
-  resolved "https://registry.npm.taobao.org/color-convert/download/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
-  integrity sha1-u3GFBpDh8TZWfeYp0tVHHe2kweg=
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
+  integrity sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=
  dependencies:
-    color-name "1.1.3"
+    color-name "~1.1.4"

-color-name@1.1.3:
-  version "1.1.3"
-  resolved "https://registry.npm.taobao.org/color-name/download/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
-  integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
-
-commander@~2.20.3:
-  version "2.20.3"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
-  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
+color-name@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+  integrity sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=

 decamelize@^1.2.0:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
  integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=

-emoji-regex@^7.0.1:
-  version "7.0.3"
-  resolved "https://registry.npm.taobao.org/emoji-regex/download/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"
-  integrity sha1-kzoEBShgyF6DwSJHnEdIqOTHIVY=
+emoji-regex@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.npm.taobao.org/emoji-regex/download/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
+  integrity sha1-6Bj9ac5cz8tARZT4QpY79TFkzDc=

-emojis-list@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.npm.taobao.org/emojis-list/download/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
-  integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k=
+emojis-list@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npm.taobao.org/emojis-list/download/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
+  integrity sha1-VXBmIEatKeLpFucariYKvf9Pang=

 entities@~2.0.0:
  version "2.0.0"
@ -82,17 +82,18 @@ esprima@^4.0.0:
  resolved "https://registry.npm.taobao.org/esprima/download/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
  integrity sha1-E7BM2z5sXRnfkatph6hpVhmwqnE=

-find-up@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npm.taobao.org/find-up/download/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73"
-  integrity sha1-SRafHXmTQwZG2mHsxa41XCHJe3M=
+find-up@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npm.taobao.org/find-up/download/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
+  integrity sha1-l6/n1s3AvFkoWEt8jXsW6KmqXRk=
  dependencies:
-    locate-path "^3.0.0"
+    locate-path "^5.0.0"
+    path-exists "^4.0.0"

-front-matter@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.npm.taobao.org/front-matter/download/front-matter-3.0.2.tgz#2401cd05fcf22bd0de48a104ffb4efb1ff5c8465"
-  integrity sha1-JAHNBfzyK9DeSKEE/7Tvsf9chGU=
+front-matter@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.npm.taobao.org/front-matter/download/front-matter-4.0.2.tgz#b14e54dc745cfd7293484f3210d15ea4edd7f4d5"
+  integrity sha1-sU5U3HRc/XKTSE8yENFepO3X9NU=
  dependencies:
    js-yaml "^3.13.1"

@ -101,28 +102,15 @@ get-caller-file@^2.0.1:
  resolved "https://registry.npm.taobao.org/get-caller-file/download/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
  integrity sha1-T5RBKoLbMvNuOwuXQfipf+sDH34=

-handlebars@^4.5.3:
-  version "4.5.3"
-  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.5.3.tgz#5cf75bd8714f7605713511a56be7c349becb0482"
-  integrity sha512-3yPecJoJHK/4c6aZhSvxOyG4vJKDshV36VHp0iVCDVh7o9w2vwi3NSnL2MMPj3YdduqaBcu7cGbggJQM0br9xA==
-  dependencies:
-    neo-async "^2.6.0"
-    optimist "^0.6.1"
-    source-map "^0.6.1"
-  optionalDependencies:
-    uglify-js "^3.1.4"
+highlight.js@^10.3.1:
+  version "10.3.1"
+  resolved "https://registry.npm.taobao.org/highlight.js/download/highlight.js-10.3.1.tgz#3ca6bf007377faae347e8135ff25900aac734b9a"
+  integrity sha1-PKa/AHN3+q40foE1/yWQCqxzS5o=

-highlight.js@^9.17.1:
-  version "9.17.1"
-  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.17.1.tgz#14a4eded23fd314b05886758bb906e39dd627f9a"
-  integrity sha512-TA2/doAur5Ol8+iM3Ov7qy3jYcr/QiJ2eDTdRF4dfbjG7AaaB99J5G+zSl11ljbl6cIcahgPY6SKb3sC3EJ0fw==
-  dependencies:
-    handlebars "^4.5.3"
-
-is-fullwidth-code-point@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npm.taobao.org/is-fullwidth-code-point/download/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
-  integrity sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=
+is-fullwidth-code-point@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npm.taobao.org/is-fullwidth-code-point/download/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
+  integrity sha1-8Rb4Bk/pCz94RKOJl8C3UFEmnx0=

 js-yaml@^3.13.1:
  version "3.13.1"
@ -132,50 +120,49 @@ js-yaml@^3.13.1:
    argparse "^1.0.7"
    esprima "^4.0.0"

-json5@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.npm.taobao.org/json5/download/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"
-  integrity sha1-d5+wAYYE+oVOrL9iUhgNg1Q+Pb4=
+json5@^2.1.2:
+  version "2.1.3"
+  resolved "https://registry.npm.taobao.org/json5/download/json5-2.1.3.tgz?cache=0&sync_timestamp=1586045666090&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjson5%2Fdownload%2Fjson5-2.1.3.tgz#c9b0f7fa9233bfe5807fe66fcf3a5617ed597d43"
+  integrity sha1-ybD3+pIzv+WAf+ZvzzpWF+1ZfUM=
  dependencies:
-    minimist "^1.2.0"
+    minimist "^1.2.5"

-linkify-it@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.npm.taobao.org/linkify-it/download/linkify-it-2.2.0.tgz#e3b54697e78bf915c70a38acd78fd09e0058b1cf"
-  integrity sha1-47VGl+eL+RXHCjis14/QngBYsc8=
+linkify-it@^3.0.1:
+  version "3.0.2"
+  resolved "https://registry.npm.taobao.org/linkify-it/download/linkify-it-3.0.2.tgz#f55eeb8bc1d3ae754049e124ab3bb56d97797fb8"
+  integrity sha1-9V7ri8HTrnVASeEkqzu1bZd5f7g=
  dependencies:
    uc.micro "^1.0.1"

-loader-utils@^1.2.3:
-  version "1.2.3"
-  resolved "https://registry.npm.taobao.org/loader-utils/download/loader-utils-1.2.3.tgz#1ff5dc6911c9f0a062531a4c04b609406108c2c7"
-  integrity sha1-H/XcaRHJ8KBiUxpMBLYJQGEIwsc=
+loader-utils@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz#e4cace5b816d425a166b5f097e10cd12b36064b0"
+  integrity sha1-5MrOW4FtQloWa18JfhDNErNgZLA=
  dependencies:
    big.js "^5.2.2"
-    emojis-list "^2.0.0"
-    json5 "^1.0.1"
+    emojis-list "^3.0.0"
+    json5 "^2.1.2"

-locate-path@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npm.taobao.org/locate-path/download/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e"
-  integrity sha1-2+w7OrdZdYBxtY/ln8QYca8hQA4=
+locate-path@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npm.taobao.org/locate-path/download/locate-path-5.0.0.tgz?cache=0&sync_timestamp=1597081764621&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flocate-path%2Fdownload%2Flocate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
+  integrity sha1-Gvujlq/WdqbUJQTQpno6frn2KqA=
  dependencies:
-    p-locate "^3.0.0"
-    path-exists "^3.0.0"
+    p-locate "^4.1.0"

-markdown-it-anchor@^5.2.5:
-  version "5.2.5"
-  resolved "https://registry.npm.taobao.org/markdown-it-anchor/download/markdown-it-anchor-5.2.5.tgz?cache=0&sync_timestamp=1571233383580&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmarkdown-it-anchor%2Fdownload%2Fmarkdown-it-anchor-5.2.5.tgz#dbf13cfcdbffd16a510984f1263e1d479a47d27a"
-  integrity sha1-2/E8/Nv/0WpRCYTxJj4dR5pH0no=
+markdown-it-anchor@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.npm.taobao.org/markdown-it-anchor/download/markdown-it-anchor-6.0.0.tgz#2ec2554fa4d065f2d1ca2422a50c14c10cf67c2a"
+  integrity sha1-LsJVT6TQZfLRyiQipQwUwQz2fCo=

-markdown-it@^10.0.0:
-  version "10.0.0"
-  resolved "https://registry.npm.taobao.org/markdown-it/download/markdown-it-10.0.0.tgz#abfc64f141b1722d663402044e43927f1f50a8dc"
-  integrity sha1-q/xk8UGxci1mNAIETkOSfx9QqNw=
+markdown-it@^12.0.1:
+  version "12.0.1"
+  resolved "https://registry.npm.taobao.org/markdown-it/download/markdown-it-12.0.1.tgz?cache=0&sync_timestamp=1603111192383&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmarkdown-it%2Fdownload%2Fmarkdown-it-12.0.1.tgz#29e617276869614d6b0b45a90df39b8e7f58c53c"
+  integrity sha1-KeYXJ2hpYU1rC0WpDfObjn9YxTw=
  dependencies:
-    argparse "^1.0.7"
+    argparse "^2.0.1"
    entities "~2.0.0"
-    linkify-it "^2.0.0"
+    linkify-it "^3.0.1"
    mdurl "^1.0.1"
    uc.micro "^1.0.5"

@ -184,52 +171,34 @@ mdurl@^1.0.1:
  resolved "https://registry.npm.taobao.org/mdurl/download/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
  integrity sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=

-minimist@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.npm.taobao.org/minimist/download/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
-  integrity sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=
+minimist@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.npm.taobao.org/minimist/download/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
+  integrity sha1-Z9ZgFLZqaoqqDAg8X9WN9OTpdgI=

-minimist@~0.0.1:
-  version "0.0.10"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
-  integrity sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=
-
-neo-async@^2.6.0:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c"
-  integrity sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==
-
-optimist@^0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686"
-  integrity sha1-2j6nRob6IaGaERwybpDrFaAZZoY=
-  dependencies:
-    minimist "~0.0.1"
-    wordwrap "~0.0.2"
-
-p-limit@^2.0.0:
-  version "2.2.1"
-  resolved "https://registry.npm.taobao.org/p-limit/download/p-limit-2.2.1.tgz#aa07a788cc3151c939b5131f63570f0dd2009537"
-  integrity sha1-qgeniMwxUck5tRMfY1cPDdIAlTc=
+p-limit@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.npm.taobao.org/p-limit/download/p-limit-2.3.0.tgz?cache=0&sync_timestamp=1594559733441&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fp-limit%2Fdownload%2Fp-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
+  integrity sha1-PdM8ZHohT9//2DWTPrCG2g3CHbE=
  dependencies:
    p-try "^2.0.0"

-p-locate@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npm.taobao.org/p-locate/download/p-locate-3.0.0.tgz#322d69a05c0264b25997d9f40cd8a891ab0064a4"
-  integrity sha1-Mi1poFwCZLJZl9n0DNiokasAZKQ=
+p-locate@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npm.taobao.org/p-locate/download/p-locate-4.1.0.tgz#a3428bb7088b3a60292f66919278b7c297ad4f07"
+  integrity sha1-o0KLtwiLOmApL2aRkni3wpetTwc=
  dependencies:
-    p-limit "^2.0.0"
+    p-limit "^2.2.0"

 p-try@^2.0.0:
  version "2.2.0"
  resolved "https://registry.npm.taobao.org/p-try/download/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
  integrity sha1-yyhoVA4xPWHeWPr741zpAE1VQOY=

-path-exists@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npm.taobao.org/path-exists/download/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
-  integrity sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=
+path-exists@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npm.taobao.org/path-exists/download/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
+  integrity sha1-UTvb4tO5XXdi6METfvoZXGxhtbM=

 require-directory@^2.1.1:
  version "2.1.1"
@ -246,97 +215,79 @@ set-blocking@^2.0.0:
  resolved "https://registry.npm.taobao.org/set-blocking/download/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
  integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=

-source-map@^0.6.1, source-map@~0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
-  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
-
 sprintf-js@~1.0.2:
  version "1.0.3"
  resolved "https://registry.npm.taobao.org/sprintf-js/download/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
  integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=

-string-width@^3.0.0, string-width@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.npm.taobao.org/string-width/download/string-width-3.1.0.tgz#22767be21b62af1081574306f69ac51b62203961"
-  integrity sha1-InZ74htirxCBV0MG9prFG2IgOWE=
+string-width@^4.1.0, string-width@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.npm.taobao.org/string-width/download/string-width-4.2.0.tgz#952182c46cc7b2c313d1596e623992bd163b72b5"
+  integrity sha1-lSGCxGzHssMT0VluYjmSvRY7crU=
  dependencies:
-    emoji-regex "^7.0.1"
-    is-fullwidth-code-point "^2.0.0"
-    strip-ansi "^5.1.0"
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.0"

-strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.npm.taobao.org/strip-ansi/download/strip-ansi-5.2.0.tgz?cache=0&sync_timestamp=1573280549549&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fstrip-ansi%2Fdownload%2Fstrip-ansi-5.2.0.tgz#8c9a536feb6afc962bdfa5b104a5091c1ad9c0ae"
-  integrity sha1-jJpTb+tq/JYr36WxBKUJHBrZwK4=
+strip-ansi@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.npm.taobao.org/strip-ansi/download/strip-ansi-6.0.0.tgz?cache=0&sync_timestamp=1573280577145&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fstrip-ansi%2Fdownload%2Fstrip-ansi-6.0.0.tgz#0b1571dd7669ccd4f3e06e14ef1eed26225ae532"
+  integrity sha1-CxVx3XZpzNTz4G4U7x7tJiJa5TI=
  dependencies:
-    ansi-regex "^4.1.0"
+    ansi-regex "^5.0.0"

-transliteration@^2.1.7:
-  version "2.1.7"
-  resolved "https://registry.npm.taobao.org/transliteration/download/transliteration-2.1.7.tgz#43fbd2e259777516a667a76e1d11aa9f85264413"
-  integrity sha1-Q/vS4ll3dRamZ6duHRGqn4UmRBM=
+transliteration@^2.1.11:
+  version "2.1.11"
+  resolved "https://registry.npm.taobao.org/transliteration/download/transliteration-2.1.11.tgz#84a274349525cf8bb9f09d5fcd28c07c66ee6940"
+  integrity sha1-hKJ0NJUlz4u58J1fzSjAfGbuaUA=
  dependencies:
-    yargs "^14.0.0"
+    yargs "^15.3.1"

 uc.micro@^1.0.1, uc.micro@^1.0.5:
  version "1.0.6"
  resolved "https://registry.npm.taobao.org/uc.micro/download/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
  integrity sha1-nEEagCpAmpH8bPdAgbq6NLJEmaw=

-uglify-js@^3.1.4:
-  version "3.7.2"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.7.2.tgz#cb1a601e67536e9ed094a92dd1e333459643d3f9"
-  integrity sha512-uhRwZcANNWVLrxLfNFEdltoPNhECUR3lc+UdJoG9CBpMcSnKyWA94tc3eAujB1GcMY5Uwq8ZMp4qWpxWYDQmaA==
-  dependencies:
-    commander "~2.20.3"
-    source-map "~0.6.1"
-
 which-module@^2.0.0:
  version "2.0.0"
  resolved "https://registry.npm.taobao.org/which-module/download/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
  integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=

-wordwrap@~0.0.2:
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
-  integrity sha1-o9XabNXAvAAI03I0u68b7WMFkQc=
-
-wrap-ansi@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.npm.taobao.org/wrap-ansi/download/wrap-ansi-5.1.0.tgz#1fd1f67235d5b6d0fee781056001bfb694c03b09"
-  integrity sha1-H9H2cjXVttD+54EFYAG/tpTAOwk=
+wrap-ansi@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.npm.taobao.org/wrap-ansi/download/wrap-ansi-6.2.0.tgz#e9393ba07102e6c91a3b221478f0257cd2856e53"
+  integrity sha1-6Tk7oHEC5skaOyIUePAlfNKFblM=
  dependencies:
-    ansi-styles "^3.2.0"
-    string-width "^3.0.0"
-    strip-ansi "^5.0.0"
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"

 y18n@^4.0.0:
  version "4.0.0"
  resolved "https://registry.npm.taobao.org/y18n/download/y18n-4.0.0.tgz#95ef94f85ecc81d007c264e190a120f0a3c8566b"
  integrity sha1-le+U+F7MgdAHwmThkKEg8KPIVms=

-yargs-parser@^15.0.0:
-  version "15.0.1"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-15.0.1.tgz#54786af40b820dcb2fb8025b11b4d659d76323b3"
-  integrity sha512-0OAMV2mAZQrs3FkNpDQcBk1x5HXb8X4twADss4S0Iuk+2dGnLOE/fRHrsYm542GduMveyA77OF4wrNJuanRCWw==
+yargs-parser@^18.1.2:
+  version "18.1.3"
+  resolved "https://registry.npm.taobao.org/yargs-parser/download/yargs-parser-18.1.3.tgz?cache=0&sync_timestamp=1602861427247&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fyargs-parser%2Fdownload%2Fyargs-parser-18.1.3.tgz#be68c4975c6b2abf469236b0c870362fab09a7b0"
+  integrity sha1-vmjEl1xrKr9GkjawyHA2L6sJp7A=
  dependencies:
    camelcase "^5.0.0"
    decamelize "^1.2.0"

-yargs@^14.0.0:
-  version "14.2.2"
-  resolved "https://registry.npm.taobao.org/yargs/download/yargs-14.2.2.tgz#2769564379009ff8597cdd38fba09da9b493c4b5"
-  integrity sha1-J2lWQ3kAn/hZfN04+6CdqbSTxLU=
+yargs@^15.3.1:
+  version "15.4.1"
+  resolved "https://registry.npm.taobao.org/yargs/download/yargs-15.4.1.tgz?cache=0&sync_timestamp=1602805705179&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fyargs%2Fdownload%2Fyargs-15.4.1.tgz#0d87a16de01aee9d8bec2bfbf74f67851730f4f8"
+  integrity sha1-DYehbeAa7p2L7Cv7909nhRcw9Pg=
  dependencies:
-    cliui "^5.0.0"
+    cliui "^6.0.0"
    decamelize "^1.2.0"
-    find-up "^3.0.0"
+    find-up "^4.1.0"
    get-caller-file "^2.0.1"
    require-directory "^2.1.1"
    require-main-filename "^2.0.0"
    set-blocking "^2.0.0"
-    string-width "^3.0.0"
+    string-width "^4.2.0"
    which-module "^2.0.0"
    y18n "^4.0.0"
-    yargs-parser "^15.0.0"
+    yargs-parser "^18.1.2"
--- a/packages/vant-markdown-vetur/src/parser.ts
+++ b/packages/vant-markdown-vetur/src/parser.ts
@ -27,7 +27,7 @@ function readLine(input: string) {
 function splitTableLine(line: string) {
  line = line.replace('\\|', 'JOIN');

-  const items = line.split('|').map(item => item.trim().replace('JOIN', '|'));
+  const items = line.split('|').map((item) => item.trim().replace('JOIN', '|'));

  // remove pipe character on both sides
  items.pop();
--- a/packages/vant-use/.vuepress/config.js
+++ b/packages/vant-use/.vuepress/config.js
@ -0,0 +1,45 @@
+module.exports = {
+  base: '/vant/vant-use/',
+  title: 'Vant Use',
+  dest: 'dist',
+  head: [['link', { rel: 'icon', href: 'https://img.yzcdn.cn/vant/logo.png' }]],
+  patterns: ['**/*.md', '!**/node_modules'],
+  themeConfig: {
+    nav: [
+      {
+        text: 'Github',
+        link: 'https://github.com/youzan/vant/tree/next/packages/vant-use',
+      },
+    ],
+    sidebarDepth: 0,
+    sidebar: [
+      {
+        title: '介绍',
+        collapsable: false,
+        children: ['/', 'changelog'],
+      },
+      {
+        title: 'State',
+        collapsable: false,
+        children: ['/src/useToggle/', '/src/useCountDown/'],
+      },
+      {
+        title: 'DOM',
+        collapsable: false,
+        children: [
+          '/src/useRect/',
+          '/src/useClickAway/',
+          '/src/useEventListener/',
+          '/src/usePageVisibility/',
+          '/src/useScrollParent/',
+          '/src/useWindowSize/',
+        ],
+      },
+      {
+        title: 'Enhanced',
+        collapsable: false,
+        children: ['/src/useRelation/'],
+      },
+    ],
+  },
+};
--- a/packages/vant-use/.vuepress/styles/font.styl
+++ b/packages/vant-use/.vuepress/styles/font.styl
@ -0,0 +1,163 @@
+/* cyrillic-ext */
+@font-face {
+  font-weight: 400;
+  font-family: 'Open Sans';
+  font-style: normal;
+  src: local('Open Sans Regular'), local('OpenSans-Regular'),
+    url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFWJ0bf8pkAp6a.woff2)
+      format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+    U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+  font-weight: 400;
+  font-family: 'Open Sans';
+  font-style: normal;
+  src: local('Open Sans Regular'), local('OpenSans-Regular'),
+    url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFUZ0bf8pkAp6a.woff2)
+      format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* greek-ext */
+@font-face {
+  font-weight: 400;
+  font-family: 'Open Sans';
+  font-style: normal;
+  src: local('Open Sans Regular'), local('OpenSans-Regular'),
+    url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFWZ0bf8pkAp6a.woff2)
+      format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+
+/* greek */
+@font-face {
+  font-weight: 400;
+  font-family: 'Open Sans';
+  font-style: normal;
+  src: local('Open Sans Regular'), local('OpenSans-Regular'),
+    url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFVp0bf8pkAp6a.woff2)
+      format('woff2');
+  unicode-range: U+0370-03FF;
+}
+
+/* vietnamese */
+@font-face {
+  font-weight: 400;
+  font-family: 'Open Sans';
+  font-style: normal;
+  src: local('Open Sans Regular'), local('OpenSans-Regular'),
+    url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFWp0bf8pkAp6a.woff2)
+      format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
+    U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+
+/* latin-ext */
+@font-face {
+  font-weight: 400;
+  font-family: 'Open Sans';
+  font-style: normal;
+  src: local('Open Sans Regular'), local('OpenSans-Regular'),
+    url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFW50bf8pkAp6a.woff2)
+      format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-weight: 400;
+  font-family: 'Open Sans';
+  font-style: normal;
+  src: local('Open Sans Regular'), local('OpenSans-Regular'),
+    url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFVZ0bf8pkAg.woff2)
+      format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}
+
+/* cyrillic-ext */
+@font-face {
+  font-weight: 600;
+  font-family: 'Open Sans';
+  font-style: normal;
+  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
+    url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOX-hpKKSTj5PW.woff2)
+      format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+    U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+  font-weight: 600;
+  font-family: 'Open Sans';
+  font-style: normal;
+  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
+    url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOVuhpKKSTj5PW.woff2)
+      format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* greek-ext */
+@font-face {
+  font-weight: 600;
+  font-family: 'Open Sans';
+  font-style: normal;
+  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
+    url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOXuhpKKSTj5PW.woff2)
+      format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+
+/* greek */
+@font-face {
+  font-weight: 600;
+  font-family: 'Open Sans';
+  font-style: normal;
+  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
+    url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOUehpKKSTj5PW.woff2)
+      format('woff2');
+  unicode-range: U+0370-03FF;
+}
+
+/* vietnamese */
+@font-face {
+  font-weight: 600;
+  font-family: 'Open Sans';
+  font-style: normal;
+  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
+    url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOXehpKKSTj5PW.woff2)
+      format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
+    U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+
+/* latin-ext */
+@font-face {
+  font-weight: 600;
+  font-family: 'Open Sans';
+  font-style: normal;
+  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
+    url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOXOhpKKSTj5PW.woff2)
+      format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-weight: 600;
+  font-family: 'Open Sans';
+  font-style: normal;
+  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
+    url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOUuhpKKSTjw.woff2)
+      format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}
--- a/packages/vant-use/.vuepress/styles/index.styl
+++ b/packages/vant-use/.vuepress/styles/index.styl
@ -0,0 +1,25 @@
+@import './font.styl' 
+
+body {
+  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
+    Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui',
+    'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+
+.theme-default-content pre code {
+  font-size: 14px;
+  font-family: 'Source Code Pro', 'Monaco', 'Inconsolata', monospace;
+  line-height: 26px;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  -webkit-font-smoothing: auto;
+}
+
+em {
+  color: #4fc08d;
+  font-size: 14px;
+  font-family: 'Source Code Pro', 'Monaco', 'Inconsolata', monospace;
+  font-style: normal;
+  -webkit-font-smoothing: auto;
+}
--- a/packages/vant-use/.vuepress/styles/palette.styl
+++ b/packages/vant-use/.vuepress/styles/palette.styl
@ -0,0 +1,2 @@
+$accentColor = #4fc08d;
+
--- a/packages/vant-use/README.md
+++ b/packages/vant-use/README.md
@ -0,0 +1,33 @@
+# Vant Use
+
+Vant Use 是 Vant 团队提供的 Vue Composition API 库。
+
+## 特性
+
+- 从 Vant 实际应用场景中沉淀
+- 基于 TypeScript 开发，提供完备的类型定义
+- 完善的单元测试，提供稳定性保障
+
+## 安装
+
+如果项目中已经安装了 Vant 3，则无须手动安装 Vant Use。
+
+如果项目中未使用 Vant，可以通过 `npm` 或 `yarn` 手动安装 Vant Use。
+
+```bash
+# 通过 npm 安装
+npm i @vant/use -S
+
+# 通过 yarn 安装
+yarn add @vant/use
+```
+
+## 贡献代码
+
+修改代码请阅读我们的[开发指南](https://youzan.github.io/vant/#/zh-CN/contribution)。
+
+使用过程中发现任何问题都可以提 [Issue](https://github.com/youzan/vant/issues) 给我们，当然，我们也非常欢迎你给我们发 [PR](https://github.com/youzan/vant/pulls)。
+
+## 开源协议
+
+本项目基于 [MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89) 协议，请自由地享受和参与开源。
--- a/packages/vant-use/changelog.md
+++ b/packages/vant-use/changelog.md
@ -0,0 +1,54 @@
+# 更新日志
+
+### v0.0.8
+
+`2020-10-09`
+
+- 改进类型定义
+
+### v0.0.7
+
+`2020-10-06`
+
+- 修复 `useCountDown` 未被导出的问题
+
+### v0.0.6
+
+`2020-10-06`
+
+- 导出所有类型定义
+
+### v0.0.5
+
+`2020-10-06`
+
+- 新增 `useCountDown` 方法
+
+### v0.0.4
+
+`2020-10-05`
+
+- 新增 `useRect` 方法
+
+### v0.0.3
+
+`2020-09-27`
+
+- 新增 `useParent` 方法
+- 新增 `useChildren` 方法
+
+### v0.0.2
+
+`2020-09-15`
+
+- 新增 `useWindowSize` 方法
+
+### v0.0.1
+
+`2020-09-15`
+
+- 新增 `useClickAway` 方法
+- 新增 `useEventListener` 方法
+- 新增 `usePageVisibility` 方法
+- 新增 `useScrollParent` 方法
+- 新增 `useToggle` 方法
--- a/packages/vant-use/package.json
+++ b/packages/vant-use/package.json
@ -0,0 +1,35 @@
+{
+  "name": "@vant/use",
+  "version": "0.0.9",
+  "description": "Vant Composition API",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "typings": "es/index.d.ts",
+  "sideEffects": false,
+  "scripts": {
+    "dev": "tsc -m esNext --outDir es --watch",
+    "clean": "rm -rf ./es && rm -rf ./lib",
+    "build": "yarn clean && tsc && tsc -m esNext --outDir es",
+    "release": "yarn build && release-it",
+    "docs:dev": "vuepress dev",
+    "docs:build": "vuepress build && gh-pages -d dist --add --dest vant-use"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "license": "MIT",
+  "repository": "https://github.com/youzan/vant/tree/dev/packages/vant-use",
+  "devDependencies": {
+    "gh-pages": "^3.1.0",
+    "release-it": "^14.0.2",
+    "typescript": "^4.0.2",
+    "vuepress": "^1.6.0"
+  },
+  "release-it": {
+    "git": {
+      "tag": false,
+      "commitMessage": "chore: release @vant/use@${version}"
+    }
+  }
+}
--- a/packages/vant-use/src/index.ts
+++ b/packages/vant-use/src/index.ts
@ -0,0 +1,10 @@
+export * from './useRect';
+export * from './useToggle';
+export * from './useCountDown';
+export * from './useClickAway';
+export * from './useWindowSize';
+export * from './useScrollParent';
+export * from './useEventListener';
+export * from './usePageVisibility';
+export * from './useRelation';
+export * from './utils';
--- a/packages/vant-use/src/package.json
+++ b/packages/vant-use/src/package.json
@ -0,0 +1,7 @@
+{
+  "private": true,
+  "license": "MIT",
+  "devDependencies": {
+    "vue": "^3.0.0"
+  }
+}
--- a/packages/vant-use/src/useClickAway/README.md
+++ b/packages/vant-use/src/useClickAway/README.md
@ -0,0 +1,85 @@
+# useClickAway
+
+监听点击元素外部的事件。
+
+## 代码演示
+
+### 基本用法
+
+```html
+<div ref="root" />
+```
+
+```js
+import { ref } from 'vue';
+import { useClickAway } from '@vant/use';
+
+export default {
+  setup() {
+    const root = ref();
+    useClickAway(root, () => {
+      console.log('click outside!');
+    });
+
+    return { root };
+  },
+};
+```
+
+### 自定义事件
+
+通过 `eventName` 选项可以自定义需要监听的事件类型。
+
+```html
+<div ref="root" />
+```
+
+```js
+import { ref } from 'vue';
+import { useClickAway } from '@vant/use';
+
+export default {
+  setup() {
+    const root = ref();
+    useClickAway(
+      root,
+      () => {
+        console.log('touch outside!');
+      },
+      { eventName: 'touchstart' }
+    );
+
+    return { root };
+  },
+};
+```
+
+## API
+
+### 类型定义
+
+```ts
+function useClickAway(
+  target: Element | Ref<Element | undefined>,
+  listener: EventListener,
+  options?: Options
+): void;
+
+type Options = {
+  eventName?: string;
+};
+```
+
+### 参数
+
+| 参数     | 说明                     | 类型                       | 默认值 |
+| -------- | ------------------------ | -------------------------- | ------ |
+| target   | 绑定事件的元素           | _Element \| Ref\<Element>_ | -      |
+| listener | 点击外部时触发的回调函数 | _EventListener_            | -      |
+| options  | 可选的配置项             | _Options_                  | 见下表 |
+
+### Options
+
+| 参数      | 说明           | 类型     | 默认值  |
+| --------- | -------------- | -------- | ------- |
+| eventName | 监听的事件类型 | _string_ | `click` |
--- a/packages/vant-use/src/useClickAway/index.ts
+++ b/packages/vant-use/src/useClickAway/index.ts
@ -0,0 +1,28 @@
+import { Ref, unref } from 'vue';
+import { inBrowser } from '../utils';
+import { useEventListener } from '../useEventListener';
+
+export type UseClickAwayOptions = {
+  eventName?: string;
+};
+
+export function useClickAway(
+  target: Element | Ref<Element | undefined>,
+  listener: EventListener,
+  options: UseClickAwayOptions = {}
+) {
+  if (!inBrowser) {
+    return;
+  }
+
+  const { eventName = 'click' } = options;
+
+  const onClick = (event: Event) => {
+    const element = unref(target);
+    if (element && !element.contains(event.target as Node)) {
+      listener(event);
+    }
+  };
+
+  useEventListener(eventName, onClick, { target: document });
+}
--- a/packages/vant-use/src/useCountDown/README.md
+++ b/packages/vant-use/src/useCountDown/README.md
@ -0,0 +1,118 @@
+# useCountDown
+
+提供倒计时管理能力。
+
+## 代码演示
+
+### 基本用法
+
+```html
+<span>总时间：{{ current.total }}</span>
+<span>剩余天数：{{ current.days }}</span>
+<span>剩余小时：{{ current.hours }}</span>
+<span>剩余分钟：{{ current.minutes }}</span>
+<span>剩余秒数：{{ current.seconds }}</span>
+<span>剩余毫秒：{{ current.milliseconds }}</span>
+```
+
+```js
+import { useCountDown } from '@vant/use';
+
+export default {
+  setup() {
+    const countDown = useCountDown({
+      // 倒计时 24 小时
+      time: 24 * 60 * 60 * 1000,
+    });
+
+    // 开始倒计时
+    countDown.start();
+
+    return {
+      current: countDown.current,
+    };
+  },
+};
+```
+
+### 毫秒级渲染
+
+倒计时默认每秒渲染一次，设置 millisecond 属性可以开启毫秒级渲染。
+
+```js
+import { useCountDown } from '@vant/use';
+
+export default {
+  setup() {
+    const countDown = useCountDown({
+      time: 24 * 60 * 60 * 1000,
+      millisecond: true,
+    });
+    countDown.start();
+
+    return {
+      current: countDown.current,
+    };
+  },
+};
+```
+
+## API
+
+### 类型定义
+
+```ts
+function useCountDown(options: UseCountDownOptions): CountDown;
+
+type UseCountDownOptions = {
+  time: number;
+  millisecond?: boolean;
+  onChange?: (current: CurrentTime) => void;
+  onFinish?: () => void;
+};
+
+type CountDown = {
+  start: () => void;
+  pause: () => void;
+  reset: (totalTime: number) => void;
+  current: ComputedRef<CurrentTime>;
+};
+
+type CurrentTime = {
+  days: number;
+  hours: number;
+  total: number;
+  minutes: number;
+  seconds: number;
+  milliseconds: number;
+};
+```
+
+### 参数
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| time | 倒计时时长，单位毫秒 | _number_ | - |
+| millisecond | 是否开启毫秒级渲染 | _boolean_ | `false` |
+| onChange | 倒计时改变时触发的回调函数 | _(current: CurrentTime) => void_ | - |
+| onFinish | 倒计时结束时触发的回调函数 | - |
+
+### 返回值
+
+| 参数    | 说明                               | 类型                    |
+| ------- | ---------------------------------- | ----------------------- |
+| current | 当前剩余的时间                     | _CurrentTime_           |
+| start   | 开始倒计时                         | _() => void_            |
+| pause   | 暂停倒计时                         | _() => void_            |
+| reset   | 重置倒计时，支持传入新的倒计时时长 | _(time?: number): void_ |
+
+### CurrentTime 格式
+
+| 名称         | 说明                   | 类型     |
+| ------------ | ---------------------- | -------- |
+| total        | 剩余总时间（单位毫秒） | _number_ |
+| days         | 剩余天数               | _number_ |
+| hours        | 剩余小时               | _number_ |
+| minutes      | 剩余分钟               | _number_ |
+| seconds      | 剩余秒数               | _number_ |
+| milliseconds | 剩余毫秒               | _number_ |
--- a/packages/vant-use/src/useCountDown/index.ts
+++ b/packages/vant-use/src/useCountDown/index.ts
@ -0,0 +1,152 @@
+import {
+  ref,
+  computed,
+  onActivated,
+  onDeactivated,
+  onBeforeUnmount,
+} from 'vue';
+import { raf, cancelRaf } from '../utils';
+
+export type CurrentTime = {
+  days: number;
+  hours: number;
+  total: number;
+  minutes: number;
+  seconds: number;
+  milliseconds: number;
+};
+
+export type UseCountDownOptions = {
+  time: number;
+  millisecond?: boolean;
+  onChange?: (current: CurrentTime) => void;
+  onFinish?: () => void;
+};
+
+const SECOND = 1000;
+const MINUTE = 60 * SECOND;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+
+function parseTime(time: number): CurrentTime {
+  const days = Math.floor(time / DAY);
+  const hours = Math.floor((time % DAY) / HOUR);
+  const minutes = Math.floor((time % HOUR) / MINUTE);
+  const seconds = Math.floor((time % MINUTE) / SECOND);
+  const milliseconds = Math.floor(time % SECOND);
+
+  return {
+    total: time,
+    days,
+    hours,
+    minutes,
+    seconds,
+    milliseconds,
+  };
+}
+
+function isSameSecond(time1: number, time2: number): boolean {
+  return Math.floor(time1 / 1000) === Math.floor(time2 / 1000);
+}
+
+export function useCountDown(options: UseCountDownOptions) {
+  let rafId: number;
+  let endTime: number;
+  let counting: boolean;
+  let deactivated: boolean;
+
+  const remain = ref(options.time);
+  const current = computed(() => parseTime(remain.value));
+
+  const pause = () => {
+    counting = false;
+    cancelRaf(rafId);
+  };
+
+  const getCurrentRemain = () => Math.max(endTime - Date.now(), 0);
+
+  const setRemain = (value: number) => {
+    remain.value = value;
+    options.onChange?.(current.value);
+
+    if (value === 0) {
+      pause();
+      options.onFinish?.();
+    }
+  };
+
+  const microTick = () => {
+    rafId = raf(() => {
+      // in case of call reset immediately after finish
+      if (counting) {
+        setRemain(getCurrentRemain());
+
+        if (remain.value > 0) {
+          microTick();
+        }
+      }
+    });
+  };
+
+  const macroTick = () => {
+    rafId = raf(() => {
+      // in case of call reset immediately after finish
+      if (counting) {
+        const remainRemain = getCurrentRemain();
+
+        if (!isSameSecond(remainRemain, remain.value) || remainRemain === 0) {
+          setRemain(remainRemain);
+        }
+
+        if (remain.value > 0) {
+          macroTick();
+        }
+      }
+    });
+  };
+
+  const tick = () => {
+    if (options.millisecond) {
+      microTick();
+    } else {
+      macroTick();
+    }
+  };
+
+  const start = () => {
+    if (!counting) {
+      endTime = Date.now() + remain.value;
+      counting = true;
+      tick();
+    }
+  };
+
+  const reset = (totalTime: number = options.time) => {
+    pause();
+    remain.value = totalTime;
+  };
+
+  onBeforeUnmount(pause);
+
+  onActivated(() => {
+    if (deactivated) {
+      counting = true;
+      deactivated = false;
+      tick();
+    }
+  });
+
+  onDeactivated(() => {
+    if (counting) {
+      pause();
+      deactivated = true;
+    }
+  });
+
+  return {
+    start,
+    pause,
+    reset,
+    current,
+  };
+}
--- a/packages/vant-use/src/useEventListener/README.md
+++ b/packages/vant-use/src/useEventListener/README.md
@ -0,0 +1,65 @@
+# useEventListener
+
+方便地进行事件绑定，在组件 `mounted` 和 `activated` 时绑定事件，`unmounted` 和 `deactivated` 时解绑事件。
+
+## 代码演示
+
+### 基本用法
+
+```js
+import { ref } from 'vue';
+import { useEventListener } from '@vant/use';
+
+export default {
+  setup() {
+    // 在 window 上绑定 resize 事件
+    // 未指定监听对象时，默认会监听 window 的事件
+    useEventListener('resize', () => {
+      console.log('window resize');
+    });
+
+    // 在 body 元素上绑定 click 事件
+    useEventListener(
+      'click',
+      () => {
+        console.log('click body');
+      },
+      { target: document.body }
+    );
+  },
+};
+```
+
+## 类型定义
+
+```ts
+function useEventListener(
+  type: string,
+  listener: EventListener,
+  options?: Options
+): void;
+
+type Options = {
+  target?: EventTarget | Ref<EventTarget>;
+  capture?: boolean;
+  passive?: boolean;
+};
+```
+
+## API
+
+### 参数
+
+| 参数     | 说明                     | 类型            | 默认值 |
+| -------- | ------------------------ | --------------- | ------ |
+| type     | 监听的事件类型           | _string_        | -      |
+| listener | 点击外部时触发的回调函数 | _EventListener_ | -      |
+| options  | 可选的配置项             | _Options_       | -      |
+
+### Options
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| target | 绑定事件的元素 | _EventTarget \| Ref\<EventTarget>_ | `window` |
+| capture | 是否在事件捕获阶段触发 | _boolean_ | `false` |
+| passive | 设置为 `true` 时，表示 `listener` 永远不会调用 `preventDefault` | _boolean_ | `false` |
--- a/packages/vant-use/src/useEventListener/index.ts
+++ b/packages/vant-use/src/useEventListener/index.ts
@ -0,0 +1,70 @@
+import {
+  Ref,
+  unref,
+  onMounted,
+  onActivated,
+  onUnmounted,
+  onDeactivated,
+} from 'vue';
+import { inBrowser } from '../utils';
+
+let supportsPassive = false;
+if (inBrowser) {
+  try {
+    const opts = {};
+    Object.defineProperty(opts, 'passive', {
+      get() {
+        supportsPassive = true;
+      },
+    });
+    window.addEventListener('test-passive', null as any, opts);
+    // eslint-disable-next-line no-empty
+  } catch (e) {}
+}
+
+export type UseEventListenerOptions = {
+  target?: EventTarget | Ref<EventTarget | undefined>;
+  capture?: boolean;
+  passive?: boolean;
+};
+
+export function useEventListener(
+  type: string,
+  listener: EventListener,
+  options: UseEventListenerOptions = {}
+) {
+  if (!inBrowser) {
+    return;
+  }
+
+  const { target = window, passive = false, capture = false } = options;
+
+  let attached: boolean;
+
+  const add = () => {
+    const element = unref(target);
+
+    if (element && !attached) {
+      element.addEventListener(
+        type,
+        listener,
+        supportsPassive ? { capture, passive } : capture
+      );
+      attached = true;
+    }
+  };
+
+  const remove = () => {
+    const element = unref(target);
+
+    if (element && attached) {
+      element.removeEventListener(type, listener, capture);
+      attached = false;
+    }
+  };
+
+  onMounted(add);
+  onActivated(add);
+  onUnmounted(remove);
+  onDeactivated(remove);
+}
--- a/packages/vant-use/src/usePageVisibility/README.md
+++ b/packages/vant-use/src/usePageVisibility/README.md
@ -0,0 +1,38 @@
+# usePageVisibility
+
+获取页面的可见状态。
+
+## 代码演示
+
+### 基本用法
+
+```js
+import { watch } from 'vue';
+import { usePageVisibility } from '@vant/use';
+
+export default {
+  setup() {
+    const pageVisibility = usePageVisibility();
+
+    watch(pageVisibility, (value) => {
+      console.log('visibility: ', value);
+    });
+  },
+};
+```
+
+## API
+
+### 类型定义
+
+```ts
+function usePageVisibility(): Ref<VisibilityState>;
+
+type VisibilityState = 'visible' | 'hidden';
+```
+
+### 返回值
+
+| 参数 | 说明 | 类型 |
+| --- | --- | --- |
+| visibilityState | 页面当前的可见状态，`visible` 为可见，`hidden` 为隐藏 | _Ref\<VisibilityState>_ |
--- a/packages/vant-use/src/usePageVisibility/index.ts
+++ b/packages/vant-use/src/usePageVisibility/index.ts
@ -0,0 +1,18 @@
+import { ref } from 'vue';
+import { inBrowser } from '../utils';
+import { useEventListener } from '../useEventListener';
+
+export function usePageVisibility() {
+  const visibility = ref<VisibilityState>('visible');
+
+  const setVisibility = () => {
+    if (inBrowser) {
+      visibility.value = document.hidden ? 'hidden' : 'visible';
+    }
+  };
+
+  setVisibility();
+  useEventListener('visibilitychange', setVisibility);
+
+  return visibility;
+}
--- a/packages/vant-use/src/useRect/README.md
+++ b/packages/vant-use/src/useRect/README.md
@ -0,0 +1,46 @@
+# useRect
+
+获取元素的大小及其相对于视口的位置，等价于 [Element.getBoundingClientRect](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect)。
+
+## 代码演示
+
+### 基本用法
+
+```html
+<div ref="root" />
+```
+
+```js
+import { root } from 'vue';
+import { useRect } from '@vant/use';
+
+export default {
+  setup() {
+    const root = ref();
+    const rect = useRect();
+
+    console.log(rect); // -> 元素的大小及其相对于视口的位置
+
+    return { root };
+  },
+};
+```
+
+## API
+
+### 类型定义
+
+```ts
+function useRect((Element | Window) | Ref<Element | Window | undefined>): DOMRect;
+```
+
+### 返回值
+
+| 参数   | 说明                       | 类型     |
+| ------ | -------------------------- | -------- |
+| width  | 宽度                       | _number_ |
+| height | 高度                       | _number_ |
+| top    | 顶部与视图窗口左上角的距离 | _number_ |
+| left   | 左侧与视图窗口左上角的距离 | _number_ |
+| right  | 右侧与视图窗口左上角的距离 | _number_ |
+| bottom | 底部与视图窗口左上角的距离 | _number_ |
--- a/packages/vant-use/src/useRect/index.ts
+++ b/packages/vant-use/src/useRect/index.ts
@ -0,0 +1,38 @@
+import { Ref, unref } from 'vue';
+
+function isWindow(val: unknown): val is Window {
+  return val === window;
+}
+
+export const useRect = (
+  elementRef: (Element | Window) | Ref<Element | Window | undefined>
+) => {
+  const element = unref(elementRef);
+
+  if (isWindow(element)) {
+    const width = element.innerWidth;
+    const height = element.innerHeight;
+
+    return {
+      top: 0,
+      left: 0,
+      right: width,
+      bottom: height,
+      width,
+      height,
+    };
+  }
+
+  if (element && element.getBoundingClientRect) {
+    return element.getBoundingClientRect();
+  }
+
+  return {
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    width: 0,
+    height: 0,
+  };
+};
--- a/packages/vant-use/src/useRelation/README.md
+++ b/packages/vant-use/src/useRelation/README.md
@ -0,0 +1,77 @@
+# useRelation
+
+建立父子组件之间的关联关系，进行数据通信和方法调用，基于 `provide` 和 `inject` 实现。
+
+## 代码演示
+
+### 基本用法
+
+```js
+// Parent.vue
+import { useChildren } from '@vant/use';
+
+const RELATION_KEY = 'my-relation';
+
+export default {
+  setup() {
+    const { linkChildren } = useChildren(RELATION_KEY);
+
+    const count = ref(0);
+    const add = () => {
+      count.value++;
+    };
+
+    // 向子组件提供数据和方法
+    linkChildren({ add, count });
+  },
+};
+
+// Child.vue
+import { useParent } from '@vant/use';
+
+export default {
+  setup() {
+    const { parent } = useParent(RELATION_KEY);
+
+    // 调用父组件提供的数据和方法
+    if (parent) {
+      parent.add();
+      console.log(parent.count.value); // -> 1
+    }
+  },
+};
+```
+
+## API
+
+### 类型定义
+
+```ts
+function useParent<T>(
+  key: string | symbol
+): {
+  parent?: T;
+  index?: Ref<number>;
+};
+
+function useChildren(
+  key: string | symbol
+): {
+  children: ComponentPublicInstance[];
+  linkChildren: (value: any) => void;
+};
+```
+
+### useParent 返回值
+
+| 参数   | 说明                                         | 类型           |
+| ------ | -------------------------------------------- | -------------- |
+| parent | 父组件提供的值                               | _any_          |
+| index  | 当前组件在父组件的所有子组件中对应的索引位置 | _Ref\<number>_ |
+
+### useChildren 返回值
+
+| 参数         | 说明                 | 类型                        |
+| ------------ | -------------------- | --------------------------- |
+| children     | 子组件列表           | _ComponentPublicInstance[]_ |
+| linkChildren | 向子组件提供值的方法 | _(value: any) => void_      |
--- a/packages/vant-use/src/useRelation/index.ts
+++ b/packages/vant-use/src/useRelation/index.ts
@ -0,0 +1,2 @@
+export * from './useParent';
+export * from './useChildren';
--- a/packages/vant-use/src/useRelation/useChildren.ts
+++ b/packages/vant-use/src/useRelation/useChildren.ts
@ -0,0 +1,92 @@
+import {
+  VNode,
+  isVNode,
+  provide,
+  reactive,
+  getCurrentInstance,
+  VNodeNormalizedChildren,
+  ComponentPublicInstance,
+  ComponentInternalInstance,
+} from 'vue';
+
+export function flattenVNodes(children: VNodeNormalizedChildren) {
+  const result: VNode[] = [];
+
+  const traverse = (children: VNodeNormalizedChildren) => {
+    if (Array.isArray(children)) {
+      children.forEach((child) => {
+        if (isVNode(child)) {
+          result.push(child);
+
+          if (child.component?.subTree) {
+            traverse(child.component.subTree.children);
+          }
+
+          if (child.children) {
+            traverse(child.children);
+          }
+        }
+      });
+    }
+  };
+
+  traverse(children);
+
+  return result;
+}
+
+// sort children instances by vnodes order
+export function sortChildren(
+  parent: ComponentInternalInstance,
+  publicChildren: ComponentPublicInstance[],
+  internalChildren: ComponentInternalInstance[]
+) {
+  const vnodes = flattenVNodes(parent.subTree.children);
+
+  internalChildren.sort(
+    (a, b) => vnodes.indexOf(a.vnode) - vnodes.indexOf(b.vnode)
+  );
+
+  const orderedPublicChildren = internalChildren.map((item) => item.proxy!);
+
+  publicChildren.sort((a, b) => {
+    const indexA = orderedPublicChildren.indexOf(a);
+    const indexB = orderedPublicChildren.indexOf(b);
+    return indexA - indexB;
+  });
+}
+
+export function useChildren(key: string | symbol) {
+  const publicChildren: ComponentPublicInstance[] = reactive([]);
+  const internalChildren: ComponentInternalInstance[] = reactive([]);
+  const parent = getCurrentInstance()!;
+
+  const linkChildren = (value?: any) => {
+    const link = (child: ComponentInternalInstance) => {
+      if (child.proxy) {
+        internalChildren.push(child);
+        publicChildren.push(child.proxy);
+        sortChildren(parent, publicChildren, internalChildren);
+      }
+    };
+
+    const unlink = (child: ComponentInternalInstance) => {
+      const index = internalChildren.indexOf(child);
+      publicChildren.splice(index, 1);
+      internalChildren.splice(index, 1);
+    };
+
+    provide(key, {
+      link,
+      unlink,
+      children: publicChildren,
+      internalChildren,
+      ...value,
+    });
+  };
+
+  return {
+    children: publicChildren,
+    linkChildren,
+  };
+}
--- a/packages/vant-use/src/useRelation/useParent.ts
+++ b/packages/vant-use/src/useRelation/useParent.ts
@ -0,0 +1,42 @@
+import {
+  inject,
+  computed,
+  onUnmounted,
+  getCurrentInstance,
+  ComponentPublicInstance,
+  ComponentInternalInstance,
+} from 'vue';
+
+type ParentProvide<T> = T & {
+  link(child: ComponentInternalInstance): void;
+  unlink(child: ComponentInternalInstance): void;
+  children: ComponentPublicInstance[];
+  internalChildren: ComponentInternalInstance[];
+};
+
+export function useParent<T>(key: string | symbol) {
+  const parent = inject<ParentProvide<T> | null>(key, null);
+
+  if (parent) {
+    const instance = getCurrentInstance();
+
+    if (instance) {
+      const { link, unlink, internalChildren, ...rest } = parent;
+
+      link(instance);
+
+      onUnmounted(() => {
+        unlink(instance);
+      });
+
+      const index = computed(() => internalChildren.indexOf(instance));
+
+      return {
+        parent: rest,
+        index,
+      };
+    }
+  }
+
+  return {};
+}
--- a/packages/vant-use/src/useScrollParent/README.md
+++ b/packages/vant-use/src/useScrollParent/README.md
@ -0,0 +1,55 @@
+# useScrollParent
+
+获取元素最近的可滚动父元素。
+
+## 代码演示
+
+### 基本用法
+
+```html
+<div ref="root" />
+```
+
+```js
+import { watch } from 'vue';
+import { useScrollParent, useEventListener } from '@vant/use';
+
+export default {
+  setup() {
+    const root = ref();
+    const scrollParent = useScrollParent(root);
+
+    useEventListener(
+      'scroll',
+      () => {
+        console.log('scroll');
+      },
+      { target: scrollParent }
+    );
+
+    return { root };
+  },
+};
+```
+
+## API
+
+### 类型定义
+
+```ts
+function useScrollParent(
+  element: Ref<Element | undefined>
+): Ref<Element | Window | undefined>;
+```
+
+### 参数
+
+| 参数    | 说明     | 类型            | 默认值 |
+| ------- | -------- | --------------- | ------ |
+| element | 当前元素 | _Ref\<Element>_ | -      |
+
+### 返回值
+
+| 参数         | 说明               | 类型            |
+| ------------ | ------------------ | --------------- |
+| scrollParent | 最近的可滚动父元素 | _Ref\<Element>_ |
--- a/packages/vant-use/src/useScrollParent/index.ts
+++ b/packages/vant-use/src/useScrollParent/index.ts
@ -0,0 +1,51 @@
+import { ref, Ref, onMounted } from 'vue';
+
+type ScrollElement = HTMLElement | Window;
+
+const overflowScrollReg = /scroll|auto/i;
+
+function isElement(node: Element) {
+  const ELEMENT_NODE_TYPE = 1;
+  return node.tagName !== 'HTML' && node.nodeType === ELEMENT_NODE_TYPE;
+}
+
+// http://w3help.org/zh-cn/causes/SD9013
+// http://stackoverflow.com/questions/17016740/onscroll-function-is-not-working-for-chrome
+function getScrollParent(el: Element, root: ScrollElement = window) {
+  let node = el;
+
+  while (node && node !== root && isElement(node)) {
+    const { overflowY } = window.getComputedStyle(node);
+
+    if (overflowScrollReg.test(overflowY)) {
+      if (node.tagName !== 'BODY') {
+        return node;
+      }
+
+      // see: https://github.com/youzan/vant/issues/3823
+      const { overflowY: htmlOverflowY } = window.getComputedStyle(
+        node.parentNode as Element
+      );
+
+      if (overflowScrollReg.test(htmlOverflowY)) {
+        return node;
+      }
+    }
+
+    node = node.parentNode as Element;
+  }
+
+  return root;
+}
+
+export function useScrollParent(el: Ref<Element | undefined>) {
+  const scrollParent = ref<Element | Window>();
+
+  onMounted(() => {
+    if (el.value) {
+      scrollParent.value = getScrollParent(el.value);
+    }
+  });
+
+  return scrollParent;
+}
--- a/packages/vant-use/src/useToggle/README.md
+++ b/packages/vant-use/src/useToggle/README.md
@ -0,0 +1,62 @@
+# useToggle
+
+用于在 `true` 和 `false` 之间进行切换。
+
+## 代码演示
+
+### 基本用法
+
+```js
+import { useToggle } from '@vant/use';
+
+export default {
+  setup() {
+    const [state, toggle] = useToggle();
+
+    toggle(true);
+    console.log(state.value); // -> true
+
+    toggle(false);
+    console.log(state.value); // -> false
+
+    toggle();
+    console.log(state.value); // -> true
+  },
+};
+```
+
+### 设置默认值
+
+```js
+import { useToggle } from '@vant/use';
+
+export default {
+  setup() {
+    const [state, toggle] = useToggle(true);
+    console.log(state.value); // -> true
+  },
+};
+```
+
+## API
+
+### 类型定义
+
+```ts
+function useToggle(
+  defaultValue: boolean
+): [Ref<boolean>, (newValue: boolean) => void];
+```
+
+### 参数
+
+| 参数         | 说明   | 类型      | 默认值  |
+| ------------ | ------ | --------- | ------- |
+| defaultValue | 默认值 | _boolean_ | `false` |
+
+### 返回值
+
+| 参数   | 说明             | 类型                           |
+| ------ | ---------------- | ------------------------------ |
+| state  | 状态值           | _Ref\<boolean>_                |
+| toggle | 切换状态值的函数 | _(newValue?: boolean) => void_ |
--- a/packages/vant-use/src/useToggle/index.ts
+++ b/packages/vant-use/src/useToggle/index.ts
@ -0,0 +1,10 @@
+import { ref } from 'vue';
+
+export function useToggle(defaultValue = false) {
+  const state = ref(defaultValue);
+  const toggle = (value = !state.value) => {
+    state.value = value;
+  };
+
+  return [state, toggle];
+}
--- a/packages/vant-use/src/useWindowSize/README.md
+++ b/packages/vant-use/src/useWindowSize/README.md
@ -0,0 +1,43 @@
+# useWindowSize
+
+获取浏览器窗口的视口宽度和高度，并在窗口大小变化时自动更新。
+
+## 代码演示
+
+### 基本用法
+
+```js
+import { watch } from 'vue';
+import { useWindowSize } from '@vant/use';
+
+export default {
+  setup() {
+    const { width, height } = useWindowSize();
+
+    console.log(width.value); // -> 窗口宽度
+    console.log(height.value); // -> 窗口高度
+
+    watch([width, height], () => {
+      console.log('window resized');
+    });
+  },
+};
+```
+
+## API
+
+### 类型定义
+
+```ts
+function useWindowSize(): {
+  width: Ref<number>;
+  height: Ref<number>;
+};
+```
+
+### 返回值
+
+| 参数   | 说明           | 类型           |
+| ------ | -------------- | -------------- |
+| width  | 浏览器窗口宽度 | _Ref\<number>_ |
+| height | 浏览器窗口高度 | _Ref\<number>_ |
--- a/packages/vant-use/src/useWindowSize/index.ts
+++ b/packages/vant-use/src/useWindowSize/index.ts
@ -0,0 +1,18 @@
+import { ref } from 'vue';
+import { inBrowser } from '../utils';
+import { useEventListener } from '../useEventListener';
+
+export function useWindowSize() {
+  const width = ref(inBrowser ? window.innerWidth : 0);
+  const height = ref(inBrowser ? window.innerHeight : 0);
+
+  const onResize = () => {
+    width.value = window.innerWidth;
+    height.value = window.innerHeight;
+  };
+
+  useEventListener('resize', onResize);
+  useEventListener('orientationchange', onResize);
+
+  return { width, height };
+}
--- a/packages/vant-use/src/utils.ts
+++ b/packages/vant-use/src/utils.ts
@ -0,0 +1,30 @@
+export const inBrowser = typeof window !== 'undefined';
+
+const root = (inBrowser ? window : global) as Window;
+
+let prev = Date.now();
+
+function rafPolyfill(fn: FrameRequestCallback): number {
+  const curr = Date.now();
+  const ms = Math.max(0, 16 - (curr - prev));
+  const id = setTimeout(fn, ms);
+  prev = curr + ms;
+  return id;
+}
+
+export function raf(fn: FrameRequestCallback): number {
+  const requestAnimationFrame = root.requestAnimationFrame || rafPolyfill;
+  return requestAnimationFrame.call(root, fn);
+}
+
+export function cancelRaf(id: number) {
+  const cancelAnimationFrame = root.cancelAnimationFrame || root.clearTimeout;
+  cancelAnimationFrame.call(root, id);
+}
+
+// double raf for animation
+export function doubleRaf(fn: FrameRequestCallback): void {
+  raf(() => {
+    raf(fn);
+  });
+}
--- a/packages/vant-use/src/yarn.lock
+++ b/packages/vant-use/src/yarn.lock
@ -0,0 +1,104 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@babel/helper-validator-identifier@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.npm.taobao.org/@babel/helper-validator-identifier/download/@babel/helper-validator-identifier-7.10.4.tgz?cache=0&sync_timestamp=1593522720715&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40babel%2Fhelper-validator-identifier%2Fdownload%2F%40babel%2Fhelper-validator-identifier-7.10.4.tgz#a78c7a7251e01f616512d31b10adcf52ada5e0d2"
+  integrity sha1-p4x6clHgH2FlEtMbEK3PUq2l4NI=
+
+"@babel/parser@^7.11.5":
+  version "7.11.5"
+  resolved "https://registry.npm.taobao.org/@babel/parser/download/@babel/parser-7.11.5.tgz#c7ff6303df71080ec7a4f5b8c003c58f1cf51037"
+  integrity sha1-x/9jA99xCA7HpPW4wAPFjxz1EDc=
+
+"@babel/types@^7.11.5":
+  version "7.11.5"
+  resolved "https://registry.npm.taobao.org/@babel/types/download/@babel/types-7.11.5.tgz#d9de577d01252d77c6800cee039ee64faf75662d"
+  integrity sha1-2d5XfQElLXfGgAzuA57mT691Zi0=
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.10.4"
+    lodash "^4.17.19"
+    to-fast-properties "^2.0.0"
+
+"@vue/compiler-core@3.0.0":
+  version "3.0.0"
+  resolved "https://registry.npm.taobao.org/@vue/compiler-core/download/@vue/compiler-core-3.0.0.tgz#25e4f079cf6c39f83bad23700f814c619105a0f2"
+  integrity sha1-JeTwec9sOfg7rSNwD4FMYZEFoPI=
+  dependencies:
+    "@babel/parser" "^7.11.5"
+    "@babel/types" "^7.11.5"
+    "@vue/shared" "3.0.0"
+    estree-walker "^2.0.1"
+    source-map "^0.6.1"
+
+"@vue/compiler-dom@3.0.0":
+  version "3.0.0"
+  resolved "https://registry.npm.taobao.org/@vue/compiler-dom/download/@vue/compiler-dom-3.0.0.tgz#4cbb48fcf1f852daef2babcf9953b681ac463526"
+  integrity sha1-TLtI/PH4UtrvK6vPmVO2gaxGNSY=
+  dependencies:
+    "@vue/compiler-core" "3.0.0"
+    "@vue/shared" "3.0.0"
+
+"@vue/reactivity@3.0.0":
+  version "3.0.0"
+  resolved "https://registry.npm.taobao.org/@vue/reactivity/download/@vue/reactivity-3.0.0.tgz#fd15632a608650ce2a969c721787e27e2c80aa6b"
+  integrity sha1-/RVjKmCGUM4qlpxyF4fifiyAqms=
+  dependencies:
+    "@vue/shared" "3.0.0"
+
+"@vue/runtime-core@3.0.0":
+  version "3.0.0"
+  resolved "https://registry.npm.taobao.org/@vue/runtime-core/download/@vue/runtime-core-3.0.0.tgz#480febf1bfe32798b6abbd71a88f8e8b473a51c2"
+  integrity sha1-SA/r8b/jJ5i2q71xqI+Oi0c6UcI=
+  dependencies:
+    "@vue/reactivity" "3.0.0"
+    "@vue/shared" "3.0.0"
+
+"@vue/runtime-dom@3.0.0":
+  version "3.0.0"
+  resolved "https://registry.npm.taobao.org/@vue/runtime-dom/download/@vue/runtime-dom-3.0.0.tgz#e0d1f7c7e22e1318696014cc3501e06b288c2e11"
+  integrity sha1-4NH3x+IuExhpYBTMNQHgayiMLhE=
+  dependencies:
+    "@vue/runtime-core" "3.0.0"
+    "@vue/shared" "3.0.0"
+    csstype "^2.6.8"
+
+"@vue/shared@3.0.0":
+  version "3.0.0"
+  resolved "https://registry.npm.taobao.org/@vue/shared/download/@vue/shared-3.0.0.tgz#ec089236629ecc0f10346b92f101ff4339169f1a"
+  integrity sha1-7AiSNmKezA8QNGuS8QH/QzkWnxo=
+
+csstype@^2.6.8:
+  version "2.6.13"
+  resolved "https://registry.npm.taobao.org/csstype/download/csstype-2.6.13.tgz?cache=0&sync_timestamp=1598348290847&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcsstype%2Fdownload%2Fcsstype-2.6.13.tgz#a6893015b90e84dd6e85d0e3b442a1e84f2dbe0f"
+  integrity sha1-pokwFbkOhN1uhdDjtEKh6E8tvg8=
+
+estree-walker@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npm.taobao.org/estree-walker/download/estree-walker-2.0.1.tgz#f8e030fb21cefa183b44b7ad516b747434e7a3e0"
+  integrity sha1-+OAw+yHO+hg7RLetUWt0dDTno+A=
+
+lodash@^4.17.19:
+  version "4.17.20"
+  resolved "https://registry.npm.taobao.org/lodash/download/lodash-4.17.20.tgz?cache=0&sync_timestamp=1597336147792&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flodash%2Fdownload%2Flodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
+  integrity sha1-tEqbYpe8tpjxxRo1RaKzs2jVnFI=
+
+source-map@^0.6.1:
+  version "0.6.1"
+  resolved "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+  integrity sha1-dHIq8y6WFOnCh6jQu95IteLxomM=
+
+to-fast-properties@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npm.taobao.org/to-fast-properties/download/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
+  integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=
+
+vue@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npm.taobao.org/vue/download/vue-3.0.0.tgz#cfb5df5c34efce319b113a1667d12b74dcfd9c90"
+  integrity sha1-z7XfXDTvzjGbEToWZ9ErdNz9nJA=
+  dependencies:
+    "@vue/compiler-dom" "3.0.0"
+    "@vue/runtime-dom" "3.0.0"
+    "@vue/shared" "3.0.0"
--- a/packages/vant-use/tsconfig.json
+++ b/packages/vant-use/tsconfig.json
@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES5",
+    "outDir": "./lib",
+    "module": "CommonJS",
+    "strict": true,
+    "declaration": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "moduleResolution": "Node"
+  },
+  "include": ["src/**/*"]
+}
--- a/packages/vant-use/yarn.lock
+++ b/packages/vant-use/yarn.lock
--- a/src/action-bar-button/index.js
+++ b/src/action-bar-button/index.js
@ -0,0 +1,71 @@
+import { computed } from 'vue';
+import { createNamespace } from '../utils';
+import { ACTION_BAR_KEY } from '../action-bar';
+
+// Composition
+import { useParent } from '@vant/use';
+import { useExpose } from '../composition/use-expose';
+import { useRoute, routeProps } from '../composition/use-route';
+
+// Components
+import Button from '../button';
+
+const [createComponent, bem] = createNamespace('action-bar-button');
+
+export default createComponent({
+  props: {
+    ...routeProps,
+    type: String,
+    text: String,
+    icon: String,
+    color: String,
+    loading: Boolean,
+    disabled: Boolean,
+  },
+
+  setup(props, { slots }) {
+    const route = useRoute();
+    const { parent, index } = useParent(ACTION_BAR_KEY);
+
+    const isFirst = computed(() => {
+      if (parent) {
+        const prev = parent.children[index.value - 1];
+        return !(prev && 'isButton' in prev);
+      }
+    });
+
+    const isLast = computed(() => {
+      if (parent) {
+        const next = parent.children[index.value + 1];
+        return !(next && 'isButton' in next);
+      }
+    });
+
+    useExpose({ isButton: true });
+
+    return () => {
+      const { type, icon, text, color, loading, disabled } = props;
+
+      return (
+        <Button
+          class={bem([
+            type,
+            {
+              last: isLast.value,
+              first: isFirst.value,
+            },
+          ])}
+          size="large"
+          type={type}
+          icon={icon}
+          color={color}
+          loading={loading}
+          disabled={disabled}
+          onClick={route}
+        >
+          {slots.default ? slots.default() : text}
+        </Button>
+      );
+    };
+  },
+});
--- a/src/goods-action-button/index.less
+++ b/src/goods-action-button/index.less
@ -1,8 +1,8 @@
@import '../style/var';

-.van-goods-action-button {
+.van-action-bar-button {
  flex: 1;
-  height: @goods-action-button-height;
+  height: @action-bar-button-height;
  font-weight: @font-weight-bold;
  font-size: @font-size-md;
  border: none;
@ -21,11 +21,11 @@
  }

  &--warning {
-    background: @goods-action-button-warning-color;
+    background: @action-bar-button-warning-color;
  }

  &--danger {
-    background: @goods-action-button-danger-color;
+    background: @action-bar-button-danger-color;
  }

  @media (max-width: 321px) {
--- a/src/action-bar-icon/index.less
+++ b/src/action-bar-icon/index.less
@ -0,0 +1,26 @@
+@import '../style/var';
+
+.van-action-bar-icon {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: @action-bar-icon-width;
+  height: @action-bar-icon-height;
+  color: @action-bar-icon-text-color;
+  font-size: @action-bar-icon-font-size;
+  line-height: 1;
+  text-align: center;
+  background-color: @white;
+  cursor: pointer;
+
+  &:active {
+    background-color: @action-bar-icon-active-color;
+  }
+
+  &__icon {
+    width: 1em;
+    margin: 0 auto 5px;
+    color: @action-bar-icon-color;
+    font-size: @action-bar-icon-size;
+  }
+}
--- a/src/action-bar-icon/index.tsx
+++ b/src/action-bar-icon/index.tsx
@ -0,0 +1,60 @@
+import { createNamespace } from '../utils';
+import { ACTION_BAR_KEY } from '../action-bar';
+
+// Composition
+import { useParent } from '@vant/use';
+import { useRoute, routeProps } from '../composition/use-route';
+
+// Components
+import Icon from '../icon';
+import Badge from '../badge';
+
+const [createComponent, bem] = createNamespace('action-bar-icon');
+
+export default createComponent({
+  props: {
+    ...routeProps,
+    dot: Boolean,
+    text: String,
+    icon: String,
+    color: String,
+    badge: [Number, String],
+    iconClass: null,
+  },
+
+  setup(props, { slots }) {
+    const route = useRoute();
+
+    useParent(ACTION_BAR_KEY);
+
+    const renderIcon = () => {
+      const { dot, badge, icon, color, iconClass } = props;
+
+      if (slots.icon) {
+        return (
+          <Badge dot={dot} content={badge} class={bem('icon')}>
+            {slots.icon()}
+          </Badge>
+        );
+      }
+
+      return (
+        <Icon
+          tag="div"
+          dot={dot}
+          name={icon}
+          badge={badge}
+          color={color}
+          class={[bem('icon'), iconClass]}
+        />
+      );
+    };
+
+    return () => (
+      <div role="button" class={bem()} tabindex={0} onClick={route}>
+        {renderIcon()}
+        {slots.default ? slots.default() : props.text}
+      </div>
+    );
+  },
+});
--- a/src/goods-action/README.md
+++ b/src/goods-action/README.md
@ -1,14 +1,15 @@
-# GoodsAction
+# ActionBar

 ### Install

 ```js
-import Vue from 'vue';
-import { GoodsAction, GoodsActionIcon, GoodsActionButton } from 'vant';
+import { createApp } from 'vue';
+import { ActionBar, ActionBarIcon, ActionBarButton } from 'vant';

-Vue.use(GoodsAction);
-Vue.use(GoodsActionButton);
-Vue.use(GoodsActionIcon);
+const app = createApp();
+app.use(ActionBar);
+app.use(ActionBarIcon);
+app.use(ActionBarButton);
 ```

 ## Usage
@ -16,12 +17,12 @@ Vue.use(GoodsActionIcon);
 ### Basic Usage

 ```html
-<van-goods-action>
-  <van-goods-action-icon icon="chat-o" text="Icon1" @click="onClickIcon" />
-  <van-goods-action-icon icon="cart-o" text="Icon2" @click="onClickIcon" />
-  <van-goods-action-icon icon="shop-o" text="Icon3" @click="onClickIcon" />
-  <van-goods-action-button type="danger" text="Button" @click="onClickButton" />
-</van-goods-action>
+<van-action-bar>
+  <van-action-bar-icon icon="chat-o" text="Icon1" @click="onClickIcon" />
+  <van-action-bar-icon icon="cart-o" text="Icon2" @click="onClickIcon" />
+  <van-action-bar-icon icon="shop-o" text="Icon3" @click="onClickIcon" />
+  <van-action-bar-button type="danger" text="Button" @click="onClickButton" />
+</van-action-bar>
 ```

 ```js
@ -44,47 +45,47 @@ export default {
 Use `badge` prop to show badge in icon.

 ```html
-<van-goods-action>
-  <van-goods-action-icon icon="chat-o" text="Icon1" dot />
-  <van-goods-action-icon icon="cart-o" text="Icon2" badge="5" />
-  <van-goods-action-icon icon="shop-o" text="Icon3" badge="12" />
-  <van-goods-action-button type="warning" text="Button" />
-  <van-goods-action-button type="danger" text="Button" />
-</van-goods-action>
+<van-action-bar>
+  <van-action-bar-icon icon="chat-o" text="Icon1" dot />
+  <van-action-bar-icon icon="cart-o" text="Icon2" badge="5" />
+  <van-action-bar-icon icon="shop-o" text="Icon3" badge="12" />
+  <van-action-bar-button type="warning" text="Button" />
+  <van-action-bar-button type="danger" text="Button" />
+</van-action-bar>
 ```

 ### Custom Icon Color

 ```html
-<van-goods-action>
-  <van-goods-action-icon icon="chat-o" text="Icon1" color="#07c160" />
-  <van-goods-action-icon icon="cart-o" text="Icon2" />
-  <van-goods-action-icon icon="star" text="Collected" color="#ff5000" />
-  <van-goods-action-button type="warning" text="Button" />
-  <van-goods-action-button type="danger" text="Button" />
-</van-goods-action>
+<van-action-bar>
+  <van-action-bar-icon icon="chat-o" text="Icon1" color="#07c160" />
+  <van-action-bar-icon icon="cart-o" text="Icon2" />
+  <van-action-bar-icon icon="star" text="Collected" color="#ff5000" />
+  <van-action-bar-button type="warning" text="Button" />
+  <van-action-bar-button type="danger" text="Button" />
+</van-action-bar>
 ```

 ### Custom Button Color

 ```html
-<van-goods-action>
-  <van-goods-action-icon icon="chat-o" text="Icon1" />
-  <van-goods-action-icon icon="shop-o" text="Icon2" />
-  <van-goods-action-button color="#be99ff" type="warning" text="Button" />
-  <van-goods-action-button color="#7232dd" type="danger" text="Button" />
-</van-goods-action>
+<van-action-bar>
+  <van-action-bar-icon icon="chat-o" text="Icon1" />
+  <van-action-bar-icon icon="shop-o" text="Icon2" />
+  <van-action-bar-button color="#be99ff" type="warning" text="Button" />
+  <van-action-bar-button color="#7232dd" type="danger" text="Button" />
+</van-action-bar>
 ```

 ## API

-### GoodsAction Props
+### ActionBar Props

 | Attribute | Description | Type | Default |
 | --- | --- | --- | --- |
 | safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` |

-### GoodsActionIcon Props
+### ActionBarIcon Props

 | Attribute | Description | Type | Default |
 | --- | --- | --- | --- |
@ -98,7 +99,7 @@ Use `badge` prop to show badge in icon.
 | to | Target route of the link, same as to of vue-router | _string \| object_ | - |
 | replace | If true, the navigation will not leave a history record | _boolean_ | `false` |

-### GoodsActionButton Props
+### ActionBarButton Props

 | Attribute | Description | Type | Default |
 | --- | --- | --- | --- |
@ -113,14 +114,14 @@ Use `badge` prop to show badge in icon.
 | to | Target route of the link, same as to of vue-router | _string \| object_ | - |
 | replace | If true, the navigation will not leave a history record | _boolean_ | `false` |

-### GoodsActionIcon Slots
+### ActionBarIcon Slots

 | Name    | Description |
 | ------- | ----------- |
 | default | Text        |
 | icon    | Custom icon |

-### GoodsActionButton Slots
+### ActionBarButton Slots

 | Name    | Description    |
 | ------- | -------------- |
--- a/src/goods-action/README.zh-CN.md
+++ b/src/goods-action/README.zh-CN.md
@ -1,14 +1,15 @@
-# GoodsAction 商品导航
+# ActionBar 动作栏

 ### 引入

 ```js
-import Vue from 'vue';
-import { GoodsAction, GoodsActionIcon, GoodsActionButton } from 'vant';
+import { createApp } from 'vue';
+import { ActionBar, ActionBarIcon, ActionBarButton } from 'vant';

-Vue.use(GoodsAction);
-Vue.use(GoodsActionButton);
-Vue.use(GoodsActionIcon);
+const app = createApp();
+app.use(ActionBar);
+app.use(ActionBarIcon);
+app.use(ActionBarButton);
 ```

 ## 代码演示
@ -16,16 +17,12 @@ Vue.use(GoodsActionIcon);
 ### 基础用法

 ```html
-<van-goods-action>
-  <van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" />
-  <van-goods-action-icon icon="cart-o" text="购物车" @click="onClickIcon" />
-  <van-goods-action-icon icon="shop-o" text="店铺" @click="onClickIcon" />
-  <van-goods-action-button
-    type="danger"
-    text="立即购买"
-    @click="onClickButton"
-  />
-</van-goods-action>
+<van-action-bar>
+  <van-action-bar-icon icon="chat-o" text="客服" @click="onClickIcon" />
+  <van-action-bar-icon icon="cart-o" text="购物车" @click="onClickIcon" />
+  <van-action-bar-icon icon="shop-o" text="店铺" @click="onClickIcon" />
+  <van-action-bar-button type="danger" text="立即购买" @click="onClickButton" />
+</van-action-bar>
 ```

 ```js
@ -45,54 +42,54 @@ export default {

 ### 徽标提示

-在 GoodsActionIcon 组件上设置`dot`属性后，会在图标右上角展示一个小红点。设置`badge`属性后，会在图标右上角展示相应的徽标。
+在 ActionBarIcon 组件上设置 `dot` 属性后，会在图标右上角展示一个小红点；设置 `badge` 属性后，会在图标右上角展示相应的徽标。

 ```html
-<van-goods-action>
-  <van-goods-action-icon icon="chat-o" text="客服" dot />
-  <van-goods-action-icon icon="cart-o" text="购物车" badge="5" />
-  <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
-  <van-goods-action-button type="warning" text="加入购物车" />
-  <van-goods-action-button type="danger" text="立即购买" />
-</van-goods-action>
+<van-action-bar>
+  <van-action-bar-icon icon="chat-o" text="客服" dot />
+  <van-action-bar-icon icon="cart-o" text="购物车" badge="5" />
+  <van-action-bar-icon icon="shop-o" text="店铺" badge="12" />
+  <van-action-bar-button type="warning" text="加入购物车" />
+  <van-action-bar-button type="danger" text="立即购买" />
+</van-action-bar>
 ```

 ### 自定义图标颜色

-通过 GoodsActionIcon 的`color`属性可以自定义图标的颜色。
+通过 ActionBarIcon 的 `color` 属性可以自定义图标的颜色。

 ```html
-<van-goods-action>
-  <van-goods-action-icon icon="chat-o" text="客服" color="#07c160" />
-  <van-goods-action-icon icon="cart-o" text="购物车" />
-  <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
-  <van-goods-action-button type="warning" text="加入购物车" />
-  <van-goods-action-button type="danger" text="立即购买" />
-</van-goods-action>
+<van-action-bar>
+  <van-action-bar-icon icon="chat-o" text="客服" color="#07c160" />
+  <van-action-bar-icon icon="cart-o" text="购物车" />
+  <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
+  <van-action-bar-button type="warning" text="加入购物车" />
+  <van-action-bar-button type="danger" text="立即购买" />
+</van-action-bar>
 ```

 ### 自定义按钮颜色

-通过 GoodsActionButton 的 `color` 属性可以自定义按钮的颜色，支持传入 `linear-gradient` 渐变色。
+通过 ActionBarButton 的 `color` 属性可以自定义按钮的颜色，支持传入 `linear-gradient` 渐变色。

 ```html
-<van-goods-action>
-  <van-goods-action-icon icon="chat-o" text="客服" />
-  <van-goods-action-icon icon="shop-o" text="店铺" />
-  <van-goods-action-button color="#be99ff" type="warning" text="加入购物车" />
-  <van-goods-action-button color="#7232dd" type="danger" text="立即购买" />
-</van-goods-action>
+<van-action-bar>
+  <van-action-bar-icon icon="chat-o" text="客服" />
+  <van-action-bar-icon icon="shop-o" text="店铺" />
+  <van-action-bar-button color="#be99ff" type="warning" text="加入购物车" />
+  <van-action-bar-button color="#7232dd" type="danger" text="立即购买" />
+</van-action-bar>
 ```

 ## API

-### GoodsAction Props
+### ActionBar Props

 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` |

-### GoodsActionIcon Props
+### ActionBarIcon Props

 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
@ -102,12 +99,11 @@ export default {
 | icon-class | 图标额外类名 | _any_ | - |
 | dot `2.5.5` | 是否显示图标右上角小红点 | _boolean_ | `false` |
 | badge `v2.5.6` | 图标右上角徽标的内容 | _number \| string_ | - |
-| info | 图标右上角徽标的内容（已废弃，请使用 badge 属性） | _number \| string_ | - |
 | url | 点击后跳转的链接地址 | _string_ | - |
 | to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - |
 | replace | 是否在跳转时替换当前页面历史 | _boolean_ | `false` |

-### GoodsActionButton Props
+### ActionBarButton Props

 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
@ -121,14 +117,14 @@ export default {
 | to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - |
 | replace | 是否在跳转时替换当前页面历史 | _boolean_ | `false` |

-### GoodsActionIcon Slots
+### ActionBarIcon Slots

 | 名称    | 说明       |
 | ------- | ---------- |
 | default | 文本内容   |
 | icon    | 自定义图标 |

-### GoodsActionButton Slots
+### ActionBarButton Slots

 | 名称    | 说明         |
 | ------- | ------------ |
--- a/src/action-bar/demo/index.vue
+++ b/src/action-bar/demo/index.vue
@ -0,0 +1,113 @@
+<template>
+  <demo-block :title="t('basicUsage')">
+    <van-action-bar>
+      <van-action-bar-icon
+        icon="chat-o"
+        :text="t('icon1')"
+        @click="onClickIcon"
+      />
+      <van-action-bar-icon
+        icon="cart-o"
+        :text="t('icon2')"
+        @click="onClickIcon"
+      />
+      <van-action-bar-icon
+        icon="shop-o"
+        :text="t('icon3')"
+        @click="onClickIcon"
+      />
+      <van-action-bar-button
+        type="danger"
+        :text="t('button2')"
+        @click="onClickButton"
+      />
+    </van-action-bar>
+  </demo-block>
+
+  <demo-block :title="t('iconBadge')">
+    <van-action-bar>
+      <van-action-bar-icon icon="chat-o" dot :text="t('icon1')" />
+      <van-action-bar-icon icon="cart-o" badge="5" :text="t('icon2')" />
+      <van-action-bar-icon icon="shop-o" badge="12" :text="t('icon3')" />
+      <van-action-bar-button type="warning" :text="t('button1')" />
+      <van-action-bar-button type="danger" :text="t('button2')" />
+    </van-action-bar>
+  </demo-block>
+
+  <demo-block v-if="!isWeapp" :title="t('customIconColor')">
+    <van-action-bar>
+      <van-action-bar-icon icon="chat-o" :text="t('icon1')" color="#07c160" />
+      <van-action-bar-icon icon="cart-o" :text="t('icon2')" />
+      <van-action-bar-icon icon="star" :text="t('collected')" color="#ff5000" />
+      <van-action-bar-button type="warning" :text="t('button1')" />
+      <van-action-bar-button type="danger" :text="t('button2')" />
+    </van-action-bar>
+  </demo-block>
+
+  <demo-block :title="t('customButtonColor')">
+    <van-action-bar>
+      <van-action-bar-icon icon="chat-o" :text="t('icon1')" />
+      <van-action-bar-icon icon="cart-o" :text="t('icon2')" />
+      <van-action-bar-button
+        color="#be99ff"
+        type="warning"
+        :text="t('button1')"
+      />
+      <van-action-bar-button
+        color="#7232dd"
+        type="danger"
+        :text="t('button2')"
+      />
+    </van-action-bar>
+  </demo-block>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      icon1: '客服',
+      icon2: '购物车',
+      icon3: '店铺',
+      button1: '加入购物车',
+      button2: '立即购买',
+      iconBadge: '徽标提示',
+      collected: '已收藏',
+      clickIcon: '点击图标',
+      clickButton: '点击按钮',
+      customIconColor: '自定义图标颜色',
+      customButtonColor: '自定义按钮颜色',
+    },
+    'en-US': {
+      icon1: 'Icon1',
+      icon2: 'Icon2',
+      icon3: 'Icon3',
+      button1: 'Button',
+      button2: 'Button',
+      iconBadge: 'Icon Badge',
+      collected: 'Collected',
+      clickIcon: 'Click Icon',
+      clickButton: 'Click Button',
+      customIconColor: 'Custom Icon Color',
+      customButtonColor: 'Custom Button Color',
+    },
+  },
+  methods: {
+    onClickIcon() {
+      this.$toast(this.t('clickIcon'));
+    },
+    onClickButton() {
+      this.$toast(this.t('clickButton'));
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.demo-action-bar {
+  .van-action-bar {
+    position: relative;
+    padding-bottom: 0;
+  }
+}
+</style>
--- a/src/action-bar/index.js
+++ b/src/action-bar/index.js
@ -0,0 +1,27 @@
+import { createNamespace } from '../utils';
+import { useChildren } from '@vant/use';
+
+const [createComponent, bem] = createNamespace('action-bar');
+
+export const ACTION_BAR_KEY = 'vanActionBar';
+
+export default createComponent({
+  props: {
+    safeAreaInsetBottom: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  setup(props, { slots }) {
+    const { linkChildren } = useChildren(ACTION_BAR_KEY);
+
+    linkChildren();
+
+    return () => (
+      <div class={bem({ unfit: !props.safeAreaInsetBottom })}>
+        {slots.default?.()}
+      </div>
+    );
+  },
+});
--- a/src/goods-action/index.less
+++ b/src/goods-action/index.less
@ -1,6 +1,6 @@
@import '../style/var';

-.van-goods-action {
+.van-action-bar {
  position: fixed;
  right: 0;
  bottom: 0;
@ -8,10 +8,10 @@
  display: flex;
  align-items: center;
  box-sizing: content-box;
-  height: @goods-action-height;
+  height: @action-bar-height;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
-  background-color: @goods-action-background-color;
+  background-color: @action-bar-background-color;

  &--unfit {
    padding-bottom: 0;
--- a/src/action-bar/test/snapshots/demo.legacy.js.snap
+++ b/src/action-bar/test/snapshots/demo.legacy.js.snap
@ -0,0 +1,91 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders demo correctly 1`] = `
+<div>
+  <div>
+    <div class="van-action-bar">
+      <div role="button" tabindex="0" class="van-action-bar-icon">
+        <div class="van-icon van-icon-chat-o van-action-bar-icon__icon">
+          <!---->
+        </div>客服
+      </div>
+      <div role="button" tabindex="0" class="van-action-bar-icon">
+        <div class="van-icon van-icon-cart-o van-action-bar-icon__icon">
+          <!---->
+        </div>购物车
+      </div>
+      <div role="button" tabindex="0" class="van-action-bar-icon">
+        <div class="van-icon van-icon-shop-o van-action-bar-icon__icon">
+          <!---->
+        </div>店铺
+      </div> <button class="van-button van-button--danger van-button--large van-action-bar-button van-action-bar-button--first van-action-bar-button--last van-action-bar-button--danger">
+        <div class="van-button__content"><span class="van-button__text">立即购买</span></div>
+      </button>
+    </div>
+  </div>
+  <div>
+    <div class="van-action-bar">
+      <div role="button" tabindex="0" class="van-action-bar-icon">
+        <div class="van-icon van-icon-chat-o van-action-bar-icon__icon">
+          <div class="van-badge van-badge--dot"></div>
+        </div>客服
+      </div>
+      <div role="button" tabindex="0" class="van-action-bar-icon">
+        <div class="van-icon van-icon-cart-o van-action-bar-icon__icon">
+          <div class="van-badge">5</div>
+        </div>购物车
+      </div>
+      <div role="button" tabindex="0" class="van-action-bar-icon">
+        <div class="van-icon van-icon-shop-o van-action-bar-icon__icon">
+          <div class="van-badge">12</div>
+        </div>店铺
+      </div> <button class="van-button van-button--warning van-button--large van-action-bar-button van-action-bar-button--first van-action-bar-button--warning">
+        <div class="van-button__content"><span class="van-button__text">加入购物车</span></div>
+      </button> <button class="van-button van-button--danger van-button--large van-action-bar-button van-action-bar-button--last van-action-bar-button--danger">
+        <div class="van-button__content"><span class="van-button__text">立即购买</span></div>
+      </button>
+    </div>
+  </div>
+  <div>
+    <div class="van-action-bar">
+      <div role="button" tabindex="0" class="van-action-bar-icon">
+        <div class="van-icon van-icon-chat-o van-action-bar-icon__icon" style="color: rgb(7, 193, 96);">
+          <!---->
+        </div>客服
+      </div>
+      <div role="button" tabindex="0" class="van-action-bar-icon">
+        <div class="van-icon van-icon-cart-o van-action-bar-icon__icon">
+          <!---->
+        </div>购物车
+      </div>
+      <div role="button" tabindex="0" class="van-action-bar-icon">
+        <div class="van-icon van-icon-star van-action-bar-icon__icon" style="color: rgb(255, 80, 0);">
+          <!---->
+        </div>已收藏
+      </div> <button class="van-button van-button--warning van-button--large van-action-bar-button van-action-bar-button--first van-action-bar-button--warning">
+        <div class="van-button__content"><span class="van-button__text">加入购物车</span></div>
+      </button> <button class="van-button van-button--danger van-button--large van-action-bar-button van-action-bar-button--last van-action-bar-button--danger">
+        <div class="van-button__content"><span class="van-button__text">立即购买</span></div>
+      </button>
+    </div>
+  </div>
+  <div>
+    <div class="van-action-bar">
+      <div role="button" tabindex="0" class="van-action-bar-icon">
+        <div class="van-icon van-icon-chat-o van-action-bar-icon__icon">
+          <!---->
+        </div>客服
+      </div>
+      <div role="button" tabindex="0" class="van-action-bar-icon">
+        <div class="van-icon van-icon-cart-o van-action-bar-icon__icon">
+          <!---->
+        </div>购物车
+      </div> <button class="van-button van-button--warning van-button--large van-action-bar-button van-action-bar-button--first van-action-bar-button--warning" style="color: rgb(255, 255, 255); background: rgb(190, 153, 255); border-color: #be99ff;">
+        <div class="van-button__content"><span class="van-button__text">加入购物车</span></div>
+      </button> <button class="van-button van-button--danger van-button--large van-action-bar-button van-action-bar-button--last van-action-bar-button--danger" style="color: rgb(255, 255, 255); background: rgb(114, 50, 221); border-color: #7232dd;">
+        <div class="van-button__content"><span class="van-button__text">立即购买</span></div>
+      </button>
+    </div>
+  </div>
+</div>
+`;
--- a/src/action-bar/test/snapshots/index.legacy.js.snap
+++ b/src/action-bar/test/snapshots/index.legacy.js.snap
@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button render default slot 1`] = `
+<button class="van-button van-button--default van-button--large van-action-bar-button van-action-bar-button--first van-action-bar-button--last">
+  <div class="van-button__content"><span class="van-button__text">Default Content</span></div>
+</button>
+`;
+
+exports[`Icon render default slot 1`] = `
+<div role="button" tabindex="0" class="van-action-bar-icon">
+  <div class="van-icon van-icon-undefined van-action-bar-icon__icon">
+    <!---->
+  </div>Default Content
+</div>
+`;
+
+exports[`Icon render icon slot 1`] = `
+<div role="button" tabindex="0" class="van-action-bar-icon">
+  <div class="van-action-bar-icon__icon">Custom Icon
+    <!---->
+  </div>Text
+</div>
+`;
+
+exports[`Icon render icon slot with dot 1`] = `
+<div role="button" tabindex="0" class="van-action-bar-icon">
+  <div class="van-action-bar-icon__icon">Custom Icon<div class="van-badge van-badge--dot"></div>
+  </div>Text
+</div>
+`;
+
+exports[`Icon render icon slot with badge 1`] = `
+<div role="button" tabindex="0" class="van-action-bar-icon">
+  <div class="van-action-bar-icon__icon">Custom Icon<div class="van-badge">1</div>
+  </div>Text
+</div>
+`;
+
+exports[`disable safe-area-inset-bottom prop 1`] = `<div class="van-action-bar van-action-bar--unfit"></div>`;
--- a/src/action-bar/test/demo.legacy.js
+++ b/src/action-bar/test/demo.legacy.js
--- a/Show More
+++ b/Show More