在vue.js中，計算屬性和方法達到的效果是一樣的，但是計算屬性是基於依賴進行快取的，只有message發生改變才會導致reverseMessage發生改變，只要 message 還沒有發生改變，多次訪問 reversedMessage 計算屬性會立即返回之前的計算結果，而不必再次執行函式；而方法是每次呼叫都會執行。

計算屬性：

<div id="example">
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
<script>
var vm = new Vue({
    el: '#example',
    data: {
        message: 'Hello'
    },
    computed: {
        // a computed getter
        reversedMessage: function () {
            // `this` points to the vm instance
            return this.message.split('').reverse().join('')
        }
    }
})
</script>
 

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19

方法：

<div id="example">
    <p>Original message: "{{ message }}"</p>
    <p>Method reversed message: "{{ reversedMessage() }}"</p>
</div>
<script>
var vm = new Vue({
    el: '#example',
    data: {
        message: 'Hello'
    },
    methods: {
        reversedMessage: function () {
            return this.message.split('').reverse().join('')
        }
    }
})
</script>
 

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

需要注意的是，因為 Date.now() 不是響應式依賴，所以

computed: {
    now: function () {
        return Date.now()
    }
}
不會更新。必須用methods：
methods： {
    now: function () {
        return Date.now()
    }
}

計算 setter

計算屬性預設只有 getter ，不過在需要時你也可以提供一個 setter ：

computed: {
      fullName: {
        // getter
        get: function () {
          return this.firstName + ' ' + this.lastName
        },
        // setter
        set: function (newValue) {
          var names = newValue.split(' ')
          this.firstName = names[0]
          this.lastName = names[names.length - 1]
        }
      }
    }
 

現在在執行 vm.fullName = ‘John Doe’ 時， setter 會被呼叫， vm.firstName 和 vm.lastName 也會被對應更新。