Vue - 计算属性

1.vue计算属性-computed

一个数据, 依赖另外一些数据计算而来的结果

场景: 一个变量的值, 需要用另外变量计算而得来

语法:

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

注意1: 计算属性和data属性都是变量-不能重名. 用法和data相同

注意2: 函数内变量变化, 会自动重新计算结果返回

例子:

• 需求:

  • 需求1: 求2个数的和显示到页面上
  • 需求2: 字符串翻转

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

<script>
export default {
  data() {
    return {
      a: 10,
      b: 20,
      message: "我是个字符串",
    };
  },
  computed: {
    num() {
      return this.a + this.b;
    },
    reverseMessage() {
      return this.message.split("").reverse().join("");
    },
  },
};
</script>

结果:

2.vue计算属性-缓存

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

<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>

总结一下:
计算属性根据依赖变量结果缓存, 依赖变化重新计算结果存入缓存, 比普通方法性能更高

3.vue计算属性-完整写法

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

语法:

完整语法:
    computed: {
       // "计算属性名" (){},
        "计算属性名": {
            set(值){

            },
            get(){
                return 值
            }
        }
    }

需求:

• 计算属性给v-model使用

页面准备输入框

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

<script>
// 问题: 给计算属性赋值 - 需要setter
// 解决:
/*
    完整语法:
    computed: {
        "计算属性名" (){},
        "计算属性名": {
            set(值){

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

<style>

</style>

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