vue的computed、filters、watchfilters

filters

这个属性大家可能用的不是很多

因为一般的数组过滤我们用 es6的filter就能完成了

我想到一个场景，网上买书促销

满100减50

满两百减100

这种场景用filters就比较适合了

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

computed

computed适合比较单纯的数据改动，拼接等操作并且保存在一个新的变量里

比如拼接姓和名

 特别注意的是，computed会缓存

在我们要监听的数据没有变化的时候，是不会再去执行对象相应的数据的

比如修改str,不会输出123

但是如果是filters的话，会重新执行里面的操作，不会缓存

所以，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
  }
}

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
    }
  }<br>}

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