【これで分かる！】算出プロパティ computedと監視プロパティ watch【Vue.js】

みなさんこんにちは、現役エンジニアのサメハックです

アパレル企業でトップ販売員を経て
未経験から Web エンジニアに転職し、
現在正社員として 5 年働いています！

Vue.jsの解説シリーズです。

今回は算出プロパティcomputedと監視プロパティwatchについて学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

算出プロパティを使おう！

算出プロパティとは

算出プロパティというのは、
依存関係にある値を監視し、その値が変更された際に
再評価、つまり関数を実行するリアクティブなプロパティです。

リアクティブとは

リアクティブとは、画面とデータが連携しており
一方が更新されたらもう一方も更新される状態です。

算出プロパティの使い方

算出プロパティを使うには computed を使用します

computed:{
    // 引数は任意
    // 新しい値がオブジェクト形式で格納される
    // newValues.変数名 で値が取得できる
    算出プロパティ名(newValues){
        // このスコープ内で使用された値 this.XXXX と依存関係になり、
        // その値が更新されると、処理が実行されます。
        return 表示したいデータ
    }
},

実際に使ってみよう！

See the Pen Untitled by samehack (@samehack) on CodePen.

このように this.name の値が変更されると、
customMessage が実行され値がリアクティブに更新されました。

算出プロパティがうまく動かないケース

算出プロパティの値がリアクティブでなかった場合

前述したように算出プロパティとはリアクティブなプロパティです。
つまり実行要件として、データと画面が連携している必要があるので
customMessage が画面に表示されていなければ
依存関係(≒ 監視対象)の値が更新されても customMessage の処理は実行されません。

See the Pen Vue.js 算出プロパティ うまく動かない例 by samehack (@samehack) on CodePen.

対策方法： watchを使おう！

上記のように、値が変更されると実行したい処理はあるものの
画面とは連携していない場合にはwatchを使いましょう。

watchとは

watchとは、対象の値の更新を監視するプロパティで
値が更新されたタイミングで任意の処理が実行されます。

watch:{
    // 引数は任意
    監視対象の値(新しい値, 古い値){
        // 任意の処理
    }
},

戻り値は不要です

watchを使ってみよう

See the Pen Vue.js 算出プロパティ うまく動かない例 by samehack (@samehack) on CodePen.

先ほどのコードに watch を追加しました。

input の値を操作すると「watch が反応しました」というアラートが上がることが確認できます。
一方で算出プロパティである computed は反応していないことがわかります。

おまけ：watchで同じ処理を作ってみよう！

watch を使って似たようなものを作ってみました。

See the Pen Vue.js watchとcomputed by samehack (@samehack) on CodePen.

まとめ

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram