dcloudio / dcloudio/uni-app

v-if 用在 slot 上,在小程序下会触发 onMounted,和 H5 上不触发的表现不一致

Open
#4,755 3 comments 0 reactions 1 assignee Claimed by @GRCmade View on GitHub
h5 mp vue3
Dominant language
JavaScript
Stars
41.6k
Forks
3.7k
Avg merge
7h 6m
Merged PRs (30d)
6

Description

**问题描述**

v-if 若为 false,slot 的内容不应被 mount,但小程序下它 mount 了,且触发了 onMouted(界面未渲染)

**复现步骤**

1. 一个被 slot 的组件 `console-mounted.vue`
2. 一个带 slots 的组件 `with-slots.vue`
3. 一个测试页面 `id-demo.vue`

`console-mounted.vue`

```vue

console mounted

import {
onMounted
} from 'vue';

onMounted(() => {
console.info('onMounted');
});

```

`with-slots.vue`

```vue


111
222
333

interface IProps {
value?: 0 | 1 | 2 | 3;
}

defineProps<IProps>();

```

`if-demo.vue`

```vue










import WithSlots from './with-slots.vue';
import ConsoleMounted from './console-mounted.vue';

```

**预期结果**

以上代码,ConsoleMounted 不可能被渲染

**实际结果**

H5:没有问题
小程序:有三次 onMounted 打印(我传不了图)

**系统信息:**
- 发行平台: 微信小程序
- 操作系统:微信小程序开发工具
- HBuilderX版本:无
- uni-app版本 [如使用Vue-cli创建/运行项目,则提供`npm run info`的运行结果]
- 设备信息 [如 iPhone8 Plus]

```json
"devDependencies": {
"@alicloud/eslint-config": "^1.13.3",
"@commitlint/cli": "^19.0.3",
"@commitlint/config-conventional": "^19.0.3",
"@dcloudio/types": "^3.4.7",
"@dcloudio/uni-automator": "3.0.0-3090920231225001",
"@dcloudio/uni-cli-shared": "3.0.0-3090920231225001",
"@dcloudio/uni-stacktracey": "3.0.0-3090920231225001",
"@dcloudio/vite-plugin-uni": "3.0.0-3090920231225001",
"@types/lodash": "^4.14.202",
"@uni-helper/uni-app-types": "^0.5.12",
"@uni-helper/uni-ui-types": "^0.5.11",
"@vue/runtime-core": "^3.4.21",
"@vue/tsconfig": "^0.5.1",
"commander": "^12.0.0",
"eslint": "^8.57.0",
"eslint-plugin-vue": "^9.22.0",
"fs-extra": "^11.2.0",
"globby": "^14.0.1",
"husky": "^9.0.11",
"lint-staged": "^15.2.2",
"markdownlint-cli2": "^0.12.1",
"miniprogram-api-typings": "^3.12.2",
"npm-check-updates": "^16.14.15",
"postcss-html": "^1.6.0",
"postcss-scss": "^4.0.9",
"sass": "^1.71.1",
"sass-loader": "^14.1.1",
"stylelint": "^16.2.1",
"stylelint-config-recommended-vue": "^1.5.0",
"stylelint-config-standard": "^36.0.0",
"stylelint-config-standard-scss": "^13.0.0",
"typescript": "^5.3.3",
"vite": "^4.5.2",
"vue-docgen-web-types": "^0.1.8",
"vue-eslint-parser": "^9.4.2",
"vue-tsc": "^2.0.3"
},
"dependencies": {
"@dcloudio/uni-app": "3.0.0-3090920231225001",
"@dcloudio/uni-app-plus": "3.0.0-3090920231225001",
"@dcloudio/uni-components": "3.0.0-3090920231225001",
"@dcloudio/uni-h5": "3.0.0-3090920231225001",
"@dcloudio/uni-mp-alipay": "3.0.0-3090920231225001",
"@dcloudio/uni-mp-baidu": "3.0.0-3090920231225001",
"@dcloudio/uni-mp-jd": "3.0.0-3090920231225001",
"@dcloudio/uni-mp-kuaishou": "3.0.0-3090920231225001",
"@dcloudio/uni-mp-lark": "3.0.0-3090920231225001",
"@dcloudio/uni-mp-qq": "3.0.0-3090920231225001",
"@dcloudio/uni-mp-toutiao": "3.0.0-3090920231225001",
"@dcloudio/uni-mp-weixin": "3.0.0-3090920231225001",
"@dcloudio/uni-mp-xhs": "3.0.0-3090920231225001",
"@dcloudio/uni-quickapp-webview": "3.0.0-3090920231225001",
"@dcloudio/uni-ui": "^1.5.0",
"lodash": "^4.17.21",
"pinia": "2.0.35",
"vue": "^3.4.21",
"vue-i18n": "^9.10.1"
},
```

**补充信息**

以上,我把 slot 用 view 包起来,把 v-if 移到 view 上,或者为默认 slot 加上 name,也是同样的问题。

[根据你的分析,出现这个问题的原因可能在哪里?]

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.