v-show VS v-if 和computed VS methods

vue中条件渲染

一段dom可以根据数据有条件的渲染，使用指令v-show，或者v-if都可以,对应的值是布尔值

<div v-show="true">box1</div>
<div v-if="false">box2</div>

v-show VS v-if 区别，根据需要选择。

	v-show="布尔"	v-if="布尔"
区别	操作css	操作dom
场景	适合频繁切换	适合不频繁切换
性能	初始渲染消耗	频繁切换消耗

---

computed VS method

method	computed
方法会每次调用	基于它们的响应式依赖进行缓存的
性能一般	性能高
{{methodname()}}	{{computedname}}
适合强制执行和渲染	适合做筛选

举例：

<div id="app">
	<p>计算属性：{{cptStr}}</p>
	<p>计算属性：{{cptStr}}</p>
	<p>计算属性：{{cptStr}}</p>
	<p>methods函数：{{show()}}</p>
	<p>methods函数：{{show()}}</p>
	<p>methods函数：{{show()}}</p>	
</div>

let vm=new Vue({
	el:"#app",
	data:{str:"我 爱 你"},
	computed:{cptStr:function(){
			console.log("计算属性");
			return this.str.split(" ").reverse().join(" ")}},
	methods:{show(){console.log("函数");
			return "函数"}}
	})

控制台的输出为：

 

由此可以看出计算属性是是一个函数,所依赖的原数据变化时，会再次执行，平时会缓存，是响应式的，需要在模板中渲染才可调用。而方法不是，每次调用都会执行。

---

VUE中计算属性的补充：

当页面获取某个数据的时候，先会在data里面找，找不到就会去计算属性里面找。在计算属性 computed 里面还有两个方法，一个 get，一个 set 。页面获取的时候会自动去执行get方法，当去修改依赖的原数据（依赖data数据）时，会执行set函数，重新获取计算属性。