VUE之计算属性&侦听器&方法

计算属性简介
什么是计算属性？
通过之前章节，已经可以搭建一个简单的Vue应用，在模板里双向绑定一些数据或者表达式

计算属性缘由：
模板内的表达式是非常便利的，但是它们实际上只用于简单的运算，如果在模板里放入太多的逻辑会让模板过于臃肿且难以维护。

例如将“xiaoming”首字母大写

<div id="app">
			{{name.substring(0,1).toUpperCase()+name.substring(1)}}
</div>

var app = new Vue({
			el:'#app',
			data:{
				name:'fanmengze'
			}
})

计算属性缘由：
上述案例里，将业务逻辑代码写入了模板里，写法本身没有错误，也能够实现相应功能，但是这样会导致代码过于累赘，不简洁，难以维护
因此在这里引入了计算属性computed来解决此问题。
这里注意：计算属性相关代码需要写到computed选项中。

这里的表达式包含3个操作，并不是很清晰，所以在遇到复杂逻辑时应该使用计算属性，使用计算属性对上例进行改写:

<div id="app">
			{{quanbu}}
</div>

var app = new Vue({
			el:'#app',
			data:{
				name:'fanmengze'
			},
			computed:{
				quanbu:function(){
					return this.name.substring(0,1).toUpperCase()+this.name.substring(1)
				}
			}
});

所有的计算属性都以 函数的形式写在vue实例内的computed选项内，最终return返回计算后的结果。

计算属性创建步骤

1.在模板里调用
2.computed选项
3.返回值

注意：
1、this—在构造函数中，访问本身方法时，需要利用this代表自身，去指向对应的方法和数据。
2、写法上类似于函数，调用时类似于属性，所以起名为计算属性
3、顾名思义，首先它是一种属性，其次它有“计算”这个特殊性质。每次取得它的值得时候，它并不像普通属性那样直接返回结果，而是经过一系列的计算之后再返回结果。

computed vs methods
计算属性缓存 VS 方法
除了计算属性，可以通过在表达式中调用方法来达到同样的效果：

<div id="one">
			<p>计算属性：{{changword}}</p>
			<p>方法：{{changwordMethod()}}</p>
</div>


var one = new Vue({
			el:'#one',
			data:{
				name:'fanmengze'
			},
			//方法
			methods:{
				changwordMethod:function(){
					console.log('方法');
					return this.name.substring(0,1).toUpperCase()+this.name.substring(1)
					
				}
			},
			//计算属性
			computed:{
				changword:function(){
					console.log('计算属性');
					return this.name.substring(0,1).toUpperCase()+this.name.substring(1)
					
				}
			}
})

页面输出如图下：

控制台输出打印如图下：

但是接下来再看个案例，将两者调用两次，看下区别！

<div id="one">
			<p>计算属性：{{changword}}计算属性：{{changword}}</p>
			<p>方法：{{changwordMethod()}}方法：{{changwordMethod()}}</p>
</div>


var one = new Vue({
			el:'#one',
			data:{
				name:'fanmengze'
			},
			//方法
			methods:{
				changwordMethod:function(){
					console.log('方法');
					return this.name.substring(0,1).toUpperCase()+this.name.substring(1)
					
				}
			},
			//计算属性
			computed:{
				changword:function(){
					console.log('计算属性');
					return this.name.substring(0,1).toUpperCase()+this.name.substring(1)
					
				}
			}
})

页面输出如图下：

控制台输出打印如图下：

计算属性调用了一次，
普通方法调用了两次。

使用 methods 来替代 computed，效果上两个是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
可以说使用 computed 性能会更好，但是如果不希望缓存，可以使用 methods 属性。

相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。

假设有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算（500万）。
然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A ！如果不希望有缓存，可以用方法来替代。

综上所述，计算属性更高效一些，因为是基于依赖进行缓存。

侦听器/属性

除了计算属性，Vue 提供了一种通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性/器、观察者。也就是说，当vue实例数据发生变动，watch属性可以快速检测到改变的数据
接下来结合具体案例了解下watch侦听器属性。
案例：

<div id="two">
			<p>单价：<input type="text" v-model="price" /></p>
			<p>数量：<input type="text" v-model="number" /></p>
			<p>单价是：{{price}}，数量是：{{number}}</p>
			<p>总价：{{sum}}</p>
</div>

逻辑分析及监听验证：
当发现到单价和数量任意一个发生改变时，总价才会发生变动。
所以首先需要检测数据的变动，此时便可以用到watch侦听器属性。例如要监听单价price，则如下所示

watch:{
				price:function(){
					console.log('price发生改变')
				}
}

当在页面改动单价price值时，便会发现监听到了price值的改动

watch监听器属性参数1：
newValue为改动后的新数值
此时便可以监测到值发生改动，并且获取改动后的数值大小。

price:function(newValue){
					console.log(newValue),
					this.sum=newValue*this.number;
}

单价里边依次输出2，5，6！


改动后重新计算总价：

watch:{
				price:function(newValue){
					console.log(newValue),
					this.sum=newValue*this.number;
				},
				number:function(newValue){
					console.log(newValue),
					this.sum=newValue*this.price;
				}
}

只要监听名字对应上，即可监听任意数据的改动；

侦听器VS计算属性

计算属性可以将一些复杂的逻辑封装进去，直接调用属性即可进行计算，且计算完毕后会进行依赖缓存，直到值发生改变时才会再次重新计算

<div id="two">
			<p>单价：<input type="text" v-model="price" /></p>
			<p>数量：<input type="text" v-model="number" /></p>
			<p>单价是：{{price}}，数量是：{{number}}</p>
			<p>总价：{{sum}}</p>
</div>

var two = new Vue({
			el:'#two',
			data:{
				price:50,
				number:0,
			},
			computed:{
				sum:function(){
					return this.price*this.number;
				}
			}
});

例下图：

对比后发现，计算属性写法相对于watch侦听器属性简洁了很多

计算属性技巧
计算属性有两个实用的小技巧/特点
①计算属性可以依赖其他计算属性；
②计算属性不仅可以依赖当前vue实例的数据，还可以依赖其他实例数据

在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，最终返回计算后的结果

除了简单的用法，计算属性还可以依赖多个Vue实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。

例如：下面实例展示的是在购物车内两个包裹的物品总价

<div id="app">
			总价：{{money}}
</div>

var app = new Vue({
			el:'#app',
			data:{
				package1:[
					{
						name:'iphone7',
						price:7000,
						cound:2
					},
					{
						name:'ipad',
						price:3000,
						cound:1
					}
					
				],
				package2:[
					{
						name:'apple',
						price:3,
						cound:3
					},
					{
						name:'banner',
						price:10,
						cound:6
					}
					
				]
			},
			computed:{
				money:function(){
					var money = 0;
					for(var i =0;i<this.package1.length;i++){
						money+=this.package1[i].price*this.package1[i].cound;
					}
					for(var i =0;i<this.package2.length;i++){
						money+=this.package2[i].price*this.package2[i].cound;
					}
					return money;
				}
			}
})

当package1或者package2中的商品有任何变化，比如购买数量变化或者删除商品时，计算属性money就会自动更新，视图中的总价也会自动变化

计算属性 VS 观察者VS方法
计算属性 VS 观察者（watcher）VS方法（methods）对比：
1、计算属性，便捷，可缓存，性能较好；
2、观察者，需要添加多个监听，较为麻烦；
3、methods，不能缓存，每次都会计算，性能较差

小结

（1）使用计算属性还是methods取决于是否需要缓存，当遍历大数组和做大量计算时，应当使用计算属性，除非你不希望得到缓存。
（2）因为侦听器watch相对繁琐，大多情况下推荐用计算属性computed选项处理即可。
（3）在 Vue 中，computed 的属性可以被视为是 data 一样，可以读取和设值，因此在 computed 中可以分成 getter（读取） 和 setter（设值），一般情况下是没有 setter 的，computed 预设只有 getter ，也就是只能读取，不能改变设值
（4）vue.js计算属性默认只有 getter，因为是默认值所以我们也常常省略不写
（5）注意：vue.js计算属性默认只有 getter，因为是默认值所以我们也常常省略不写

以上为VUE之计算属性&侦听器&方法，如有问题请联系小编！