谈一谈vue中的filter过滤器，computed计算属性，watch侦听器

   今天做项目的过程中遇到了一个需求，就是需要对价格进行格式处理。这种需求使用filter过滤器肯定是可以的。然后我就联想到了计算属性与就侦听器。今天简单对他们进以下介绍吧！

                                   

那我就先来介绍一下filter吧！

首先我们要先了解的是它的实质是什么？（本质修饰作用）

以我自己的理解就是不改变原始数据，只是对数据进行加工处理后返回过滤后的数据再进行调用处理。 主要用于对数据格式进行转换。

实质了解完，正好解决一下我遇到的那个问题。介绍一下它的用法

要知道过滤器分为两种全局过滤器和局部过滤器

为了满足我的需求，两种过滤器的写法我都展示在下面：需求是将价格前面加上 ￥ 以及保留两位小数

先是局部过滤器：

​
//局部过滤器  
​<div>价格：{{price | showPrice}}</div>

<script>
 let vm = new Vue({
    el:"#app",
    data:{
        price:200
    },
    filters:{
        //处理函数
        showPrice(value){
            console.log(value)    // ￥200.00
            return '￥' + price.toFixed(2)
        }
    }
 })
</script>

局部过滤器的用法：

在实例中定义：

filter:{
过滤器名:function（value，其他参数(可传可不传)）{
    // 对value进行处理，然后return返回处理后的结果
    return ...
}

使用时：

​
{{price | showPrice}} // 把price当做showPrice的value参数进行处理，return返回处理的结果

​

然后是全局过滤器

<div id="app">
    <h3>{{price | showPrice}}</h3>
</div>

<script>
    Vue.filter("showPrice",(value)=>{
        return '￥' + price.toFixed(2)
    })
 
    let vm = new Vue({
        el:"#app",
        data:{
            price:200 
        }
    })
 </script>

全局过滤器的用法：

// 全局过滤器  项目中一般写在main.js中
vue.filter(过滤器名，function（value）{
	return ...
})

全局过滤器的第一个参数是过滤器名称，第二个参数是处理函数，处理函数的第一个参数就是管道符的左边内容...

注意点：

局部过滤器 是filters 全局是filter (虽然全局加上s，不会报错但是该过滤器不会执行。）

当全局过滤器和局部过滤器重名时，会采用局部过滤器。

在 vue2 中默认不能使用过滤器，需要使用 v-html="$options.filters.过滤器名"

一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右

对于过滤器的用法也有两种 一种是双花括号插值，一种是 v-bind 表达式

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

还有就是关于过滤器的传参问题了。

{{message | filterA}}
// 上面这种写法右边是过滤器函数 左边内容时传给右面函数的第一个参数

{{message | filterA | filterB}}
//上述代码中,message是作为参数传给filterA函数，而filterA函数的返回值作为参数传给filterB函数，最后显示最终结果

{{message | filterA ('para1','para2')}}
//filterA函数的参数依次是 message ，para1，para2

{{'message1','message2' | filterA}}
//上述代码中,filterA函数的参数依次是 message1 ， message2

以上就是我对filter的一些总结。

接下来就是计算属性咯

如果计算属性中依赖的数据项发生变化时，他会自动变化

它的使用场景：在模板中可以直接通过插值语法简单的表达式显示一些data中的数据,但是有的时候如果我们放入太多的逻辑互让模板很难维护，对于复杂的逻辑，我们可以使用计算属性

举一个简单的小例子

<p>计算属性：{{ fullName }}</p>   // 小 白

data() {
    return {
      firstName: "小",
      lastName: "白",
    };
  },

computed: {
    fullName: {
        return this.firstName + " " + this.lastName;
    },
  }

下面是它的用法

​
​
computed: {
	计算属性名(){
		//对依赖的数据进行处理
		return  //处理后的返回
	}
}
// 视图中
{{计算属性名}}


​

​

另外一个就是计算属性的setter和getter方法了

• 计算属性一般没有set方法 ，只读属性

• data() {
      return {
        firstName: "小",
        lastName: "白",
      };
    },
  
  computed: {
      fullName: {
        //有setter方法时 必须要传递参数 （修改属性值时会用到此方法，但是确实很少用）
        set: function (newValue) {
          console.log(newValue);
        },
        get: function () {
          return this.firstName + " " + this.lastName;
        },
      },
    }

  计算属性是在原来数据的基础上加工计算出新数据，并且他具有缓存，可以提高渲染能力

最后就是侦听器watch

watch和计算属性computed有些相似，但是计算属性中必须有return返回值，而侦听器是函数处理，返回值是没有意义的

watch: {
	属性名：function（）{  // 侦听的是data中的数据项，数据项一旦变化，调用函数
	}
}	

今天总结的内容就先到这里。接下来我会分享更多自己的学习心得与总结！如果对于哪里你有不同的见解，欢迎指正！