Vue2过滤器、侦听器、计算属性总结

一、过滤器

过滤器（Filter）是vue为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方：插值表达式和v-bind属性绑定。
过滤器应该被添加在javaScript表达式的尾部，由“管道符”进行调用。

//局部过滤器
{{message | capi}}

//script
data:{
	message:'hello vue.js'
}
filters:{
	capi(val){
		const first = val.charAt(0).toUpperCase()
		const other = val.slice(1)
		return first + other
	  }
}


//全局过滤器
{{message | capi}}
//script
Vue.filter('capi',function(str){
	const first = str.charAt(0).toUpperCase()
	const other = str.slice(1)
	return first + other
})

二、侦听器

watch侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作

//script
data:{
	username:''
}

//方法格式
//缺点1：不会自动触发
//缺点2：如果侦听器的是一个对象，如果对象中的属性发生了变化，不会触发侦听器
watch:{
	username(newVal){
		if (newVal==='') return
		$.get('https://www.escook.cn/api/finduser/'+ newVal,function(result){
			console.log(result)
		})
	}
}
//对象格式
//优点1:可以通过immediate自动触发
//优点2：可以通过deep选项，让侦听器深度监听对象中每个属性的变化
watch:{
	username:{
		handler(newVal,oldVal){
			console.log(newVal,oldVal)
		},
		immediate:true
	}
}

方法格式
缺点1：不会自动触发
缺点2：如果侦听器的是一个对象，如果对象中的属性发生了变化，不会触发侦听器

对象格式
优点1:可以通过immediate自动触发
优点2：可以通过deep选项，让侦听器深度监听对象中每个属性的变化

三、计算属性

计算属性指的是通过一系列运算之后，最终得到的一个属性值。
这个动态计算出来的属性值可以被模板结构或methods方法使用。
特点：
1.定义的时候要被定义成"方法"
2.在使用计算属性的时候，当普通的属性使用即可
好处:
1.实现了代码的复用
2.只要计算属性中依赖的数据源变化了，则计算属性会自动重新求值。

<div>
<input type="text" v-model.number="a"><input>
<input type="text" v-model.number="b"><input>
<input type="text" v-model.number="c"><input>
<div class="box" :style="{backgroundColor:rgb}">
</div>

//script
data:{
r:0,
g:0,
b:0
}

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