vue計算屬性和方法的區別

計算屬性：

 

 1 <div id="example">
 2   <p>{{ now }}"</p>
 3 </div>
 4 
 5 <script>
 6 var vm = new Vue({
 7   el: '#example',
 8   data: {
 9     message: 'Hello'
10   },
11   computed: {
12     now: function () {
13       return Date.now()
14     }
15   }
16 })
17 </script>

方法：

 1 <div id="example">
 2   <p>{{ now() }}"</p>
 3 </div>
 4 
 5 <script>
 6 var vm = new Vue({
 7   el: '#example',
 8   methods: {
 9     now: function () {
10       return Date.now()
11     }
12   }
13 })
14 </script>

區別：

1·、二者的執行結果是徹底相同的
二、計算屬性是基於他們的依賴進行緩存的，只有在相關依賴發生改變時，他們纔會從新求值，也就是說，只要他的依賴沒有發生變化，那麼每次訪問的時候計算屬性都會當即返回以前的計算結果，再也不執行函數
三、每次觸發從新渲染時，調用方法將總會再次執行函數

四、上方兩個例子，計算屬性將總會返回相同值，而方法則不會