Vueインスタンス


ディレクトリ


Vue インスタンスの作成

すべての Vue アプリケーションは、Vue 関数を使用して新しい Vue インスタンスを作成することから始まります: 

var vm = new Vue({
  // 选项
})

完全には MVVM モデルに従っていませんが、Vue の設計もそれにインスピレーションを受けて。したがって、ドキュメントでは Vue インスタンスを表す変数名 vm (ViewModel の省略形) がよく使用されます。

Vue インスタンスを作成するときに、options オブジェクトを渡すことができます。このチュートリアルでは、これらのオプションを使用して必要な動作を作成する方法について説明します。参考までに、API ドキュメントでオプションの完全なリストを参照することもできます。

Vue アプリケーションは、new Vue によって作成された root Vue インスタンス と、オプションのネストされた再利用可能なコンポーネント ツリーで構成されます。たとえば、todo アプリケーションのコンポーネント ツリーは次のようになります。 

根实例
└─ TodoList
   ├─ TodoItem
   │  ├─ DeleteTodoButton
   │  └─ EditTodoButton
   └─ TodoListFooter
      ├─ ClearTodosButton
      └─ TodoListStatistics

これについては、後の コンポーネント システム の章で詳しく説明します。ただし、現時点では、すべての Vue コンポーネントが Vue インスタンスであり、同じオプション オブジェクトを受け入れることだけを理解する必要があります (一部のルート インスタンス固有のオプションを除く)。


#データとメソッド

Vue インスタンスが作成されると、

data オブジェクト内のすべてのプロパティが Vue の 応答システムに追加されます。これらのプロパティの値が変更されると、ビューは新しい値を照合することで「応答」します。 

// 我们的数据对象
var data = { a: 1 }
// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
  data: data
})
// 获得这个实例上的属性
// 返回源数据中对应的字段
vm.a == data.a // => true
// 设置属性也会影响到原始数据
vm.a = 2
data.a // => 2
// ……反之亦然
data.a = 3
vm.a // => 3

これらのデータが変更されると、ビューが再レンダリングされます。インスタンスの作成時に

data にすでに存在するプロパティのみが reactive であることに注意してください。つまり、

vm.b = 'hi'

のような新しい属性を追加した場合、

b への変更によってビューの更新はトリガーされません。後でプロパティが必要になることがわかっていても、それが空であるか最初は存在しない場合は、初期値を設定するだけで済みます。例: 

data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null
}

ここでの唯一の例外は、

Object.freeze() の使用です。これにより、既存のプロパティの変更が防止され、応答システムが変更を追跡できなくなります。 

var obj = {
  foo: 'bar'
}
Object.freeze(obj)
new Vue({
  el: '#app',
  data: obj
})
<div id="app">
  <p>{{ foo }}</p>
  <!-- 这里的 `foo` 不会更新！ -->
  <button v-on:click="foo = 'baz'">Change it</button>
</div>

データ プロパティに加えて、Vue インスタンスはいくつかの便利なインスタンス プロパティとメソッドも公開します。ユーザー定義のプロパティと区別するために、#$

という接頭辞が付けられます。例えば：＃＃＃

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true
// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
})

インスタンスのプロパティとメソッドの完全なリストは、今後 API リファレンスで確認できます。


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

各 Vue インスタンスは、一連の初期化プロセス - たとえば、データ監視の設定、テンプレートのコンパイル、インスタンスの DOM へのマウント、データ変更時の DOM の更新などが必​​要です。同時に、

ライフ サイクル フック と呼ばれるいくつかの関数もこのプロセス中に実行され、ユーザーはさまざまな段階で独自のコードを追加する機会が得られます。

たとえば、

created フックは、インスタンスの作成後にコードを実行するために使用できます。 

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

他にもいくつかあります。インスタンスのライフサイクルのさまざまな段階でフックが呼び出されます (

mounted、updated、 など)破壊されました＃＃＃＃＃ ＃。ライフサイクル フックの this コンテキストは、それを呼び出す Vue インスタンスを指します。

created: () => console.log(this.a)
やオプション プロパティまたはコールバックで

arrow 関数を使用しないでください。 vm.$watch('a', newValue => this.myMethod())。アロー関数には this がないため、this は見つかるまで上位の字句スコープ内の変数として検索され、多くの場合 Uncaught TypeError: Cannot read が発生します。 unnamed## のプロパティ # または Uncaught TypeError: this.myMethod は関数ではありません およびその他のエラー。

#ライフ サイクル図

次の図は、インスタンスサイクル。すぐにすべてを理解する必要はありませんが、学習して使用し続けると、その基準値はどんどん高くなっていきます。


1.png