小粒なうぇっぶあぷりを作ってて、 Vue.js を使いたいなと思ってる（使ってる）
小さいしドキュメントも充実しているので、ちょっとガイド読めば使えるのであんまり把握せずに使ってるけど、それはよくないよねということでコード読むところから始めようと思う
読むのはこれ。
現時点の Latest release な 1.0.1 を読む
v-cloak
最初は v-cloak.
理由は特になくなんとなく、簡単にわかりそうだから
要素に付けておくと Vue オブジェクトのコンパイルが終わると消える属性で、コンパイルが完了する前にテンプレートが表示されてしまうのを防ぐために CSS と組み合わせて使ったりするやつ。
ファイルを見てみるとそのものずばりな src/directives/public/cloak.js というのがあるのでそこに目を通す。
予想通りわかりやすそう。
compiled というフックに 'v-cloak' という属性を削除する関数を登録しているように見える。
こっから少し掘り下げてみる。
bind という名前で関数を export しているのはきっとそういう決まりかな。
src/directives/public 以下の他の js を見てみても、 bind という関数を export していそうに見える
bind が使われているところとかはもう少し後で見る。
cloak で src 以下を検索してみると該当するのはわずか。
cloak.js 自体と src/directives/public/index.js で cloak.js を require しているところ。
それとあと一箇所 src/directives.js で 'cloak' が使われてる。
https://github.com/vuejs/vue/blob/1.0.1/src/directive.js#L68L75
場所は Directive というオブジェクトの _bind 関数
属性が 'v-cloak' でないか vm がコンパイル済みだったら属性を消すという感じの処理。
descriptor.attr ってのはなんなのかわからないが、'v-' なんとかの属性はどっかのタイミングで消すもののようだ。
その時に 'v-cloak' を先に消さないようにするための分岐っぽい。
そうすると vm ってのはちゃんと見たほうがよさそうだな〜
Directive から辿ってくと、 vm はコンストラクタの第2引数なので、 new してるところを見る。
src/intance/lifecycle.js で new してる。
https://github.com/vuejs/vue/blob/1.0.1/src/instance/lifecycle.js#L111
_bindDir の中で new していて、第2引数は this
ここでの this は exports してる module 自体って理解でいいのかな
ということはこの lifecycle のオブジェクトなのか・・？
確かに、 _compile という関数の中で this._isCompiled という変数を設定しているようだ。
https://github.com/vuejs/vue/blob/1.0.1/src/instance/lifecycle.js#L68
さっき読んだところで this.vm._isCompiled というのがあったからなんとなくあってそう。
https://github.com/vuejs/vue/blob/1.0.1/src/directive.js#L70
今読んだ範囲だと vm を使っているところはあとひとつ、 $once というのがあった。
しかし $once を export しているのは src/api/events.js だなぁ。
vue/directive.js at 1.0.1 · vuejs/vue · GitHub
これは一体どういうことか。 lifecycle を require しているところを見れば多分わかりそう。
https://github.com/vuejs/vue/blob/1.0.1/src/vue.js#L85L86
src/vue.js で require している。
なるほど、 p というオブジェクトに extend していってるんだね。
確かに require('./api/events') もしている。
ということは↑の vm は p オブジェクトで、 $once も持っているんで理解正しそう。
$once は予想通りな感じで、一回だけ関数が実行されるように登録された関数を実行したら登録を削除する処理を挟み込むようなもの。
さてじゃあ compiled という hook を呼んでるのはどこかな？と考えると、さっき compile っぽい関数あったよね。
はい、lifecycle.js
で、_isCompiled の直後にあるね、 callHook('compiled')
https://github.com/vuejs/vue/blob/1.0.1/src/instance/lifecycle.js#L69
これだよこれ。
callHook は src/instance/events.js で定義されている
https://github.com/vuejs/vue/blob/1.0.1/src/instance/events.js#L155L163
handlers があればひたすら呼び出していて、 handlers は this.$options に hook ごとに登録されてる。
でもここまで handlers というのは特に出てこなかったような気がする。
$emit のほうが大事かな。
フックで実行する関数の登録処理は $once あたりでやってるはず。
$once を見ると、実際登録してるのは $on っぽい。
https://github.com/vuejs/vue/blob/1.0.1/src/api/events.js#L10L34
$on は this._events に関数を push してる。
$emit をみてみると
https://github.com/vuejs/vue/blob/1.0.1/src/api/events.js#L89L105
_event に登録されているコールバックを apply で呼び出してる。
ということで、ここで最初に読んだところで登録された 'v-cloak' 属性を削除するコールバックが呼ばれて、コンパイルが完了すると 'v-cloak' 属性が消えてくれるということだ。
多分。
とりあえずこんなところ。
なんとなく構造がわかってきたしその辺もまとめつつまた読む。
いつもこうなんとなく読み始めちゃうけど、最初に全体像を把握したりとか、あとコメントに色々書いてあるんでコメント読んだりとかちゃんとしたほうがいいな〜と反省する
