关于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的地址