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

1、computed

  • this指向的是Vue对象
  • 一般不能传值（需要传值可以利用闭包解决）
  • 一般有返回值
  • 使用场景(购物车的总价可以使用)
    下面举个闭包传值用法的例子
1
2
3
4
5
6
7
<ul>
  <li 
    v-for="(i,index) in list" 
    :key="index">
        {{computeVal(i.name)}}
  </li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
export default {
    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实例。
  • 使用场景,数据格式化，例如时间的初始化等…

参考文献–官方链接

1
2
3
<ul>
     <li v-for="(i,index) in list" :key="index">{{ i.name | filtersName }}</li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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内定义的对象。