[{"data":1,"prerenderedAt":273},["ShallowReactive",2],{"page-\u002Fvue\u002Fv-if与v-show的区别":3},{"id":4,"title":5,"body":6,"description":265,"extension":266,"meta":267,"navigation":268,"path":269,"seo":270,"stem":271,"__hash__":272},"content\u002FVue\u002Fv-if与v-show的区别.md","v-if与v-show的区别",{"type":7,"value":8,"toc":255},"minimark",[9,12,41,45,48,57,115,117,135,159,162,231,234,242,245,251],[10,11,5],"h1",{"id":5},[13,14,15,19,20,23,24,27,28,30,31,33,34,37,38,40],"p",{},[16,17,18],"code",{},"v-if","指令与",[16,21,22],{},"v-show","指令都可以根据值动态控制",[16,25,26],{},"DOM","元素显示隐藏，",[16,29,18],{},"和",[16,32,22],{},"属于",[16,35,36],{},"Vue","的内部常用的指令，指令的职责是当表达式的值改变时把某些特殊的行为应用到",[16,39,26],{},"上。",[42,43,44],"h2",{"id":44},"描述",[46,47,18],"h3",{"id":18},[13,49,50,52,53,56],{},[16,51,18],{},"指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回",[16,54,55],{},"truthy","值的时候被渲染。",[58,59,64],"pre",{"className":60,"code":61,"language":62,"meta":63,"style":63},"language-html shiki shiki-themes github-light github-dark","\u003Cdiv v-if=\"show\">show\u003C\u002Fdiv>\n\u003Cdiv v-else>hide\u003C\u002Fdiv>\n","html","",[16,65,66,98],{"__ignoreMap":63},[67,68,71,75,79,83,86,90,93,95],"span",{"class":69,"line":70},"line",1,[67,72,74],{"class":73},"sVt8B","\u003C",[67,76,78],{"class":77},"s9eBZ","div",[67,80,82],{"class":81},"sScJk"," v-if",[67,84,85],{"class":73},"=",[67,87,89],{"class":88},"sZZnC","\"show\"",[67,91,92],{"class":73},">show\u003C\u002F",[67,94,78],{"class":77},[67,96,97],{"class":73},">\n",[67,99,101,103,105,108,111,113],{"class":69,"line":100},2,[67,102,74],{"class":73},[67,104,78],{"class":77},[67,106,107],{"class":81}," v-else",[67,109,110],{"class":73},">hide\u003C\u002F",[67,112,78],{"class":77},[67,114,97],{"class":73},[46,116,22],{"id":22},[13,118,119,121,122,124,125,127,128,130,131,134],{},[16,120,22],{},"指令用法大致一样，不同的是带有",[16,123,22],{},"指令的元素始终会被渲染并保留在",[16,126,26],{},"中，",[16,129,22],{},"只是简单地切换元素的",[16,132,133],{},"CSS property display","。",[58,136,138],{"className":60,"code":137,"language":62,"meta":63,"style":63},"\u003Cdiv v-show=\"show\">show\u003C\u002Fdiv>\n",[16,139,140],{"__ignoreMap":63},[67,141,142,144,146,149,151,153,155,157],{"class":69,"line":70},[67,143,74],{"class":73},[67,145,78],{"class":77},[67,147,148],{"class":81}," v-show",[67,150,85],{"class":73},[67,152,89],{"class":88},[67,154,92],{"class":73},[67,156,78],{"class":77},[67,158,97],{"class":73},[42,160,161],{"id":161},"区别",[163,164,165,188,201,213,222],"ul",{},[166,167,168,169,171,172,174,175,177,178,180,181,183,184,187],"li",{},"实现方式: ",[16,170,18],{},"是动态的向",[16,173,26],{},"树内添加或者删除",[16,176,26],{},"元素，",[16,179,22],{},"是通过设置",[16,182,26],{},"元素的",[16,185,186],{},"display","样式属性控制显隐。",[166,189,190,191,193,194,196,197,200],{},"编译过程: ",[16,192,18],{},"切换有一个局部编译卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件，",[16,195,22],{},"只是简单的基于",[16,198,199],{},"CSS","切换。",[166,202,203,204,206,207,209,210,212],{},"编译条件: ",[16,205,18],{},"是惰性的，如果初始条件为假，则什么也不做，只有在条件第一次变为真时才开始局部编译， ",[16,208,22],{},"是在任何条件下都被编译，然后被缓存，而且",[16,211,26],{},"元素保留。",[166,214,215,216,218,219,221],{},"性能消耗: ",[16,217,18],{},"有更高的切换消耗，",[16,220,22],{},"有更高的初始渲染消耗。",[166,223,224,225,227,228,230],{},"使用场景: ",[16,226,18],{},"适合条件不太可能改变的情况，",[16,229,22],{},"适合条件频繁切换的情况。",[42,232,233],{"id":233},"每日一题",[58,235,240],{"className":236,"code":238,"language":239},[237],"language-text","https:\u002F\u002Fgithub.com\u002FWindrunnerMax\u002FEveryDay\n","text",[16,241,238],{"__ignoreMap":63},[42,243,244],{"id":244},"参考",[58,246,249],{"className":247,"code":248,"language":239},[237],"https:\u002F\u002Fcn.vuejs.org\u002Fv2\u002Fguide\u002Fconditional.html#v-if\nhttps:\u002F\u002Fwww.cnblogs.com\u002Fdengyao-blogs\u002Fp\u002F11378228.html\nhttps:\u002F\u002Fcn.vuejs.org\u002Fv2\u002Fguide\u002Fconditional.html#v-show\n",[16,250,248],{"__ignoreMap":63},[252,253,254],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":63,"searchDepth":100,"depth":100,"links":256},[257,262,263,264],{"id":44,"depth":100,"text":44,"children":258},[259,261],{"id":18,"depth":260,"text":18},3,{"id":22,"depth":260,"text":22},{"id":161,"depth":100,"text":161},{"id":233,"depth":100,"text":233},{"id":244,"depth":100,"text":244},"v-if指令与v-show指令都可以根据值动态控制DOM元素显示隐藏，v-if和v-show属于Vue的内部常用的指令，指令的职责是当表达式的值改变时把某些特殊的行为应用到DOM上。","md",{},true,"\u002Fvue\u002Fv-if与v-show的区别",{"title":5,"description":265},"Vue\u002Fv-if与v-show的区别","GZ9r5ojy0F0qDH8QHYLevu6jWe6wuytn2KZxJUUucHQ",1791042468032]