1、計算屬性的使用
（1）計算屬性的基本運用
<body> <div id="app"> {{message1}}{{message2}}<br> {{message1 + ' '+message2}}<br> {{getAll()}}<br> {{all}} </div> <script src="../js/vue.js"></script> <script> <!--let定義的變量可以修改值/const定義的不可修改相當於常量--> const app=new Vue({ el:"#app",//用於掛載要管理的元素 data:{//定義數據 message1:"hello Vue", message2:"zhai" }, methods :{ getAll(){ return this.message1+this.message2 } }, computed:{ all:function(){ return this.message1+this.message2 } } }) </script> </body>
要想實現字符串的拼接，可以去除兩個屬性的值后進行拼接，也可以封裝為函數，最后一種是通過計算屬性的方式實現的
（2）案例（計算商品的總價格）
- 不使用計算屬性，只能一個個取值然后相加
<div id="app"> <h2>{{foods[0].price+foods[1].price+foods[2].price+foods[3].price}}</h2> </div> <script src="../js/vue.js"></script> <script> <!--let定義的變量可以修改值/const定義的不可修改相當於常量--> const app=new Vue({ el:"#app", data:{ foods:[ {id:1,price:33}, {id:2,price:3}, {id:3,price:23}, {id:4,price:43} ] } }) </script>
2、計算屬性的set和get方法
（1）set和get方法
<body> <div id="app"> {{all}} </div> <script src="../js/vue.js"></script> <script> <!--let定義的變量可以修改值/const定義的不可修改相當於常量--> const app=new Vue({ el:"#app",//用於掛載要管理的元素 data:{//定義數據 message1:"hello Vue", message2:"zhai" }, computed:{ all:{ set:function(){ console.log("hello") }, get:function(){ return this.message1+this.message2 } } } }) </script> </body>
計算屬性的set方法一半時不寫的，get：也可以省略，默認執行的是get方法
3、計算屬性的緩存
（1）計算屬性與函數的對比
- 函數
<div id="app"> {{getAll()}}<br> {{getAll()}}<br> {{getAll()}}<br> {{getAll()}}<br> </div> <script src="../js/vue.js"></script> <script> <!--let定義的變量可以修改值/const定義的不可修改相當於常量--> const app=new Vue({ el:"#app",//用於掛載要管理的元素 data:{//定義數據 message1:"hello Vue", message2:"zhai" }, methods :{ getAll(){ console.log("a") return this.message1+this.message2 } } }) </script> </body>
- 計算屬性
<body> <div id="app"> {{all}}<br> {{all}}<br> {{all}}<br> {{all}}<br> </div> <script src="../js/vue.js"></script> <script> <!--let定義的變量可以修改值/const定義的不可修改相當於常量--> const app=new Vue({ el:"#app",//用於掛載要管理的元素 data:{//定義數據 message1:"hello Vue", message2:"zhai" }, computed:{ all:function(){ console.log("-----") return this.message1+this.message2 } } }) </script> </body>
對於計算屬性的方式，在內容沒有變化的時候就會直接返回結果，而不是重新執行一次。
上面重新設置message1的值之后，會重新執行一次計算屬性。