v-if和v-show的区别

一、v-if

v-if是通过条件判断来控制元素是否渲染到DOM中，当条件为真时才会将元素添加到DOM中，否则不会渲染该元素。当条件发生变化时，v-if会根据新的结果重新创建或销毁DOM元素。因此，v-if在切换频繁的场景中有可能会有性能问题。

<template>
  <div>
    <p v-if="show">Hello World</p>
    <button @click="toggle">Toggle</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  },
  methods: {
    toggle() {
      this.show = !this.show
    }
  }
}
</script>

在上面的例子中，当show为true时，p标签会被渲染出来。当用户点击按钮时，toggle方法会改变show的值，从而导致p标签的显示状态发生改变。

二、v-show

v-show是通过CSS样式来控制元素是否显示，当条件为真时，则将元素的display属性设置为默认值，也就是显示元素；当条件为假时，则将元素的display属性设置为none，也就是隐藏元素。因此，v-show的切换速度较快，适合在频繁切换的场景中使用。

<template>
  <div>
    <p v-show="show">Hello World</p>
    <button @click="toggle">Toggle</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  },
  methods: {
    toggle() {
      this.show = !this.show
    }
  }
}
</script>

在上面的例子中，当show为true时，p标签的display属性会被设置为默认值，从而显示元素。当用户点击按钮时，toggle方法会改变show的值，从而导致p标签的显示状态发生改变。

总结：

• v-if：适合在切换不频繁的场景中使用，因为它在渲染DOM时会频繁地创建或销毁元素，影响性能。
• v-show：适合在切换频繁的场景中使用，因为它只是改变元素的CSS属性值，无需频繁创建或销毁元素，性能更好。

三、v-if和v-show不同点

1. 编译时机

在Vue2中，v-if和v-for都是在编译阶段被处理的，这意味着它们只有在组件被实例化时才会被处理，而无论条件是否满足，它们的相关DOM都会被创建。这可能会影响性能，尤其是在处理大量数据时。而在Vue3中，v-if和v-for是在渲染时被处理的，这意味着只有在条件满足时，v-if所对应的DOM才会被渲染出来。

2. 懒渲染

Vue3中，v-if新增了unmountOnExit选项，如果设置为true，则在条件不满足时，相关DOM会被自动卸载，从而减轻内存压力；而在Vue2中，该选项需要手动通过v-if和v-else来实现。

3. v-show优化

Vue3中，v-show的渲染也进行了优化，当条件不满足时，v-show所对应的DOM只是被隐藏了，而不是被销毁。这样可以避免频繁创建/销毁DOM，提高性能。

4. 动态组件

在Vue3中，使用v-if来动态切换组件时，可以使用新的元素来控制组件的挂载位置。这比Vue2中使用v-if和v-else要更简洁明了。

总之，虽然Vue2和Vue3中的v-if和v-show用法基本相同，但是在实现和性能方面，Vue3有很多优化和改进，使得它更加高效、易用。

四、v-if和v-show的优先级

在Vue2和Vue3中，v-show的优先级高于v-if。

在Vue2中，当一个元素同时包含v-if和v-show指令时，v-show会先被执行。这是因为v-show只需要根据条件设置元素的样式，而不需要频繁地创建/销毁DOM，因此它的优先级更高。

<template>
  <div>
    <p v-if="show" v-show="visible">Hello World</p>
    <button @click="toggle">Toggle</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
      visible: true
    }
  },
  methods: {
    toggle() {
      this.visible = !this.visible
    }
  }
}
</script>

在上面的例子中，当show为true时，p标签才会渲染到DOM中；当visible为true时，p标签才会显示出来。如果visible为false，则p标签会隐藏起来，而不是被销毁。

在Vue3中，v-show和v-if的优先级仍然是相同的，即v-show优先级高于v-if。

<template>
  <div>
    <p v-if="show" v-show="visible">Hello World</p>
    <button @click="toggle">Toggle</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const show = ref(true)
    const visible = ref(true)

    const toggle = () => {
      visible.value = !visible.value
    }

    return {
      show,
      visible,
      toggle
    }
  }
}
</script>

在上面的例子中，当show为true时，p标签才会渲染到DOM中；当visible为true时，p标签才会显示出来。如果visible为false，则p标签会隐藏起来，而不是被销毁。

总之，在Vue2和Vue3中，v-show的优先级都是高于v-if的。