使用 v-if 显示第一个渲染，然后 v-show？

Question

我知道 v-if 和 v-show 之间的区别，所以我想知道，有什么方法可以提取它们中最好的部分： -v-if 不会在立即渲染时加载；-v-show 使组件保持活动状态，因此切换速度更快。是否可以延迟渲染，然后在激活后保持渲染状态？而且它真的像看起来那样有效吗？

Answer 1

感谢@Aditya Bhave 的评论，我创建了这个：

<template>
  <div>
    <div v-if="initiated === true" v-show="showComponent"></div>
  
    <button @click="toggleComponent">Toggle</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      initiated: false,
      showComponent: false
    }
  },
  methods: {
    toggleComponent () {
      this.initiated = true
      this.showComponent = !this.showComponent
    },
  }
}
</script>