v-show和v-if的区别与联系

一、v-show和v-if的共同点

1、v-show和v-if都能控制元素的显示和隐藏

2、当两者均需要控制多个元素的显示与隐藏时，都可以使用HTML5新增的<template>元素来包裹需要切换显示与隐藏的多个元素。

注意：在最终的的渲染结果中是不会包含<template>元素的，实际上<template>元素是被当作一个不可见的包裹元素，主要用于分组条件的判断和列表渲染。

二、v-show和v-if的区别

1、控制元素显示与隐藏的方式

• 使用v-show指令，元素本身是要被渲染的，元素的显示与隐藏，是通过CSS样式中的display属性来进行控制的。当v-show中相关的表达式为false时，则设置其相关的样式为：“display: none;”。
• v-if指令是根据表达式的值的真假来生成或删除一个元素。当表达式的值计算为false时，v-if指令不会创建该元素或将该已存在的元素进行删除；当表达式的值为true时，v-if指令会创建该元素。

2、开销方式的不同

• v-show有更高的初始渲染开销。
• v-if有更高的切换开销。

3、使用场景不同

• 如果需要非常频繁地切换元素的显示或隐藏，则使用v-show比较好。
• 如果在运行时条件很少改变，则使用v-if比较好。