Vue 计算属性，方法和侦听器

继续努力，每天进步一小步。

通常我们会在模板中绑定表达式,模板是用来描述视图结构的。如果模板中的表达式存在过多的逻辑，模板会变得臃肿不堪，维护变得非常困难。因此，为了简化逻辑，当某个属性的值依赖于其他属性的值时，我们可以使用计算属性。

3.1  什么是计算属性

计算属性就是当其依赖属性的值发生变化是，这个属性的值会自动更新，与之相关的DOM部份也会同步自动更新。来看图一的代码。

以上的代码，我们发现在插值表达式存在逻辑运算，这种情况VUE是不建议的。因为，VUE主要作用域视图层的展示。所以我们就要用到 computed 计算属性。图二代码：

在应用计算属性的属性的时候，我们要注意一下这几种情况：

1. VUE实例中声明 computed 选项。

2. computed 属性接受的是一个对象{}，对象中是一个函数。

3. 对象中的函数，必须是结果的返回值。

3.2   计算属性 computed 与方式 methods 的不同点

理论上 computed 与 methods 都是定义函数处理逻辑方法的，他们两者最大的不同之处就是缓存机制。

1. computed 计算的结果如果不发生改变就不会触发事件

2. methods 中一般都是定义的需要事件触发的一些函数。每次只要触发事件，就会执行相对应的方法。如果把 computed 中的方法写到 methods 中会浪费性能。

3. computed 必须返回一个页面绑定的值，methods 中可以只执行逻辑代码,可以有返回值，也可以没有。

4. 两者调用的方式不一样，computed 定义的成员像属性一样访问，methods 定义的成员必须以函数形式调用。

3.3   侦听属性（watch）

Vue 提供了一种更统一的方式来观察和响应Vue实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时或者执行异步操作或开销较大操作时，建议使用 watch

通过控制台的调试,我们可以发现 watch 与 computed 是有共同的特点，都是可以实现计算属性的缓存。但是，watch 方式比较啰嗦，我们一般首选还是 computed。

3.4   计算属性中的setter

计算属性会默认提供getter,不过在你需要的时候也可以为你提供一个setter:

练习：

效果图：

当点击“+”或“-”的时候，金额总计和商品数量会实现一个数据的时时更新。

这里的样式用的是bootstrap。

HTML：

<div id="app">
			<div class="container">
				<table class="table table-bordered table-hover">
					<tr>
						<td>
							商品名称
						</td>
						<td>
							商品价格
						</td>
						<td>
							商品数量
						</td>
						<td>
							商品总额
						</td>
						<td>
							操作
						</td>
					</tr>
					<tr v-for="(item,index) in listInfo">
						<td>{{item.shopName}}</td>
						<td>{{item.shopPrice}}</td>
						<td>
							<button class="btn btn-default" @click="reduce(index)">-</button>
							<input type="text" v-model="item.shopCount" />
							<button class="btn btn-default" @click="add(index)">+</button>
						</td>
						<td>
							{{item.shopPrice*item.shopCount}}
						</td>
						<td>
							<button class="btn btn-warning">删除</button>
						</td>
					</tr>
				
				</table>
				<p class="text-right">
					金额总计:{{sum}}
				</p>
				<p class="text-right">
					商品数量:{{count}}
				</p>
				<hr />
				<form>
					<div class="form-group">
						<input class="form-control" placeholder="商品名称" v-model="shopName" />
					</div>
					<div class="form-group">
						<input class="form-control" placeholder="商品价格" v-model = "shopPrice"/>
					</div>
					<div class="form-group">
						<button class="btn btn-primary" type="button" @click="addInfo">增加</button>
					</div>
				</form>
			</div>
		</div>

JS：

<script>
			new Vue({
				el:"#app",
				data:{
					listInfo:[
						{id:1,shopName:"男装1",shopPrice:1000,shopCount:0},
						{id:2,shopName:"男装2",shopPrice:2000,shopCount:0},
						{id:3,shopName:"男装3",shopPrice:3000,shopCount:0},
						{id:4,shopName:"男装4",shopPrice:4000,shopCount:0},
						{id:5,shopName:"男装5",shopPrice:5000,shopCount:0},
					],
					shopName:"",
					shopPrice:""
				},
				methods:{
					add:function(index){
						this.listInfo[index].shopCount++
						 
					},
					reduce:function(index){
						if(this.listInfo[index].shopCount<=0){
							this.listInfo[index].shopCount = 0
						}else {
							this.listInfo[index].shopCount--
						}
						
					},
					addInfo:function(){
//						alert(1)
					
						var obj = {
							id:this.listInfo.length+1,
							shopName:this.shopName,
							shopPrice:this.shopPrice,
							shopCount:0
						}
						console.log(obj)
						this.listInfo.push(obj)
						
					}
				},
				computed:{
					sum(){
						var total = 0
						for (var i=0;i<this.listInfo.length;i++) {
							total+=parseFloat(this.listInfo[i].shopPrice)*parseFloat(this.listInfo[i].shopCount)
						}
						return total	
					},
					count:function(){
						var total = 0
						for (var i=0;i<this.listInfo.length;i++) {
							total+=parseInt(this.listInfo[i].shopCount)
						}
						return total
					}
				}
			})
		</script>

以上就是我今天的总结。