Vue勉強 算出プロパティ computed

(Vue.js 3.1.5を使用)
算出プロパティ computed

computedを使わない場合、

html

    <div id="app">
        <p>{{message.toUpperCase().split('').reverse().join('')}}</p>        
    </div>

computed を利用する場合、

javascript

const app = Vue.createApp({
    data: () => ({
        message: 'Good morning Vue.js!'
    }),
    computed:{
        upperCaseReversedMessage: function(){
            return this.message.toUpperCase().split('').reverse().join('')
        }

    }
})
app.mount('#app')

html

    <div id="app">
        <p>{{message.toUpperCase().split('').reverse().join('')}}</p>
        <p>{{upperCaseReversedMessage}}</p>
        <p>{{upperCaseReversedMessage}}</p>
    </div>

3つとも同じ文字列が表示される。

methodsとの違い。

javascript

const app = Vue.createApp({
    data: () => ({
        message: 'Good morning Vue.js!'
    }),
    computed:{
        upperCaseReversedMessage: function(){
            return this.message.toUpperCase().split('').reverse().join('')
        }
    },
    methods:{
        upperCaseReversedMessageMethod: function(){
            return this.message.toUpperCase().split('').reverse().join('')
        }
    }
})
app.mount('#app')

html

    <div id="app">
        <p>{{upperCaseReversedMessage}}</p> 
        <p>{{upperCaseReversedMessageMethod()}}</p> 
    </div>

1 呼び出し方

methodsの場合は、呼び出すときにかっこ()が必要。
upperCaseReversedMessageMethod()
computed は、プロパティなので、呼び出すときにかっこ()は不要。
upperCaseReversedMessage

以下、その他の違い。

2 getter,setter

computed はプロパティなので、getter,setter両方ある。
methods はメソッドなので、getterだけ。

3 キャッシュ

computed　キャッシュあり
methods　キャッシュなし