计算属性

计算属性

本篇文章主要记录一下自己对计算属性的一些学习和认识，通过博客记录来熟练和巩固自己的学习。星光不问赶路人，功夫不负有心人，加油~

因为表达式如果过长，或者逻辑更加复杂，就会变得臃肿甚至难阅读和维护，而计算属性可以解决这样的问题

<dvi id='app'>
{{reverseText}}
</div>
<script>
  var app=new Vue({
 	el:'#app',
 	data:{
 		text:'123,456',
 		},
 	computed:{
 	 reverseText:function(){
 	 		return this.text.split(',').reverse().join(',');
 	 		}
 	 	}
 	 })
 </script>

一个计算属性中可以完成各种复杂的逻辑，运算，函数调用等。计算属性还可以依赖 多个Vue实例的数据，只要其中一数据发生变化，计算属性警会重新执行，视图也会更改

下边这个是完成购物车内两个包裹总价的计算

<div id='app'>
  {{prices}}
 </div>
 <script>
 var = new Vue({
     el:'#app',
     data:{
      	package1:[
      	{
      	name:'ipad1',
      	price:123,
      	count:12
      	},{
      	name:'ipad2',
      	price:123,
      	count:2
      	}
      	],
      	package2:[
			{
			name:'phone1',
			price:32,
			count:4
			},{
			name:'phone2,
			price:23,
			count:1
			}
		]
      },
      computed:{
      prices:function(){
			var prices = 0;
			for(var i=0;i<package1.length;i++){
			 prices += package1[i].price*package1[i].count;
			}
			for(var i=0;i<package2.length;i++){
			 prices += package2[i].price*package2[i].count;
				}
				return prices;
			}
		}
      }) 
</script>

当商品有增加或者删除的时候，计算属性的prices也会自动更新，视图中的总价也会发生改变

每一个计算属性都会包含一个getter和setter

<div id='app1'>
</div>
<div id='app2'>
</div>
<script>
  var app = new Vue({
	el:'#app1',
	data:{
 		firstName:'Tom',
 		lastName:'Jon'
   },
   computed:{
	fullName:{
		get:function(){
		return this.firstName + ' ' + lastName;
		},
		setter:function(newValue){
		var names = newValue.split(' ');
		this.firstName=names[0];
		this.lastName=names[names.lenght-1];
		}
    }
  }
})
</script>

手动修改app.fullName时候，相应的值会发生改变。计算属性除了这样简单的修改数值之外，还会动态地设置元素的内联样式style和class。使用组件的时候也会动态 的传递props

计算属性可以依赖其他属性计算；并且计算属性可以依赖其他实例里边的数据

<div id='app1'>
</div>
<div id='app2'>
{{reverseMessage}}
</div>
<script>
	var app1= new Vue({
	el:'#app1',
	data:{
		message:'123,456'
     }
   })
   var app2 = new Vue({
		el:'#app2',
		computed:{
			reverseMessage:function(){
					return app1.message.split(',').reverse.join(',');

             }
		 }
 })
</script>

这里创建了两个实例app1和app2,在实例app2里边使用了app1的数据，当message发生改变的时候，实例app2的计算属性也会随着发生改变。

那么问题是，在methods里边定义方法也能达到相同的效果，为什么使用计算属性呢？原因是计算属性是基于他的依赖缓存的，也就是依赖于溯计算的属性，当这个属性不发生改变的时候，计算属性就不会发生更新。看下边栗子：

computed:{
  now:function(){
		return Date.now();
   }
}

这里的Date.now()不是响应式依赖，计算属性now不会更新。computed计算一次就会把数据存起来，只有依赖的数据发生了改变，才会重新赋值。但是methods不一样，只要重新渲染，他就会重新调用，就会重新被执行。那么，什么时候需要使用methods，什么时候又要用到计算属性呢？当要遍历大数组和大量数据的时候，需要用到计算属性，不需要缓存的时候就可以用methods
什么是响应式呢？简单的说就是数据变化页面也变化

写在最后，此文档用来记录自己学习的。如果那里写的不对，欢迎指正，谢谢~~~