5、計算屬性、內容分發、自定義事件
阿新 • • 發佈：2021-01-20
一、什麼是計算屬性
計算屬性的重點突出在屬性兩個字上（屬性是名詞），首先它是個屬性其次這個屬性有計算的能力（計算是動詞）
這裡的計算就是個函式；簡單點說，它就是一個能夠將計算結果快取起來的屬性（將行為轉化成了靜態的屬性），僅此而已；可以想象為快取！
程式碼：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>狂神說Java</title> 6 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> 7</head> 8 <body> 9 10 <div id="vue"> 11 <!--注意，一個是方法，一個是屬性--> 12 <p>呼叫當前時間的方法：{{currentTime1()}}</p> 13 <p>當前時間的計算屬性：{{currentTime2}}</p> 14 </div> 15 16 <script type="text/javascript"> 17 var vm = new Vue({ 18 el: '#vue',19 data: { 20 message: 'Hello Vue' 21 }, 22 methods: { 23 currentTime1: function () { 24 return Date.now(); 25 } 26 }, 27 computed: { 28 //currentTime2 ，這是一個屬性！不是方法 29 currentTime2: function () {30 return Date.now(); 31 } 32 } 33 }); 34 </script> 35 </body> 36 </html>
注意：methods 和 computed 裡的東西不能重名
說明：
- methods：定義方法，呼叫方法使用 currentTime1()，需要帶括號
- computed：定義計算屬性，呼叫屬性使用 currentTime2，不需要帶括號；this.message 是為了能夠讓 currentTime2 觀察到資料變化而變化
- 如何在方法中的值發生了變化，則快取就會重新整理！可以在控制檯使用
vm.message="qinjiang",改變下資料的值，再次測試觀察效果！
結論：
呼叫方法時，每次都需要進行計算，既然有計算過程則必定產生系統開銷，那如果這個結果是不經常變化的呢？此時就可以考慮將這個結果快取起來，採用計算屬性可以很方便的做到這一點,計算屬性的主要特性就是為了將不經常變化的計算結果進行快取，以節約我們的系統開銷;