Vue.js の methods と computed

Vue.js / Nuxt.js Meetup Osaka #0

Transcript

1. Vue.js の
   methods と computed
   

   View Slide

2. ショウノシオリ
   @shosho_egg
   　・株式会社 chatbox　エンジニア
   　・PHP（Laravel）、Vue.jsなどを使ってます
   　・PHPカンファレンス関西2017&2018実行委員長
   

   View Slide

3. Vue.js の
   methods と computed
   って違うの？
   

   View Slide

4. Vue.js のscript要素
   <br/>components: { … },<br/>data: { … },<br/>mounted: { … },<br/>created: { … },<br/>methods: {<br/>hoge(){ … }<br/>},<br/>computed: {<br/>piyo(){ … }<br/>},<br/>…<br/>読み込む<br/>タイミングが違う<br/>書き方はほぼ同じだけど、<br/>何が違うの？<br/>

   View Slide

5. ▷ methods
   ○ メソッド
   ○ メソッドなのでhtml上では () が必要
   ○ 毎回呼び出す
   ○ キャッシュされない
   ▷ computed（算出プロパティ）
   ○ プロパティ
   ○ プロパティなのでhtml上では () なし
   ○ プロパティなのでgetter/setterが定義可
   ■ デフォルトはgetterのみ
   ○ 値が変わらなければ呼び出されない
   ○ キャッシュされる
   調べてみた。
   

   View Slide

6. JavaScriptのプロパティ
   ▷ データプロパティ
   ○ 値が格納される
   ▷ アクセサプロパティ
   ○ 値は持たず、getter/setterと呼ばれる関数を設定する。両方を設
   定してもいいし、片方だけでもよい。
   ■ getter：参照されたときに呼ばれる
   ■ setter：値を変更するときに呼ばれる
   プロパティには2種類。
   必ずどちらかに分類でき、両方の性質を兼ね備えることはできない。
   ちょっと
   寄り道
   computed はコレ
   

   View Slide

7. View Slide

8. ▷ methods
   ○ メソッド
   ○ メソッドなのでhtml上では () が必要
   ○ 毎回呼び出す
   ○ キャッシュされない
   ▷ computed
   ○ プロパティ
   ○ プロパティなのでhtml上では () なし
   ○ プロパティなのでgetter/setterが定義可
   ■ デフォルトはgetterのみ
   ○ 値が変わらなければ呼び出されない
   ○ キャッシュされる
   

   View Slide

9. 使い分けるならポイントは
   キャッシュ かな
   

   View Slide

10. どういう風に使い分けるのがいいか？
    ▷ 基本的に computed を使い、どうしても必要なときに
    は methods を使う
    ○ computed は依存関係にもとづいてキャッシュされるので、
    中にdataプロパティがあった場合は変更を常にチェックして
    再び処理が走る。
    ○ methods はdataプロパティが変わっていても変わらなくて
    も、毎回処理が走る。
    必要な時にだけ処理が走るので、無駄に処理が遅くなら
    ない。
    Data を使って日時などを取得するときは、computed だ
    とキャッシュされてしまうので methods を使うべき。
    

    View Slide

11. その他注意するところ
    ▷ methods と computed で同じ名前を使わないこと
    ▷ 外部からの呼び出し時にも computed ではなく
    methods を使うべき
    

    View Slide

12. まとめ
    ▷ methods と computed の大きな違いはキャッシュの有無
    ▷ 毎回呼び出す必要がないなら computed を使おう
    ▷ methods と computed で同じ名前は使わないようにしよ
    う
    ▷ watchedプロパティとの使い分け
    ▷ 「算出プロパティはどうやって動いているか」@kitak さんのスライド
    https://kitak.github.io/slides/170316-vue-meetup/#
    今後勉強してみようかなぁ、と思っていること
    

    View Slide

13. 参考
    ▷ アクセサプロパティ
    https://numb86-tech.hatenablog.com/entry/2016/06/04/152
    912
    ▷ computedとmethodsの違い
    https://orizuru.io/blog/vue-js/search-function/
    http://udomomo.hatenablog.com/entry/2017/12/11/213904
    http://kazu22002.hatenablog.com/entry/2017/10/24/07000
    0
    ▷ 公式ドキュメント
    https://vuejs.org/v2/guide/computed.html#ad
    

    View Slide

14. Thanks!
    Any questions?
    You can find me at:
    @username
    user@mail.me
    

    View Slide