ゆとりエンジニア

Vue.js で遊ぶ 2日目

Vue.js で遊ぶ 2日目

執筆時間: 40 min

Vue.js 2.0 The Vue Instance

Constructor

すべての Vue vm は,Vue コンストラクタ関数によって root Vue インスタンスを作成することで起動するようになっているらしい. MVVM パターンとある程度関係があるようだ.

Vue インスタンスを作成するとき,オプションとして次の内容を含んだオブジェクトを渡すことができる

  • data
  • template
  • element to mount on
  • methods
  • lifecycle callbacks
  • … and more

すべてのオプションは API リファレンスを参照とのこと

また,Vue のコンストラクタは,コンポーネントのコンストラクタを作るために拡張できるらしい. 正直よく使い方がわからないが,後述とのことなのでそこまで待機.

var MyComponent = Vue.extend({
  // pre-defined options
})

var myComponentInstance = new MyComponent()

Properties and Methods

あらゆる Vue インスタンスは,data に存在する全てのプロパティをプロキシしているそうだ.

したがって,上の HTML に対し,ブラウザのコンソールで次のようなことができる.

<html>
  <head>
    <title>Hello, World.</title>
  </head>
  <body>
    <div id="app">
      <p>{{ message }}</p>
      <input v-model="message">
    </div>
  </body>
  <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
  <script type="text/javascript">
    var data = { message: 'Hello Vue.js' }
    var vm = new Vue({
      el: '#app',
      data: data
    })
  </script>
</html>
vm.message === data.message // => true
data.message = 'Goodbye Vue.js'

vm.message // => 'Gooldbye Vue.js'

ただし,注意点として,全てのプロパティがプロキシされているわけではないということだ.

また,Vue のインスタンスは幾つかの便利なプロパティやメソッドを公開しているらしい. これらは $ を用いてアクセスできるようだ.

先ほどの例に続いて,次のようなことを試すことができる.

vm.$data === data // => true
vm.$el === document.getElementById('app') // => true

vm.$watch('a', function (newVal, oldVal) {
  // このコールバック関数は,`vm.a` が変化した時に呼び出される
})

Instance Lifecycle Hooks

Vue のそれぞれのインスタンスは,一連の初期化処理を経て生成される. 例えば,次のようなものがある

  • データの監視のための準備
  • テンプレートのコンパイル
  • インスタンスの DOM へのマウント
  • DOM の更新 (データが変化したならば)

Lifecycle Diagram

Lifecycle に関する Diagram が公式のドキュメントに載っている.

Insance and Lifecycle Hooks

この図はなかなかいろいろな情報があって良い.

“el” および “template” オプションが存在すると,template を render 関数にコンパイル. “el” があり,"template" が存在しない場合には,"el" で指定した要素の outerHTML を template としてコンパイル.

今までの例で,"el" で指定して “template” が存在しなかったので,"el" で指定した要素の outerHTML を template としてよしなにコンパイルしていたのだろう.

感想

正直,そこまで面白くなかったので早く次に行こう.