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


書籍「Nuxt.jsビギナーズガイド」のまとめ。

点数

88点

感想

細かくわかりやすく説明されていて、とてもよく理解することができた。

基本

メソッドと算出プロパティの違い

  1. 算出プロパティは引数を持つことができない 。
    引数が必要な場合はメソッドとする。
  2. 算出プロパティはキャッシュされる。

まず算出プロパティとすることを基本とし、値を常に更新する必要がある場合だけメソッドとする。

オブジェクトのプロパティの追加・削除はリアクティブではない

  • オブジェクトのプロパティはリアクティブだが、プロパティの追加・削除はリアクティブではない。
  • 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>

【新しい記事】

【古い記事】

コメントを残す

メールアドレスが公開されることはありません。