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>