Kuzunoha-NEのブログ

プログラミングなどの勉強をしてます

【Vue.js】ちょっとVueを触っている

こんばんは、葛の葉です。

Vue.jsの本を読んでちょっと勉強中です。結構楽しいですね。個人開発のWebアプリケーションを作ろうと思っているのですが、Vueでこさえることが出来たらなぁと思ってます。

ちょっとしたFizzBuzzのゲームを作る。

ランダムで出力される3つの数字の合計がFizzBuzzで言うところの何に当たるかを当てるゲームをつくります。1時間で完成。

github.com

f:id:Kuzunoha-NE:20200118011617g:plain

算出プロパティ

Vueを勉強していてちょっと聞き慣れない言葉だと思ったのが算出プロパティというものです。

## script.js 8 - 12 lines
    computed: {
        result: function () {
            return this.questions.one + this.questions.two + this.questions.three;
        }
    },

computedというVueのプロパティにresultという関数を渡しています。一方で似たようなプロパティのmethodというものも存在していて、一見ではどう違うのかがよくわからないと思います。算出プロパティについて、公式では以下に書かれています。

jp.vuejs.org

算出プロパティは依存するデータが存在していて、その依存するデータの値が変われば、出力したい値も変わるような、動的な値を使用したい場合に使うことが多いみたいです。キャッシュされるので、算出プロパティのほうが都度処理を行うmethodよりコストが低くなります。今回の出力している3つの数字の合計値なんかは算出プロパティに相当するようなものではないでしょうか。