WEB掻っ穿じり

WEB備忘録とチャリとカメラ

【備忘録】Vue.jsをはじめる - その1 〜導入編〜

　　category：web

いいかげんキャッチアップしておいた方が良さそうなので、JavaScriptフレームワークのVue.jsを今更でも取り入れてみる。

とはいえ業務で取り入れている段階でなく、長い時間をかけて開発で触れているわけではないので、独学で個人的にinputできたことをここへまとめてみる。

(※基本Vue.js v2.6.11を使用、2020年2月6日現在)

Vue.jsの特徴

Vue.jsの基本

Vue.jsの核、Vueクラス

マウントするには、Vueクラスをインスタンス化する

new Vue({
  ...
});

データバイディング - Mustache構文

データオブジェクトを用意し、テンプレート(html)からアプリで利用する値を参照する、、これが基本。

データオブジェクト(.jsファイル)

data: {
  message: 'hello world!'
}

テンプレート(.html)

{{message}}

このデータオブジェクトにアクセスする{{...}}という構文をマスタッシュ構文という。
使えるのは式だけ、代入や条件分岐の文は使えない。

より複雑な機能を組み込む場合は、、以下に続く。

### ディレクティブ

属性やstyleの操作、条件分岐、繰り返し処理など膨大な機能が集約されている。
v-*** から始まる属性(構文)で使う。

こちらへ

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

テンプレート側では、単純なプロパティ参照にとどめ、演算やメソッドの呼び出しはできるだけデータオブジェクト側に委ねる。

似ている算出プロパティとメソッドの相違点は、

See the Pen calc property and method in Vue by birdwing3 (@birdwing3) on CodePen.

算出プロパティ：依存するプロパティ(this.〜)が変更された場合にのみ評価
メソッド：再描画に際して常に評価（実行）

ライフサイクルフック

Vueインスタンスは生成、マウント、更新、破棄までの流れがあり、それをライフサイクルと呼ぶ。

このライフサイクルの変化に応じて呼び出される様々なメソッドを、ライフサイクルフックとよび、決められたタイミングで処理を割り込ませることができる。

let app = new Vue({
  el: '#app',
  beforeCreate: function() {
    console.log('beforeCreate...');
  },
  created: function() {
    console.log('created...')
  },
  beforeMount: function() {
    console.log('beforeMount...')
  },
  mounted: function() {
    console.log('mounted...')
  },
  beforeUpdate: function() {
    console.log('beforeUpdate...')
  },
  updated: function() {
    console.log('updated...')
  },
  beforeDestroy: function() {
    console.log('beforeDestroy...')
  },
  destroyed: function() {
    console.log('destroyed...')
  }
});

// 3秒待って破棄
setTimeout(function() {
  app.$destroy();
}, 3000);

Vueコンストラクターの動作オプションとして列記する、、methodsオプションと同列だが、別物。

console画面
console画面

データオブジェクト書き換えは行っていないので、 beforeUpdate 及び updated は呼び出されていない。

$destroy()メソッドは beforeDestroy 及び destroyed フックのトリガーとなっている。
($〜はVue標準のメンバーで、接頭辞$を付与している)

画面読み込み時の実行

jQueryで使っていた ready や load のフック、vue.jsだとこんな感じ。

ready

新しい mounted フックを使用、ただしマウントされてもドキュメントが存在する保証がないので、 Vue.nextTick/vm.$nextTick で包む必要がある。

mounted: function () {
  this.$nextTick(function () {
    // this.$el がドキュメント内にあることを前提としたコードを書く
  })
}

load

素jsとあまり変わらない。

methods: {
  window:onload = function() {  
   // 何か
  }
}

リアクティブデータ、リアクティブシステム

データオブジェクトの変化を検出し、ページに自動的に反映（非同期処理）させる例。

See the Pen reactive-system in vue by birdwing3 (@birdwing3) on CodePen.

watchオプション（ウォッチャー）

変化の検出 → 反映の非同期処理を都度の問い合わせにせず、監視役（ウォッチャー）を立て、データオブジェクトの特定のプロパティが変化したときに、任意のタイミングで処理を実行する。

(入力後1.5秒開いたらページに反映する処理)

Lodashも読み込み。

See the Pen watch in vue meets lodash by birdwing3 (@birdwing3) on CodePen.

_.debounceはLodash標準メソッド、遅延関数を生成。