エンジニアのひよこ_level10

【毎日更新!】新卒3年目エンジニアブログです! プログラムだけじゃなく、マネジメントとかも書いていきたい!

【Vue】Vueの勉強始めようpart7(watchで監視)【529日目】

前回

www.nyamucoro.com

参考書籍

実際のコード

■プルリクエス

watchのサンプルAPIページ by klack710 · Pull Request #21 · klack710/study-vue · GitHub

■作ったもの(ブランチはmaster参照なので、今後も更新されます)

klack710.github.io

今回やったことは?

  1. 省略形で書けるものは省略形へ
  2. プロパティを変化させたプロパティ、computedを学ぶ
  3. computedで、set・getを実装して同期
  4. filterなどを使って、絞り込みやソート

学んだメモ

このコードは動かない!

watchの関数実行中は、dataの値が変わっても、bind先で判定がされないので、
ローディング画面とかはこれでは作れない!
非同期じゃないんだね!

たぶん!途中にreturnで止めてみたらうまく行ったから、そういうことな気がする!

html

    <div id="app">
        <p v-show="isWaiting">ちょっと待ってね!</p>
        <input v-show="!isWaiting" v-model.number="num" type="number" step="1" />
    </div>

js

var app = new Vue({
  el: "#app",
  data: {
    num: 0,
    isWaiting: false,
  },
  watch: {
    num: function () {
      this.isWaiting = true;
      for (i = 0; i < 500000000; i++) {}
      this.isWaiting = false;
    },
  }
});

感想は?

いい感じに躓いたおかげで、なんとなく概要がつかめてきてる感じがする!

躓く瞬間が、一番勉強になるよね!

そして、これ結構色んな人が一度はハマってそう。