vue 2 过滤器 计算属性（comuted）侦听器

一、Vue过滤器定义使用

目的：转换格式，其实过滤器本事就是一个函数，传入值后 处理函数返回后的值。

重点只能用在，插值表达式 和 v-bind 表达式上

使用场景：

字母转大写 输入hello 输出 HELLO

字符串反转 输入hello,world 输出 dlrow,olleh

语法：Vue.filter("过滤器名",(值) => {return " 返回处理后的值"}) 全局定义

Vue.filter('reverse',(val,s)=>{
    return val.splice(''),reverse().join(s)
})
///反转 并用s 拼接

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

例1 全局定义 字母都大写的过滤器 局部定义  字符串反转

<template>
  <div>
    <p>原来的样子: {{ msg }}</p>
    <!-- 2. 过滤器使用
      语法: {{ 值 | 过滤器名字 }}
     -->
    <p>使用翻转过滤器: {{ msg | reverse }}</p>
    <p :title="msg | toUp">鼠标长停</p>
  </div>
</template>

<script>
export default {
  data(){
    return {
      msg: 'Hello, Vue'
    }
  },
// 方式1: 全局 - 过滤器 需要在JS中写 
// 任意的.vue文件内"直接"使用
// 语法: Vue.filter("过滤器名", 值 => 处理结果)
// Vue.filter("reverse", val => val.split("").reverse().join(""))
  // 方式2: 局部 - 过滤器
  // 只能在当前vue文件内使用
  /*
     语法: 
     filters: {
       过滤器名字 (val) {
         return 处理后的值
       }
     }
  */
  filters: {
    toUp (val) {
      return val.toUpperCase()
    }
  }
}
</script>

<style>

</style>

总结： 全局注册最好在 main.js中注册 可以方便到处调用

1.2 传参 和 过滤器

可以同时使用多个过滤器，或者给过滤器传参。

过滤器传参 vue变量|过滤器（实参）

多个过滤器 vue变量|过滤器1|过滤器2

<template>
  <div>
    <p>原来的样子: {{ msg }}</p>
    <!-- 1.
      给过滤器传值
      语法: vue变量 | 过滤器名(值)
     -->
    <p>使用翻转过滤器: {{ msg | reverse('|') }}</p>
    <!-- 2.
      多个过滤利使用
      语法: vue变量 | 过滤器1 | 过滤器2
     -->
    <p :title="msg | toUp | reverse('|')">鼠标长停</p>
  </div>
</template>

<script>
export default {
  data(){
    return {
      msg: 'Hello, Vue'
    }
  },
  filters: {
    toUp (val) {
      return val.toUpperCase()
    }
  }
}
</script>

<style>

</style>

总结 过滤器可以传参，也可以使用多个过滤器

二、计算属性 computed

重点：一个数据 依据另外多个数据 二计算来的结果 注意区分监听wacth

语法：

<div>{{计算属性名}}</div>
computed:{
"计算属性名"(){
  return "值"
}}

案例 求和

<template>
  <div>
    <p>{{ num }}</p>
  </div>
</template>

<script>
export default {
  data(){
    return {
      a: 10,
      b: 20
    }
  },
  // 计算属性:
  // 场景: 一个变量的值, 需要用另外变量计算而得来
  /*
    语法:
    computed: {
      计算属性名 () {
        return 值
      }
    }
  */
 // 注意: 计算属性和data属性都是变量-不能重名
 // 注意2: 函数内变量变化, 会自动重新计算结果返回
  computed: {
    num(){
      return this.a + this.b
    }
  }
}
</script>

<style>

</style>

2.2缓存特性

计算属性是基于他们的依赖项的值 进行缓存的，只要依赖的变量不变，都可以直接从缓存中存取结果。（第一次打开网页时，计算出结果 第二次打开如果依赖不变，就不用重新计算）

<template>
  <div>
    <p>{{ reverseMessage }}</p>
    <p>{{ reverseMessage }}</p>
    <p>{{ reverseMessage }}</p>
    <p>{{ getMessage() }}</p>
    <p>{{ getMessage() }}</p>
    <p>{{ getMessage() }}</p>
  </div>
</template>

<script>
export default {
  data(){
    return {
      msg: "Hello, Vue"
    }
  },
  // 计算属性优势:
  // 带缓存
  // 计算属性对应函数执行后, 会把return值缓存起来
  // 依赖项不变, 多次调用都是从缓存取值
  // 依赖项值-变化, 函数会"自动"重新执行-并缓存新的值
  computed: {
    reverseMessage(){
      console.log("计算属性执行了");
      return this.msg.split("").reverse().join("")
    }
  },
  methods: {
    getMessage(){
      console.log("函数执行了");
      return this.msg.split("").reverse().join("")
    }
  }
}
</script>

<style>

</style>

总结: 计算属性 是根据依赖项的变量结果缓存，依赖项发生变化后 才会重新计算再存入缓存

①计算属性的好处？

带缓存，依赖项不变，直接从缓存取，依赖项发生改变，函数自动执行并重新缓存

②计算属性使用场景？

当变量值，依赖其他变量计算而得来时。

2.3计算属性 computed 完整写法

computed:{
    “属性名”：{
    set(值){
        }，
    get(){
    return “值”
}
}}

案例 计算属性给v-model 使用

<template>
  <div>
      <div>
          <span>姓名:</span>
          <input type="text" v-model="full">
      </div>
  </div>
</template>

<script>
// 问题: 给计算属性赋值 - 需要setter

export default {
    computed: {
        full: {
            // 给full赋值触发set方法
            set(val){
                console.log(val)
            },
            // 使用full的值触发get方法
            get(){
                return "无名氏"
            }
        }
    }
}
</script>

<style>

</style>

何时使用完整写法？

给计算属性变量赋值时

set get 函数什么时候执行？

set 接收要赋予的值（输入框值发生变化的时候）

get 返回这个计算属性的具体值

案例 全选和 反选案例

<template>
  <div>
    <span>全选:</span>
    <input type="checkbox" v-model="isAll" />
    <button @click="btnFn">反选</button>
    <ul>
      <li v-for="(obj, index) in arr" :key="index">
        <input type="checkbox" v-model="obj.c" />
        <span>{{ obj.name }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        {
          name: "猪八戒",
          c: false,
        },
        {
          name: "孙悟空",
          c: false,
        },
        {
          name: "唐僧",
          c: false,
        },
        {
          name: "白龙马",
          c: false,
        },
      ],
    };
  },
  computed: {
    isAll: {
      set(val) {
        // 通过判断set 传入v-model的值 判断是否选中 如果是 把所有的都遍历 并且把set传入的值赋值
        return this.arr.forEach((obj) => (obj.c = val));
      },
      get() {
//通过every 语法来判断是不是选中状态 如果是就全选 如果不是就返回false v-modle就会接收到值
        return this.arr.every((obj) => obj.c === true);
      },
    },
  },
  methods: {
    btnFn() {
    //反选 根据遍历和现在的状态 选中的改成 非选 非选的改成选中
      return this.arr.forEach((obj) => (obj.c = !obj.c));
    },
  },
};
</script>
<style></style>

 三、侦听器 watch

vue可以监听 data/computed的属性值改变

语法：wacth:{

        变量名（new,old）//变量名对应值改变时 自动触发 new 是新的 old是老的

        }

但是 在复杂数据类型中，会在控制台看到所输出的值是一样的，因为他们是存在堆中，内存地址是一样的

<template>
  <div>
    <input type="text" v-model="name">
  </div>
</template>

<script>
export default {
  data(){
    return {
      name: ""
    }
  },
  // 目标: 侦听到name值的改变
  /*
  语法:
    watch: {
      变量名 (newVal, oldVal){
        // 变量名对应值改变这里自动触发
      }
    }
  */
  watch: {
    // newVal: 当前最新值
    // oldVal: 上一刻值
    name(newVal, oldVal){
      console.log(newVal, oldVal);
    }
  }
}
</script>

<style>

</style>

如何监听到某个变量值的改变？

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

3.2 深度侦听 和 立即执行

因为刚刚侦听的语法是基础类型的数据，如果要侦听复杂类型的数据，需要使用深度侦听的函数

深度侦听：deep:true

立即执行：immediate : true (网页打开之后就立即执行一次，不需要数据发生变化 不然会提示undfinde)

watch: {
  user: {
    handler(newVal, oldVal) {
      // user里的对象
      console.log(newVal, oldVal);
    },
    deep: true,
    immediate: true,
  },
},

侦听器 watch 和 computed 计算属性有什么区别？

 1.功能 computed 是计算属性 wacth是监听一个值变化执行，对应的回调

2.是否调用缓存，computed 函数所依赖的属性不变的时，会调用缓存，watch每次监听的值发生变化的时候都会触发，

3.是否调用return   computed 必须有  watch 可以没有

4.使用场景 computed 的值受多个属性影响的时候，例如购物车结算

watch当一条数据影响多条的时候，比如搜索