From 194b910c4922e6a230df64d3f873a84bae43a477 Mon Sep 17 00:00:00 2001 From: qiang Date: Wed, 8 Mar 2023 20:49:42 +0800 Subject: [PATCH] docs: update Composition API --- docs/collocation/App.md | 1 + docs/tutorial/README.md | 2 +- docs/tutorial/_sidebar.md | 1 + docs/tutorial/page.md | 2 +- docs/tutorial/vue-basics.md | 6 ++--- docs/tutorial/vue-composition-api.md | 4 +-- docs/tutorial/vue3-basics.md | 4 +-- docs/tutorial/vue3-composition-api.md | 38 +++++++++++++++++++++++++++ 8 files changed, 48 insertions(+), 10 deletions(-) create mode 100644 docs/tutorial/vue3-composition-api.md diff --git a/docs/collocation/App.md b/docs/collocation/App.md index b31d1d3aa..b62cd13fb 100644 --- a/docs/collocation/App.md +++ b/docs/collocation/App.md @@ -39,6 +39,7 @@ **注意** - **应用生命周期仅可在`App.vue`中监听，在其它页面监听无效**。 +- 以组合式 API 使用时，在 Vue2 和 Vue3 中存在一定区别，请分别参考：[Vue2 组合式 API 使用文档](/tutorial/vue-composition-api.html) 和 [Vue2 组合式 API 使用文档](/tutorial/vue3-composition-api.html)。 - 应用启动参数，可以在API `uni.getLaunchOptionsSync`获取，[详见](https://uniapp.dcloud.net.cn/api/plugins/getLaunchOptionsSync.html#getlaunchoptionssync) - onlaunch里进行页面跳转，如遇白屏报错，请参考[https://ask.dcloud.net.cn/article/35942](https://ask.dcloud.net.cn/article/35942) - `App.vue` 不能写模板 diff --git a/docs/tutorial/README.md b/docs/tutorial/README.md index aba9cfae0..0bcad1a69 100644 --- a/docs/tutorial/README.md +++ b/docs/tutorial/README.md @@ -12,7 +12,7 @@ DCloud还提供了使用js编写服务器代码的uniCloud云引擎。所以只 - 页面文件遵循 [Vue 单文件组件 (SFC) 规范](https://vue-loader.vuejs.org/zh/spec.html)，即每个页面是一个.vue文件 - 组件标签靠近小程序规范，详见[uni-app 组件规范](/component/) - 接口能力（JS API）靠近小程序规范，但需将前缀 `wx`、`my` 等替换为 `uni`，详见[uni-app接口规范](/api/) -- 数据绑定及事件处理同 `Vue.js` 规范，同时补充了App及页面的生命周期 +- 数据绑定及事件处理同 `Vue.js` 规范，同时补充了[应用生命周期](https://uniapp.dcloud.net.cn/collocation/App.html#applifecycle)及[页面的生命周期](https://uniapp.dcloud.net.cn/tutorial/page.html#lifecycle) - 如需兼容app-nvue平台，建议使用flex布局进行开发 uni-app分`编译器`和`运行时（runtime）`。uni-app能实现一套代码、多端运行，是通过这2部分配合完成的。 diff --git a/docs/tutorial/_sidebar.md b/docs/tutorial/_sidebar.md index ff017679b..c12020c9c 100644 --- a/docs/tutorial/_sidebar.md +++ b/docs/tutorial/_sidebar.md @@ -20,6 +20,7 @@ * [基础](/tutorial/vue3-basics.md) * [组件](/tutorial/vue3-components.md) * [API](/tutorial/vue3-api.md) + * [组合式 API](/tutorial/vue3-composition-api.md) * [vuex](/tutorial/vue3-vuex.md) * [pinia](/tutorial/vue3-pinia.md) * [vue2 升 3 指南](/tutorial/migration-to-vue3.md) diff --git a/docs/tutorial/page.md b/docs/tutorial/page.md index 1f5305aa7..66e2f2f36 100644 --- a/docs/tutorial/page.md +++ b/docs/tutorial/page.md @@ -30,7 +30,7 @@ uni-app项目中，一个页面就是一个符合`Vue SFC规范`的`.vue`文件 ## 页面生命周期 @lifecycle -``uni-app`` 支持如下页面生命周期函数： +``uni-app`` 页面除支持 Vue 组件生命周期外还支持下方页面生命周期函数，当以组合式 API 使用时，在 Vue2 和 Vue3 中存在一定区别，请分别参考：[Vue2 组合式 API 使用文档](/tutorial/vue-composition-api.html) 和 [Vue2 组合式 API 使用文档](/tutorial/vue3-composition-api.html)。 |函数名|说明|平台差异说明|最低版本| |:-|:-|:-|:-| diff --git a/docs/tutorial/vue-basics.md b/docs/tutorial/vue-basics.md index f9db99834..afdd4b147 100644 --- a/docs/tutorial/vue-basics.md +++ b/docs/tutorial/vue-basics.md @@ -223,10 +223,8 @@ vue 是单页面应用，使页面局部刷新，不用每次跳转页面都要 相比Web平台， Vue.js 在 `uni-app` 中使用差异主要集中在两个方面： -- 新增：`uni-app` 除了支持Vue实例的生命周期，还支持[应用生命周期](/collocation/frame/lifecycle?id=应用生命周期)以及[页面生命周期](/collocation/frame/lifecycle?id=页面生命周期)。 -- 受限：相比web平台，在小程序和App端部分功能受限，[具体见](/vue-api)。 -- uni-app 完整支持 Vue 模板语法。 -- App端可以使用更多的vue特性，[详见](https://ask.dcloud.net.cn/article/36599)。 +- 新增：`uni-app` 除了支持 Vue 实例的组件生命周期，还拥有[应用生命周期](/collocation/App.html#applifecycle)及[页面的生命周期](/tutorial/page.html#lifecycle)。 +- 受限：相比 Web 平台，在小程序和 App 端部分功能支持不完善，具体见[兼容性列表](/vue3-api)。 diff --git a/docs/tutorial/vue-composition-api.md b/docs/tutorial/vue-composition-api.md index 384f04b35..c93150dc2 100644 --- a/docs/tutorial/vue-composition-api.md +++ b/docs/tutorial/vue-composition-api.md @@ -1,4 +1,4 @@ -## 组合式 API +## 组合式 API（Composition API） 目前 uni-app（Vue2） 基于 Vue 2.6，组合式 API 由 [@vue/composition-api](https://github.com/vuejs/composition-api) 支持，script setup 由 [ unplugin-vue2-script-setup](https://github.com/antfu/unplugin-vue2-script-setup) 支持。 @@ -55,7 +55,7 @@ unplugin-vue2-script-setup](https://github.com/antfu/unplugin-vue2-script-setup) ::: - 2. 从 @vue/composition-api 包内导入并使用基础的组合式API，具体的兼容性仍需参考：[@vue/composition-api](https://github.com/vuejs/composition-api#browser-compatibility)。从 @dcloudio/uni-app 包内导入 uni-app 其他生命周期API。 + 2. 从 @vue/composition-api 包内导入并使用基础的组合式API，具体的兼容性仍需参考：[@vue/composition-api](https://github.com/vuejs/composition-api#browser-compatibility)。从 @dcloudio/uni-app 包内导入 uni-app [应用生命周期](/collocation/App.html#applifecycle)及[页面的生命周期](/tutorial/page.html#lifecycle)。 ```js import { defineComponent, ref } from '@vue/composition-api' diff --git a/docs/tutorial/vue3-basics.md b/docs/tutorial/vue3-basics.md index 0933c5573..bd011c953 100644 --- a/docs/tutorial/vue3-basics.md +++ b/docs/tutorial/vue3-basics.md @@ -279,8 +279,8 @@ vue 是单页面应用，使页面局部刷新，不用每次跳转页面都要 相比Web平台， Vue.js 在 `uni-app` 中使用差异主要集中在两个方面： -- 新增：`uni-app` 除了支持Vue实例的生命周期，还支持[应用生命周期](https://uniapp.dcloud.io/collocation/App#应用生命周期)以及[页面生命周期](https://uniapp.dcloud.io/tutorial/page#lifecycle)。 -- 受限：相比web平台，在小程序和App端部分功能受限，[具体见](/vue3-api)。 +- 新增：`uni-app` 除了支持 Vue 实例的组件生命周期，还拥有[应用生命周期](/collocation/App.html#applifecycle)及[页面的生命周期](/tutorial/page.html#lifecycle)。 +- 受限：相比 Web 平台，在小程序和 App 端部分功能支持不完善，具体见[兼容性列表](/vue3-api)。 [uni-app 项目支持 vue 3.0介绍，及升级指南](https://ask.dcloud.net.cn/article/37834) diff --git a/docs/tutorial/vue3-composition-api.md b/docs/tutorial/vue3-composition-api.md new file mode 100644 index 000000000..f9120dc1c --- /dev/null +++ b/docs/tutorial/vue3-composition-api.md @@ -0,0 +1,38 @@ +## 组合式 API（Composition API） + +通过组合式 API，我们可以使用导入的 API 函数来描述组件逻辑。在单文件组件中，组合式 API 通常会与 ``` + ``` -- GitLab