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

[justnewbee]

问题描述

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

复现步骤

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

console-mounted.vue

<template>
  <view>console mounted</view>
</template>

<script lang="ts" setup>
import {
  onMounted
} from 'vue';

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

with-slots.vue

<template>
  <slot v-if="value === 0" />
  <slot v-if="value === 1" name="s1">111</slot>
  <slot v-if="value === 2" name="s2">222</slot>
  <slot v-if="value === 3" name="s3">333</slot>
</template>

<script lang="ts" setup>
interface IProps {
  value?: 0 | 1 | 2 | 3;
}

defineProps<IProps>();
</script>

if-demo.vue

<template>
  <ConsoleMounted v-if="false" />
  <WithSlots :value="1">
    <ConsoleMounted />
  </WithSlots>
  <WithSlots :value="2">
    <ConsoleMounted />
  </WithSlots>
  <WithSlots :value="3">
    <ConsoleMounted />
  </WithSlots>
</template>

<script lang="ts" setup>
import WithSlots from './with-slots.vue';
import ConsoleMounted from './console-mounted.vue';
</script>

预期结果

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

实际结果

H5：没有问题
小程序：有三次 onMounted 打印（我传不了图）

系统信息:

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

"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，也是同样的问题。

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

[jc840031139]

七个月了 这个问题还是存在

[GRCmade]

感谢反馈，能够复现这个问题

[hzldwh]

感谢反馈，能够复现这个问题

有没有临时的解决方案，或者什么时候可以修复这个问题呢，这个问题确实挺严重的，影响度很高。