vue3中v-if和v-show的区别

前言：由于在项目开发中，遇到了v-if有时候不生效的情况，打断点后发现获取的值是undefined，本人表示很疑惑，网上搜索之后有描述v-if失效的情况，具体可以查看v-if为什么会失效，什么情况下会失效_v-if失效-CSDN博客

1.作用在标签上的区别：<template>标签

v-if：可以作用在<template>标签上，官方文档是这样描述的。

v-show：不支持在 <template> 上使用，也不能和 v-else 搭配使用，官方文档是这样描述的。

2.初始状态渲染的区别：

v-if:在初始值为false时，不会做任何操作，它确保了在切换时条件状态时，条件区块内的事件监听器和子组件都会被销毁与重建。编译状态：切换过程中合适地销毁和重建组件

v-show：无论初始值是什么都会进行渲染，编译状态：css的切换

如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。

3.控制dom的区别：

v-if：显示隐藏是将dom元素进行添加或删除。

v-show：显示隐藏是使用了diaplay属性，dom元素依然存在。

---

有补充或修改的可以留言~