Vue3 性能优化：使用 v-if 和 computed 属性优化渲染

在 Vue3 中，可以使用'v-if'和'v-else'指令来避免不必要的渲染，以优化性能。此外，可以使用'computed'属性来计算'resdata.status'的值，避免在模板中反复计算。

代码如下：

<template>
  <strong class="ff-ab">
    <div v-if="isLoading" style="margin-top: -30px">
      <!-- 加载中的提示 -->
    </div>
    <div v-else>
      {{ shijian }}
    </div>
  </strong>
</template>

<script>
export default {
  props: {
    resdata: Object
  },
  computed: {
    isLoading() {
      return this.resdata.status === 1
    },
    shijian() {
      return this.resdata.status === 0 ? this.resdata.shijian : ""
    }
  }
}
</script>

在上面的代码中，我们定义了两个计算属性'isLoading'和'shijian'。'isLoading'用来判断是否显示加载中的提示，'shijian'用来计算展示的时间值。

在模板中，我们使用'v-if'和'v-else'指令来根据'isLoading'的值来展示不同的内容。这样可以避免在模板中反复计算'resdata.status'的值，从而提高性能。

另外，我们还可以将'resdata'作为组件的prop传入，这样可以让组件更加通用。