v-if 用在 slot 上,在小程序下会触发 onMounted,和 H5 上不触发的表现不一致
- 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
Assessment
This issue has not been assessed yet.