【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;
    },
  }
});

感想は？

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

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

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