计算属性和监视属性

一、计算属性 1.1计算属性的使用 1.1.1 计算属性的基本使用

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

1.1.2 计算属性的复杂使用  遍历数组对象 ：for循环  for in    for of     forEach  map  filter   reduce 

	总价为：{{totalPrice}}

1.2计算属性的setter和getter

	总价为：{{totalPrice}}

1.3计算属性的和methods的对比

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

二、监听属性 1.1监听简单数据类型、函数

	--监听器--
	{{firstName}}-{{lastName}}
	{{watchFullName}}		
	--计算属性--
	{{fullName}}
	{{fullName}}
	{{fullName}}
	--方法--
	{{getFullName()}}
	{{getFullName()}}
	{{getFullName()}}		
	--年龄--
	{{age}}

1. watch的使用 通过watch我们可以获取改变的值 从而去改变一些东西
2. 如果改变和方法以及计算属性没有关系的比如age 只要age发生变化 methods也会重新执行
3. 如果改变实例外的对象计算属性以及方法还有侦听器都不会发生变化.但是如果重新编译计算属性以及方法还有侦听器的某个值 实例外的对象也会跟着发生变化. 
4.扩展: watch的完全体

1.2监听复杂数据类型

watch无法直接监听复杂数据类型  用deep

    
		FullName: {{person.fullname}}
	
    
        Firstname:
    

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

computed: {
	person2() {
		return JSON.parse(JSON.stringify(this.person));
    } //解决深度监听新老值同源问题
}

1.3计算属性computed和监听属性watch得区别

1.computed能完成的功能,watch都可以完成。

2.watch能完成的功能,computed不一定能完成，例如: watch可以进行异步 *** 作。

tips:

1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vue实例对象。

2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数、promise的回调函数等)，最好写成箭头函数,这样this的指向才是vue实例对象