一、計算屬性和方法區別
將計算屬性的get函數定義為方法，也可以實現類似的功能。不過計算屬性和方法有本質的區別。計算屬性和方法的區別：
- 計算屬性是基於他的依賴進行更新的，只有在相關以來發生改變時才能更新變化
- 計算屬性是有緩存的，只要相關依賴沒有改變，多次訪問計算屬性得到的值是之前緩存存的計算結果，不會多次執行。
二、代碼設計
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue計算屬性</title> 6 <!--引入vue--> 7 <script src="../js/vue.js"></script> 8 9 </head> 10 <body> 11 <div id="hello"> 12 <!-- 計算屬性 --> 13 <h3>計算屬性返回的num2：{{num2}}</h3> 14 <button onclick="fn1()">定時執行計算屬性</button> 15 16 <!-- 方法--> 17 <h3>方法返回的num2：{{getNum2()}}</h3> 18 <button onclick="fn2()">定時執行方法</button> 19 </div> 20 21 <script> 22 let vm = new Vue({ 23 //vue掛載目標 24 el:'#hello', 25 //vue屬性 26 data:{ //普通屬性 27 num:9 28 }, 29 //vue計算屬性 30 computed:{ //計算屬性 31 num2:function(){ //get函數 32 console.log('計算屬性num2',new Date()); 33 return this.num-1; 34 }, 35 }, 36 //vue方法 37 methods:{ 38 getNum2(){ 39 console.log('方法getnum2()',new Date()); 40 return this.num-1; 41 }, 42 }, 43 }) 44 45 //自定義普通的函數，不屬於vue，定時輸出計算屬性 46 function fn1(){ 47 setInterval(function(){ 48 console.log(vm.num2); 49 },1000); 50 } 51 52 //自定義普通的函數，不屬於vue，定時輸出方法 53 function fn2(){ 54 setInterval(function(){ 55 console.log(vm.getNum2()); 56 },1000); 57 } 58 59 </script> 60 61 </body> 62 </html>
三、效果展示
