vue基础教学（3）

一、计算属性的基本使用

1、如何使用？

computed 和 data同级，计算属性写在computed中；

写起来像方法；

用起来像属性。

2、特点（注意点）：

1）一定要有返回值。

2）可以使用data中的已知值。

3）只要跟计算属性相关的数据发生了变化，计算属性就会重新计算，不相关的属性无论如何变化，都不会导致计算属性变化。

4）计算属性名不能和data中的数据重名（因为要使用data中的数据）

3、什么时候使用？

想要根据data中的已知值，得到一个新值，并且这个新值会随着相关数据的变化而变化

		
			
{{firsrName}}-{{lastName}}
			
{{getFullName()}}
			
{{fullName}}
		
		
		
	

二、计算属性的复杂使用

	
		
			
总年龄：{{totalPrcie}}
		
		
		
	

三、 计算属性的setter和getter

		
			
{{fullName}}
		
		
		
	

四、 计算属性和methods的对比

		
			
			{{fullName}}
			{{fullName}}
			{{fullName}}
			
			{{getFullName()}}
			{{getFullName()}}
			{{getFullName()}}
		
		
		
	

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

五、侦听器总结

		
			--监听器--
			{{firstName}}-{{lastName}}
			{{watchFullName}}


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


			--年龄--
			{{age}}
		
		
		
	

1. watch的使用 通过watch我们可以获取改变的值 从而去改变一些东西

2. 如果改变和方法以及计算属性没有关系的比如age 只要age发生变化 methods也会重新执行

 3. 如果改变实例外的对象计算属性以及方法还有侦听器都不会发生变化.但是如果重新编译计算属性以及方法还有侦听器的某个值 实例外的对象也会跟着发生变化

4.扩展: watch的完全体

六、 watch监听复杂数据类型

   
		
			
				FullName: {{person.fullname}}
			
             
             	Firstname:
             
		
		
		
	

七、07 解决watch监听复杂数据类型中新值和老值相同问题

		
			
FullName: {{person.fullname}}
			
FirstName: 
		
		
		
	

watch 和 computed 的区别

computed：计算属性

1、计算属性是由data中的已知值，得到一个新值；
2、这个新值只会根据已知值的变化而变化，其他不相关的数据的变化不会影响该新值；
3、计算属性不在data中，计算属性新值的相关已知值在data中；
4、别人变化影响我自己。

watch：监听数据的变化

1、监听data中数据的变化；
2、监听的数据就是data中的已知值；
3、我的变化影响别人。