vue中的计算属性，过滤器，侦听器

vue计算属性-computed

语法:

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

例如：让页面显示两个数字和和

<template>
  <div>
    <p>和为: {{ num }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      a: 10,
      b: 20
    };
  },
  computed: {
    num() {
      return this.a + this.b;
    }
  },
};
</script>

注意: 计算属性也是vue数据变量, 所以不要和data里重名, 用法和data相同

vue计算属性-缓存

计算属性是基于它们的依赖项的值结果进行缓存的，只要依赖的变量不变, 都直接从缓存取结果

vue计算属性-完整写法

• 计算属性也是变量, 如果想要直接赋值, 需要使用完整写法

语法:

computed: {
    "属性名": {
        set(值){
            
        },
        get() {
            return "值"
        }
    }
}

• 计算属性给v-model使用

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

<script>
export default {
  computed: {
    full: { 
      get(){ // 获取full的值
        console.log("get方法触发");
        return "full的值"
      },
      set(val){ // 要给full赋值
        console.log(val)
      }
    }
  }
}
</script>

总结： 想要给计算属性赋值, 需要使用set方法

• 计算属性完成全选和反选的功能

<template>
  <div>
    <span>全选:</span>
    <input type="checkbox" v-model="isAll" />
    <button @click="fan">反选</button>
    <ul>
      <li v-for="(item, index) in arr" :key="index">
        <input type="checkbox" v-model="item['checked']" />
        <span>{{ item["name"] }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        {
          name: "猪八戒",
          checked: false,
        },
        {
          name: "孙悟空",
          checked: false,
        },
        {
          name: "唐僧",
          checked: false,
        },
        {
          name: "白龙马",
          checked: false,
        },
      ],
    };
  },
  methods: {
    fan() {
      this.arr.map((obj) => {
        obj["checked"] = !obj["checked"];
      });
    },
  },
  computed: {
    isAll: {
      set(val) {
        // 设置isAll的值的时候触发此方法, 传入要设置的值
        // val是全选框的true/false的值
        this.arr.forEach((obj) => {
          obj["checked"] = val;
        });
      },
      get() {
        return this.arr.every((obj) => obj["checked"] == true);
      },
    },
  },
};
</script>

<style>
</style>

vue过滤器

转换格式, 过滤器就是一个函数, 传入值返回处理后的值
过滤器只能用在, 插值s表达式和v-bind表达式

Vue中的过滤器场景

• 字母转大写, 输入"hello", 输出"HELLO"
• 字符串翻转, “输入hello, world”, 输出"dlrow ,olleh"

语法:

• Vue.filter(“过滤器名”, (值) => {return “返回处理后的值”})

• filters: {过滤器名字: (值) => {return “返回处理后的值”}

<template>
  <div>
    {{ msg }}
    <!-- 1. 过滤器格式: vue变量 | 过滤器名 -->
    <!-- 翻转过滤器reverse -->
    <p>{{ msg | reverse }}</p>
    <!-- 首字母过滤器first -->
    <p :title="msg | toUp">鼠标长时间停留</p>
  </div>
</template>

<script>
import Vue from "vue";
Vue.filter("toUp", (val) => { // 2. 全局过滤器: 到处使用
  return val.toUpperCase();
});

export default {
  data() {
    return {
      msg: "hello, world",
    };
  },
  filters: { // 3. 局部过滤器: 只能在当前的vue文件中使用
    reverse(val) {
      return val.split("").reverse().join("");
    },
  },
};
</script>

vue过滤器-传参和多过滤器

可同时使用多个过滤器, 或者给过滤器传参

语法:

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

<template>
  <div>
    {{ msg }}
    <!-- 可以给过滤器传参 -->
    <p>{{ msg | reverse("|") }}</p>
    <!-- 可以多个过滤器 -->
    <p :title="msg | toUp | reverse">鼠标长时间停留</p>
  </div>
</template>

<script>
import Vue from "vue";
Vue.filter("toUp", (val) => { 
  return val.toUpperCase();
});

export default {
  data() {
    return {
      msg: "hello, world",
    };
  },
  filters: { 
    reverse(val, joinStr = "") {
      return val.split("").reverse().join(joinStr);
    },
  },
};

总结: 过滤器可以传参, 还可以对某个过滤器结果, 后面在使用一个过滤器

vue侦听器-watch

• 可以侦听data/computed属性值改变

语法：

watch: {
    "被侦听的属性名" (newVal, oldVal){
        
    }
}

例如：

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

<script>
export default {
  data(){
    return {
      name: ""
    }
  },
  watch: {
    name(newVal, oldVal){ // 当msg变量的值改变触发此函数
      console.log(newVal, oldVal);
      // newVal 新的值
      // oldVal 旧的值
    }
  }
}
</script>

<style>

</style>

总结: 想要侦听一个属性变化, 可使用侦听属性watch

vue侦听器-深度侦听和立即执行

• 侦听复杂类型, 或者立即执行侦听函数

语法:

watch: {
    "要侦听的属性名": {
        immediate: true, // 立即执行
        deep: true, // 深度侦听复杂类型内变化
        handler (newVal, oldVal) {
            
        }
    }
}

例如：

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

<script>
export default {
  data(){
    return {
      user: {
        name: "小白",
        age: 18
      }
    }
  },
  watch: { // 固定属性(设置侦听哪些属性)
    user: { // 具体属性名(被侦听)
      handler(newVal, oldVal){ // 固定触发此函数
        console.log(newVal);
      },
      immediate: true, // 马上侦听触发
      deep: true // 深度侦听(侦听name和age值的改变)
    }
  }
}
</script>

总结: immediate立即侦听, deep深度侦听, handler固定方法触发