vue3 优化 <strong class="ff-ab"> <div v-show="resdata.status" v-loading="resdata.status" style="margin-top: -30px" ></div> <div v-show="resdata.status"> {{ resdata.shijian }} </div> </strong>

1. 使用静态节点

在上述代码中，v-loading和v-show指令的值都是resdata.status，即一个变量。这意味着每次resdata.status变化时，都会重新计算一遍这两个指令的值，从而导致不必要的性能损耗。为了避免这种情况，我们可以将这两个指令放到一个静态节点中，从而优化性能：

<div class="ff-ab" :class="{ 'is-loading': resdata.status }">
  <div class="ff-ab__loading" v-show="resdata.status"></div>
  <div v-show="resdata.status">{{ resdata.shijian }}</div>
</div>

2. 使用keep-alive缓存组件

如果这段代码所在的组件需要频繁地销毁和重新创建，那么可以考虑使用keep-alive缓存组件，从而避免不必要的性能损耗。将这段代码所在的组件用keep-alive包裹起来即可：

<keep-alive>
  <MyComponent>
    <div class="ff-ab" :class="{ 'is-loading': resdata.status }">
      <div class="ff-ab__loading" v-show="resdata.status"></div>
      <div v-show="resdata.status">{{ resdata.shijian }}</div>
    </div>
  </MyComponent>
</keep-alive>

3. 使用computed属性

如果这段代码所在的组件需要频繁地计算resdata.status和resdata.shijian，那么可以考虑使用computed属性来缓存计算结果，从而避免不必要的性能损耗：

<template>
  <div class="ff-ab" :class="{ 'is-loading': isLoading }">
    <div class="ff-ab__loading" v-show="isLoading"></div>
    <div v-show="isLoading">{{ shijian }}</div>
  </div>
</template>

<script>
export default {
  computed: {
    isLoading() {
      return this.resdata.status;
    },
    shijian() {
      return this.resdata.shijian;
    }
  }
}
</script>

这样，在resdata.status和resdata.shijian变化时，只有isLoading和shijian这两个computed属性会被重新计算，而不是整个模板。

" title="vue3 优化

{{ resdata.shijian }}

" loading="lazy">