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

1. 使用静态属性

如果 resdata.status 总是不变的，可以使用静态属性来优化性能。将其转换为计算属性，只有在 resdata.status 发生更改时才会重新计算。

computed: {
  shijian() {
    return this.resdata.status === 0 ? this.resdata.shijian : ''
  }
}

<strong class="ff-ab">
  <div v-if="resdata.status === 1" v-loading="true" style="margin-top: -30px"></div>
  {{ shijian }}
</strong>

2. 避免不必要的渲染

在上面的代码中，我们可以看到在 v-if 中使用了 v-loading，这可能会导致不必要的重新渲染。这是因为 v-loading 会在元素中添加一个新的 class，导致 Vue 认为这个元素已经被更改了。为了避免这种情况，我们可以将 v-loading 移到外面的元素中。

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

3. 使用 template

如果我们需要在 v-if 中添加更多的元素，我们可以使用 template 标签来避免多余的 DOM 元素。

<strong class="ff-ab" v-loading="resdata.status === 1">
  <template v-if="resdata.status === 1">
    <div style="margin-top: -30px"></div>
  </template>
  {{ shijian }}
</strong>

4. 使用 keep-alive

如果我们需要频繁切换组件，可以使用 keep-alive 来缓存组件状态，减少不必要的重新渲染。

<template>
  <keep-alive>
    <component :is="componentName"></component>
  </keep-alive>
</template>

5. 避免直接操作 DOM

在 Vue 中，我们应该避免直接操作 DOM，而应该使用数据驱动视图的方式来更新界面。如果需要对 DOM 进行操作，可以使用 ref 属性来获取 DOM 元素，并在 mounted 钩子函数中进行操作。

<template>
  <div>
    <input ref="input" type="text">
  </div>
</template>

<script>
export default {
  mounted() {
    this.$refs.input.focus()
  }
}
</script>

{{ resdata.status == 0 ? resdata.shijian : "" }} " title="vue3优化

{{ resdata.status == 0 ? resdata.shijian : "" }} " loading="lazy">