Vue基础（三）--计算属性(compute)和watch的区别？

一、计算属性
data属性和 computed 属性定义的值都可以直接绑定在表达式中，如果某些值需要通过计算才能得到，那使用计算属性就再合适不过了
name = firstName + lastName
App.vue

<template>
	<div>
		<h1>计算属性与侦听器</h1>
	</div>
</template>

<script>
export default {
	data(){
	return:{
	firstName:"张"，
	lastName:"三"
	}
	}
}，
computed:{
	name(){
		return this.firstName + this.lastName;
	}
}
</script>

<template>
	<div>
		<h1>计算属性与侦听器</h1>
		<p> 单价：{{price}}</p>
		<p>
			<button @click="sub">-</button>
		数量：{{quatity}}
		<button @click="add">+</button>
		</p>
		<p> 折扣：{{discount}}</p>
		<p> 总价：{{totlalPrice}}</p>
	</div>
</template>

<script>
export default {
	data(){
	return:{
		price:99,
		quality:1,
		discount:0.5
		}
}，
computed:{
	totalPrice(){
		return this.price * this.quatity * this.discount;
	}
},
methods:{
	sub(){
	this.quatity++
	},
	add(){
		this.quatity--
	}
}
}
</script>

二、侦听器
侦听一个属性的变化

<template>
	<div>
		<h1>计算属性与侦听器</h1>
		<p> 单价：{{price}}</p>
		<p>
			<button @click="sub">-</button>
		数量：{{quatity}}
		<button @click="add">+</button>
		</p>
		<p> 折扣：{{discount}}</p>
		// <p> 总价：{{totlalPrice}}</p>
	</div>
</template>

<script>
export default {
	data(){
	return:{
		price:99,
		quality:1,
		discount:0.5,
		totalPrice:0
		}
}，
// computed:{
//	totalPrice(){
//		return this.price * this.quatity * this.discount;
//	}
//},
watch: {
	quatity(val){
	this.totalPrice = this.price * val * this.discount;
}
}
methods:{
	sub(){
	this.quatity++
	},
	add(){
		this.quatity--
	}
}
}
</script>

三、计算属性与 侦听器的对比

• 一个值的改变，会影响多个值（或处理多件事），使用侦听器。（为了观察一个值）
• 多个值的改变，为了得到一个结果，使用计算属性。（为了得到一个值）
• 实际开发中，大部分问题都可以用 computed 解决