「これからはじめるVue.js実践入門」の感想・備忘録1

オブジェクトのプロパティはリアクティブだが、プロパティの追加・削除はリアクティブではない。
Vue.setメソッド（またはVueインスタンスの$setメソッド）を使えば後から追加することもできるが、dataオプションに全てのプロパティを空値で最初に用意した方がよい。
（利用しているデータをdataオプションから一望できるため。配列の初期値はnullではなく空配列にするべき。）

$nextTickメソッド

ビューの更新は非同期（全ての変更をプールして最後にビューに反映される）であるため、リアクティブデータが変更されてもすぐにビューには反映されない。
Vue.nextTickメソッド（またはVueインスタンスの$nextTickメソッド）を使うと、ビューへの反映を待ってから処理を実行させることができる。

<div id="app">
  {{ obj.id }}:{{ obj.name }}
</div>
<script>
const app = new Vue({
  el: '#app',
  data: {
    obj: {
      id: '100',
    }
  },
  mounted: function() {
    Vue.set(this.obj, 'name', 'hoge');
    console.log(this.$el.textContent); // 100:
    Vue.nextTick().then(() => {
      console.log(this.$el.textContent); // 100:hoge
    });
  }
})
</script>

ウォッチャーを使ったオートコンプリートのサンプル

onChangeイベントで入力の度にリストを取得するのは効率が良くない。
入力の切れ目（間隔が空いたとき）で処理を実行することで、サーバへの負荷を軽減することができる。
Lodashのdebounceメソッドを使うと簡単に実装することができる。
- debounceメソッド「処理が連続して呼び出された場合、最後に呼び出されてから指定時間後に実行される関数」をつくって返却する。
- 第1引数は関数、第2引数は待ち時間。
- 自身では実行せず、関数を返すという点に注意
- 例）func = _.debounce(function(){alert(1)}, 2000);// funcは連続してコールしても1回しか実行されない。

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="app">
  <input type="text" v-model="memo">
</div>
<script>
const app = new Vue({
  el: '#app',
  data: {
    memo: '',
  },
  mounted: function() {
    this.getOptions = _.debounce(function() {
      console.log('データ取得処理');
    }, 2000);
  },
  watch: {
    memo: function(newValue, oldValue) {
      this.getOptions();
    }
  }
})
</script>

ウォッチャーでのオブジェクトの監視

クォートで括らなければならない。
watch: { 'author.name' function(newValue, oldValue) { // 処理 } } }

$mountメソッド

Vueオブジェクトをインスタンス化する際に「elオプションで指定した要素がまだ存在しない」場合（マウント先の要素をAjax通信で生成する場合など）、new Vue()をelオプションなしで実行し、Vueインスタンスの$mountメソッドでマウントを実行する。

<script>
const app = newVue({ data: { name: 'hoge' } });
// ここにマウント要素生成処理が入る
app.$mount('#app');
</script>