《uni-app跨平台开发完全指南》- 08 - 条件渲染与列表渲染

引言

上一章我们深入探讨了uni-app中的数据绑定与事件处理，为应用注入了灵魂。今天，我们将直面前端开发中最常见、也最考验性能的两大场景：条件渲染与列表渲染。你是否曾为页面的卡顿而烦恼？是否对v-if和v-show的选择感到困惑？本文将带你从全面掌握打造丝滑流畅的uni-app应用。

一、 条件渲染

在应用开发中，我们经常需要根据数据的状态来决定显示或隐藏某些部分。比如，用户登录后显示用户信息，否则显示登录按钮；数据加载时显示骨架屏，加载完成后渲染真实内容。

在uni-app（基于Vue.js）中，我们主要使用 v-if 和 v-show 这两个指令来实现条件渲染。二者的底层实现机制有着天壤之别！

1.1 v-if

v-if 是“真正”的条件渲染，因为它会确保在切换过程中，条件块内的事件监听器和子组件适当地被销毁和重建。

核心原理：

<template>
  <view>
    <!-- 条件为 true 时，view 才会被创建并插入DOM -->
    <view v-if="isVisible" class="conditional-view">
      我是v-if渲染的内容！
    </view>
    
    <button @tap="toggleVisible">切换显示 (v-if)</button>
  </view>
</template>

<script>
export default {
     
     
  data() {
     
     
    return {
     
     
      isVisible: false 
    };
  },
  methods: {
     
     
    toggleVisible() {
     
     
      this.isVisible = !this.isVisible; 
      // 每次切换，v-if 控制的元素都会经历 创建/销毁 的过程
    }
  }
};
</script>

v-if 的生命周期：

原理说明：

• 销毁与重建：当 v-if 的条件变为 false 时，Vue会完全销毁该元素及其子组件，释放内存。当条件再次变为 true 时，Vue会重新创建一个全新的元素和组件实例，并执行其完整的生命周期钩子（如 created, mounted）。
• 惰性渲染：v-if 是“惰性”的。如果在初始渲染时条件为 false