filters
这个属性大家可能用的不是很多
因为一般的数组过滤我们用 es6的filter就能完成了
我想到一个场景，网上买书促销
满100减50
满两百减100
<input type="text" v-model="price"/>
<p>满100减50</p>
<p>满200减100</p>
<p>折后价格:{{price | priceFilter}}</p> data:{
price:100
},
filters:{
priceFilter(price){
let disCount = 0
if(price>=100 && price <200){
disCount = 50
}else if(price > 200){
disCount = 100
}else{ }
price = price - disCount
return price
}
}
这种场景用filters就比较适合了
computed
computed适合比较单纯的数据改动，拼接等操作并且保存在一个新的变量里
比如拼接姓和名
<p>{{lastName}}{{firstName}}</p>
<p>computed:{{username}}</p>
<input type="text" v-model="firstName"/>
<input type="text" v-model="str"/>
data:{
firstName:'小明',
lastName:'王',
str:'213'
},
computed:{
username:function(){
console.log(123)
return this.lastName + this.firstName
}
}
特别注意的是，computed会缓存
在我们要监听的数据没有变化的时候，是不会再去执行对象相应的数据的
比如修改str,不会输出123
但是如果是filters的话，会重新执行里面的操作，不会缓存
所以，computed性能比较好
watch
watch监听一我一般用来处理页面的联动效果
一般是发请求或者监听路由进行相应操作
watch想说的是 immediate 和 deep两个属性
immediate在数据第一次改变前就会调用
适合初始化数据
<select name="codeName" v-model="selectedOption" id="">
<option :value="item" v-for="item in selectArr">{{item}}</option>
</select> const vm = new Vue({
el:"#app",
data:{
selectArr:['js','java'],
selectedOption:'js',
showText:''
}, watch:{
selectedOption:{
handler:function(val, oldVal){
this.showText = this.selectedOption
},
immediate:true
}
}
}
deep是深度监听，能监听对象新增属性值
<input type="text" v-model="deepA.obj.y">
<input type="text" v-model="deepB.obj.y"> const vm = new Vue({
el:"#app",
data:{
deepA:{x:1,obj:{y:1}},
deepB:{x:2,obj:{y:2}}
} watch:{
deepA:{
handler:function(val, oldVal){
console.log('deepA has change')
},
deep:false
},
deepB:{
handler:function(val, oldVal){
console.log('deepB has change')
},
deep:true
}
}
当我们改变 deepA的时候，watch不会触发
deepB因为有了 deep：true所以触发了
另外：input改变deepA和deepB的时候都会触发 filters里面方法（不会缓存）