一般情況下屬性都是放在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>