关于vue的computed、filters、watch

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里面方法(不会缓存)

以上所有demo的地址

上一篇:【Python开发】python集成开发环境IDE搭建


下一篇:bzoj 3160: 万径人踪灭 manachar + FFT