- 发布：2025-04-30 14:51
- 更新：2025-04-30 14:52
- 阅读：52
产品分类： uniapp/App
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： 15.1
手机系统： 全部
手机厂商： 华为
页面类型： vue
vue版本： vue3
打包方式： 离线
项目创建方式： CLI
CLI版本号： 3.0.0-4040520250104002
测试过的手机：
示例代码：
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>
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>操作步骤：
- 一个被 slot 的组件 console-mounted.vue
- 一个带 slots 的组件 with-slots.vue
- 一个测试页面 id-demo.vue
- 一个被 slot 的组件 console-mounted.vue
- 一个带 slots 的组件 with-slots.vue
- 一个测试页面 id-demo.vue
预期结果：
onMounted 不会在控制台打印执行
onMounted 不会在控制台打印执行
实际结果：
onMounted 却被打印出来
onMounted 却被打印出来
bug描述：
v-if 若为 false，slot 的内容不应被 mount，但小程序下它 mount 了，且触发了 onMouted（界面未渲染）
1 个回复
大B (作者) - 支新杰
有没有临时修改 node_modules 的解决方案，这个影响代码程度挺大的。