vue中v-if和v-show的区别
2021-07-24 本文已影响0人
踏莎行
不论是v-if还是v-show两者的共同点都是动态的显示DOM元素
显示Dom元素的方式不同
- v-fi是动态地向DOM树中添加删除DOM节点
- v-show则是通过DOM的display属性达到控制其的显示与隐藏
举个栗子，定义了两个div，用来切换的元素，一个button点击控制两个元素的显示与隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div v-if="isShow" style="width: 200px; height: 50px; background-color: aqua;"></div>
<div v-else style="width: 200px; height: 50px; background-color: rgb(218, 204, 11);">
<input type="text">
</div>
<button @click="changeVisblie">点击切换</button>
</div>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data() {
return {
isShow: true
}
},
methods: {
changeVisblie() {
this.isShow = !this.isShow
}
}
})
</script>
</body>
</html>
在浏览器中打开测试文件，通过开发者工具可以看出，页面中就不存在第二个div
Snipaste_2021-07-24_13-48-23.png
点击按钮，是第一个div消失，第二个div显示，通过工具观察也是一样，vue直接将第一个div直接删除了，创建了第二个div，然后添加进DOM树
Snipaste_2021-07-24_13-51-06.png
现在将v-if换成v-show
<div v-show="isShow" style="width: 200px; height: 50px; background-color: aqua;"></div>
<div v-show="!isShow" style="width: 200px; height: 50px; background-color: rgb(218, 204, 11);">
打开页面，就能看到，两个div都是存在于DOM树的，第二个div被添加了display：none，通过点击按钮，就会发现v-show里面为真的DOM元素display不等于none，v-show为假的DOM元素的display为none，隐藏元素
Snipaste_2021-07-24_13-55-02.png
数据的保存
一个是基于DOM的销毁与重新创建，一个就是基于css属性的切换，上面的例子中，第二个div有一个input，如果在input中输入内容，使用v-if的方法渲染之后输入框内容清空，而v-show会保留input框里面的数据
编译的过程
- v-if在切换的时候存在一个局部的编译和卸载的过程，会销毁和重建一些元素，可能还存在的事件的绑定，子组件等等。v-if具有惰性，他本身的原理就是创建和销毁DOM，所以在判断时，条件为假时，就不做处理了，只有当该条件为真的时候，才会进行局部的编译和卸载的过程
- v-show就是单纯的css样式的切换。不论v-show的条件为真为假，DOM元素都会创建。
性能及使用场景
- v-if是操作DOM的，且每次切换都会重新销毁和创建DOM，所以，当我们频繁的操作DOM时会影响页面的加载速度和性能，不建议使用v-if而使用v-show。因为v-if存在的惰性，使得v-if在页面初始化渲染的时候有较低消耗，所以切换不频繁地使用v-if
- 如果我们要频繁的进行切换操作，使用v-show；如果我们要保留两个切换DOM里的数据，建议使用v-show
