小粒なうぇっぶあぷりを作ってて、 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' 属性が消えてくれるということだ。
多分。
とりあえずこんなところ。
なんとなく構造がわかってきたしその辺もまとめつつまた読む。
いつもこうなんとなく読み始めちゃうけど、最初に全体像を把握したりとか、あとコメントに色々書いてあるんでコメント読んだりとかちゃんとしたほうがいいな〜と反省する