一般情况下属性都是放在data中的，但是有些属性可能是需要经过一些计算才能得出，那么，我们可以把这类属性变成计算属性。此时，需要将这些计算属性写到computed中，和将属性写在data中是一样的。表面上看，计算属性和methods一样，实际上，计算属性更加智能，他是基于它们的响应式依赖进行缓存的。也就是说，只要相关依赖（比如下面的例子中的“area”）没有发生变化，那么这个计算属性的函数就不会重新执行，而是直接返回之前的值。这个缓存功能使计算属性访问起来更高效。
计算属性set：
set方法是用于修改data中定义属性的值的方法。例如先写了需要根据详细地址拆出省、市、区。在使用set方法时必须提供get方法。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <title>Vue中计算属性</title> </head> <body> <div id="app"> <div> <label>长：</label> <input type="text" v-model:value="length2"> </div> <div> <label>宽：</label> <input type="text" v-model:value="width2"> </div> <div> 面积：{{area}} </div>注：v-model:value是将该输入框的值与data中的值进行绑定。 <h4>计算属性set：</h4> <div> <label>省：</label> <input type="text" name="province" v-model:value="province"> </div> <div> <label>市：</label> <input type="text" name="city" v-model:value="city"> </div> <div> <label>区：</label> <input type="text" name="district" v-model:value="district"> </div> <div> <label>详细地址：</label> <input type="text" v-model:value="address"> </div> </div> <script> new Vue({ el: "#app", data: { length2: 0, width2: 0, province: '', city: '', district: '', }, computed: { area() { return this.length2 * this.width2 }, address: { get() { let ret = '' if (this.province) { ret += this.province + '省' }; if (this.city) { ret += this.city + "市" }; if (this.district) { ret += this.district + "区" } return ret }, set(value) { let ret = value.split(/省|市|区/) if (ret && ret.length > 0) { this.province = ret[0] } if (ret && ret.length > 1) { this.city = ret[1] } if (ret && ret.length >2){ this.district = ret[2] } } } } }) </script> </body> </html>