[VUE] v-if为何会令它后面的组件销毁

Posted 2023-05-08

参考技术A 如上面的红，绿框
当v-if生效后，（绿框在红框后面）排在它后面的permissionCascader组件会先销毁一次，
解决方法就是将permissionCascader组件放在v-if的上面。
即将红绿位置互换，如下

原因不详。

Vue学习之v-if与v-show的区别

v-if和v-show具有类似的功能，不过v-if才是真正的条件渲染，他会根据表达式适当的销毁或重建元素及绑定事件或子组件。若表达式初始值为false，则一开始元素或组件不会渲染，只有当第一次为真时，才开始编译。

而v-show只是简单的css属性切换，无论条件真与否，都会被编译。

使用场景：v-if更适合条件不经常改变的场景，因为它切换开销相对较大，v-show适用于频繁切换条件。