watch侦听器和computed计算属性

侦听器

• 侦听器用于开发者监视某些数据的变化 从而针对数据的变化做特定的操作
• 参数新值在前，旧值在后

方法格式的侦听器

• 缺点：无法在刚进入页面就侦听一次

watch: {
	msg(newVal,oldVal){
		console.log(newVal,oldVal);
	}
}

对象格式的侦听器

• 可以：通过immediate选项让侦听器自动触发

watch: {
	msg:{
		handler(newVal,oldVal){
			console.log(newVal,oldVal);
		},
		immediate: true
	}
}

深度监听

• 对象格式中加入deep:true

watch: {
	info:{
		handler(newVal,oldVal){
			console.log(newVal,oldVal);
		},
		immediate: true,
		deep: true
	}
}

直接监听对象子属性

• 对象调用属性后用单引号包裹

watch: {
	'info.msg':{
		handler(newVal){
			console.log(newVal);
		}
	}
},

计算属性

• 使用的时候当作属性来使用
• 经过一系列的运算之后最终得到一个属性值，只要被依赖的属性发生改变就会触发计算属性
• 定义在computed节点下
• 计算属性在定义的时候要定义成方法格式

<div class="app">
	r:{{r}} g:{{g}} b{{b}} rgb{{rgb}}
	<div>
		<button @click="change()">修改msg</button>
	</div>
</div>
<script>
	var vm =  new  Vue({
		el : '.app',
		data () {
			return {
				r : 0,
				g : 0,
				b : 0
			}
		},
		computed: {
			rgb() {
				// return 'rgb('+this.r+','+this.r+','+this.r+')'
				return `rgb(${this.r},${this.g},${this.b})`
			}
		},
		methods: {
			change(){
				this.b += 1
			}
		}
	})
	console.log(vm);
</script>

模板字符串

• 反引号引起来

return `rgb(${this.r},${this.g},${this.b})`