Vue学习（三）：计算属性与监视属性

1. 计算属性 computed

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

const vm = new Vue({
	el:'#root',
	data:{
		firstName:'张',
		lastName:'三',
	},
	computed:{
		fullName:{
		//get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
		//get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
			get(){
				console.log('get被调用了')
				// console.log(this) //此处的this是vm
				return this.firstName + '-' + this.lastName
			},
			//set什么时候调用? 当fullName被修改时。
			set(value){
				console.log('set',value)
				const arr = value.split('-')
				this.firstName = arr[0]
				this.lastName = arr[1]
			}
		}
	}
})

//简写，只有get函数时才能简写
fullName(){
	console.log('get被调用了')
	return this.firstName + '-' + this.lastName
}

2. 监视属性 watch

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

watch:{
	isHot:{
		immediate:true, //初始化时让handler调用一下
		//deep:true,//深度监视
		//handler什么时候调用？当isHot发生改变时。
		handler(newValue,oldValue){
			console.log('isHot被修改了',newValue,oldValue)
		}
	}
}

vm.$watch('isHot',{
	immediate:true, //初始化时让handler调用一下
	//deep:true,//深度监视
	//handler什么时候调用？当isHot发生改变时。
	handler(newValue,oldValue){
		console.log('isHot被修改了',newValue,oldValue)
	}
})

• immediate属性：当值为true时，handler还会在初始化时被调用，默认值为false
• deep属性：当值为true时，对对象的监视，可以监测对象内部值改变，默认值为false
• 简写：没有immediate和deep属性等属性时才可以简写

//简写
isHot(newValue,oldValue){
	console.log('isHot被修改了',newValue,oldValue,this)
} 

3. 计算属性与监视属性的区别

• computed能完成的功能，watch都可以完成，但computed性能更好。
• watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。