牛客刷题——前端面试【六】谈一谈 v-if、v-show、v-for（区别、注意事项）

 前端面试秘法

提高个人编程能力就是不停的敲代码

这里我推荐牛客前端面试----->点击跳转

系列内容请关注：前端面试

目录

v-if

v-show

v-if 和v-show有什么区别？

v-if和v-for的注意事项

---

v-if

v-if是判断是否将DOM元素显示出来

不满足条件的元素，会直接删除，不会存在浏览器上面

v-show

也是用来判断，是否将DOM元素在页面上显示，但是与v-if有着区别，它的不显示是通过display:none;实现的，还是存在浏览上。

   
"app">
        <h2 v-if="age<18">未成年h2>
        <h2 v-else-if="age<60">壮年h2>
        <h2 v-else>老年h2>
        <h2 v-show="flag">showh2>
        <h2 v-if="flag">ifh2>
    div>
   
    <script src="./vue.js">script>
    <script>
        let vm = new Vue({
            el:"#app",
            data(){
                return{
                    age:71,
                    flag:false//true会显示，false不会显示 
                }
            }
        })
    script>

如下图片显示，不存在时v-if和v-show的显示状态

可以发现show是被display:none;影藏起来了

if已经从这个世界上消失了

v-if 和v-show有什么区别？

控制手段：v-show隐藏则是为该元素添加css--display:none，dom元素依旧还在。v-if显示隐藏是将dom元素整个添加或删除

编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换

编译条件：v-if是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时，并不做操作，直到为真才渲染

v-show 由false变为true的时候不会触发组件的生命周期

v-if由false变为true的时候，触发组件的beforeCreate、create、beforeMount、mounted钩子，由true变为false的时候触发组件的beforeDestory、destoryed方法

性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗。 

 v-if和v-for的注意事项

如果将v-if和v-for 在同一个标签内使用，会出现每次先循环，在去判断渲染，在性能上出现了浪费

要注意这个细节，在写代码时，可以将for包含到if判断中，使其不在一个标签内，从而避免了同是使用的情况。

这里，还会出现一个问题，如果使用index为索引，在渲染表单的时候就会出现，表单添加，表单内容没有出现变化，需要自己起一个唯一标志符。

 

结束语：

这里推荐大家可以有效提高个人能力的平台

前端面试神器----->点击跳转

让我们一起进步，拿到自己想要的offer