ひまつぶし開発ブログ

vuejs.orgをただ読んでいくだけ - その3

Vue.js

https://jp.vuejs.org/v2/guide/instance.html <- ここを読みました

https://github.com/okumurakengo/vuejsorg-reading/blob/master/guide/instance.html <- 自分で試したコード

※ vuejs.orgをただ読んで、気になった部分だけをコピペしていくだけの投稿です

Vue インスタンスの作成

全ての Vue アプリケーションは、Vue 関数で新しい Vue インスタンスを作成することによって起動されます。

データとメソッド

Vue インスタンスが作成されると、自身の data オブジェクトの全てのプロパティをリアクティブシステムに追加します。これらのプロパティの値を変更すると、ビューが”反応”し、新しい値に一致するように更新します。

// データオブジェクト
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のプロパティは、インスタンスが作成されたときに存在していた場合にのみリアクティブです。つまり、以下のように新しいプロパティを追加する場合、

vm.b = 'hi'

その後、 b への変更はビューの更新を引き起こさないでしょう。後でプロパティが必要になることがわかっているならば、空でも存在しない場合でも初期値を設定するだけで済みます。例：

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

初期値にないとあとで変更しようとしても無理だから、初期値に空文字とか0とかとりあえず設定しおけば良い、ということなのか。

これに対する唯一の例外は、既存のプロパティの変更を防ぐ 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>

data プロパティに加えて、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` の値が変わる時に呼ばれます
})

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

各 Vue インスタンスは、生成時に一連の初期化を行います。例えば、データの監視のセットアップやテンプレートのコンパイル、DOM へのインスタンスのマウント、データが変化したときの DOM の更新などがあります。その初期化の過程で、特定の段階でユーザー自身のコードを追加する、いくつかのライフサイクルフック(lifecycle hooks) と呼ばれる関数を実行します。

例えば、created フックはインスタンスが生成された後にコードを実行したいときに使われます。

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` は vm インスタンスを指します
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

この他にもインスタンスのライフサイクルの様々な段階で呼ばれるフックがあります。例えば、mounted、 updated、そして destroyed などがあります。全てのライフサイクルフックは、this が Vue インスタンスを指す形で実行されます。

f:id:okumuraa1:20190105034659p:plain

アロー関数ダメなんだ、知らなかったらハマりそう。