VUE的过滤器、计算属性、侦听器的使用语法和场景

过滤器 - filter

转换数据格式的函数, 传入值返回处理后的值

应用：插值表达式 和 v-bind 表达式

定义语法

全局过滤器：Vue.filter("过滤器名", 函数体)
  Vue.filter("过滤器名", (值) => {return "返回处理后的值"})

局部过滤器：filters: { 过滤器() { }}
filters: {
   过滤器名: (值) => {return "返回处理后的值"}
}

使用语法

插值表达式使用：{{ 值 | 过滤器名 }}   （| 管道操作符）
属性绑定使用： v-bind:属性 = "值 | 过滤器名"

过滤器传参和多过滤器：
   过滤器传参:   vue变量 | 过滤器(实参) 
   多个过滤器:   vue变量 | 过滤器1 | 过滤器2 

使用案例

main.js中定义全局过滤器：

Vue.filter("reverse", (val) => {
  return val.split("").reverse().join("")
})
 <template>使用：<p>翻转过滤器: {{ msg | reverse }}</p> 

多个过滤器使用 和 过滤器传参：

<p>全局定义翻转：{{ msg | reverse(' | ') | toUp}}</p>
filters: { toUp: (msg) => { return msg.toUpperCase() }}
Vue.filter("reverse",(msg,s) => msg.split("").reverse().join(s))

定义一个局部时间过滤器

<td>{{ obj.time | formatDate }}</td>
import moment from "moment";
filters: {
    formatDate(val) {
      return moment(val).format("YYYY-MM-DD");
    }
}

计算属性 - computed

优点：缓存--基于依赖项的值结果进行缓存的，依赖变量不变, 直接从缓存取结果，依赖项改变, 函数自动执行并重新缓存

缓存：多次使用 执行一次，函数多次调 用执行多次

应用：计算变量值

简写语法：只读取不修改

computed: {
   "计算属性名" () {
      return "值"
   }
}

使用案例

<p>{{ num }}</p> 
data(){
  return {
   a: 10,
   b: 20
  }
}

computed: {
 num(){
  return this.a + this.b  
 }
}

完整写法：给计算属性变量直接赋值

应用：单选影响全选：v-model给全选框绑定isAll计算属性，isAll里返回小选框选中状态结果

computed: {
    "属性名": {   
        set(值){    //set:设置值，接收最新修改的值
           console.log(val); 
        },
        get() {     //get:获取值，返回属性具体值
            return "值"
        }
    }
}

使用案例

isAll: {
  set(val) {     // 大选框控制小选框
        this.arr.forEach(obj => obj.c = val)
      },
   get() {       // 小选框控制大选框
      return this.arr.every(obj => obj.c === true)
   }
}

侦听器 - watch

普通侦听

侦听器-watch可以侦听data/computed属性值改变

使用watch配置项, key是要侦听的data/计算属性名

定义语法

语法：v-model="属性名"
watch: {
    "被侦听的属性名" (newVal, oldVal){
    }
}

使用案例

<div><input type="text" v-model="name"></div>
return {name: ""}
watch: {        // newVal: 当前最新值； oldVal: 上一刻值
    name(newVal, oldVal){
      console.log(newVal, oldVal);
    }
}

深度侦听 - 立即执行

侦听复杂类型(对象 / 数组), 或者立即执行侦听函数

深度监听：属性的值改变了，也会监听到

定义语法

watch: {
    "要侦听的属性名": {
        handler (newVal, oldVal) { },   
        deep: true,        // 深度侦听里面值变化
        immediate: true,   // 立即执行
    }
}

使用案例

<input type="text" v-model="deepUser.name" />
<input type="text" v-model="deepUser.age" /> 
deepUser: {  name: '',  age: 0  }
watch: {
  deepUser: {
    deep: true,                 // 深度监听对象里面的值
    immediate: true,            // 立即监听
    handler(newVal, oldVal) {   //打印监听的对象user
      console.log(newVal, oldVal); 
    },
  }
}