dcloudio / dcloudio/uni-app

【uni3+vue3 】onBeforeMount 钩子执行时机晚于子组件挂载钩子

Open
#3,799 0 comments 0 reactions 1 assignee Claimed by @Otto-J View on GitHub
bug vue3
Dominant language
JavaScript
Stars
41.6k
Forks
3.7k
Avg merge
7h 6m
Merged PRs (30d)
6

Description

**问题描述**
存在父子关系的两个组件,父组件的 onBeforeMount 钩子执行晚于子组件 setup。

**复现步骤**
存在父子关系的两个组件,分别打印两个组件挂载相关的钩子: setup、onBeforeMount、onMount,发现父组件 onBeforeMount 钩子执行时机晚于子组件挂载。

伪代码:

容器组件,控制父组件隐藏显示,不断触发组件挂载,测试挂载钩子执行顺序。
```




````

父组件
```

import { onBeforeMount, onMounted } from 'vue'
import Child from './Child.vue';

console.log('parent === setup');

onBeforeMount(() => {
console.log('parent === BeforeMount');
});

onMounted(() => {
console.log('parent === Mounted');
});


父组件


```

子组件
```

import { onBeforeMount, onMounted } from 'vue'

console.log('child ---- setup');

onBeforeMount(() => {
console.log('child ---- BeforeMount');
});

onMounted(() => {
console.log('child ---- Mounted');
});


子组件

```

**预期结果**
1、父 setup
2、父 onBeforeMount
3、子 setup
4、子 onBeforeMount
5、子 onMount
6、父 onMount

**实际结果**
1、父 setup
2、子 setup
3、子 onBeforeMount
4、子 onMount
5、父 onBeforeMount 【错误】
6、父 onMount

父的 onBeforeMount 钩子执行晚于子组件 setup。

**系统信息:**
- 发行平台: 支付宝小程序,微信小程序
- 操作系统: Android12
- uni-app版本:3.0.0-alpha-3050220220718001,3.0.0-alpha-3050320220729001
- 设备信息:Redmi K40(在小程序开发者工具中的模拟器上表现也一致)

**补充信息**
同一个工程构建的支付宝和微信小程序均复现,在uniapp2+vue2的工程中测试正常。

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.