ガイド
基本的な使い方
- インストール
- はじめに
- Vue インスタンス
- テンプレート構文
- 算出プロパティとウォッチャ
- クラスとスタイルのバインディング
- 条件付きレンダリング
- リストレンダリング
- イベントハンドリング
- フォーム入力バインディング
- コンポーネント
トランジションとアニメーション
- Enter/Leave とトランジション一覧
- 状態のトランジション
再利用と構成
- ミックスイン
- カスタムディレクティブ
- 描画関数とJSX
- プラグイン
- フィルター
ツール
- プロダクション環境への配信
- 単一ファイルコンポーネント
- 単体テスト
- TypeScript のサポート
スケールアップ
- ルーティング
- 状態管理
- サーバサイドレンダリング
内部
- リアクティブの探求
移行
- Vue 1.x からの移行
- Vue Router 0.7.x からの移行
- Vuex 0.6.x から 1.0 への移行
その他
- 他のフレームワークとの比較
- Vue.js コミュニティへ参加しましょう!
- チームに会おう
リアクティブの探求
最終更新日: 2017年12月3日
私達は基本のほとんどをカバーしてきました。これからは掘り下げて見るための時間です!Vue の最も明確な特徴の1つは、控えめなリアクティブシステムです。モデルは単なるプレーンな JavaScript オブジェクトです。それらを変更する時、ビューを更新します。状態管理を非常にシンプルかつ直感的にしますが、いくつかの一般的な落とし穴を避けるためにそれがどのように動作するか理解することも重要です。このセクションで、Vue のリアクティブシステムの低レベルの詳細の一部について掘り下げていきます。
変更の追跡方法
プレーンな JavaScript オブジェクトを data
オプションとして Vue インスタンスに渡すとき、Vue はその全てのプロパティを渡り歩いて、それらを Object.defineProperty を使用して、getter/setter に変換します。これは ES5 だけのシム (shim) ができない機能で、Vue が IE8 以下をサポートしない理由です。
getter/setter はユーザーには見えませんが、内部ではそれらは Vue.js で依存関係の追跡を実行したり、プロパティがアクセスされたまたは変更されたときは、変更通知します。注意事項の1つは、データオブジェクトが記録されたとき、getter/setter のブラウザコンソールのフォーマットが異なるので、よりフレンドリな閲覧インターフェイスのため、vue-devtools をインストールするといいでしょう。
全てのコンポーネントインターフェイスは対応している ウォッチャ (watcher) インターフェイスを持っていて、そのインターフェイスは “触れた (touched)” 全てのプロパティをコンポーネントの依存関係として描画されている間、記録します。その後、依存する setter がトリガされる時、ウォッチャに通知され、コンポーネントが再描画する結果につながります。
変更検出の注意事項
モダンな JavaScript の制限(そして Object.observe
の断念)のため、Vue.js はプロパティの追加または削除を検出できません。Vue.js はインスタンスの初期化中に、getter/setter 変換処理を実行するため、プロパティは、Vue がそれを変換しそしてそれをリアクティブにするために、data
オブジェクトに存在しなければなりません。例えば:
var vm = new Vue({ |
Vue はすでに作成されたインスタンスに対して動的に新しいルートレベルのリアクティブなプロパティを追加することはできません。しかしながら Vue.set(object, key, value)
メソッドを使うことで、ネストしたオブジェクトにリアクティブなプロパティを追加することができます:
Vue.set(vm.someObject, 'b', 2) |
グローバル Vue.set
の単なるエイリアスとなっている vm.$set
インスタンスメソッドを使用することもできます:
this.$set(this.someObject, 'b', 2) |
既存のオブジェクトに複数のプロパティを割り当てたいということがあるかもしれません。例えば、Object.assign()
または _.extend()
を使用しながら。しかしながら、新しいプロパティをオブジェクトに追加したとき、トリガは変更しません。このような場合、元のオブジェクトとミックスインオブジェクトの両方のプロパティを持つ新たなオブジェクトを作成します:
// `Object.assign(this.someObject, { a: 1, b: 2 })` の代わり |
以前に リストレンダリング のセクションで議論した いくつかの配列に関連した注意事項があります。
リアクティブプロパティの宣言
Vue は動的に新しいルートレベルのリアクティブなプロパティを追加することはできませんので、前もってインスタンス全てのルートレベルのリアクティブな data を宣言して初期化する必要があります。空の値でもかまいません:
var vm = new Vue({ |
data オプションで message
を宣言していないと、Vue は render ファンクションが存在しないプロパティにアクセスしようとしていることを警告します。
この制限の背後には技術的な理由があります。それは依存性追跡システムにおけるエッジケースのクラスを排除し、 また Vue インスタンスと型チェックシステムとの親和性を高めます。しかし重要な考慮事項はコードの保守性にあります。data
オブジェクトはコンポーネント状態のスキーマのようなものです。前もって全てのリアクティブなプロパティを宣言することで、後から見直したり別の開発者が読んだりしたときにコンポーネントのコードを簡単に理解することができます。
非同期更新キュー
もしあなたがまだ気づいていない場合、Vue は 非同期 に DOM 更新を実行します。データ変更が監視されている限り、Vue はキューをオープンし、同じイベントループで起こる全てのデータ変更をバッファリングします。同じウオッチャが複数回トリガされる場合、一度だけキューに押し込まれます。この重複除外バッファリングは不要な計算や DOM 操作を回避する上で重要です。そして、次のイベントループの “tick” で、Vue はキューをフラッシュし、実際の(すでに重複が除外された)作業を実行します。内部的には、Vue はもし非同期キューイング向けにネイティブな Promise.then
そして MessageChannel
が利用可能ならそれを使い、setTimeout(fn, 0)
にフォールバックします。
例として、vm.someData = 'new value'
をセットした時、そのコンポーネントはすぐに再描画しません。 キューがフラッシュされた時、次の “tick” で更新します。ほとんどの場合、私達はこれについて気にする必要はありませんが、更新した DOM の状態に依存する何かをしたい時、注意が必要です。Vue.js は一般的に”データ駆動”的な流儀で考えることを開発者に奨励していますが、時どき、それはあなたの手を汚す必要があるかもしれません。Vue.js でデータの変更後に、DOM の更新が完了するまでに待つためには、データが変更された直後に Vue.nextTick(callback)
を使用することができます。コールバックが呼ばれた時、DOM は更新されているでしょう。例えば:
<div id="example">{{ message }}</div> |
var vm = new Vue({ |
特に便利な内部コンポーネントのインスタンスメソッド vm.$nextTick()
もあります。なぜなら、それはグローバルな Vue
とそのコールバックの this
コンテキストは自動的に現在の Vue インスタンスに束縛されるからです:
Vue.component('example', { |