$30 off During Our Annual Pro Sale. View Details »

Vue.js の methods と computed

Vue.js の methods と computed

Vue.js / Nuxt.js Meetup Osaka #0

ショウノシオリ

June 30, 2018
Tweet

More Decks by ショウノシオリ

Other Decks in Programming

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
    [email protected]

    View Slide