基本

• 関数によって算出したデータを返すことができるプロパティ(Vueのプロパティのデータを表示する時に、関数を通して表示することで可読性があげる目的もある)
• 同じ処理をしたデータを共通化することができる
• ()はかいていけない

<p>{{ message.split('').reverse().join('')}}</p>
🔼同じ処理を書く時に、可読性がさがる

<p>{{ reversedMessage }}</p>
🔼Vueのcomputedで記述したプロパティを記述する

const app = Vue.createApp({
    data: () => ({
        message: 'Hello Vue.js'
    }),
    computed: {
        reversedMessage: function (){
            return this.message.split('').reverse().join('')
        }
    }
})
app.mount('#app')

算出プロパティ vs メソッド

算出プロパティを使わなくても、メソッドを使えばよいのでは？

➡️基本的には算出プロパティを使った方がいい

違い①：プロパティとメソッド

• compued: プロパティ　➡️ ()不要
• methods: メソッド　➡️　()必要

<p>{{ reversedMessage }}</p>
<p>{{ reversedMessageMethod() }}</p>

const app = Vue.createApp({
    data: () => ({
        message: 'Hello Vue.js'
    }),
    methods: {
        reversedMessageMethod: function () {
            return this.message.split('').reverse().join('')
        }
    },
    computed: {
        reversedMessage: function (){
            return this.message.split('').reverse().join('')
        }
    }
})
app.mount('#app')

違い②：getter, setter

• comupted: getter, setter