【Vue3】利用v-if处理模板渲染问题

背景

最近在写作一个电影展示系统。但是在前端问后端请求到数据的时候（比如电影海报名postName）往往会在前端渲染不出来并且报错：

TypeError: Cannot read properties of null (reading 'posterName')

解决办法

这个错误是因为在渲染组件时，this.movie 仍然是 null。由于 Vue 在渲染模板时尝试访问 this.movie.posterName，但 this.movie 尚未加载数据，因此会引发这个错误。

要解决这个问题，可以在模板中使用一个条件渲染指令，确保在 this.movie 已加载数据之前不渲染依赖于 this.movie 的内容。

可以使用 v-if 来检查 this.movie 是否已经加载：

比如说这段代码：

<div class="details-container" v-if="movie">

当movie组件存在的时候再进行渲染

完整代码示例如下（渲染电影数据）：

<div class="details-container" v-if="movie">
      <div class="poster">
        <img :src="getPosterUrl(movie.posterName)" alt="Movie Poster" />
      </div>
      
      <div class="details">
        <h1 class="movie-title">{{ movie.movieName }}</h1>
        
        <div class="info">
          <div class="rating"><b>评分：</b>{{ movie.rate }}</div>
          <div class="genre"><b>类型：</b>{{ transformGerne(movie.genre) }}</div>
        </div>
        
        <div class="info">
          <div ><b>上映时间：</b>{{ movie.showTime  }}</div>
        </div>

        <div class="info">
          <div><b>演员：</b>{{ movie.actors  }}</div>
        </div>

        <div class="info">
          <div><b>内容梗概：</b></div>
        </div>
        <div class="synopsis">
          <p>{{ movie.summary }}</p>
        </div>
        
        
        <button class="buy-ticket-button" @click="backToContent">返回</button>
      </div>
    </div>

为什么？

为什么异步请求都要等数据加载完成以后才能渲染？

异步请求需要等待数据加载完成才能渲染，是因为在获取数据之前，数据可能尚未准备好或不可用。

在 Vue.js 应用中，通常使用异步请求从服务器获取数据，而这些请求是非阻塞的。

这意味着当请求发出后，程序不会等待请求完成而继续执行。

这种行为在提高应用响应速度方面非常有用，但也带来了一些挑战，比如在数据未加载完之前访问数据会导致错误。

所以当我们需要渲染的数据是来源于请求后端的时候，使用v-if来控制数据的渲染便是一个十分实用的技巧