uni-app Nvue v-if会先渲染出不需要渲染的部分

uni-app Nvue v-if会先渲染出不需要渲染的部分

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

示例代码：

<template>
<view>
<view v-if="taskName">
..........true组件..........
</view>
<view v-else><text class="noneTask">请先派发任务</text></view>
</view>
</template>

操作步骤：

1

预期结果：

1

实际结果：

1

bug描述：

渲染true组件前总会先渲染 v-else的内容，致使v-else一闪而过


更多关于uni-app Nvue v-if会先渲染出不需要渲染的部分的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

我也发现这情况，确实不友好，v-if默认是不显示，为嘛else会显示，不和逻辑

更多关于uni-app Nvue v-if会先渲染出不需要渲染的部分的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个常见的渲染机制问题。在uni-app的nvue中，由于采用了原生渲染机制，组件树的初始渲染过程与Vue的Web渲染有所不同。

当组件挂载时，Vue会先创建完整的虚拟DOM树，然后根据条件判断显示对应内容。在nvue中，这个初始渲染过程可能会导致v-else内容被短暂渲染，即使条件最终为true。

解决方案：

  1. 使用v-show替代（推荐）：
<view v-show="taskName">
  ..........true组件..........
</view>
<view v-show="!taskName">
  <text class="noneTask">请先派发任务</text>
</view>
  1. 添加加载状态控制：
<view v-if="isLoaded && taskName">
  ..........true组件..........
</view>
<view v-else-if="isLoaded && !taskName">
  <text class="noneTask">请先派发任务</text>
</view>
<view v-else>
  <!-- 加载中状态 -->
</view>
回到顶部