计算属性与侦听器

1.计算属性的基本使用 使用语法拼接{{firstName+ "-" + lastName}}使用方法方法{{getfullName()}}使用计算属性{{fullName}}

	
		
		
	
	
		
			{{firstName}}-{{lastName}}
			{{getfullName()}}
			{{fullName}}
		
		
		
	

例子中计算属性computed看起来和方法似乎一样，只是方法调用需要使用（），而计算属性不用，方法取名字一般是动词见名知义，而计算属性是属性是名词，但这只是基本使用。

2.计算属性的复杂使用 要求计算出所有book的总价格。 1.for循环
2.for.in
3.for.of
4.forEach
5.map
6.filter
7.reducn

	
		
		
	
	
		
			{{totalPrcie}}
		
		
		
	

3.计算属性的setter和getter

计算属性关键词: computed。

计算属性在处理一些复杂逻辑时是很有用的。

	
		
		

	
	
		
			{{firstName}}-{{lastName}}
			{{fullName}}
		
		
		
	

计算属性一般没有set方法，只读属性，只有get方法，但是上述中newValue就是新的值，也可以使用set方法设置值，但是一般不用。

4.计算属性和methods的对比

	
		
		

	
	
		
			--计算属性--
			{{fullName}}
			{{fullName}}
			{{fullName}}
			--方法--
			{{getFullName()}}
			{{getFullName()}}
			{{getFullName()}}
		
		
		
	

            1.计算属性是一个属性 必须要有返回值 methods不一定
            2.计算属性在页面渲染时 不需要加括号 methods必须要加
            3.计算属性有缓存 methods没有缓存 从性能上来讲 计算属性更具有优势

5.侦听器 (1)概念:

1.Vue提供了一个watch选项，提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步代码或者开销比较大的 *** 作时，这个方式是最有用的。

(2)普通监听

普通监听是简单的数据类型：数字，布尔值，字符串

写法一：设有两个参数，一个是新的数据，一个是旧的数据

el:
data:
watch:{
要监听的变量名称:function(newVal,oldVal){},
要监听的变量名称N(newVal,oldVal){
	...
	}
}

写法二：在监听器中，被监听的变量除了可以写成函数，还可以是一个对象

  el:
data:
watch:{
要监听的变量名称:{
	handler:function(newVal,oldVal){
		...
	  }
  	}
 }

watch:{
msg:{
handler(new,old){
console.log('msg 被改变了，原来的值是：'+old+'，新的值是'+new)
}}}

(3).深度监听

watch里面msg（）{ }这种形式只是浅监听，只适合监听一层，如果想监听对象或者数组内部的值，这种形式就不适合了，这个时候需要深度监听，deep属性，它的默认值是false

	
		
		

	
	
		
			
				FullName: {{person.fullname}}
			
             
             	Firstname:
             
		
		
		
	

(4).解决watch监听复杂数据类型中新值和老值相同问题

	
		
		

	
	
		
			
FullName: {{person.fullname}}
			
FirstName: 
		
		
		
	

6.计算属性与监听的区别：

因为计算属性也是实时变化，那么监听和它什么区别呢

1.监听是在数据发生变化时才会触发对应的函数

2.计算属性在页面中使用了其结果或者依赖的数据发生变化的时候就会触发对应的函数

3.计算属性是基于变量的值进行缓存的，只要在他关联的变量值发生变化时计算属性就会重新执行，这意味着只要价格和数量信息不发生变化，计算属性就会返回之前的计算结果，而不必再次执行函数，而methods没有缓存，所以每次访问都会重新执行。