vue計算屬性和方法的區別

計算屬性：

 

<div id="example">
  <p>{{ now }}"</p>
</div>

<script>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    now: function () {
      return Date.now()
    }
  }
})
</script>

方法：

<div id="example">
  <p>{{ now() }}"</p>
</div>

<script>
var vm = new Vue({
  el: '#example',
  methods: {
    now: function () {
      return Date.now()
    }
  }
})
</script>

區別：

1·、兩者的執行結果是完全相同的
2、計算屬性是基於他們的依賴進行緩存的，只有在相關依賴發生改變時，他們才會重新求值，也就是說，只要他的依賴沒有發生變化，那么每次訪問的時候計算屬性都會立即返回之前的計算結果，不再執行函數
3、每次觸發重新渲染時，調用方法將總會再次執行函數

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