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})`
	}
}