Vue-过滤器、计算属性、监听器

一、过滤器
vue支持在{{}} 中添加一个“|” 对书籍进行过滤，经常用在格式化文本：如字母的大写、货币的添加等。
定义方法：
过滤器是通过vue实例来添加filters来设置，可以是全局的，也可以局部
因为过滤器本身是js函数，所以也可以传参数’。具体示例如下：

 <h1>{{name |setname('同学')}}</h1> //‘同学是参数’
   filters: {
                setname(val, arg1) {
               // val指的是name，arg1指的是传过来的参数‘同学’
                    console.log(val, arg1);
                    return val + arg1
                },

当然，过滤器也可以串联：
{{price | discount(5)|join(‘￥’)}} 假如价格是10 打5折 先过滤一下 就是5 之后再加上货币符号，最终的结果就是 5￥

{{item.price | discount(5)|join('￥')}}
            filters: {
                join(val, arg1) {
                    console.log(val, arg1);
                    return val + arg1
                },
                discount(val, arg1) {
                    console.log(val, arg1);
                    return val*(arg1/100)
                }
            },

filters写成全局的则如下

Vue.filter('fmtprice', function (val) {
    return "￥" + val.toFixed(2)
})

二、计算属性
dom中使用模板应尽可能的简洁明了，如果放入太多逻辑就会看起来很复杂，比如以下的例子：

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

本来一个message即可，但是后面还有转数组 等操作。此时可以使用计算属性Computed：来简化。

经过计算属性处理上面的代码就可以写成如下
<div id="example">
  {{ reversedMessage}}
</div>
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }

三、监听器
vue提供了watch来监听数据的改变，当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

 <input v-model="question">
 watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    question: function (newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing...'  //answer是定义在data里面的数据
      
    }
  },

当监听数组或者对象的时候，需要用全局监听，

//list是定义在data中的一个数租
    vm.$watch('list', function(newvalue,oldvalue){
            console.log(newvalue,oldvalue);
        },{deep:true})
因为监听的是数组 所以加的是深度监听

function(newvalue,oldvalue) 里面如果是一个参数 就代表的是改变后的 值 ，两个参数则第一个是改变后的，第二个是改变前的。