【Vue】基础系列（三）计算属性-监视属性-双向绑定-示例-getter/setter显示与监听-计算属性缓存

1. 计算属性 computed

• 在computed属性对象中定义计算属性的方法
• 在页面中使用{ {方法名}}来显示计算的结果

1. 定义：要用的属性不存在，要通过已有属性计算得来。
2. 原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
3. get函数什么时候执行？
   (1). 初次读取时会执行一次。
   (2). 当依赖的数据发生改变时会被再次调用。
4. 优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
5. 备注：
   1.计算属性最终会出现在vm上，直接读取使用即可。
   2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

//完整写法
 fullName:{
   
	get(){
   
		console.log('get被调用了')
		return this.firstName + '-' + this.lastName
	},
	set(value){
   
		console.log('set',value)
		const arr = value.split('-')
		this.firstName = arr[0]
		this.lastName = arr[1]
	}
} 

//简写
fullName(){
   
	console.log('get被调用了')
	return this.firstName + '-' + this.lastName
}

2. 监视属性 watch

• 通过通过vm对象的$watch()或watch配置来监视指定的属性
• 当属性变化时, 回调函数自动调用, 在函数内部进行计算

1. 当被监视的属性变化时, 回调函数自动调用, 进行相关操作
2. 监视的属性必须存在，才能进行监视！！
3. 监视的两种写法：
   (1). new Vue时传入watch配置
   (2). 通过vm.$watch监视

watch:{
   
	isHot:{
   
		immediate:true, //初始化时让handler调用一下
		//handler什么时候调用？当isHot发生改变时。
		handler(newValue,oldValue