From 00df6a8c81eb1309335d83653aad1716480d9ba0 Mon Sep 17 00:00:00 2001 From: tianjiaxing Date: Fri, 8 Apr 2022 12:59:25 +0800 Subject: [PATCH] chore: update --- docs/tutorial/migration-to-vue3.md | 48 ++++++++++++++++++++---------- 1 file changed, 33 insertions(+), 15 deletions(-) diff --git a/docs/tutorial/migration-to-vue3.md b/docs/tutorial/migration-to-vue3.md index fb2b22794..b1e337c7a 100644 --- a/docs/tutorial/migration-to-vue3.md +++ b/docs/tutorial/migration-to-vue3.md @@ -37,7 +37,9 @@ export function createApp() { ::: -## 全局属性，例如：全局网络请求 +## 全局属性 + +例如：全局网络请求 ```js // 之前 - Vue 2 @@ -48,7 +50,9 @@ const app = createApp({}); app.config.globalProperties.$http = () => {}; ``` -## 插件使用，例如：使用 vuex 的 store +## 插件使用 + +例如：使用 vuex 的 store ```js // 之前 - Vue 2 @@ -61,7 +65,9 @@ const app = createApp(App); app.use(store); ``` -## 项目根目录必需创建 index.html 文件，粘贴复制如下内容： +## 项目根目录必需创建 index.html 文件 + +粘贴复制如下内容： ```html @@ -83,9 +89,11 @@ app.use(store); ``` -## 只支持使用 ES6 模块规范，commonJS 需改为 ES6 模块规范 +## 只支持使用 ES6 模块规范 -### 导入模块, 例如： +commonJS 需改为 ES6 模块规范 + +### 模块导入 ```js // 之前 - Vue 2, 使用 commonJS @@ -95,7 +103,7 @@ var utils = require("../../../common/util.js"); import utils from "../../../common/util.js"; ``` -### 模块导出，例如： +### 模块导出 ```js // 之前 - Vue 2, 依赖如使用 commonJS 方式导出 @@ -135,7 +143,7 @@ export default store; ## 避免在同一元素上同时使用 v-if 与 v-for -> 而 Vue3 中，v-if 总是优先于 v-for 生效。以上写法将会在 Vue3 中与预期不符合，由于语法上存在歧义，建议避免在同一元素上同时使用两者（[更多](https://v3.cn.vuejs.org/guide/migration/v-if-v-for.html#%E6%A6%82%E8%A7%88)）。 +而 Vue3 中，v-if 总是优先于 v-for 生效。以上写法将会在 Vue3 中与预期不符合，由于语法上存在歧义，建议避免在同一元素上同时使用两者（[更多](https://v3.cn.vuejs.org/guide/migration/v-if-v-for.html#%E6%A6%82%E8%A7%88)）。 ## 生命周期的适配 @@ -249,7 +257,9 @@ Vue3 将不支持 `slot="xxx"` 的用法 ，请使用 `v-slot:xxx` 用法。[更 从 Vue 3.0 开始，过滤器已删除，不再支持，建议用方法调用或计算属性替换它们。[更多](https://v3.cn.vuejs.org/guide/migration/filters.html#%E6%A6%82%E8%A7%88) -## 在 Vue3 中，处理 API `Promise 化` 调用结果的方式不同于 Vue2。[更多](https://uniapp.dcloud.io/api/#api-promise-化) +## API `Promise 化` 调用结果的方式 + +在 Vue3 中，处理 API `Promise 化` 调用结果的方式不同于 Vue2。[更多](https://uniapp.dcloud.io/api/#api-promise-化) - Vue3 中，调用成功会进入 then 方法，调用失败会进入 catch 方法 - Vue2 中，调用无论成功还是失败，都会进入 then 方法，返回数据的第一个参数是错误对象，第二个参数是返回数据 @@ -320,11 +330,11 @@ uni.addInterceptor({ ::: -## uni-app 生命周期钩子在 Vue3 组合式 API 中的使用方式 +## 生命周期钩子的组合式 API 使用方式 在 Vue3 组合式 API 中，也需要遵循 uni-app 生命周期钩子规范, 如 onLaunch 等应用生命周期仅可在 App.vue 中监听，使用中请注意生命周期钩子的适用范围。[查看全部生命周期钩子](https://uniapp.dcloud.net.cn/collocation/frame/lifecycle) -### 只能在 `