08、VUE计算属性

1、计算属性简介

在原生的JavaScript中我们需要一个来自不同数的和的变量，
我们会使用let num=a+b:这种写法，但是当a和b发生改变的
时候，num并不会自动修改，在vue中我们提供了计算属性
可以很好的解决这个问题。

2、计算属性的语法

• 在vue的配置项中添加

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

3、计算属性的使用

<template>
  <div>
    <!-- 调用计算属性 -->
    <p>num1+num2的和是：{{ num }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num1: 10,
      num2: 20,
    };
  },
  // 计算属性
  /**
   * 使用场景：
   * 一个变量的值需要其他变量计算而来
   *
   * 语法：
   *computed:{
	  "计算属性名" () {
		return "值"
	}
}
   */
  computed: {
    num() {
      return this.num1 + this.num2;
    },
  },
};
</script>

<style lang="less" scoped>
</style>

计算属性也是vue的变量，所以在使用过程中，不能和data中的vue变量名重名

4、计算属性缓存特性

首先我们看如下的代码，多次使用计算属性和函数，我们通过控制台看问题所在。

【代码】：

<template>
  <div>
    <p>原来的msg:{{ msg }}</p>
    <p>计算属性中的msg: {{ reverseMsg }}</p>
    <p>计算属性中的msg: {{ reverseMsg }}</p>
    <p>计算属性中的msg: {{ reverseMsg }}</p>
    <p>计算属性中的msg: {{ reverseMsg }}</p>
    <p>计算属性中的msg: {{ reverseMsg }}</p>
    <p>函数中的msg: {{ getMsg() }}</p>
    <p>函数中的msg: {{ getMsg() }}</p>
    <p>函数中的msg: {{ getMsg() }}</p>
    <p>函数中的msg: {{ getMsg() }}</p>
    <p>函数中的msg: {{ getMsg() }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "404 not found!!",
    };
  },
  methods: {
    getMsg() {
      console.log("函数执行了");
      this.msg.split("").reverse().join("");
    },
  },
  // 计算属性
  computed: {
    reverseMsg() {
      console.log("计算属性执行了！！");
      return this.msg.split("").reverse().join("");
    },
  },
};
</script>

<style>
</style>

【效果图】：

【控制台结果】：

【解释】：

• 在控制台中我们看到计算属性只执行了一次，而函数调用了多少次就执行了多少次
• 计算属性是带缓存的，只要计算属性中的依赖项不发生改变，执行一次之后就会将结果保存的缓存中
• 只要计算的属性在下次调用的时候，依赖项不发生改变就会从缓存中获取结果
• 只有当依赖项发生改变的时候，计算属性会自动重新执行，并将新的数值缓存

【图解计算属性的缓存特性】：

5、计算属性的完整写法

在以上的使用过程中我们只能通过计算属性获取到数值，不能设置计算属性的数值，
因此，在使用计算属性过程中，如果需要设置计算属性的值，就需要我们使用计算
属性的完整写法。

【语法】：

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

【演示】：

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

<script>
export default {
  data() {
    return {};
  },
  // 计算属性完整写法
  computed: {
    name: {
      // 给name赋值触发set方法
      set(val) {
        console.log(val);
      },
      // 获取name触发get方法
      get() {
        return this.val;
      },
    },
  },
};
</script>

<style>
</style>