vue的computed与watch

177 阅读2分钟
  • tip:这三者有点相像,之前工作中基本没有使用过filters,最近面试经常被问到filters的使用方法。
  • 之前有过初始化一个数据的需求,发现computed实现不了,最后查阅资料,通过computed闭包传参实现了。其实完全可以用filters实现!!!

1、computed

  • this指向的是Vue对象
  • 一般不能传值(需要传值可以利用闭包解决)
  • 一般有返回值
  • 使用场景(购物车的总价可以使用)
  • 计算属性是基于它们的依赖进行缓存的,只有里面的值变化了才会重新求值
  • 数据量操作大的话 还是使用methods

下面举个闭包传值用法的例子

<ul>
  <li 
    v-for="(i,index) in list" 
    :key="index">
        {{computeVal(i.name)}}
  </li>
</ul>
data() {
      return {
        list:[
          {name:'lfz'},
          {name:'sxy'},
          {name:'ljd'},
          {name:'xjy'},
        ]
      }
    },
    computed:{
      computeVal(){
        return (val)=>{
          console.log(27,val) //这里能输出list里面name的值
           return val.toUpperCase()// 返回大写name
        }
      }
    },

这个做法可以初始化数据,其实可以被filters代替

2、filters

  • this无法访问vue实例。
  • 利用{{params | fn}}来声明方法。前面为参数,后面为方法。 可以串联.
  • 使用场景,数据格式化,例如时间的初始化等...
  • 传参多个,{{params_1 | fn(params_2,params_3)}}

遇到的问题
filters会根据参数而变化,有时候接口没有拿到数据为undefind的时候也会进filters,所以要过滤。判断接口是否调用完毕。

参考文献--官方链接

<ul>
     <li v-for="(i,index) in list" :key="index">{{ i.name | filtersName }}</li>
</ul>
export default {
    name: "test_2",
    data() {
      return {
        list:[
          {name:'lfz'},
          {name:'sxy'},
          {name:'ljd'},
          {name:'xjy'},
        ]
      }
    },
    filters:{
      filtersName(name){
        return name.toUpperCase()
      }
    },

3、watch

  • 监听一个data内定义的对象。
  • 多层对象监听需要用到deep:true。 例如需要监听totalPrice
  • 生命周期在created前面
    foods: {
        totalPrice:
    }

demo

watch: {
    foods: {
        handler(newVal, oldVal){
        this.calcConditionAmount()//计算满足金额
      },
      immediate: true,// 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
      deep: true //深度监听
    }
}

4、computedwatch区别

1.watch擅长处理的场景:一个数据影响多个数据

2.computed擅长处理的场景:一个数据受多个数据影响