關於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的地址