Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
程序yang
unidocs-zh
提交
d1c73481
U
unidocs-zh
项目概览
程序yang
/
unidocs-zh
与 Fork 源项目一致
Fork自
DCloud / unidocs-zh
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
未验证
提交
d1c73481
编写于
2月 16, 2022
作者:
F
fasttian
提交者:
Gitee
2月 16, 2022
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update
上级
ff8f2f31
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
43 addition
and
25 deletion
+43
-25
docs/migration-to-vue3.md
docs/migration-to-vue3.md
+43
-25
未找到文件。
docs/migration-to-vue3.md
浏览文件 @
d1c73481
...
...
@@ -287,44 +287,62 @@
-
uni-app 生命周期钩子在 Vue3 组合式 API 中的使用方式如下:
-
在 Vue3 组合式 API 中,也需要遵循 uni-app 生命周期钩子规范, 如 onLaunch 等应用生命周期仅可在 App.vue 中监听,使用中请注意生命周期钩子的适用范围。
[
查看全部生命周期钩子
](
https://uniapp.dcloud.net.cn/collocation/frame/lifecycle
)
-
只能在
`
setup()`
方法或
`<script setup>`
语法糖中使用生命周期钩子
-
只能在
`
<script setup>`
单文件语法糖或
`setup()`
方法中使用生命周期钩子,以 A 页面跳转 B 页面传递参数为例:
```js
// 在 setup() 中使用
<
script
>
import
{
onLaunch
,
onShow
,
}
from
"
@dcloudio/uni-app
"
;
export
default
{
setup
()
{
onLaunch
(()
=>
{
console
.
log
(
"
App Launch
"
);
});
onShow
(()
=>
{
console
.
log
(
"
App Show
"
);
});
}
}
// 从 A 页面跳转 B 页面时传递参数 ?id=1&name=uniapp
<script setup>
import { onMounted } from 'vue'
onMounted(() => {
uni.navigateTo({
url: 'xxx?id=1&name=uniapp' // xxx 为跳转的页面路径
})
})
</script>
```
```js
//
在 <script setup> 中使用
//
方式一:在 B 页面 <script setup> 中
<script setup>
import {
onL
aunch
,
onL
oad
,
onShow
} from "@dcloudio/uni-app";
onLaunch(() => {
console.log("App Launch");
// onLoad 接受 A 页面传递的参数
onLoad((option) => {
console.log("B 页面 onLoad:", option); //B 页面 onLoad: {id: '1', name: 'uniapp'}
});
onShow(() => {
console.log("App
Show");
console.log("B 页面 on
Show");
});
</script>
```
```js
// 方式二:在 B 页面 setup() 中
<script>
import {
onLoad,
onShow,
} from "@dcloudio/uni-app";
export default {
setup() {
// onLoad 接受 A 页面传递的参数
onLoad((option) => {
console.log("B 页面 onLoad:", option); //B 页面 onLoad: {id: '1', name: 'uniapp'}
});
onShow(() => {
console.log("B 页面 onShow");
});
}
}
</script>
```
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录