FrontEnd

Vue.js入門その2〜Vueインスタンスってなんぞ?〜

投稿日:2017年7月7日 更新日:

はじめに

前回の続きになります。
Vue.js入門その1〜基本文法〜

今回は下記の公式ドキュメントのメモになります。

なお、今回もJSFiddleを使用していきたいと思います。

Vueインスタンス

Vue.jsではルートVueインスタンスを作成することで起動されます。
前回何度も記述したやつです。

ちなみに、 vm はViewModelの意味であり、MVVMパターンの影響を受けているとのことです。

私は前回、Vueインスタンスを app という変数に保存しておりましたが、慣例的には誤りだったということになります。
(申し訳ありません!)

プロパティとメソッド

Vueインスタンスは、自身の data の値を持ちます。
data が変更されると、Vueインスタンスのプロパティも変化し、その逆も然りです。

試しに、下記のコードを書き、インスタンスを生成します。

コンソールで操作したいので、インスタンスを渡しています。

下記のように試すと、 vm のプロパティと data が一緒に変動していることが分かります。

インスタンスプロパティとして宣言する場合は、 vm.$data とも書けます。
DOMの id を取得する場合は、 vm.$el です。

これとは別に、インスタンスメソッドもあります。
$watch で、対象のプロパティが変化したときに呼ばれます。
コールバックで古い値と新しい値を引数で受け取ることができます。
$watch (Vue.jsリファレンス)

これで、 a プロパティを監視してくれますので、コンソールにて値を変更すれば、 $watch で定義した処理が実行されます。

インスタンスライフサイクルフック

Vueインスタンスが作成されたり、更新されたりするタイミングでフックされる処理を定義できます。

例として、インスタンスが生成されるときにフックされるcreatedで書きます。

これで、インスタンス生成時(JSFiddle実行時)にコンソールに「created!!」という文字が表示されます。

ライフサイクルフックは他にもありますが、試しにdestroyedも使用してみます。

インスタンスが生成された場合は「created!!」、削除された場合は「destroyed!!」と出力されます。
削除するときは、コンソールで下記を入力すればOKです。

$destroyはインスタンスを強制的に破棄するインスタンスメソッドです。

フィルター

例えば、下記のようなコードがあります。

このとき、 msg の値を操作し空文字を渡せば空欄になります。
ただ、空文字の場合はデフォルトの文字をセットしたいこともあります。

そのようなときに使うのがフィルタです。
フィルタの使用を宣言する場合は、 | を使用します。

まず、HTML側を下記のように変更します。

これで、 msgdefaultMsg でフィルタする宣言になります。
defaultMsg はVueインスタンスの中で宣言します。

第一引数には msg が入ってきます。
これで、コンソールを使って空文字を渡すと、「Hello from defaultMsg」に変更されます。

算出プロパティ

例文

このような式もVue.jsでは評価できるようですが、非常に読みにくいため、算出プロパティと呼ばれるものを使用することが推奨されています。

算出プロパティを使用した書き換え

HTML

JS

新しく出てきたのはcomputedになります。
computed を宣言することであたかもgetterやsetter関数として使用することができます。
今回は reversedMessage で逆順並び替えを実施しています。

ここで私も思いましたが、これはメソッドと何が違うんだろうと感じるかと思います。
公式リファレンスによると、下記になります。

算出プロパティの代わりに、同じような関数をメソッドとして定義することも可能です。最終的には、2つのアプローチは完全に同じ結果になります。しかしながら、算出プロパティは依存関係にもとづきキャッシュされるという違いがあります。算出プロパティは、それが依存するものが更新されたときにだけ再評価されます。これはつまり、messageが変わらない限りは、reversedMessageに何度アクセスしても、関数を再び実行することなく以前計算された結果を即時に返すということです。

Vue.js リファレンスより

要は依存するプロパティが変更されたときだけ実行されるよ、ということかと思っています。
ただ、再描画したタイミングで必ず実行されるわけではなさそうなので、慣れないうちはメソッドの方が良いのかもしれません(パフォーマンスを考えなければ)。

監視プロパティ

インスタンス上のデータの変更を監視し、反応させることができる監視プロパティというものもあります。

例えばwatchになります。
以下の例題は、苗字と名前を監視し、フルネームを返しています。

HTML

JS

ここで、コンソールで下記のように firstNamelastName を変更すると、「hoge fuga」と表示されます。

算出プロパティで書き換え

ただ、上記のコードは算出プロパティを使用して書き換えることもできます。
こちらの方がコード量は短くなりますね。

算出プロパティでsetter

算出プロパティでsetter関数を定義することもできます。

先ほどの例の逆で、フルネームの値を変更すると、苗字と名前も変更されるようにします。

HTML

JS

先ほどまでのgetterのみであれば、プロパティの後にそのまま関数で良かったのですが、setterも含める場合は、 getset で分ける必要があります。

このあたりはcomputedにも記載があります。

これで、コンソールで fullName を変更すれば名前と苗字も一緒に変わります。

さいごに

今回はVueインスタンスのプロパティやメソッドの紹介でした。

まだ漠然としていますね。。。

次回は試しに、ここまでの内容で何か作ってみたいと思います!

おすすめ書籍

基礎から学ぶ Vue.js Vue.js入門 基礎から実践アプリケーション開発まで Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発

page_footer_responsive




-FrontEnd
-,

執筆者:

免責事項

このブログは、記事上部に記載のある投稿日時点の一般的な情報を提供するものであり、投資等の勧誘・法的・税務上の助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

icon

TypeScript初心者が押さえておくべき型システム

1 はじめに2 型アノテーション2.1 プリミティブ型2.2 リテラル型2.3 any2.4 nullとundefined2.5 ユニオン型2.6 交差型2.7 タプル型2.8 列挙型2.9 配列2. ...

react-icon

React Konvaのソースコードを読む

1 はじめに2 React Konvaの大まかなアーキテクチャ3 コンポーネントがCanvas描画に変換される仕組み3.1 Stageコンポーネント3.2 StageWrap3.3 KonvaRend ...

js

Reactを始める前に知っておきたいES2015/ES6の機能

1 はじめに2 ECMAScript – ES2015/ES6とは3 変数と定数とスコープ4 テンプレート文字列5 分割代入6 デフォルト引数7 残余引数(レストパラメータ)8 展開(スプ ...

js

JSで緯度経度情報から住所を取得する

1 はじめに2 キーを取得する2.1 キーを取得する3 コード4 参考5 さいごに はじめに Google Maps JavaScript APIを利用して、緯度経度の数値から住所を検索する方法を紹介 ...

react-icon

【React初心者】改めて主要なhookの使い方

1 はじめに2 useState3 useEffect3.1 useLayoutEffect4 useCallback5 useContext6 さいごに7 おすすめ書籍 はじめに 今回はReactで ...

フォロー

blog-page_side_responsive

2017年7月
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。